|
|
@@ -1,12 +1,6 @@
|
|
|
<template>
|
|
|
- <el-dialog
|
|
|
- :title="检查任务"
|
|
|
- :visible.sync="dialogVisible"
|
|
|
- width="50%"
|
|
|
- :show-close="true"
|
|
|
- @close="onHide"
|
|
|
- >
|
|
|
- <el-descriptions>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-descriptions title="检查任务">
|
|
|
<el-descriptions-item label="检查名称">{{
|
|
|
info.taskName
|
|
|
}}</el-descriptions-item>
|
|
|
@@ -30,6 +24,7 @@
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item label="检查组成员"
|
|
|
><el-input
|
|
|
+ style="width: 80%; margin-top: -8px"
|
|
|
placeHolder="请输入检查组成员"
|
|
|
v-model="info.checkTeam"
|
|
|
></el-input>
|
|
|
@@ -39,54 +34,84 @@
|
|
|
</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
<div>
|
|
|
- <span>巡检区域</span>
|
|
|
- <el-button type="primary" @click="onAddPoint()">新增检查内容</el-button>
|
|
|
+ <span style="margin-right: 20px">巡检区域</span>
|
|
|
+ <el-button type="primary" size="mini" @click="onAddPoint()"
|
|
|
+ >新增检查内容</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class="content" v-for="area in info.areaList">
|
|
|
- <div>
|
|
|
- {{ area.areaName }}
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div v-for="(item, index) in area.itemList">
|
|
|
- <span>{{ index + 1 }}、{{ item.itemName }}</span>
|
|
|
- <div v-for="point in item.pointList">
|
|
|
- <div>
|
|
|
- <span><i class="circle" /> {{ point.pointName }}</span>
|
|
|
- <el-radio-group v-model="point.status">
|
|
|
- <el-radio :value="0">正常</el-radio>
|
|
|
- <el-radio :label="1">异常</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </div>
|
|
|
- <div v-if="point.status == 1">
|
|
|
- <el-form
|
|
|
- :ref="'form_' + point.pointId"
|
|
|
- :model="point"
|
|
|
- :rule="exceptionRules"
|
|
|
- >
|
|
|
- <el-form-item label="情况描述" prop="remark">
|
|
|
- <el-input v-model="point.remark"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="异常图片" prop="image"> </el-form-item>
|
|
|
- <el-form-item label="整改期限" prop="rectificationDeadline">
|
|
|
- <el-select
|
|
|
- v-model="point.rectificationDeadline"
|
|
|
- placeHolder="请选择整改期限"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in dict.type.rectification_deadline"
|
|
|
- :key="item.value"
|
|
|
- :value="item.value"
|
|
|
- :label="item.label"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div class="content">
|
|
|
+ <div class="area_content" v-for="area in info.areaList">
|
|
|
+ <div>
|
|
|
+ {{ area.areaName }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="safetycheck_item" v-for="(item, index) in area.itemList">
|
|
|
+ <span>{{ index + 1 }}、{{ item.itemName }}</span>
|
|
|
+ <div class="safetycheck_point" v-for="point in item.pointList">
|
|
|
+ <div>
|
|
|
+ <span class="pointName"
|
|
|
+ ><i class="circle" /> {{ point.pointName }}</span
|
|
|
+ >
|
|
|
+ <el-radio-group v-model="point.status">
|
|
|
+ <el-radio :label="0">正常</el-radio>
|
|
|
+ <el-radio :label="1">异常</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ v-if="point.isAdd"
|
|
|
+ style="margin-left: 50px"
|
|
|
+ @click="onDeletePoint(area, item, point)"
|
|
|
+ >移除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div v-if="point.status == 1">
|
|
|
+ <el-form
|
|
|
+ :ref="'point_' + point.pointId"
|
|
|
+ :model="point"
|
|
|
+ :rules="exceptionRules"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="情况描述" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="point.remark"
|
|
|
+ style="width: 250px"
|
|
|
+ placeholder="请输入情况描述"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="异常图片" prop="image">
|
|
|
+ <imgUpload
|
|
|
+ type="more"
|
|
|
+ :value="
|
|
|
+ point.imgData
|
|
|
+ ? point.imgData.map((d) => d.imgPath).join(',')
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ @input="onImageChanged(point, $event)"
|
|
|
+ ></imgUpload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="整改期限" prop="rectificationDeadline">
|
|
|
+ <el-select
|
|
|
+ v-model="point.rectificationDeadline"
|
|
|
+ placeholder="请选择整改期限"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in dict.type.rectification_deadline"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
+
|
|
|
+ <div class="dialog-footer">
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
<el-button @click="onGrant">授权</el-button>
|
|
|
<el-button @click="onSave">保存</el-button>
|
|
|
@@ -97,13 +122,21 @@
|
|
|
:orgType="info.beCheckOrgType"
|
|
|
@select="onSelectPoint"
|
|
|
></SelectPoint>
|
|
|
- </el-dialog>
|
|
|
+ <UserSelector ref ="UserSelector"
|
|
|
+ @select="onUserSelect"
|
|
|
+ :selectLimit="1"
|
|
|
+ ></UserSelector>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import * as api from "@/api/safetycheck/register.js";
|
|
|
import dayjs from "dayjs";
|
|
|
import SelectPoint from "../../ruleManager/dialog.select.point.vue";
|
|
|
+import imgUpload from "@/components/ImageUpload/index.vue";
|
|
|
+import UserSelector from "@/components/userSelector/index.vue"
|
|
|
+
|
|
|
export default {
|
|
|
+ name: "safetyCheckRegister",
|
|
|
data() {
|
|
|
return {
|
|
|
info: {},
|
|
|
@@ -114,14 +147,16 @@ export default {
|
|
|
pointIdsWhenAdd: [],
|
|
|
};
|
|
|
},
|
|
|
- dicts: ["rectification_deadline"],
|
|
|
- components: { SelectPoint },
|
|
|
+ dicts: ["rectification_deadline","sys_user_is_lock"],
|
|
|
+ components: { SelectPoint, imgUpload,UserSelector },
|
|
|
mounted() {
|
|
|
+ let id = this.$route.params.taskId;
|
|
|
api.info(id).then((r) => {
|
|
|
this.info = r.data;
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
+ dayjs,
|
|
|
onAddPoint() {
|
|
|
this.pointIdsWhenAdd = [];
|
|
|
this.info.areaList.forEach((a) => {
|
|
|
@@ -131,11 +166,12 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
- this.$ref.SelectPoint.show(this.pointIdsWhenAdd);
|
|
|
+ this.$refs.SelectPoint.show(this.pointIdsWhenAdd);
|
|
|
},
|
|
|
onSelectPoint(selectedList) {
|
|
|
let hasNew = false;
|
|
|
- for (let p in selectedList) {
|
|
|
+ for (let index in selectedList) {
|
|
|
+ let p = selectedList[index];
|
|
|
if (this.pointIdsWhenAdd.indexOf(p.id) >= 0) {
|
|
|
continue;
|
|
|
}
|
|
|
@@ -146,7 +182,7 @@ export default {
|
|
|
info.areaList.push(area);
|
|
|
}
|
|
|
|
|
|
- let item = area.itemList((i) => i.itemId == p.itemId);
|
|
|
+ let item = area.itemList.find((i) => i.itemId == p.itemId);
|
|
|
if (!item) {
|
|
|
item = { itemId: p.itemId, itemName: p.itemName, pointList: [] };
|
|
|
area.itemList.push(item);
|
|
|
@@ -171,22 +207,49 @@ export default {
|
|
|
hasNew = true;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
if (!hasNew) {
|
|
|
this.$message.info("没有可新增的检查内容");
|
|
|
}
|
|
|
},
|
|
|
- onDeletePoint(item, point) {
|
|
|
+ onDeletePoint(area, item, point) {
|
|
|
if (point.isAdd === 0) {
|
|
|
this.$message.warning("不可删除计划的检查内容");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- let index = item.indexOf(point);
|
|
|
+ let index = item.pointList.indexOf(point);
|
|
|
if (index >= 0) {
|
|
|
item.pointList.splice(index, 1);
|
|
|
}
|
|
|
+
|
|
|
+ if (item.pointList.length === 0) {
|
|
|
+ index = area.itemList.indexOf(item);
|
|
|
+ area.itemList.splice(index, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (area.itemList.length === 0) {
|
|
|
+ index = this.info.areaList.indexOf(area);
|
|
|
+ this.info.areaList.splice(index, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onImageChanged(point, value) {
|
|
|
+ point.imgData = value
|
|
|
+ .split(",")
|
|
|
+ .map((img) => ({ id: null, imgPath: img }));
|
|
|
+ },
|
|
|
+ onUserSelect(selected){
|
|
|
+ if(!selected || selected.length===0){
|
|
|
+ this.$message.warning("请选择要授权的人员")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ debugger
|
|
|
+ //调用授权
|
|
|
+ },
|
|
|
+ onGrant() {
|
|
|
+ this.$refs.UserSelector.show();
|
|
|
},
|
|
|
- onGrant() {},
|
|
|
onSave() {
|
|
|
this.info.isSubmit = false;
|
|
|
api.submit(this.info).then((r) => {
|
|
|
@@ -195,8 +258,16 @@ export default {
|
|
|
},
|
|
|
async onSubmit() {
|
|
|
let isOk = true;
|
|
|
- for (let p in this.$ref.forms) {
|
|
|
- isOk &= await this.$ref.forms[p].validate();
|
|
|
+ let r = this.$refs;
|
|
|
+ for (let p in this.$refs) {
|
|
|
+ if (p.startsWith("point")) {
|
|
|
+ try {
|
|
|
+ isOk &= await this.$refs[p][0].validate();
|
|
|
+ } catch (e) {
|
|
|
+ isOk &= false;
|
|
|
+ console.error(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
if (isOk) {
|
|
|
this.info.isSubmit = true;
|
|
|
@@ -206,14 +277,68 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style lan="scss" scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.content {
|
|
|
- border: black 1px solid;
|
|
|
+ max-height: calc(100% - 300px);
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
-.content:first-child {
|
|
|
- background-color: #c4c4c4;
|
|
|
+.area_content {
|
|
|
+ border: #797979 1px solid;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
+
|
|
|
+.content > .area_content:first-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.content > .area_content:last-child {
|
|
|
+ border-bottom: #797979 1px solid;
|
|
|
+}
|
|
|
+
|
|
|
+.area_content > div:nth-child(1) {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ border-right: #797979 1px solid;
|
|
|
padding-top: auto;
|
|
|
- padding-bottom: auto;
|
|
|
+ width: 15%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.area_content > div:nth-child(2) {
|
|
|
+ width: 80%;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.safetycheck_item {
|
|
|
+ margin: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.safetycheck_point {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-left: 30px;
|
|
|
+}
|
|
|
+// .safetycheck_point > div:nth-child(1) {
|
|
|
+// margin-bottom: 15px;
|
|
|
+// }
|
|
|
+.pointName {
|
|
|
+ width: 200px;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.dialog-footer {
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+ border-top: #797979 1px solid;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-right: 30px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 0px;
|
|
|
}
|
|
|
.circle {
|
|
|
display: inline-block;
|
zhulu