'lct'

Your Name

2022-05-19 a8caf77ebfd5080b4b484eca91a44bfdcae34f49

 src/views/doublePreventAction/hiddenDanger/inspectionRecord/components/detail.vue

@@ -1,17 +1,17 @@
<template>
    <div class="app-container">
        <el-dialog title="巡检记录详情" :visible.sync="inspectionRecordFormVisible"  append-to-body :close-on-click-modal="false" width="40%">
            <el-form ref="inspectionRecordForm" :model="inspectionRecordForm" label-position="right" label-width="120px">
            <el-form ref="inspectionRecordForm" :model="inspectionRecordForm" label-position="right" label-width="120px" readonly>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="任务名称" prop="title">
                            <el-input v-model="inspectionRecordForm.title" class="analyseUnit_input" :disabled="ifShow">
                            <el-input v-model="inspectionRecordForm.title" class="analyseUnit_input" readonly>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="检查类型" prop="type">
                            <el-select v-model="inspectionRecordForm.type" class="analyseUnit_input" :disabled="ifShow">
                            <el-select v-model="inspectionRecordForm.type" class="analyseUnit_input" readonly>
                                <el-option
                                v-for="item in typeList"
                                :key=item.id
@@ -24,39 +24,14 @@
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="任务名称" prop="noticeUname">
                            <el-input v-model="inspectionRecordForm.noticeUname" class="analyseUnit_input" :disabled="ifShow">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="检查类型" prop="execUname">
                            <el-input v-model="inspectionRecordForm.execUname" class="analyseUnit_input" :disabled="ifShow">
                            <el-input v-model="inspectionRecordForm.execUname" class="analyseUnit_input" readonly>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="巡检开始时间" prop="startTime">
                            <el-date-picker v-model="inspectionRecordForm.execUname" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="周期开始时间" class="analyseUnit_input" :disabled="ifShow" ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="巡检结束时间" prop="startTime">
                            <el-date-picker v-model="inspectionRecordForm.execUname" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="周期开始时间" class="analyseUnit_input" :disabled="ifShow"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="巡检提交时间" prop="execUname">
                               <el-date-picker v-model="inspectionRecordForm.execUname" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="周期开始时间" class="analyseUnit_input" :disabled="ifShow"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="任务状态" prop="status">
                            <el-select v-model="inspectionRecordForm.status" class="analyseUnit_input" :disabled="ifShow">
                            <el-select v-model="inspectionRecordForm.status" class="analyseUnit_input" readonly>
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.id"
@@ -67,82 +42,306 @@
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="巡检开始时间" prop="expTime">
                            <el-date-picker v-model="inspectionRecordForm.expTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="巡检开始时间" class="analyseUnit_input" readonly></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="巡检结束时间" prop="endTime">
                            <el-date-picker v-model="inspectionRecordForm.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="巡检结束时间" class="analyseUnit_input" readonly></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="巡检提交时间" prop="execTime">
                               <el-date-picker v-model="inspectionRecordForm.execTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="巡检提交时间" class="analyseUnit_input" readonly></el-date-picker>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </el-dialog>
        <el-dialog title="巡检单元详情" :visible.sync="inspectionRecordDetailFormVisible"  append-to-body :close-on-click-modal="false" width="30%">
            <el-form ref="inspectionRecordDetailForm" :model="inspectionRecordDetailForm" label-position="right" label-width="120px">
        <el-dialog :title="titleDetail"  :visible.sync="inspectionRecordDetailFormVisible"  append-to-body :close-on-click-modal="false" width="500px">
            <el-form ref="inspectionRecordDetailForm" :rules="inspectionRecordDetailFormRules" :model="inspectionRecordDetailForm" label-position="right" label-width="120px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="隐患排查内容" prop="content">
                            <el-input v-model="inspectionRecordDetailForm.content" class="input" :disabled="ifShow">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="上报说明" prop="info">
                            <el-input v-model="inspectionRecordDetailForm.info" class="input" :disabled="ifShow">
                            </el-input>
                        </el-form-item>
                    </el-col>
     
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="上报照片" prop="img">
                            <el-input v-model="inspectionRecordDetailForm.img" class="input" :disabled="ifShow">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="inspectionRecordDetailForm.status" class="input" :disabled="ifShow">
                        <el-form-item label="巡检结果" prop="result">
                            <el-select v-model="inspectionRecordDetailForm.result" :disabled="ifShow" class="input" @change="ifNormal = !ifNormal">
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                                v-for="item in resultList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div v-if="ifNormal">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="异常通知人员" prop="noticeUid">
                                <el-select v-model="inspectionRecordDetailForm.noticeUid" clearable filterable :disabled="ifShow" class="input">
                                    <el-option
                                        v-for="item in userList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.realname"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="整改时间" prop="fixTime">
                                <el-date-picker placeholder="选择时间" v-model="inspectionRecordDetailForm.fixTime" class="input" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :disabled="ifShow"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="24">
                            <el-form-item label="整改人" prop="fixUid">
                                <el-select v-model="inspectionRecordDetailForm.fixUid" clearable filterable :disabled="ifShow" class="input">
                                    <el-option
                                        v-for="item in userList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.realname"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="巡检结果备注" prop="info">
                                <el-input type="textarea" :rows="3" v-model="inspectionRecordDetailForm.info" :disabled="ifShow" class="input">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="上报图片" prop="img">
                                <el-upload
                                    accept=".pdf,.jpg,.png"
                                    :action="fileRoad"
                                    class="upload-demo"
                                    ref="upload"
                                    :headers="header"
                                    :data="uploadForm"
                                    list-type="picture-card"
                                    :file-list="fileList"
                                    v-model="inspectionRecordDetailForm.img"
                                    :on-change="handleChangeFile"
                                    :on-success="onFileSuccess"
                                    :multiple="false"
                                    :auto-upload="true">
                                    <i slot="default" class="el-icon-plus"></i>
                                    <div slot="file" slot-scope="{file}">
                                        <img
                                            class="el-upload-list__item-thumbnail"
                                            :src="file.url" alt=""
                                        >
                                        <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-preview"
                                    @click="handleFile(file)"
                                >
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span
                                    v-if="!disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove(file,'one')"
                                >
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                                    </div>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <div  style="text-align: center">
                    <el-button @click="inspectionRecordDetailFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitInspectionRecordDetail()">确认</el-button>
                </div>
            </el-form>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import Cookies from "js-cookie";
    import {submitUnitOne} from "../../../../../api/inspectionTask";

    export default {
        name: "detail",
        data(){
            const validateImg = (rule, value, callback) => {
                if (!this.inspectionRecordDetailForm.img) {
                    callback(new Error('请上传图片'))
                } else {
                    callback()
                }
            }
            return{
                inspectionRecordForm:{},
                fileRoad:process.env.BASE_API + '/task/web/upload',
                uploadForm:{
                },
                disabled:false,
                header:{Authorization:''},
                dialogImageUrl:false,
                dialogVisible:false,
                titleDetail:'',
                inspectionRecordForm:{

                },
                inspectionRecordFormVisible:false,
                inspectionRecordDetailForm:{},
                inspectionRecordDetailForm:{
                    execUid: null,
                    fixTime: null,
                    fixUid: null,
                    img: null,
                    info: null,
                    noticeUid: null,
                    result: 1,
                    taskId: null,
                    unitId: null
                },
                inspectionRecordDetailFormRules:{
                    img: [{ required: true, validator: validateImg, trigger: 'blur' }],
                    result: [{ required: true, message: '巡检结果不能为空', trigger: 'blur' }],
                    noticeUid: [{ required: true, message: '异常通知人员不能为空', trigger: 'change' }],
                    fixTime: [{ required: true, message: '整改时间不能为空', trigger: 'change' }],
                    fixUid: [{ required: true, message: '描整改人员不能为空', trigger: 'change' }],
                    info: [{ required: true, message: '巡检结果备注不能为空', trigger: 'blur' }],
                },
                inspectionRecordDetailFormVisible:false,
                ifShow:true,
                ifNormal:false,
                userList:[],
                fileList:[],
                resultList:[{id:1,name:'正常'},{id:2,name:'异常'}],
                typeList:[{id:1,name:'日常检查'},{id:2,name:'周期检查'}],
                statusList:[{id:1,name:'待巡检'},{id:2,name:'巡检中'},{id:3,name:'已完成'},{id:4,name:'超时未巡检'},{id:5,name:'已取消'}],
            }
        },
        components:{
            

        },
        methods:{
            showInspectionRecordForm(value) {
                this.inspectionRecordFormVisible = true
                this.inspectionRecordForm = JSON.parse(JSON.stringify(value))
            },
            showInspectionRecordDetailForm(value) {
            showInspectionRecordDetailForm(value,type,userList) {
                this.inspectionRecordDetailFormVisible = true
                this.inspectionRecordDetailForm = value
            }
                this.userList = userList
                if(type === '查看'){
                    this.titleDetail = '巡检单元查看'
                    this.ifShow = true
                    this.inspectionRecordDetailForm = JSON.parse(JSON.stringify(value))
                    if(value.result === 2){
                        this.ifNormal = true
                        this.fileList = []
                        this.fileList.push({url:process.env.IMG_API + value.img})
                    }
                }else{
                    this.titleDetail = '巡检单元上报'
                    this.ifShow = false
                    this.inspectionRecordDetailForm = {
                        execUid: Cookies.get('userId'),
                        fixTime: null,
                        fixUid: null,
                        img: null,
                        info: null,
                        noticeUid: null,
                        result: 1,
                        taskId: value.taskId,
                        unitId: value.id
                    }
                }
            },
            submitInspectionRecordDetail() {
                if(this.ifNormal = false){
                    this.inspectionRecordDetailForm.noticeUid = null
                    this.inspectionRecordDetailForm.fixTime = null
                    this.inspectionRecordDetailForm.fixUid = null
                    this.inspectionRecordDetailForm.info = null
                    this.inspectionRecordDetailForm.img = null
                }
                this.$refs["inspectionRecordDetailForm"].validate((valid) =>{
                    if(valid){
                        submitUnitOne(this.inspectionRecordDetailForm).then( res =>{
                            if(res.data.code === '200'){
                                this.inspectionRecordDetailFormVisible = false
                                this.$message({
                                    type:'success',
                                    message:'上报成功',
                                    duration:2000,
                                    title:'成功'
                                })

                            }else{
                                this.$message({
                                    message:res.data.message,
                                    type:'warning'
                                })
                            }
                        })
                    }else{
                        this.$message({
                            message:'请完善基本信息',
                            type:'warning'
                        })
                    }
                })
            },
            handleChangeFile(){
                this.header.Authorization = Cookies.get('token')
            },
            onFileSuccess(response){
                if(response.code === '200'){
                    this.inspectionRecordDetailForm.img = response.result.path
                    this.fileList.push({url:process.env.IMG_API + response.result.path})
                    this.$notify({
                        type:'success',
                        duration:2000,
                        message:'上传成功',
                        title:'成功',
                    })
                }else{
                    this.$message({
                        message:res.data.message,
                        type:'warning'
                    })
                }
            },
            handleFile(file){
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove(file){
                return this.$confirm(`确定移除 ${ file.name }？`,'提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning',
                }).then(()=> {
                    this.inspectionRecordDetailForm.img = null
                    this.fileList = []
                })
            },
        }
    }
</script>
@@ -155,6 +354,6 @@
        width:200px;
    }
    .input{
        width:400px;
        width:300px;
    }
</style>