hejunjie
1 month ago
13 changed files with 304 additions and 655 deletions
@ -1,436 +0,0 @@ |
|||
<template> |
|||
<div class="slider-right"> |
|||
<!-- <div class="top-title">{{ $router.currentRoute.meta.title }}</div> --> |
|||
<TopBackTitle></TopBackTitle> |
|||
<div class="table-box"> |
|||
<div class="top-box"> |
|||
<span>巡视检查名称：</span> |
|||
<el-input |
|||
:disabled="isEdit" |
|||
v-model="formData.name" |
|||
:maxlength="50" |
|||
size="small" |
|||
class="search-input" |
|||
placeholder="请输入巡视检查名称" |
|||
></el-input> |
|||
<span>巡检类型：</span> |
|||
<el-select |
|||
:disabled="isEdit" |
|||
v-model="formData.type" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in xcTypeOptions" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="xc-form-table"> |
|||
<el-row class="flex l-t-border"> |
|||
<div |
|||
class="w-240 flex-shrink-0 flex justify-center items-center r-b-border p-4" |
|||
> |
|||
<div>工程部位</div> |
|||
</div> |
|||
<div class="flex flex-1 w-full"> |
|||
<div class="flex-1 flex justify-center items-center r-b-border"> |
|||
<div>检查内容</div> |
|||
</div> |
|||
<div class="w-120 flex justify-center items-center r-b-border"> |
|||
<div>是否检查项</div> |
|||
</div> |
|||
</div> |
|||
</el-row> |
|||
<el-row |
|||
v-for="(item, index) in xcTreeData" |
|||
:key="item.key" |
|||
class="flex font-12" |
|||
> |
|||
<el-col> |
|||
<div class="flex w-full l-t-border"> |
|||
<div |
|||
class="flex items-center p-4 r-b-border" |
|||
:class="{ |
|||
'w-240 flex-shrink-0': !item.children.length, |
|||
'w-80 flex-shrink-0': item.children.length, |
|||
}" |
|||
> |
|||
{{ index + 1 }},{{ item.value }} |
|||
</div> |
|||
<div v-if="item.children.length" class="flex flex-1 flex-col"> |
|||
<div |
|||
class="flex flex-1" |
|||
v-for="item2 in item.children" |
|||
:key="item2.key" |
|||
> |
|||
<div |
|||
class="flex items-center p-4 r-b-border" |
|||
:class="{ |
|||
'w-80 flex-shrink-0': item2.children.length, |
|||
'w-160 flex-shrink-0': !item2.children.length, |
|||
}" |
|||
> |
|||
{{ item2.value }} |
|||
</div> |
|||
<div |
|||
v-if="item2.children.length" |
|||
class="flex flex-1 flex-col" |
|||
> |
|||
<div |
|||
class="flex" |
|||
v-for="item3 in item2.children" |
|||
:key="item3.key" |
|||
> |
|||
<div |
|||
class="flex items-center p-4 r-b-border w-80 flex-shrink-0" |
|||
> |
|||
{{ item3.value }} |
|||
</div> |
|||
<!-- 三级项目的问题 --> |
|||
<div class="flex flex-1 items-center"> |
|||
<div |
|||
class="flex flex-1 items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-input |
|||
:disabled="!item3.check || isEdit" |
|||
v-model="item3.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
:disabled="isEdit" |
|||
class="inspection-radio-group" |
|||
v-model="item3.check" |
|||
> |
|||
<el-radio :disabled="isEdit" :label="true" |
|||
>是</el-radio |
|||
> |
|||
<el-radio :disabled="isEdit" :label="false" |
|||
>否</el-radio |
|||
> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 两级项目的问题 --> |
|||
<div v-else class="flex flex-1 items-center"> |
|||
<div class="flex-1 flex items-center p-4 r-b-border h-full"> |
|||
<el-input |
|||
:disabled="!item2.check || isEdit" |
|||
v-model="item2.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
:disabled="isEdit" |
|||
class="inspection-radio-group" |
|||
v-model="item2.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 只有一级项目的问题 --> |
|||
<div v-else class="flex flex-1 items-center"> |
|||
<div class="flex-1 flex items-center p-4 r-b-border h-full"> |
|||
<el-input |
|||
:disabled="!item.check || isEdit" |
|||
v-model="item.content" |
|||
type="textarea" |
|||
:rows="1" |
|||
:maxlength="500" |
|||
placeholder="请输入检查内容" |
|||
></el-input> |
|||
</div> |
|||
<div |
|||
class="w-120 flex justify-center items-center p-4 r-b-border h-full" |
|||
> |
|||
<el-radio-group |
|||
:disabled="isEdit" |
|||
class="inspection-radio-group" |
|||
v-model="item.check" |
|||
> |
|||
<el-radio :label="true">是</el-radio> |
|||
<el-radio :label="false">否</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bottom-btns"> |
|||
<el-button :disabled="isEdit" type="primary" @click="handleSave" |
|||
>保存</el-button |
|||
> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { intersection } from "lodash"; |
|||
import { |
|||
putInspectionProjectData, |
|||
checkUsed, |
|||
postInspectionProjectData, |
|||
getCheckingDictTree, |
|||
getInspectionProjectDetails, |
|||
} from "@/api/dike"; |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
xcTreeData: [], |
|||
xcTypeOptions: [], |
|||
isEdit: false, |
|||
formData: { |
|||
id: null, |
|||
name: "", |
|||
type: "", |
|||
items: [], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
// 获取巡查类型 |
|||
this.getDicts("xs_classfy").then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.xcTypeOptions = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 获取详情信息 |
|||
async getDetailsData() { |
|||
const dictData = await getCheckingDictTree("df_xs_c_classfy"); |
|||
let _xcTreeData = this.transformArr(dictData?.data); |
|||
const checkId = this.$route.query.id; |
|||
if (checkId) { |
|||
const detailData = await getInspectionProjectDetails(checkId); |
|||
if (detailData?.data?.items) { |
|||
// 匹配xcTreeData |
|||
this.formData.name = detailData.data.name; |
|||
this.formData.type = detailData.data.type; |
|||
this.matchXcTreeData(_xcTreeData, detailData.data.items); |
|||
} |
|||
const checkUsedData = await checkUsed(this.$route.query.id); |
|||
this.isEdit = checkUsedData?.data; |
|||
} |
|||
this.xcTreeData = _xcTreeData; |
|||
}, |
|||
// 树转换 |
|||
transformArr(treeList) { |
|||
// 递归设置路径 |
|||
function deepCalc(item, part = []) { |
|||
item.parts = [...part, item.key]; |
|||
if (item.children?.length) { |
|||
item.children.forEach((v) => { |
|||
if (!v.children || v.children.length === 0) { |
|||
v.parts = [...item.parts, v.key]; |
|||
v.content = v.remark || ""; |
|||
} else { |
|||
deepCalc(v, item.parts); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
treeList.forEach((item) => { |
|||
deepCalc(item); |
|||
}); |
|||
return treeList; |
|||
}, |
|||
// 匹配xcTreeData |
|||
matchXcTreeData(treeData, dataList) { |
|||
treeData.forEach((v) => { |
|||
if (!v.children?.length) { |
|||
for (const item of dataList) { |
|||
v.id = item.id; |
|||
if (intersection(v.parts, item.parts).length === v.parts.length) { |
|||
// 证明匹配成功 |
|||
v.content = item.content || ""; |
|||
v.check = true; |
|||
break; |
|||
} |
|||
} |
|||
} else { |
|||
this.matchXcTreeData(v.children, dataList); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 获取xcTreeData中的check为true的数据 |
|||
getCheckData(treeData) { |
|||
let res = []; |
|||
treeData.forEach((v) => { |
|||
if (v.check) { |
|||
res.push({ |
|||
parts: v.parts, |
|||
id: v.id || null, |
|||
content: v.content, |
|||
}); |
|||
} |
|||
if (v.children?.length) { |
|||
res = res.concat(this.getCheckData(v.children)); |
|||
} |
|||
}); |
|||
return res; |
|||
}, |
|||
|
|||
// 保存 |
|||
handleSave() { |
|||
if (!this.formData.name) { |
|||
this.$message.error("请输入巡视检查名称"); |
|||
return; |
|||
} |
|||
if (!this.formData.type) { |
|||
this.$message.error("请选择巡检类型"); |
|||
return; |
|||
} |
|||
this.formData.items = this.getCheckData(this.xcTreeData); |
|||
|
|||
if (this.$route.query.id) { |
|||
this.formData.id = this.$route.query.id; |
|||
} |
|||
|
|||
if (this.formData.id) { |
|||
putInspectionProjectData(this.formData).then((res) => { |
|||
this.$message.success("保存成功"); |
|||
setTimeout(() => { |
|||
this.$router.go(-1); |
|||
}, 500); |
|||
}); |
|||
} else { |
|||
postInspectionProjectData(this.formData).then((res) => { |
|||
if (res.data?.id) { |
|||
this.formData.id = res.data.id; |
|||
} |
|||
this.$message.success("保存成功"); |
|||
setTimeout(() => { |
|||
this.$router.go(-1); |
|||
}, 500); |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getDetailsData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
overflow: auto; |
|||
|
|||
.top-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
.xc-form-table { |
|||
} |
|||
.l-t-border { |
|||
border-left: 1px solid #eee; |
|||
border-top: 1px solid #eee; |
|||
} |
|||
.r-b-border { |
|||
border-right: 1px solid #eee; |
|||
border-bottom: 1px solid #eee; |
|||
} |
|||
|
|||
.w-p-20 { |
|||
width: 20%; |
|||
} |
|||
.w-p-80 { |
|||
width: 80%; |
|||
} |
|||
|
|||
.w-p-50 { |
|||
width: 50%; |
|||
} |
|||
|
|||
.w-80 { |
|||
width: 80px !important; |
|||
} |
|||
.w-120 { |
|||
width: 120px !important; |
|||
} |
|||
.w-160 { |
|||
width: 160px !important; |
|||
} |
|||
.w-240 { |
|||
width: 240px !important; |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.inspection-radio-group { |
|||
.el-radio { |
|||
margin-right: 10px; |
|||
.el-radio__label { |
|||
padding-left: 4px; |
|||
} |
|||
&:last-child { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue