修改

马宇豪

2023-05-05 c819024e241b9f7c54cc3786373ad0d2998f2190

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

@@ -1,148 +1,275 @@
<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-row>
                    <el-col :span="12">
                        <el-form-item label="任务名称" prop="title">
                            <el-input v-model="inspectionRecordForm.title" class="analyseUnit_input" :disabled="ifShow">
                            </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-option
                                v-for="item in typeList"
                                :key=item.id
                                :label=item.name
                                :value=item.id
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </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>
                        </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-option
                                    v-for="item in statusList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </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-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-option
                                    v-for="item in statusList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
            <el-dialog title="查看" :visible.sync="isShowRecordDialog" append-to-body :close-on-click-modal="false" width="600px">
                <div class="record-form">
                    <el-form :model="recordForm" ref="recordFormRef" size="default" label-width="100px">
                        <el-row :gutter="35">
                            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                                <el-form-item label="检查内容" prop="checkContent">
                                    <el-input class="analyseUnit_input" type="textarea" :rows="3" v-model.trim="recordForm.checkContent" placeholder="检查内容"> </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-dialog>
            <el-dialog title="提交" :visible.sync="isShowSubmitDialog" width="600px">
                <el-form :model="submitForm" ref="rectifyFormRef" size="default" label-width="120px">
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="处理结果" prop="checkResult">
                                <el-select class="analyseUnit_input" v-model="checkResults.checkResult" placeholder="请输入处理结果">
                                    <el-option v-for="item in resultList" :label="item.name" :key="item.id" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div align="right" class="dialog-footer">
                    <el-button @click="isShowSubmitDialog = !isShowSubmitDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitRecord" size="default">确 定</el-button>
                </div>
            </el-dialog>
    </div>
</template>

