<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-row> <el-col :span="12"> <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-col> <el-col :span="12"> <el-form-item label="所属企业" prop="beyondEnterpriseName" v-if="isView"> <el-input v-model="hiddenForm.beyondEnterpriseName" placeholder="请输入所属企业" :disabled="isView"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="处理状态" prop="hiddenTroubleDealStatus" v-if="isView"> <el-input v-if="hiddenForm.hiddenTroubleDealStatus == '1'" value="待处理" :disabled="isView"/> <el-input v-if="hiddenForm.hiddenTroubleDealStatus == '2'" value="处理中" :disabled="isView"/> <el-input v-if="hiddenForm.hiddenTroubleDealStatus == '3'" value="已完成" :disabled="isView"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="上报时间" prop="reportTime"> <el-date-picker clearable size="small" v-model="hiddenForm.reportTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择上报时间" style="width: 100%" :disabled="isView"> </el-date-picker> </el-form-item> </el-col> </el-row> <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 { getInfo } from "@/api/regulation/info"; import MyFileUpload from '@/components/MyFileUpload'; import GetPos from '@/components/GetPos'; import moment from "moment"; export default { name: "HiddenTrouble", components: { MyFileUpload, GetPos }, props:{ // 燃气隐患表格数据 hiddenList:{ type:Array }, workId:{ type:Number }, //是否为查看 isView:{ type:Boolean, default:true } }, data() { return { // 遮罩层 loading: true, // 燃气隐患表格数据 /* infoList: [],*/ // 弹出层标题 title: "", // 是否显示弹出层 hiddenOpen: false, // 表单参数 hiddenForm: { pictureUrl: "", beyondEnterpriseName: "1233" }, // 表单校验 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; }); }, methods: { // 取消按钮 cancel() { this.hiddenOpen = false; this.fileList = []; this.reset(); }, /** 新增按钮操作 */ 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, }); } if(this.hiddenForm.beyondEnterpriseId && !this.hiddenForm.beyondEnterpriseName){ getInfo(this.hiddenForm.beyondEnterpriseId).then(res =>{ if(res.data){ this.$set(this.hiddenForm,"beyondEnterpriseName",res.data.enterpriseName); } }) } }, /** 修改按钮操作 */ 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) { const obj = {...this.hiddenForm}; if(this.index>=0){ this.hiddenList.splice(this.index, 1,obj); this.index = -1; this.hiddenOpen =false; return; } obj.uniqueMark = this.uuidv1(); obj.workId = this.workId; obj.reportTime = moment().format("YYYY-MM-DD HH:mm:ss"); obj.hiddenTroubleDealStatus = '1'; obj.reportPersonName = this.$store.state.user.name; obj.reportPerson = this.$store.state.user.userId; this.hiddenList.push(obj); this.hiddenOpen = false; } }); }, /** 删除按钮操作 */ handleDelete(row) { this.hiddenList.splice(this.hiddenList.indexOf(row),1); }, 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: "0", 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]; }, /**生成唯一标识用于图片查看*/ uuidv1(){ this.formatDateTime() + Math.random().toString(36).substr(2); }, formatDateTime() { var date = new Date(); var y = date.getFullYear(); var m = date.getMonth() + 1; m = m < 10 ? ('0' + m) : m; var d = date.getDate(); d = d < 10 ? ('0' + d) : d; var h = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); return y + m + d + h + minute + second; } } } </script> <style lang="scss" scoped> .hidden{ .el-dialog__header{ height: 52px; } } </style>