main
parent
5128d13f8b
commit
5b5df60f4b
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="ParagraphTitle-container" :style="{ height: height }">
|
||||
<div class="ParagraphTitle-header">
|
||||
<div
|
||||
class="ParagraphTitle-line"
|
||||
:style="{ backgroundColor: theme }"
|
||||
></div>
|
||||
<div class="ParagraphTitle-text">{{ title }}</div>
|
||||
</div>
|
||||
<div class="ParagraphTitle-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import useSettingsStore from "@/store/modules/settings";
|
||||
const theme = computed(() => useSettingsStore().theme);
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "默认标题",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ParagraphTitle-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
.ParagraphTitle-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.ParagraphTitle-line {
|
||||
height: 20px;
|
||||
width: 6px;
|
||||
}
|
||||
.ParagraphTitle-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-family: "MiSans-Medium";
|
||||
}
|
||||
.ParagraphTitle-body {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,182 @@
|
||||
<template>
|
||||
<tableOperation>11111</tableOperation>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<tableOperation :showSub="false">
|
||||
<ParagraphTitle title="工单基本信息">
|
||||
<div class="form-data">
|
||||
<div class="form-item">
|
||||
<div class="form-label">工单地址</div>
|
||||
<div class="form-value">{{ form.address }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">资源协调</div>
|
||||
<div class="form-value ">
|
||||
<dict-tag showValue="解析出错" :options="zyxt" :value="form.zyxt" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">工单类型</div>
|
||||
<div class="form-value">
|
||||
<dict-tag showValue="解析出错" :options="gdlx" :value="form.gdType" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item" v-if="form.gdType == 0">
|
||||
<div class="form-label">倒伏类型</div>
|
||||
<div class="form-value">{{ form.dflx }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">处理班组</div>
|
||||
<div class="form-value">{{ form.clbz }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">工单等级</div>
|
||||
<div class="form-value">
|
||||
<dict-tag showValue="解析出错" :options="gdlevel" :value="form.gdLevel" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">工单图片</div>
|
||||
<div class="form-value value-row ">
|
||||
<ImagePreview
|
||||
width="80px"
|
||||
height="80px"
|
||||
v-for="(item, index) in form.gdtp"
|
||||
:key="index"
|
||||
:src="item"
|
||||
></ImagePreview>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">简要</div>
|
||||
<div class="form-value">
|
||||
<dict-tag showValue="解析出错" :options="gdms" :value="form.gdms" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">处理方案</div>
|
||||
<div class="form-value">
|
||||
<dict-tag showValue="解析出错" :options="clfa" :value="form.clfa" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">处理描述</div>
|
||||
<div class="form-value">{{ form.clms }}</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">派遣人数</div>
|
||||
<div class="form-value">{{ form.pqrs }} 人</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">派遣车辆</div>
|
||||
<div class="form-value">{{ form.pqcl }} 辆</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-label">处理后图片</div>
|
||||
<div class="form-value value-row ">
|
||||
<ImagePreview
|
||||
width="80px"
|
||||
height="80px"
|
||||
v-for="(item, index) in form.clhtp"
|
||||
:key="index"
|
||||
:src="item"
|
||||
></ImagePreview>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ParagraphTitle>
|
||||
<ParagraphTitle title="工单流程信息"></ParagraphTitle>
|
||||
</tableOperation>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { getyjById } from "@/api/emergency";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { gdlx, gdms, gdlevel, clfa, zyxt, dflx, gd_status, reason } =
|
||||
proxy.useDict(
|
||||
"gdlx",
|
||||
"gdms",
|
||||
"gdlevel",
|
||||
"clfa",
|
||||
"zyxt",
|
||||
"dflx",
|
||||
"gd_status",
|
||||
"reason"
|
||||
);
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
let form = reactive({});
|
||||
|
||||
onMounted(() => {
|
||||
getInfo();
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取详情
|
||||
*/
|
||||
const getInfo = async () => {
|
||||
const res = await getyjById(id);
|
||||
//字符转数组字段
|
||||
res.data.gdtp = filterImages(res.data.gdtp);
|
||||
res.data.clhtp = filterImages(res.data.clhtp);
|
||||
res.data.zyxt = filterImages(res.data.zyxt);
|
||||
|
||||
Object.assign(form, res.data);
|
||||
console.log(form);
|
||||
};
|
||||
|
||||
const filterImages = (imgSting) => {
|
||||
if (imgSting) {
|
||||
return imgSting.split(",");
|
||||
} else {
|
||||
[];
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-data {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); /* 等同于 1fr 1fr */
|
||||
border: 1px solid #dcdfe6;
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
.form-label {
|
||||
|
||||
height: 100%;
|
||||
width: 150px;
|
||||
font-weight: 15px;
|
||||
color: #606266;
|
||||
font-weight: bold;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.form-value {
|
||||
flex: 1;
|
||||
}
|
||||
.value-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
& > div {
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
& > .form-item:nth-child(odd) .form-label {
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
& > .form-item:nth-child(even) .form-label {
|
||||
border-left: 1px solid #dcdfe6;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
& > .form-item:last-child {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue