项目

Your Name

2022-08-25 6c6e0514283c7ff3016b845b600186b464e616c4

 src/views/doublePreventAction/hiddenDanger/hiddenDangerReform/rectify/components/rectifyDialog.vue

@@ -1,175 +1,205 @@
<template>
    <el-dialog title="整改" :visible.sync="dialogFormVisible"
               :modal-append-to-body="false" :close-on-click-modal="false" width="800px">
        <el-form ref="dataForm" :rules="dataFormRules" :model="dataForm" label-position="right" label-width="140px"
                 style="" element-loading-text="保存中...">
    <div>
        <el-dialog title="查看" :visible.sync="dialogFormVisible"
                   :modal-append-to-body="false" :close-on-click-modal="false" width="800px">
            <el-form ref="dataForm" :rules="dataFormRules" :model="dataForm" label-position="right" label-width="140px"
                     style="" element-loading-text="保存中...">

                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="整改内容说明" prop="rectifyDesc">
                            <el-input class="analyseUnit_input" type="textarea" :rows="2" v-model.trim="dataForm.rectifyDesc" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="整改类型" prop="rectifyType">
                            <el-select class="analyseUnit_input" v-model="dataForm.rectifyType" readonly>
                                <el-option v-for="item in rectifyTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="整改部门" prop="rectifyDepId">
                            <el-select v-model="dataForm.rectifyDepId" class="analyseUnit_input"  placeholder="请选择所属部门" clearable filterable>
                                <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-form-item label="隐患级别：">
                <el-select v-model="dataForm.level"  placeholder="请选择" :disabled="isView">
                    <el-option
                        v-for="item in levels"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key">
                    </el-option>
                </el-select>
            </el-form-item>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="整改责任人" prop="liablePersonId">
                            <el-select class="analyseUnit_input" v-model="dataForm.liablePersonId" placeholder="请选择整改责任人" clearable filterable>
                                <el-option v-for="item in userList" :key="item.id" :label="item.realname" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

            <el-form-item label="整改措施：" >
                <el-input
                    style="width: 400px"
                    type="textarea"
                    :rows="3"
                    :disabled="isView"
                    placeholder="请输入内容"
                    v-model="dataForm.rectifymeasure">
                </el-input>
            </el-form-item>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="整改资金" prop="dangerResult">
                            <el-input class="analyseUnit_input" type="number" v-model="dataForm.cost" readonly> </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="隐患上报图" prop="img">
                            <el-image
                                class="upload-img img-wrapper"
                                v-for='item in fileOneList'
                                :key='item.$index'
                                :src="item"
                                :preview-src-list="fileOneList"
                            >
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="隐患整改图" prop="img">
                            <el-image
                                class="upload-img img-wrapper"
                                v-for='item in fileTwoList'
                                :key='item.$index'
                                :src="item"
                                :preview-src-list="fileTwoList"
                            >
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="隐患验收图" prop="img">
                            <el-image
                                class="upload-img img-wrapper"
                                v-for='item in fileThreeList'
                                :key='item.$index'
                                :src="item"
                                :preview-src-list="fileThreeList"
                            >
                            </el-image>
                        </el-form-item>
                    </el-col>
                </el-row>

            <el-form-item label="整改期限：" >
                <el-date-picker
                    v-model="dataForm.rectifydeadline"
                    type="datetime"
                    :disabled="isView"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            </el-form>

            <el-form-item label="上报说明：" >
                <el-input
                    style="width: 400px"
                    type="textarea"
                    :rows="3"
                    :disabled="isView"
                    placeholder="请输入内容"
                    v-model="dataForm.createnote">
                </el-input>
            </el-form-item>
        </el-dialog>
        <el-dialog title="整改" :visible.sync="isShowRectifyDialog" :modal-append-to-body="false" :close-on-click-modal="false" width="600px">
            <el-form :model="rectifyForm" :rules="rectifyFormRules" 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="rectifyInfo">
                            <el-input class="analyseUnit_input" type="textarea" :rows="2" v-model.trim="rectifyForm.rectifyInfo" placeholder="请输入整改说明" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="整改时间" prop="applyTime">
                            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" class="analyseUnit_input" v-model="rectifyForm.applyTime" placeholder="请选择整改时间" clearable> </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <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="dataForm.paths"
                                :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,file.$index)"
                                >
                                  <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="isShowRectifyDialog = !isShowRectifyDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitRectify" size="default">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="延期" :visible.sync="isShowDelayDialog" width="600px">
            <el-form :model="delayForm" :rules="delayFormRules" ref="delayFormRef" 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="timeOutDesc">
                            <el-input class="analyseUnit_input" type="textarea" :rows="2" v-model.trim="delayForm.timeOutDesc" placeholder="请输入延期说明" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="整改期限" prop="rectifyTime">
                            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" class="analyseUnit_input" v-model="delayForm.rectifyTime" placeholder="请选择整改期限" clearable> </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div align="right" class="dialog-footer">
                    <el-button @click="isShowDelayDialog = !isShowDelayDialog" size="default">取 消</el-button>
                    <el-button type="primary" @click="submitDelay" size="default">确 定</el-button>
            </div>
        </el-dialog>
    </div>

            <el-form-item label="上报图片：" v-if="!isView">
                <el-upload
                    ref="upload"
                    :action="baseUrl"
                    :auto-upload="false"
                    :headers="headers"
                    :on-change="handleChange"
                    name="file"
                    :file-list="fileList"
                    list-type="picture-card"
                    multiple
                >
                    <i class="el-icon-plus"></i>
                </el-upload>

            </el-form-item>

            <el-form-item label="上报图片:" v-if="isView && imgUrls.length > 0" >
                <el-image
                    class="upload-img"
                    v-for='item in imgUrls'
                    :key='item.id'
                    :src="item.url"
                    :preview-src-list="imgPreviewUrls"
                    style="width:100px;height: 100px;margin: 10px 10px 10px 2px;border-radius: 3px"
                >
                </el-image>
            </el-form-item>

            <el-form-item label="驳回整改说明："  v-if="dataForm.status === '驳回待整改'">
                <el-input
                    style="width: 400px"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    :disabled="isView"
                    v-model="dataForm.rectifynote">
                </el-input>
            </el-form-item>

            <el-form-item label="驳回整改图片："  v-if="dataForm.status === '驳回待整改'">
                <el-image
                    class="upload-img"
                    v-for='item in imgUrls2'
                    :key='item.id'
                    :src="item.url"
                    :disabled="isView"
                    :preview-src-list="imgPreviewUrls2"
                    style="width:100px;height: 100px;margin: 10px 15px 10px 2px;border-radius: 3px"
                >
                </el-image>
            </el-form-item>

            <el-form-item label="驳回原因："  v-if="dataForm.status === '驳回待整改'">
                <el-input
                    style="width: 400px"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    :disabled="isView"
                    v-model="dataForm.rejectnote">
                </el-input>
            </el-form-item>



            <el-form-item label="整改说明："  >
                <el-input
                    style="width: 400px"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="dataForm.note">
                </el-input>
            </el-form-item>

            <el-form-item label="整改图片：" >
                <el-upload
                    ref="upload"
                    :action="baseUrl"
                    :auto-upload="false"
                    :headers="headers"
                    :on-change="handleChange"
                    name="file"
                    :file-list="fileList"
                    list-type="picture-card"
                    multiple
                >
                    <i class="el-icon-plus"></i>
                </el-upload>

            </el-form-item>

        </el-form>

        <div style="margin-top: 20px;margin-left: 140px;"  class="dialog-footer" >
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="trigger2Submit()" :disabled="submiting">整改提交</el-button>
        </div>

    </el-dialog>
