重构双重预防

Your Name

2022-08-06 ca151ff4c1cdc4a029f13ac6da7d42e4f8147287

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

@@ -1,332 +1,41 @@
<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" readonly>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="任务名称" prop="title">
                            <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" readonly>
                                <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="execUname">
                            <el-input v-model="inspectionRecordForm.execUname" class="analyseUnit_input" readonly>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="任务状态" prop="status">
                            <el-select v-model="inspectionRecordForm.status" class="analyseUnit_input" readonly>
                                <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-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="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="result">
                            <el-select v-model="inspectionRecordDetailForm.result" :disabled="ifShow" class="input" @change="ifNormal = (inspectionRecordDetailForm.result === 2 ? true : false)">
                                <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="noticeDepId">
                                <el-select v-model="inspectionRecordDetailForm.noticeDepId" filterable clearable class="input" @change="changeDepartment('notice')" :disabled="ifShow">
                                    <el-option
                                        v-for="item in departmentList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.department"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <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 noticeUserList"
                                        :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="fixDepId">
                                <el-select v-model="inspectionRecordDetailForm.fixDepId" filterable clearable class="input" :disabled="ifShow" @change="changeDepartment('fix')">
                                    <el-option
                                        v-for="item in departmentList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.department"
                                    ></el-option>
                                </el-select>
                            </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 fixUserList"
                                        :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="imgInfoList">
                                <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.imgInfoList"
                                    :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>
            <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>
                <div v-if="ifLook">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="异常通知部门" prop="noticeDepId">
                                <el-select v-model="inspectionRecordDetailForm.problem.noticeDepId" filterable clearable class="input" @change="changeDepartment('notice')" readonly>
                                    <el-option
                                        v-for="item in departmentList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.department"
                                    ></el-option>
            </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-row>
                        <el-col :span="24">
                            <el-form-item label="异常通知人员" prop="noticeUid">
                                <el-select v-model="inspectionRecordDetailForm.problem.noticeUid" clearable filterable readonly class="input">
                                    <el-option
                                        v-for="item in noticeUserList"
                                        :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.problem.fixTime" class="input" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" readonly></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="异常整改部门" prop="fixDepId">
                                <el-select v-model="inspectionRecordDetailForm.problem.fixDepId" filterable clearable class="input" readonly>
                                    <el-option
                                        v-for="item in departmentList"
                                        :key="item.id"
                                        :value="item.id"
                                        :label="item.department"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="24">
                            <el-form-item label="整改人" prop="fixUid">
                                <el-select v-model="inspectionRecordDetailForm.problem.fixUid" clearable filterable readonly class="input">
                                    <el-option
                                        v-for="item in fixUserList"
                                        :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.problem.info" aria-readonly="true" class="input">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="上报图片" prop="imgInfoList">
                                <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.imgInfoList"
                                    :on-change="handleChangeFile"
                                    :on-success="onFileSuccess"
                                    :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>
                </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>
                <div  style="text-align: center" v-show="ifConfirm">
                    <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>
            </el-dialog>
    </div>
</template>

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

    export default {
        name: "detail",
@@ -384,56 +93,85 @@
                fixUserList:[],
                departmentList:[],
                fileList:[],
                resultList:[{id:0,name:'未巡检'},{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:'已取消'}],
                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) {
                debugger
                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,type,userList,departmentList) {
                this.inspectionRecordDetailFormVisible = true
                this.$nextTick(() =>{
                    this.$refs["inspectionRecordDetailForm"].clearValidate()
                })
                this.userList = userList
                this.departmentList = departmentList
                if(type === '查看'){
                    this.titleDetail = '查看单元上报'
                    this.ifNormal = false
                    this.ifLook = true
                    this.ifConfirm = false
                    this.inspectionRecordDetailForm = JSON.parse(JSON.stringify(value))
                    if(this.inspectionRecordDetailForm.problem.imageInfoList === null){
                        this.fileList = []
                    }else{
                        this.fileList = this.inspectionRecordDetailForm.problem.imageInfoList.map( item => { return { url : process.env.IMG_API + item.imgPath}})

            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.titleDetail = '巡检单元上报'
                    this.ifShow = false
                    this.ifNormal = false
                    this.ifLook = false
                    this.ifConfirm = true
                    this.inspectionRecordDetailForm = {
                        execUid: Cookies.get('userId'),
                        fixTime: null,
                        fixUid: null,
                        imgInfoList: [],
                        info: null,
                        noticeUid: null,
                        result: null,
                        fixDepId:null,
                        noticeDepId:null,
                        taskId: value.taskId,
                        unitId: value.id
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请完善基本信息'
                    });
                }
            },
            submitInspectionRecordDetail() {
@@ -547,4 +285,14 @@
    .input{
        width:300px;
    }
.basic_search{
    display:inline-block;
    padding-bottom: 10px;
}
.analyseUnit_input{
    width:90%;
}
.analyseUnit_box{
    width:200px;
}
</style>