<template> <div class="hidden"> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" v-if="!isView" >新增隐患信息</el-button> </el-col> </el-row> <!--隐患信息--> <el-table :data="hiddenList"> <el-table-column label="隐患名称" align="center" prop="hiddenTroubleName" /> <el-table-column label="隐患等级" align="center" prop="hiddenTroubleLevel"> <template slot-scope="scope"> <span v-if="scope.row.hiddenTroubleLevel == '1'">I级</span> <span v-if="scope.row.hiddenTroubleLevel == '2'">II级</span> <span v-if="scope.row.hiddenTroubleLevel == '3'">III级</span> </template> </el-table-column> <el-table-column label="隐患类型" align="center" prop="hiddenTroubleType"> <template slot-scope="scope"> <span v-if="item.dictValue == scope.row.hiddenTroubleType" v-for="item in hiddenTroubleOptions" :key="item.dictValue"> {{ item.dictLabel }} </span> </template> </el-table-column> <el-table-column label="隐患图片" align="center" prop="pictureUrl"> <template slot-scope="scope"> <el-image :src="scope.row.pictureUrl" :preview-src-list="[scope.row.pictureUrl]" v-if="scope.row.pictureUrl != '' && scope.row.pictureUrl != null" :z-index=5000 style="width: auto;height: auto;"></el-image> </template> </el-table-column> <el-table-column label="上报时间" align="center" prop="reportTime" width="150"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> </template> </el-table-column> <el-table-column label="上报人" align="center" prop="reportPersonName" /> <el-table-column label="处理状态" align="center" prop="hiddenTroubleDealStatus"> <template slot-scope="scope"> <span v-if="scope.row.hiddenTroubleDealStatus == '1'">待处理</span> <span v-if="scope.row.hiddenTroubleDealStatus == '2'">处理中</span> <span v-if="scope.row.hiddenTroubleDealStatus == '3'">已完成</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="viewDetail(scope.row,scope.$index)" v-if="isView" >详情</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,scope.$index)" v-if="!isView" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-if="!isView" >删除</el-button> </template> </el-table-column> </el-table> <!-- 添加或修改燃气隐患对话框 --> <el-dialog :title="title" :visible.sync="hiddenOpen" width="900px" append-to-body destroy-on-close @close="cancel"> <el-form ref="hiddenForm" :model="hiddenForm" :rules="rules" label-width="100px"> <el-row> <el-col :span="12"> <el-form-item label="隐患名称" prop="hiddenTroubleName"> <el-input v-model="hiddenForm.hiddenTroubleName" placeholder="请输入隐患名称" :disabled="isView"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="隐患等级" prop="hiddenTroubleLevel"> <el-select v-model="hiddenForm.hiddenTroubleLevel" placeholder="请选择隐患类型" style="width: 330px" :disabled="isView"> <el-option label="I级" value="1" /> <el-option label="II级" value="2" /> <el-option label="III级" value="3" /> </el-select> </el-form-item> </el-col> </el-row> <el-form-item label="隐患类型" prop="hiddenTroubleType"> <el-select v-model="hiddenForm.hiddenTroubleType" placeholder="请选择隐患类型" style="width: 330px" :disabled="isView"> <el-option v-for="dict in hiddenTroubleOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" ></el-option> </el-select> </el-form-item> <el-row> <el-col :span="24"> <el-form-item label="经纬度坐标" prop="longitude"> <el-col :span="8"> <el-input v-model="hiddenForm.longitude" placeholder="请输入经度" :disabled="isView"/> </el-col> <el-col :span="8" style="margin-left: 20px"> <el-input v-model="hiddenForm.latitude" placeholder="请输入纬度" :disabled="isView"/> </el-col> <el-col :span="4" style="margin-left: 30px"> <el-button type="primary" plain @click="MapdialogFun" v-if="!isView">选择经纬度</el-button> </el-col> </el-form-item> </el-col> </el-row> <el-form-item label="图片地址" prop="pictureUrl"> <MyFileUpload listType="picture-card" @resFun="getFileInfo" @remove="listRemove" :fileArr="fileList" v-if="!isView" /> <div style="width: 20%;" v-if="isView"> <el-image :src="hiddenForm.pictureUrl" :preview-src-list="[hiddenForm.pictureUrl]" style="width: auto;height: auto;" :z-index= "3000"></el-image> </div> <el-input v-show="false" disabled v-model="hiddenForm.pictureUrl"></el-input> </el-form-item> <el-form-item label="隐患描述" prop="hiddenTroubleDescribe"> <el-input v-model="hiddenForm.hiddenTroubleDescribe" type="textarea" placeholder="请输入隐患描述" :disabled="isView"/> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm" v-if="!isView">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <GetPos :dialogVisible.sync="dialogTableVisibles" device="" :devicePos="devicePos" @close="dialogcancelFun" @getPath="getPath" style="z-index: 3000" /> </div> </template> <script> import MyFileUpload from '@/components/MyFileUpload'; import GetPos from '@/components/GetPos'; import moment from "moment"; import { hiddenTroubleList, addHiddenInfo , updateHiddenInfo ,delHiddenInfo } from "@/api/operationMonitor/hiddenTrouble" export default { name: "HiddenTrouble", components: { MyFileUpload, GetPos }, props:{ workId:{ type:Number }, //是否为查看 isView:{ type:Boolean, default:true } }, data() { return { // 遮罩层 loading: true, // 燃气隐患表格数据 /* infoList: [],*/ // 弹出层标题 title: "", // 是否显示弹出层 hiddenOpen: false, // 表单参数 hiddenForm: { pictureUrl: "" }, /**隐患信息数据*/ hiddenList:[], // 表单校验 rules: { hiddenTroubleName: [ { required: true, message: "请输入隐患名称", trigger: "blur" } ], hiddenTroubleLevel: [ { required: true, message: "请输入隐患等级", trigger: "blur" } ], hiddenTroubleType: [ { required: true, message: "请输入隐患类型", trigger: "blur" } ], longitude: [ { required: true, message: "请输入经纬度", trigger: ["blur","change"] } ], pictureUrl: [ { required: true, message: "请上传图片", trigger: "blur" } ], hiddenTroubleDescribe: [ { required: true, message: "请输入隐患描述", trigger: "blur" } ] }, fileList:[], devicePos: [], dialogTableVisibles: false, hiddenTroubleOptions:[], /**修改时当前数据下标*/ index: -1, }; }, created(){ this.getDicts("t_hidden_trouble_type").then(response => { this.hiddenTroubleOptions = response.data; }); this.getHiddenInfoList({workId:this.workId}); }, methods: { // 取消按钮 cancel() { this.hiddenOpen = false; this.fileList = []; this.reset(); }, /**获取隐患信息*/ getHiddenInfoList(param){ hiddenTroubleList(param).then(res =>{ this.hiddenList = res.data; /* this.hiddenList.forEach(item=>{ item.reportPersonName = item.reportPerson; })*/ }); }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.title = "新增隐患信息" this.hiddenOpen = true; }, /** 详情按钮操作 */ viewDetail(row,index) { this.reset(); this.index = index; this.hiddenForm = {...row}; this.title = "查看隐患信息" this.hiddenOpen = true; if (this.hiddenForm.pictureUrl) { this.fileList.push({ url: this.hiddenForm.pictureUrl, }); } }, /** 修改按钮操作 */ handleUpdate(row,index) { this.reset(); this.index = index; this.hiddenForm = {...row}; this.title = "修改隐患信息" this.hiddenOpen = true; if (this.hiddenForm.pictureUrl) { this.fileList.push({ url: this.hiddenForm.pictureUrl, }); } }, /** 提交按钮 */ submitForm() { this.$refs["hiddenForm"].validate(valid => { if (valid) { if (this.hiddenForm.hiddenTroubleId != null) { updateHiddenInfo(this.hiddenForm).then(response => { this.msgSuccess("修改成功"); this.hiddenOpen = false; this.getHiddenInfoList({workId:this.workId}); }); } else { this.hiddenForm.workId = this.workId; this.hiddenForm.reportTime = moment().format("YYYY-MM-DD HH:mm:ss"); this.hiddenForm.reportPersonName = this.$store.state.user.name; this.hiddenForm.reportPerson = this.$store.state.user.userId; this.hiddenForm.beyondEnterpriseId = this.$store.state.user.enterpriseId; addHiddenInfo(this.hiddenForm).then(response => { this.msgSuccess("新增成功"); this.hiddenOpen = false; this.getHiddenInfoList({workId:this.workId}); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const hiddenTroubleId = row.hiddenTroubleId; const hiddenTroubleDealStatus = row.hiddenTroubleDealStatus; this.$confirm('是否确认删除隐患名称为"' + row.hiddenTroubleName + '"的数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { //return delHiddenInfo(hiddenTroubleId); return updateHiddenInfo({hiddenTroubleId: hiddenTroubleId,isDel: '1',hiddenTroubleDealStatus: hiddenTroubleDealStatus}) }).then(() => { this.getHiddenInfoList({workId:this.workId}); this.msgSuccess("删除成功"); }).catch(() => {}); }, getFileInfo(res){ this.hiddenForm.pictureUrl = res.url; }, listRemove(e) { this.fileList = []; }, // 表单重置 reset() { this.hiddenForm = { hiddenTroubleId: null, workId: null, hiddenTroubleName: null, hiddenTroubleLevel: null, hiddenTroubleType: null, longitude: null, latitude: null, pictureUrl: null, hiddenTroubleDescribe: null, reportTime: null, reportPerson: null, hiddenTroubleDealStatus: null, hiddenTroubleDealCondition: null, hiddenTroubleDealFinishTime: null, isDel: null, remarks: null, uniqueMark: null, reportPersonName:null }; this.resetForm("hiddenForm"); }, /** * 经纬度坐标方法 */ MapdialogFun() { this.dialogTableVisibles = true; }, /** * 地图关闭方法 */ dialogcancelFun() { this.dialogTableVisibles = false; }, /** * 经纬度 选择 * @param res */ getPath(res){ //确认选择经纬度 this.hiddenForm.longitude = res[0]; this.hiddenForm.latitude = res[1]; }, /**父组件校验子组件数据*/ checkChildData(){ return this.hiddenList.length <=0; } } } </script> <style lang="scss" scoped> .hidden{ .el-dialog__header{ height: 52px; } } </style>