</template>

<script>
    import { hiddenDangerRectify } from '@/api/hiddenDanger';
    import { getToken} from "@/utils/auth";
    import {getDepartmentList} from "../../../../../../api/departmentManage";
    import {safetyInspectionItemName} from "../../../../../../api/safetySelfInspection";
    import {delayHiddenDangerReport, submitHiddenDangerReport} from "../../../../../../api/hiddenDanger";
    import Cookies from "_js-cookie@2.2.0@js-cookie";

    export default {
        name: "rectifyDialog",
        data(){
            return {
                disabled:false,
                dialogFormVisible:false,
                baseUrl: process.env.BASE_API + 'hiddenDanger/report',
                headers: {
                    'Authorization': getToken()
                fileRoad:process.env.BASE_API + '/task/web/upload',
                uploadForm:{
                },
                imgUrls:[],
                imgUrls2:[],
                header:{Authorization:''},
                userList:[],
                departmentList:[],
                rectifyTypeList: [
                    { id: 1, name: '即查即改' },
                    { id: 2, name: '限期整改' }
                ],
                imgPreviewUrls:[],
                imgPreviewUrls2:[],
                fileList:[],
                fileOneList:[],
                fileTwoList:[],
                fileThreeList:[],
                isView:false,
                submiting:false,
                dataFormRules:{},
@@ -178,16 +208,46 @@
                    {"key":"COMMON","value":"一般隐患"},
                ],
                dataForm: {
                    id:'',
                    note: '',
                    level:'',
                    rectifynote:'',
                    rectifydeadline:'',
                    rectifymeasure:'',
                    createnote: '',
                    rejectnote:'',
                    rectifyType: null,
                    rectifyDepId: null,
                    liablePersonId: null,
                    rectifyTime: null,
                    cost: null,
                    rectifyDesc: null
                },
                isShowCheckInfoDialog: false,
                checkInfoForm: {
                    rectifyDepId: null,
                    liablePersonId: null
                },
                isShowDelayDialog: false,
                isShowRectifyDialog: false,
                rectifyForm: {
                    id: null,
                    dangerManagerId: null,
                    rectifyInfo: null,
                    applyTime: null,
                    rectifyImages:[]
                },
                delayForm: {
                    id: null,
                    dangerManagerId: null,
                    rectifyTime: null,
                    timeOutDesc: null
                },
                rectifyFormRules: {
                    rectifyInfo: [{ required: true, message: '请填写整改说明', trigger: 'blur' }],
                    applyTime: [{ required: true, message: '请选择整改时间', trigger: 'change' }]
                },
                delayFormRules: {
                    timeOutDesc: [{ required: true, message: '请填写延期说明', trigger: 'blur' }],
                    rectifyTime: [{ required: true, message: '请选择整改期限', trigger: 'change' }]
                }
            }
        },
        created(){
            this.getDepartmentData();
            this.getUser();
        },
        methods:{
            resetDataForm(){
@@ -204,23 +264,95 @@
                 this.imgUrls =[]
                 this.imgPreviewUrls = []
            },
            show(row){
                this.resetDataForm();
                this.isView = true
                this.dataForm.id = row.id
                this.dataForm.level = row.level
                this.dataForm.status = row.status
                this.dataForm.createnote = row.createnote
                this.dataForm.rectifydeadline = row.rectifydeadline
                this.dataForm.rectifymeasure = row.rectifymeasure
                this.dataForm.rectifynote = row.rectifynote
                this.dataForm. rejectnote = row.rejectnote
                this.imgUrls = row.reportResources.map(item=>{return {url:process.env.IMG_API+item.url,name:item.id}})
                this.imgUrls2 = row.rectifyResources.map(item=>{return {url:process.env.IMG_API+item.url,name:item.id}})
                this.imgPreviewUrls = row.reportResources.map(item=>{ return process.env.IMG_API + item.url })
                this.imgPreviewUrls2 = row.rectifyResources.map(item=>{ return process.env.IMG_API + item.url })
                this.dialogFormVisible = true
            showDialog(type,row){
                if (type === '延期') {
                    this.isShowDelayDialog = true;
                    const delayForm = JSON.parse(JSON.stringify(row));
                    this.delayForm.id = delayForm.id;
                    this.delayForm.dangerManagerId = delayForm.dangerManagerId;
                    this.delayForm.timeOutDesc = null;
                    this.delayForm.rectifyTime = null;
                }else if(type == '整改'){
                    this.isShowRectifyDialog = true;
                    const rectifyForm = JSON.parse(JSON.stringify(row));
                    this.rectifyForm.id = rectifyForm.id;
                    this.rectifyForm.dangerManagerId = rectifyForm.dangerManagerId;
                    this.rectifyForm.rectifyInfo = null;
                    this.rectifyForm.applyTime = null;
                }else{
                    this.dialogFormVisible = true
                    this.dataForm = row
                    debugger
                    this.fileOneList = row.reportImages.map(item => {
                        return  process.env.IMG_API + item
                    })
                    this.fileTwoList = row.rectifyImages.map(item => {
                        return  process.env.IMG_API + item
                    })
                    this.fileThreeList = row.acceptImages.map(item => {
                        return  process.env.IMG_API + item
                    })
                }

            },

            submitRectify () {
                this.$refs['rectifyFormRef'].validate( async(valid) => {
                    if (valid) {
                        this.rectifyForm.rectifyImages = this.fileList.map(item => {
                            return item.url.substring(process.env.IMG_API.length)
                        })
                        let res = await submitHiddenDangerReport(this.rectifyForm);
                        if (res.data.code === '200') {
                            this.$message({
                                type: 'success',
                                message: '整改提交成功',
                                duration: 2000
                            });
                            this.isShowRectifyDialog = false;
                            this.$emit('refreshRectify');
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请完善基本信息'
                        });
                    }
                });
            },

            submitDelay() {
                this.$refs["delayFormRef"].validate(async (valid) => {
                    if (valid) {
                        let res = await delayHiddenDangerReport(this.delayForm);
                        if (res.data.code === '200') {
                            this.$message({
                                type: 'success',
                                message: '隐患延期成功',
                                duration: 2000
                            });
                            this.isShowDelayDialog = false;
                            this.$emit('refreshRectify');
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请完善基本信息'
                        });
                    }
                });
            },

            trigger2Submit(){
                let formData = new FormData();
                formData.append('id',this.dataForm.id)
@@ -249,13 +381,93 @@
                        this.submiting = false
                    })
            },
            handleChange(file, fileList) {
                this.fileList = fileList

            async getDepartmentData(){
                let res = await getDepartmentList({pageSize:1000,pageIndex:1})
                if(res.data.code === '200'){
                    this.departmentList = res.data.result.result
                }else{
                    this.$message({
                        message:res.data.message,
                        type:'warning'
                    })
                    if(res.data.code === '50001'){
                        this.riskSourceData = []
                    }
                }
            },

            async getUser(){
                let res = await safetyInspectionItemName()
                if(res.data.code === '200'){
                    this.userList = res.data.result
                }else{
                    this.$message({
                        message:res.data.message,
                        type:'warning'
                    })
                }
            },

            handleChangeFile(){
                this.header.Authorization = Cookies.get('token')
            },
            onFileSuccess(response){
                if(response.code === '200'){
                    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;
            },
            showImg(file){
                window.open(file, '_blank')
            },
            handleRemove(file,value){
                return this.$confirm(`确定移除 ${ file.uid }？`,'提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning',
                }).then(()=> {
                    this.fileList.splice(value,1)
                })
            },
        }
    }
</script>

<style scoped>
.basic_search{
    display:inline-block;
    padding-bottom: 10px;
}
.analyseUnit_input{
    width:90%;
}
.analyseUnit_box{
    width:200px;
}

.img-wrapper{
    width:100px;
    height: 100px;
    margin: 10px;
    border-radius: 2px
}
.img-wrapper:first-child{
    margin-left: unset !important;
}

</style>