<script>
    import Cookies from "js-cookie";
    import {submitTaskRecord, 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,
                    imgInfoList: [],
                    info: null,
                    noticeUid: null,
                    result: null,
                    taskId: null,
                    unitId: null,
                    fixDepId:null,
                    noticeDepId: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' }],
                    fixDepId: [{ required: true, message: '异常整改部门不能为空', trigger: 'blur' }],
                    noticeDepId: [{ required: true, message: '异常通知部门不能为空', trigger: 'blur' }],
                },
                inspectionRecordDetailFormVisible:false,
                ifShow:true,
                ifNormal:false,
                ifLook:false,
                ifConfirm:false,
                userList:[],
                noticeUserList:[],
                fixUserList:[],
                departmentList:[],
                fileList:[],
                typeList:[{id:1,name:'日常检查'},{id:2,name:'周期检查'}],
                statusList:[{id:1,name:'待巡检'},{id:2,name:'巡检中'},{id:3,name:'已完成'},{id:4,name:'超时未巡检'},{id:5,name:'已取消'}],
                isShowSubmitDialog: false,
                isShowRecordDialog: false,
                recordForm: {
                    taskCode: null,
                    checkContent: null,
                    checkResult: null,
                    checkTaskId: null,
                    classify1: null,
                    classify2: null,
                    classify3: null,
                    controlMeasureCode: null,
                    controlMeasureId: null,
                    controlType: null,
                    measureDesc: null
                },
                submitForm: {
                    id: null,
                    execUserId: null,
                    checkResults: []
                },
                checkResults: {
                    id: null,
                    controlMeasureId: null,
                    checkResult: null
                },
                resultList: [
                    { id: 1, name: '正常' },
                    { id: 2, name: '不正常' }
                ]
            }
        },
        components:{
            

        },
        methods:{
            showInspectionRecordForm(value) {
                this.inspectionRecordFormVisible = true
                this.inspectionRecordForm = JSON.parse(JSON.stringify(value))
            showInspectionRecordForm(type,value) {
                if (type === '查看') {
                    this.isShowRecordDialog = true;
                    let recordFormValue = JSON.parse(JSON.stringify(value));
                    this.recordForm.taskCode = recordFormValue.taskCode;
                    this.recordForm.checkContent = recordFormValue.checkContent;
                } else {
                    this.title = '提交';
                    this.isShowSubmitDialog = true;
                    this.submitForm.id = JSON.parse(JSON.stringify(value)).checkTaskId;
                    this.checkResults.id = JSON.parse(JSON.stringify(value)).id;
                    this.checkResults.controlMeasureId = JSON.parse(JSON.stringify(value)).controlMeasureId;
                }

            },
            showInspectionRecordDetailForm(value) {
                this.inspectionRecordDetailFormVisible = true
                this.inspectionRecordDetailForm = value
            }

            async submitRecord(){
                if (this.checkResults.checkResult !== null) {

                        this.submitForm.checkResults.push(this.checkResults);
                        let res = await submitTaskRecord(this.submitForm);
                        if (res.data.code === '200') {
                            this.$message({
                                type: 'success',
                                message: '排查记录提交成功',
                                duration: 2000
                            });
                            this.isShowSubmitDialog = false;
                            this.$emit('refreshRecord');
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });

                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            },
            submitInspectionRecordDetail() {
                if(this.ifNormal === false){
                    this.inspectionRecordDetailForm.noticeUid = null
                    this.inspectionRecordDetailForm.fixTime = null
                    this.inspectionRecordDetailForm.fixUid = null
                    this.inspectionRecordDetailForm.info = null
                    this.inspectionRecordDetailForm.imgInfoList = []
                    this.inspectionRecordDetailForm.noticeDepId = null
                    this.inspectionRecordDetailForm.fixDepId = null
                }
                this.$refs["inspectionRecordDetailForm"].validate((valid) =>{
                    if(valid){
                        if(this.inspectionRecordDetailForm.result === 0){
                            this.$message({
                                type:'warning',
                                message:'请选择正确的巡检结果'
                            })
                            return
                        }
                        this.inspectionRecordDetailForm.imgInfoList = this.inspectionRecordDetailForm.imgInfoList.map(item =>{ return { imagePath:item.imagePath}})
                        submitUnitOne(this.inspectionRecordDetailForm).then( res =>{
                            if(res.data.code === '200'){
                                this.inspectionRecordDetailFormVisible = false
                                this.$emit('getList')
                                this.$message({
                                    type:'success',
                                    message:'上报成功',
                                    duration:2000,
                                    title:'成功'
                                })

                            }else{
                                this.$message({
                                    message:res.data.message,
                                    type:'warning'
                                })
                            }
                        })
                    }else{
                        this.$message({
                            message:'请完善基本信息',
                            type:'warning'
                        })
                    }
                })
            },
            changeDepartment(type){
              if(type === 'notice'){
                  if(this.inspectionRecordDetailForm.noticeDepId === ''){
                      this.noticeUserList = []
                  }else{
                      let department = this.departmentList.find(item => item.id === this.inspectionRecordDetailForm.noticeDepId).department
                      this.noticeUserList = this.userList.filter ( item => item.department === department)
                  }
              }else{
                  if(this.inspectionRecordDetailForm.fixDepId === ''){
                      this.fixUserList = []
                  }else{
                      let department = this.departmentList.find(item => item.id === this.inspectionRecordDetailForm.fixDepId).department
                      this.fixUserList = this.userList.filter ( item => item.department === department)
                  }
              }
            },
            handleChangeFile(){
                this.header.Authorization = Cookies.get('token')
            },
            onFileSuccess(response){
                if(response.code === '200'){
                    this.inspectionRecordDetailForm.imgInfoList.push({imagePath:response.result.path,name:response.result.name,})
                    this.fileList.push({url:process.env.IMG_API + response.result.path,name:response.result.name,})
                    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.imgInfoList.splice(this.inspectionRecordDetailForm.imgInfoList.findIndex(item =>item.name === file.name),1)
                    this.fileList.splice(this.inspectionRecordDetailForm.imgInfoList.findIndex(item =>item.name === file.name),1)
                })
            },
        }
    }
</script>
@@ -155,6 +282,16 @@
        width:200px;
    }
    .input{
        width:400px;
        width:300px;
    }
.basic_search{
    display:inline-block;
    padding-bottom: 10px;
}
.analyseUnit_input{
    width:90%;
}
.analyseUnit_box{
    width:200px;
}
</style>