Browse Source

fix: 修改巡查

sy-water-data-board-ui
panyuyi 1 year ago
parent
commit
575d3b5152
  1. 18
      src/api/dike/index.js
  2. 27
      src/api/sluice/index.js
  3. 15
      src/assets/styles/index.scss
  4. 57
      src/views/dike/runManage/enginerring/components/Drawer.vue
  5. 326
      src/views/dike/runManage/enginerring/inspectionItems/index.vue
  6. 396
      src/views/dike/runManage/enginerring/inspectionItems/inspectionItemDetails.vue
  7. 641
      src/views/sluice/runManage/enginerring/components/Drawer.vue
  8. 321
      src/views/sluice/runManage/enginerring/inspectionItems/index.vue
  9. 398
      src/views/sluice/runManage/enginerring/inspectionItems/inspectionItemDetails.vue

18
src/api/dike/index.js

@ -10,6 +10,24 @@ export function getRunProjectList(data) {
data
})
}
// 巡查项目管理-巡视检查详情
export function getInspectionProjectDetails(id) {
return request({
url: `/run/df/checking/${id}`,
method: 'get',
})
}
// 巡查项目管理-修改巡视检查
export function putInspectionProjectData(data) {
return request({
url: '/run/df/checking',
method: 'put',
data
})
}
// 查询堤防动态检测设备记录列表
export function getRunDFDeviceRecordList(data) {
return request({

27
src/api/sluice/index.js

@ -10,6 +10,33 @@ export function getRunProjectList(data) {
data
})
}
// 巡查项目管理-巡视检查详情
export function getInspectionProjectDetails(id) {
return request({
url: `/run/sz/checking/${id}`,
method: 'get',
})
}
// 巡查项目管理-修改巡视检查
export function putInspectionProjectData(data) {
return request({
url: '/run/sz/checking',
method: 'put',
data
})
}
// 获取检查项树数据
export function getCheckingDictTree() {
return request({
url: '/run/sz/checking/tree',
method: 'get'
})
}
// 水闸动态检测设备记录
export function getRunSzDeviceRecord(data) {
return request({

15
src/assets/styles/index.scss

@ -145,9 +145,24 @@ aside {
}
.slider-right{
position: relative;
height: 100%;
padding-left: 24px;
font-size: 14px;
padding-bottom: 60px;
.bottom-btns{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
background: #fff;
z-index: 2;
box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.1);
}
}
.components-container {

57
src/views/dike/runManage/enginerring/components/Drawer.vue

@ -1,7 +1,6 @@
<!-- 巡查记录抽屉 -->
<script>
import { getDikePatrolDetails, getCheckingDictTree } from "@/api/dike";
import { getDictMapData } from "@/api/system/dict/data";
import { intersection } from "lodash";
export default {
@ -50,7 +49,6 @@ export default {
if (intersection(v.parts, item.parts).length === v.parts.length) {
//
console.log("证明匹配成功 >>>>> ", item);
v.problem = item.problem || "-";
v.images = item.doc?.images || [];
break;
@ -75,14 +73,7 @@ export default {
this.xcTreeData = _xcTreeData;
},
},
created() {
getCheckingDictTree("df_xs_c_classfy").then((res) => {
this.xcTreeData = this.transformArr(res?.data);
});
// getDictMapData("df_xs_c_classfy").then((res) => {
// this.dictMapData = res?.data || {};
// });
},
created() {},
mounted() {
this.getDetailsData();
},
@ -167,21 +158,27 @@ export default {
{{ item3.problem }}
</div>
<div
class="w-p-50 flex items-center p-2 r-b-border h-full"
class="w-p-50 flex-col flex items-center p-2 r-b-border h-full"
>
<div
v-for="(url, urlIndex) in item3.images"
:key="urlIndex"
>
<el-image
v-for="(url, index) in item3.images"
style="width: 120px; min-height: 80px; height: auto"
style="
width: 120px;
min-height: 80px;
height: auto;
"
:src="url"
class="mr-4 mb-4"
:key="index"
class="mb-4"
:preview-src-list="[url]"
>
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 100px;
height: 80px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
@ -195,25 +192,30 @@ export default {
</div>
</div>
</div>
</div>
<!-- 两级项目的问题 -->
<div v-else class="flex flex-1 items-center">
<div class="w-p-50 flex items-center p-2 r-b-border h-full">
{{ item2.problem }}
</div>
<div class="w-p-50 flex items-center p-2 r-b-border h-full">
<div
class="w-p-50 flex flex-col items-center p-2 r-b-border h-full"
>
<div
v-for="(url, urlIndex) in item2.images"
:key="urlIndex"
>
<el-image
v-for="(url, index) in item2.images"
style="width: 120px; min-height: 80px; height: auto"
:src="url"
:key="index"
class="mr-4 mb-4"
class="mb-4"
:preview-src-list="[url]"
>
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 100px;
height: 80px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
@ -227,25 +229,27 @@ export default {
</div>
</div>
</div>
</div>
<!-- 只有一级项目的问题 -->
<div v-else class="flex flex-1 items-center">
<div class="w-p-50 flex items-center p-2 r-b-border h-full">
{{ item.problem }}
</div>
<div class="w-p-50 flex items-center p-2 r-b-border h-full">
<div
class="w-p-50 flex flex-col items-center p-2 r-b-border h-full"
>
<div v-for="(url, urlIndex) in item.images" :key="urlIndex">
<el-image
v-for="(url, index) in item.images"
style="width: 120px; min-height: 80px; height: auto"
:src="url"
:key="index"
class="mr-4 mb-4"
class="mb-4"
:preview-src-list="[url]"
>
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 100px;
height: 80px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
@ -258,6 +262,7 @@ export default {
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>

326
src/views/dike/runManage/enginerring/inspectionItems/index.vue

@ -1,15 +1,9 @@
<!-- 巡查项目管理-堤防 -->
<script>
import {
getDicts,
postDFInspectionProjectList,
postDFInspectionProject,
putDFInspectionProject,
deleteDFInspectionProject,
getDFInspectionProject,
} from "@/api/management";
import { getDicts, postDFInspectionProjectList } from "@/api/management";
export default {
name: "InspectionItems",
components: {},
data() {
return {
searchInput: "",
@ -26,24 +20,6 @@ export default {
pageSizes: [10, 20, 50, 100],
total: 0, //
},
ruleForm: {
name: "",
type: "",
checkContentType: "",
items: [],
},
rules: {
name: [
{ required: true, message: "请输入巡视检查名称", trigger: "blur" },
{ max: 50, message: "名称最长为50个字符", trigger: "blur" },
],
type: [
{ required: true, message: "请选择巡查类型", trigger: "change" },
],
checkContentType: [
{ required: true, message: "请选择巡视检查内容", trigger: "change" },
],
},
};
},
methods: {
@ -84,113 +60,26 @@ export default {
this.searchType = 3;
this.searchTableList();
},
//
editTableItem(row) {
getDFInspectionProject(row.id).then((res) => {
console.log("🚀res🚀", res.data);
this.ruleForm = res.data;
this.ruleForm.checkContentType = res.data.items[0].parts[0];
getDicts(res.data.items[0].parts[0]).then((res) => {
this.secondType = res.data;
console.log("🚀一级🚀", res.data);
});
this.ruleForm.items.forEach((element) => {
getDicts(element.parts[1]).then((res) => {
this.$set(element, "third", res.data);
});
});
this.dialogVisible = true;
console.log("🚀this.ruleForm🚀", this.ruleForm);
});
},
//
deleteTableItem(row) {
deleteDFInspectionProject(row.id).then((res) => {
this.getTableData();
this.$message.success("删除成功");
});
},
//
addPatrolItem(checkContentType) {
console.log("🚀checkContentType🚀", checkContentType);
this.ruleForm.items.push({
content: "",
parts: [checkContentType, "", ""],
});
},
//
deletePatrolItem(index) {
this.ruleForm.items.splice(index, 1);
//
handleAddItem() {
this.$router.push({
path: "inspectionItemDetails",
query: {
type: "add",
},
//
changeContentType(dictValue) {
getDicts(dictValue).then((res) => {
this.secondType = res.data;
console.log("🚀一级🚀", res.data);
});
this.ruleForm.items = [
{
content: "",
parts: [this.ruleForm.checkContentType],
},
];
},
//
changeSecondType(row) {
getDicts(row.parts[1]).then((res) => {
row.parts[2] = "";
this.$set(row, "third", res.data);
});
},
//
changeThirdType(row) {
let value = row.third.find(
(item) => item.dictValue == row.parts[2]
).remark;
if (value) {
row.content = value;
}
//
editTableItem(row) {
this.$router.push({
path: "inspectionItemDetails",
query: {
id: row.id,
type: "edit",
},
//
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm);
if (this.ruleForm.id) {
putDFInspectionProject(this.ruleForm).then(() => {
this.getTableData();
this.dialogVisible = false;
this.$message.success("更新成功");
});
} else {
postDFInspectionProject(this.ruleForm).then(() => {
this.getTableData();
this.dialogVisible = false;
this.$message.success("添加成功");
});
}
} else {
console.log("校验不通过");
return false;
}
});
},
// dialog
closeDialog(ruleForm = "ruleForm") {
console.log("触发关闭dialog", ruleForm);
this.$refs[ruleForm].resetFields();
this.ruleForm = {
name: "",
type: "",
checkContentType: "",
items: [
{
content: "",
parts: ["", "", ""],
},
],
};
},
//
getTableData() {
this.searchInput = "";
@ -212,7 +101,6 @@ export default {
this.tableData = res.records;
this.pageData.total = res.total;
}
console.log("🚀表格数据🚀", res);
});
},
},
@ -260,14 +148,14 @@ export default {
>搜索</el-button
>
<el-button @click="resetSearch()">重置</el-button>
</div>
<el-button
class="search-btn"
style="margin-right: 16px; margin-bottom: 8px; float: right"
style="float: right"
type="success"
@click="dialogVisible = true"
@click="handleAddItem"
>添加</el-button
>
</div>
<el-table height="625" :data="tableData" border>
<el-table-column type="index" align="center" label="序号" width="100">
</el-table-column>
@ -336,164 +224,6 @@ export default {
>
</el-pagination>
</div>
<el-dialog
title="新增/编辑巡查项目"
@close="closeDialog"
:visible.sync="dialogVisible"
width="720"
>
<div style="display: flex; margin-bottom: 16px">
<div
style="
width: 5px;
height: 16px;
background-color: #31a08e;
margin-right: 8px;
"
></div>
<span style="font-weight: 600">基础信息</span>
</div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item label-width="120px" label="巡视检查名称" prop="name">
<el-input style="width: 202px" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label-width="120px" label="巡查类型" prop="type">
<el-select v-model="ruleForm.type" placeholder="请选择巡查类型">
<el-option
v-for="item in examType"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label-width="120px"
label="巡视检查内容"
prop="checkContentType"
>
<el-select
v-model="ruleForm.checkContentType"
@change="changeContentType(ruleForm.checkContentType)"
placeholder="请选择巡视检查内容"
>
<el-option
v-for="item in firstType"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
<el-option label="其他" value="2"></el-option>
</el-select>
<span style="margin-left: 8px; color: red"
>注意切换选项后检查内容将会清空</span
>
</el-form-item>
</el-form>
<el-table height="350" :data="ruleForm.items" border>
<el-table-column
type="index"
align="center"
label="序号"
center
width="80"
>
</el-table-column>
<el-table-column
align="center"
label="检查项目和内容"
v-if="ruleForm.checkContentType != '2'"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.parts[1]"
@change="changeSecondType(scope.row)"
placeholder="请选择检查项目和内容"
>
<el-option
v-for="item in secondType"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
align="center"
label="检查部位"
v-if="ruleForm.checkContentType != '2'"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.parts[2]"
v-if="scope.row.third"
@change="changeThirdType(scope.row)"
placeholder="请选择检查部位"
>
<el-option
v-for="item in scope.row.third"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
align="center"
prop="inspectionContent"
label="检查内容"
>
<template slot-scope="scope">
<el-input maxlength="500" v-model="scope.row.content"></el-input>
</template>
</el-table-column>
<el-table-column prop="address" align="center" label="操作">
<template slot-scope="scope">
<el-button
style="margin-right: 8px"
v-if="
scope.$index == ruleForm.items.length - 1 &&
ruleForm.items.length < 50
"
@click="addPatrolItem(ruleForm.checkContentType)"
type="text"
size="small"
>添加</el-button
>
<el-popconfirm
v-if="ruleForm.items.length >= 2"
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="确定删除吗?"
@confirm="deletePatrolItem(scope.$index)"
>
<el-button
slot="reference"
style="color: red"
type="text"
size="small"
>删除</el-button
>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false"> </el-button>
<el-button size="mini" type="primary" @click="submitForm('ruleForm')"
>保存</el-button
>
</div>
</el-dialog>
</div>
</template>
@ -509,13 +239,13 @@ export default {
.table-box {
width: 100%;
height: calc(100% - 50px - 24px);
height: calc(100% - 50px);
margin-top: 24px;
padding: 16px;
background-color: white;
.top-search {
display: flex;
// display: flex;
align-items: center;
margin-bottom: 8px;
@ -524,19 +254,5 @@ export default {
margin-right: 10px;
}
}
.search-btn {
margin-left: 10px;
background-color: #37b29e;
border: none;
&:hover {
background-color: #5ac6b9;
}
&:active {
background-color: #2b8070;
}
}
}
</style>

396
src/views/dike/runManage/enginerring/inspectionItems/inspectionItemDetails.vue

@ -0,0 +1,396 @@
<template>
<div class="slider-right">
<div class="top-title">基础信息管理</div>
<div class="table-box">
<div class="top-box">
<span>巡视检查名称</span>
<el-input
v-model="formData.name"
size="small"
class="search-input"
placeholder="请输入巡视检查名称"
></el-input>
<span>巡检类型</span>
<el-select 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"
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
class="inspection-radio-group"
v-model="item3.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="!item2.check"
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
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"
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
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 type="primary" @click="handleSave">保存</el-button>
<el-button @click="$router.go(-1)">返回</el-button>
</div>
</div>
</template>
<script>
import { intersection } from "lodash";
import {
putInspectionProjectData,
getCheckingDictTree,
getInspectionProjectDetails,
} from "@/api/dike";
export default {
data() {
return {
xcTreeData: [],
xcTypeOptions: [],
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 detailData = await getInspectionProjectDetails(
this.$route.query.id
);
if (detailData?.data?.items) {
// xcTreeData
this.formData.name = detailData.data.name;
this.formData.type = detailData.data.type;
this.matchXcTreeData(_xcTreeData, detailData.data.items);
}
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];
} else {
deepCalc(v, item.parts);
}
});
}
}
treeList.forEach((item) => {
deepCalc(item);
});
return treeList;
},
// xcTreeData
matchXcTreeData(treeData, dataList) {
treeData.forEach((v) => {
if (!v.children?.length) {
for (let i = 0; i < dataList.length; i++) {
const item = dataList[i];
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);
}
});
},
// xcTreeDatachecktrue
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;
}
if (this.$route.query.id) {
this.formData.id = this.$route.query.id;
}
this.formData.items = this.getCheckData(this.xcTreeData);
putInspectionProjectData(this.formData).then(() => {
this.$message.success("保存成功");
// this.$router.go(-1);
});
},
},
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>

641
src/views/sluice/runManage/enginerring/components/Drawer.vue

@ -1,6 +1,8 @@
<!-- 巡查记录抽屉 -->
<script>
import { getCheckingDictTree } from "@/api/dike";
import { getDikePatrolDetails, getCheckingDictTree } from "@/api/sluice";
import { intersection } from "lodash";
export default {
name: "",
props: {
@ -11,77 +13,70 @@ export default {
},
data() {
return {
mapLabelData: {},
treeLabelData: [],
tableData: [
{
content: "张三张三张三张三张三张三张三张三张三张三",
photos: "编辑",
delete: "删除",
},
{
content: "张三张三张三张三张三张三张三张三张三张三",
photos: "编辑",
delete: "删除",
},
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
{ content: "张三", photos: "编辑", delete: "删除" },
],
dictMapData: {},
xcTreeData: [],
};
},
methods: {
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (
rowIndex < 4 ||
(rowIndex > 4 && rowIndex < 9) ||
(rowIndex > 8 && rowIndex < 11) ||
(rowIndex > 10 && rowIndex < 13) ||
(rowIndex > 12 && rowIndex < 18)
) {
if (
rowIndex === 0 ||
rowIndex === 5 ||
rowIndex === 9 ||
rowIndex === 11 ||
rowIndex === 13
) {
return {
rowspan: [4, 4, 2, 2, 5][[0, 5, 9, 11, 13].indexOf(rowIndex)],
colspan: 1,
};
//
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];
} else {
return {
rowspan: 0,
colspan: 0,
};
deepCalc(v, item.parts);
}
});
}
}
treeList.forEach((item) => {
deepCalc(item);
});
return treeList;
},
},
created() {
getCheckingDictTree().then((res) => {
console.log(res);
treeLabelData = res.data;
// xcTreeData
matchXcTreeData(treeData, dataList) {
treeData.forEach((v) => {
if (!v.children?.length) {
for (let i = 0; i < dataList.length; i++) {
const item = dataList[i];
if (intersection(v.parts, item.parts).length === v.parts.length) {
//
v.problem = item.problem || "-";
v.images = item.doc?.images || [];
break;
}
}
} else {
this.matchXcTreeData(v.children, dataList);
}
});
},
//
async getDetailsData() {
const dictData = await getCheckingDictTree("sz_xs_c_classfy");
let _xcTreeData = this.transformArr(dictData?.data);
const detailData = await getDikePatrolDetails(this.$route.query.id);
if (detailData?.data?.items) {
// xcTreeData
this.matchXcTreeData(_xcTreeData, detailData.data.items);
}
this.xcTreeData = _xcTreeData;
},
},
created() {},
mounted() {
this.getDetailsData();
},
};
</script>
@ -95,106 +90,181 @@ export default {
<span>巡查记录</span>
</div>
<div class="center-table">
<el-table
:data="tableData"
height="636"
style="width: 100%"
:span-method="handleSpanMethod"
header-cell-class-name="table-header-cell"
<el-row class="flex l-t-border">
<div
class="w-240 flex-shrink-0 flex justify-center items-center r-b-border p-2"
>
<div>工程部位</div>
</div>
<div class="flex flex-1 w-full">
<div class="w-p-50 flex justify-center items-center r-b-border">
<div>问题记录</div>
</div>
<div class="w-p-50 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-2 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-2 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-2 r-b-border w-80 flex-shrink-0"
>
{{ item3.value }}
</div>
<!-- 三级项目的问题 -->
<div class="flex flex-1 items-center">
<div
class="w-p-50 flex items-center p-2 r-b-border h-full"
>
{{ item3.problem }}
</div>
<div
class="w-p-50 flex-col flex items-center p-2 r-b-border h-full"
>
<div
v-for="(url, urlIndex) in item3.images"
:key="urlIndex"
>
<el-image
style="
width: 120px;
min-height: 80px;
height: auto;
"
:src="url"
class="mb-4"
:preview-src-list="[url]"
>
<el-table-column
align="center"
class="first-column"
label="工程部位"
width="264"
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 80px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
"
>
<template slot-scope="scope">
<div v-if="scope.$index == 0">
<div class="box1">
<div class="item1">堤身</div>
<div class="item2">堤顶</div>
<div class="item3">堤坡</div>
<div class="item4">迎水坡</div>
<div class="item5">背水坡</div>
<div class="item6">护坡结构</div>
<div class="item7">堤脚</div>
</div>
</div>
<div v-if="scope.$index == 4">护坡地和堤防工程保护范围</div>
<div v-if="scope.$index == 5">
<div class="box2">
<div class="item1">堤岸防护工程</div>
<div class="item2">坡式</div>
<div class="item3">墙式</div>
<div class="item4">护脚</div>
<div class="item5">滩岸</div>
</div>
</div>
<div v-if="scope.$index == 9">
<div class="box3">
<div class="item1">防渗排水设施</div>
<div class="item2">防渗设施</div>
<div class="item3">排水设施</div>
</div>
</div>
<div v-if="scope.$index == 11">
<div class="box3">
<div class="item1">交叉建筑物及接连段</div>
<div class="item2">连接段</div>
<div class="item3">交叉建筑物</div>
</div>
</div>
<div v-if="scope.$index == 13">
<div class="box4">
<div class="item1">管理设施</div>
<div class="item2">观测设施</div>
<div class="item3">交通通信设施</div>
<div class="item4">信息化设施</div>
<div class="item5">标识标牌</div>
<div class="item6">管理房</div>
</div>
</div>
<div v-if="scope.$index == 18">生物防护工程</div>
<div v-if="scope.$index == 19">其他</div>
图片加载失败
</div>
</template>
</el-table-column>
<el-table-column
prop="content"
align="center"
class-name="column-item"
label="检查内容"
min-width="200"
/>
<el-table-column
v-if="!this.$route.query.editor"
prop="photos"
align="center"
class-name="column-item"
label="打卡图片"
width="150"
/>
<el-table-column
v-if="!this.$route.query.editor"
align="center"
class-name="column-item"
label="检查记录"
</el-image>
</div>
</div>
</div>
</div>
</div>
<!-- 两级项目的问题 -->
<div v-else class="flex flex-1 items-center">
<div class="w-p-50 flex items-center p-2 r-b-border h-full">
{{ item2.problem }}
</div>
<div
class="w-p-50 flex flex-col items-center p-2 r-b-border h-full"
>
<div
v-for="(url, urlIndex) in item2.images"
:key="urlIndex"
>
<el-image
style="width: 120px; min-height: 80px; height: auto"
:src="url"
class="mb-4"
:preview-src-list="[url]"
>
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 80px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
"
>
<el-table-column
prop="isNormal"
align="center"
class-name="column-item"
label="是否正常"
width="150"
/>
<el-table-column
prop="problems"
align="center"
class-name="column-item"
label="存在问题"
width="150"
/>
</el-table-column>
</el-table>
图片加载失败
</div>
</template>
</el-image>
</div>
</div>
</div>
</div>
</div>
<!-- 只有一级项目的问题 -->
<div v-else class="flex flex-1 items-center">
<div class="w-p-50 flex items-center p-2 r-b-border h-full">
{{ item.problem }}
</div>
<div
class="w-p-50 flex flex-col items-center p-2 r-b-border h-full"
>
<div v-for="(url, urlIndex) in item.images" :key="urlIndex">
<el-image
style="width: 120px; min-height: 80px; height: auto"
:src="url"
class="mb-4"
:preview-src-list="[url]"
>
<template #error>
<div
class="w-full flex justify-center items-center"
style="
height: 80px;
border: 1px solid #f0f0f0;
font-style: italic;
color: #ccc;
"
>
图片加载失败
</div>
</template>
</el-image>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
@ -204,19 +274,19 @@ export default {
.masking {
position: absolute;
top: 0;
width: 50%;
width: 70%;
height: 100%;
left: 120%;
z-index: 2;
right: -70%;
z-index: 10;
background-color: #fff;
transition: left 0.5s ease-in-out;
box-shadow: -8px 0px 38px 0px rgba(0, 0, 0, 0.6);
transform: all 0.5s;
.close-btn {
width: 32px;
height: 32px;
position: absolute;
top: 48px;
top: 32px;
left: -16px;
background-color: #fff;
border: 1px solid #dcdcdc;
@ -233,247 +303,46 @@ export default {
.drawer-title {
width: 100%;
height: 64px;
line-height: 64px;
height: 48px;
line-height: 48px;
padding-left: 16px;
border-bottom: 1px solid #e7e7e7;
}
.center-table {
padding: 16px;
.box1 {
height: 352x;
display: grid;
grid-template-columns: repeat(3, 88px);
grid-template-rows: repeat(8, 44px);
.item1 {
grid-row: 1 / 9;
grid-column: 1;
line-height: 352px;
justify-content: center;
align-content: center;
border-right: 1px solid #f4f9f7;
}
.item2 {
grid-row: 1/3;
grid-column: 2/ 4;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item3 {
grid-row: 3/7;
grid-column: 2;
line-height: 176px;
justify-content: center;
align-content: center;
border-right: 1px solid #f4f9f7;
}
.item4 {
line-height: 44px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item5 {
line-height: 44px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item6 {
grid-row: 7/5;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
.item7 {
grid-row: 9/7;
grid-column: 2/4;
line-height: 88px;
justify-content: center;
align-content: center;
border-top: 1px solid #f4f9f7;
}
}
.box2 {
height: 352px;
display: grid;
grid-template-columns: repeat(3, 88px);
grid-template-rows: repeat(8, 44px);
.item1 {
grid-row: 1 / 9;
grid-column: 1/3;
line-height: 352px;
justify-content: center;
align-content: center;
border-right: 1px solid #f4f9f7;
}
.item2 {
grid-row: 1/3;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item3 {
grid-row: 3/5;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item4 {
grid-row: 5/7;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item5 {
grid-row: 7/9;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
}
.box3 {
height: 176px;
display: grid;
grid-template-columns: repeat(3, 88px);
grid-template-rows: repeat(8, 44px);
.item1 {
grid-row: 1 / 5;
grid-column: 1/3;
line-height: 176px;
justify-content: center;
align-content: center;
border-right: 1px solid #f4f9f7;
}
.item2 {
grid-row: 1/3;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item3 {
grid-row: 3/5;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
}
.box4 {
height: 440px;
display: grid;
grid-template-columns: repeat(3, 88px);
grid-template-rows: repeat(8, 44px);
.item1 {
grid-row: 1 / 10;
grid-column: 1/3;
line-height: 440px;
justify-content: center;
align-content: center;
border-right: 1px solid #f4f9f7;
}
.item2 {
grid-row: 1/3;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
border-bottom: 1px solid #f4f9f7;
}
.item3 {
grid-row: 3/5;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
height: calc(100% - 48px);
overflow: auto;
}
.item4 {
grid-row: 5/7;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
.item5 {
grid-row: 7/9;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
.masking-in {
right: 0;
}
.item6 {
grid-row: 9/11;
grid-column: 3;
line-height: 88px;
justify-content: center;
align-content: center;
}
}
.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;
}
.masking-in {
left: 50%;
.w-p-50 {
width: 50%;
}
/deep/.el-table__body tr td {
padding: 0;
height: 88px !important;
.w-80 {
width: 80px !important;
}
/deep/ .cell {
padding: 0 !important;
.w-120 {
width: 120px !important;
}
/deep/.column-item {
padding-left: 10px !important;
.w-160 {
width: 160px !important;
}
/deep/.column-item .cell {
padding: 18;
max-height: 70px !important;
overflow: auto;
}
/deep/.table-header-cell {
background-color: #fff !important;
.w-240 {
width: 240px !important;
}
</style>

321
src/views/sluice/runManage/enginerring/inspectionItems/index.vue

@ -1,13 +1,6 @@
<!-- 巡查项目管理-水闸 -->
<script>
import {
getDicts,
postSZInspectionProjectList,
postSZInspectionProject,
putSZInspectionProject,
deleteSZInspectionProject,
getSZInspectionProject,
} from "@/api/management";
import { getDicts, postSZInspectionProjectList } from "@/api/management";
export default {
name: "InspectionItems",
data() {
@ -26,24 +19,6 @@ export default {
pageSizes: [10, 20, 50, 100],
total: 0, //
},
ruleForm: {
name: "",
type: "",
checkContentType: "",
items: [],
},
rules: {
name: [
{ required: true, message: "请输入巡视检查名称", trigger: "blur" },
{ max: 50, message: "名称最长为50个字符", trigger: "blur" },
],
type: [
{ required: true, message: "请选择巡查类型", trigger: "change" },
],
checkContentType: [
{ required: true, message: "请选择巡视检查内容", trigger: "change" },
],
},
};
},
methods: {
@ -85,109 +60,25 @@ export default {
this.searchType = 3;
this.searchTableList();
},
//
editTableItem(row) {
getSZInspectionProject(row.id).then((res) => {
this.ruleForm = res.data;
this.ruleForm.checkContentType = res.data.items[0].parts[0];
getDicts(res.data.items[0].parts[0]).then((res) => {
this.secondType = res.data;
});
this.ruleForm.items.forEach((element) => {
getDicts(element.parts[1]).then((res) => {
this.$set(element, "third", res.data);
});
});
this.dialogVisible = true;
});
},
//
deleteTableItem(row) {
deleteSZInspectionProject(row.id).then((res) => {
this.getTableData();
this.$message.success("删除成功");
});
},
//
addPatrolItem(checkContentType) {
this.ruleForm.items.push({
content: "",
parts: [checkContentType, "", ""],
});
},
//
deletePatrolItem(index) {
this.ruleForm.items.splice(index, 1);
//
handleAddItem() {
this.$router.push({
path: "inspectionItemDetails",
query: {
type: "add",
},
//
changeContentType(dictValue) {
getDicts(dictValue).then((res) => {
this.secondType = res.data;
console.log("🚀一级🚀", res.data);
});
this.ruleForm.items = [
{
content: "",
parts: [this.ruleForm.checkContentType],
},
];
},
//
changeSecondType(row) {
getDicts(row.parts[1]).then((res) => {
row.parts[2] = "";
this.$set(row, "third", res.data);
});
},
//
changeThirdType(row) {
let value = row.third.find(
(item) => item.dictValue == row.parts[2]
).remark;
if (value) {
row.content = value;
}
//
editTableItem(row) {
this.$router.push({
path: "inspectionItemDetails",
query: {
id: row.id,
type: "edit",
},
//
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm);
if (this.ruleForm.id) {
putSZInspectionProject(this.ruleForm).then(() => {
this.getTableData();
this.dialogVisible = false;
this.$message.success("更新成功");
});
} else {
postSZInspectionProject(this.ruleForm).then(() => {
this.getTableData();
this.dialogVisible = false;
this.$message.success("添加成功");
});
}
} else {
console.log("校验不通过");
return false;
}
});
},
// dialog
closeDialog(ruleForm = "ruleForm") {
console.log("触发关闭dialog", ruleForm);
this.$refs[ruleForm].resetFields();
this.ruleForm = {
name: "",
type: "",
checkContentType: "",
items: [
{
content: "",
parts: ["", "", ""],
},
],
};
},
//
getTableData() {
(this.searchInput = ""),
@ -253,15 +144,15 @@ export default {
>搜索</el-button
>
<el-button @click="resetSearch()">重置</el-button>
</div>
<el-button
class="search-btn"
style="margin-right: 16px; margin-bottom: 8px; float: right"
style="float: right"
type="success"
@click="dialogVisible = true"
@click="handleAddItem"
>添加</el-button
>
<el-table height="625" :data="tableData" border>
</div>
<el-table height="645" :data="tableData" border>
<el-table-column type="index" align="center" label="序号" width="100">
</el-table-column>
<el-table-column prop="name" align="center" label="巡视检查名称">
@ -329,165 +220,6 @@ export default {
>
</el-pagination>
</div>
<!-- 弹窗 -->
<el-dialog
title="新增/编辑巡查项目"
@close="closeDialog"
:visible.sync="dialogVisible"
width="50%"
>
<div style="display: flex; margin-bottom: 16px">
<div
style="
width: 5px;
height: 16px;
background-color: #31a08e;
margin-right: 8px;
"
></div>
<span style="font-weight: 600">基础信息</span>
</div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item label-width="120px" label="巡视检查名称" prop="name">
<el-input style="width: 202px" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label-width="120px" label="巡查类型" prop="type">
<el-select v-model="ruleForm.type" placeholder="请选择巡查类型">
<el-option
v-for="item in examType"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label-width="120px"
label="巡视检查内容"
prop="checkContentType"
>
<el-select
v-model="ruleForm.checkContentType"
@change="changeContentType(ruleForm.checkContentType)"
placeholder="请选择巡视检查内容"
>
<el-option
v-for="item in firstType"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
<el-option label="其他" value="2"></el-option>
</el-select>
<span style="margin-left: 8px; color: red"
>注意切换选项后检查内容将会清空</span
>
</el-form-item>
</el-form>
<el-table height="350" :data="ruleForm.items" border>
<el-table-column
type="index"
align="center"
label="序号"
center
width="80"
>
</el-table-column>
<el-table-column
align="center"
label="检查项目和内容"
v-if="ruleForm.checkContentType != '2'"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.parts[1]"
@change="changeSecondType(scope.row)"
placeholder="请选择检查项目和内容"
>
<el-option
v-for="item in secondType"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
align="center"
label="检查部位"
v-if="ruleForm.checkContentType != '2'"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.parts[2]"
@change="changeThirdType(scope.row)"
placeholder="请选择检查部位"
>
<el-option
v-for="item in scope.row.third"
:label="item.dictLabel"
:value="item.dictValue"
:key="item.id"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
align="center"
prop="inspectionContent"
label="检查内容"
>
<template slot-scope="scope">
<el-input maxlength="500" v-model="scope.row.content"></el-input>
</template>
</el-table-column>
<el-table-column prop="address" align="center" label="操作">
<template slot-scope="scope">
<el-button
style="margin-right: 8px"
v-if="
scope.$index == ruleForm.items.length - 1 &&
ruleForm.items.length < 50
"
@click="addPatrolItem(ruleForm.checkContentType)"
type="text"
size="small"
>添加</el-button
>
<el-popconfirm
v-if="ruleForm.items.length >= 2"
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="确定删除吗?"
@confirm="deletePatrolItem(scope.$index)"
>
<el-button
slot="reference"
style="color: red"
type="text"
size="small"
>删除</el-button
>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false"> </el-button>
<el-button size="mini" type="primary" @click="submitForm('ruleForm')"
>保存</el-button
>
</div>
</el-dialog>
</div>
</template>
@ -503,13 +235,12 @@ export default {
.table-box {
width: 100%;
height: calc(100% - 50px - 24px);
height: calc(100% - 30px);
margin-top: 24px;
padding: 16px;
background-color: white;
.top-search {
display: flex;
align-items: center;
margin-bottom: 8px;
@ -518,19 +249,5 @@ export default {
margin-right: 10px;
}
}
.search-btn {
margin-left: 10px;
background-color: #37b29e;
border: none;
&:hover {
background-color: #5ac6b9;
}
&:active {
background-color: #2b8070;
}
}
}
</style>

398
src/views/sluice/runManage/enginerring/inspectionItems/inspectionItemDetails.vue

@ -0,0 +1,398 @@
<template>
<div class="slider-right">
<div class="top-title">基础信息管理</div>
<div class="table-box">
<div class="top-box">
<span>巡视检查名称</span>
<el-input
v-model="formData.name"
size="small"
class="search-input"
placeholder="请输入巡视检查名称"
></el-input>
<span>巡检类型</span>
<el-select 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"
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
class="inspection-radio-group"
v-model="item3.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="!item2.check"
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
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"
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
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 type="primary" @click="handleSave">保存</el-button>
<el-button @click="$router.go(-1)">返回</el-button>
</div>
</div>
</template>
<script>
import { intersection } from "lodash";
import {
putInspectionProjectData,
getCheckingDictTree,
getInspectionProjectDetails,
} from "@/api/sluice";
export default {
data() {
return {
xcTreeData: [],
xcTypeOptions: [],
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("sz_xs_c_classfy");
let _xcTreeData = this.transformArr(dictData?.data);
if (this.$route.query.id) {
const detailData = await getInspectionProjectDetails(
this.$route.query.id
);
if (detailData?.data?.items) {
// xcTreeData
this.formData.name = detailData.data.name;
this.formData.type = detailData.data.type;
this.matchXcTreeData(_xcTreeData, detailData.data.items);
}
}
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];
} else {
deepCalc(v, item.parts);
}
});
}
}
treeList.forEach((item) => {
deepCalc(item);
});
return treeList;
},
// xcTreeData
matchXcTreeData(treeData, dataList) {
treeData.forEach((v) => {
if (!v.children?.length) {
for (let i = 0; i < dataList.length; i++) {
const item = dataList[i];
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);
}
});
},
// xcTreeDatachecktrue
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;
}
if (this.$route.query.id) {
this.formData.id = this.$route.query.id;
}
this.formData.items = this.getCheckData(this.xcTreeData);
putInspectionProjectData(this.formData).then(() => {
this.$message.success("保存成功");
// this.$router.go(-1);
});
},
},
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…
Cancel
Save