项目

Your Name

2022-08-25 6c6e0514283c7ff3016b845b600186b464e616c4

 src/views/doublePreventAction/hiddenDanger/hiddenDangerReform/report/components/reportDialog.vue

@@ -1,91 +1,166 @@
<template>
    <el-dialog title="新增" :visible.sync="dialogFormVisible"  :close-on-click-modal="false" width="800px">
    <el-dialog :title="title" :visible.sync="dialogFormVisible"  :close-on-click-modal="false" width="50%">
        <el-form ref="dataForm" :rules="dataFormRules" :model="dataForm" label-position="right" label-width="140px" style="" element-loading-text="保存中...">
            <el-form-item label="隐患级别：" prop="level">
                <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-row :gutter="25">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="隐患描述" prop="dangerDesc">
                        <el-input class="analyseUnit_input" v-model.trim="dataForm.dangerDesc" placeholder="请输入隐患情况描述" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="隐患名称" prop="dangerCode">
                        <el-input class="analyseUnit_input" v-model.trim="dataForm.dangerCode" placeholder="请输入隐患名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="隐患所属部门" prop="depId">
                        <el-select v-model="dataForm.depId" class="analyseUnit_input" placeholder="请选择所属部门">
                            <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-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="生产装置" prop="produceDeviceId">
                        <el-select class="analyseUnit_input" v-model="dataForm.produceDeviceId" placeholder="请输入生产装置" clearable filterable @change="changeUnit">
                            <el-option v-for="item in allProduceDeviceData" :key="item.id" :label="item.produceDeviceName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="风险分析单元" prop="riskUnitId">
                        <el-select class="analyseUnit_input" v-model.trim="dataForm.riskUnitId" placeholder="请输入风险分析单元" clearable filterable>
                            <el-option v-for="item in safetyRiskUnitData" :key="item.id" :label="item.riskUnitName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="隐患来源" prop="dangerSource">
                        <el-select class="analyseUnit_input" v-model="dataForm.dangerSource" placeholder="请选择隐患来源" clearable filterable>
                            <el-option v-for="item in dangerSourceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            <el-form-item label="选择整改人：" prop="rectifier">
                <el-input v-model="dataForm.rectifier" readonly style="width: 205px"  placeholder="请选择" >
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="隐患等级" prop="dangerLevel">
                        <el-select class="analyseUnit_input" v-model="dataForm.dangerLevel" placeholder="请选择隐患等级" clearable filterable>
                            <el-option v-for="item in dangerLevelList" :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="12" class="mb20">
                    <el-form-item label="隐患类型" prop="dangerType">
                        <el-select class="analyseUnit_input" v-model="dataForm.dangerType" placeholder="请选择隐患类型" clearable filterable>
                            <el-option v-for="item in dangerTypeList" :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="12" class="mb20">
                    <el-form-item label="隐患可能后果" prop="dangerResult">
                        <el-select class="analyseUnit_input" v-model="dataForm.dangerResult" placeholder="请选择隐患可能后果" clearable filterable>
                            <el-option v-for="item in dangerResultList" :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="12">
                    <el-form-item label="隐患产生原因" prop="dangerReason">
                        <el-input class="analyseUnit_input" type="textarea" :rows="2" style="padding-bottom: 10px" v-model.trim="dataForm.dangerReason" placeholder="请输入隐患产生原因"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="整改类型" prop="rectifyType">
                        <el-select class="analyseUnit_input" v-model="dataForm.rectifyType" placeholder="请选择整改类型" clearable filterable>
                            <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="12" 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="dataForm.rectifyTime" placeholder="请选择整改期限" clearable> </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="整改部门" prop="rectifyDepId">
                        <el-select v-model="dataForm.rectifyDepId" class="analyseUnit_input"  @change="changeExec" 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-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" 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 execUidList" :key="item.id" :label="item.realname" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                </el-input>
                <el-button style="margin-left: 10px;" type="primary"
                           @click="showPersonSelect">选择
                </el-button>
            </el-form-item>

            <el-form-item label="整改措施：" prop="rectifymeasure">
                <el-input
                    style="width: 400px"
                    type="textarea"
                    :rows="3"
                    :disabled="isView"
                    placeholder="请输入内容"
                    v-model="dataForm.rectifymeasure">
                </el-input>
            </el-form-item>
            <el-form-item label="整改期限：" prop="rectifydeadline">
                <el-date-picker
                    v-model="dataForm.rectifydeadline"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="上报说明：" prop="note">
                <el-input
                    style="width: 400px"
                    type="textarea"
                    :rows="3"
                    :disabled="isView"
                    placeholder="请输入内容"
                    v-model="dataForm.note">
                </el-input>
            </el-form-item>

            <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" >
                <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;"
                >
                </el-image>
            </el-form-item>

                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="mb20">
                    <el-form-item label="整改资金" prop="cost">
                        <el-input class="analyseUnit_input" type="number" v-model="dataForm.cost" placeholder="请选择整改资金"> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
                    <el-form-item label="整改措施" prop="rectifyDesc">
                        <el-input class="analyseUnit_input" type="textarea" :rows="2" style="padding-bottom: 10px" v-model.trim="dataForm.rectifyDesc" placeholder="请输入整改措施"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="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="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 style="margin-top: 20px;margin-left: 140px;"  class="dialog-footer" v-if="!isView">
        <div align="right" class="dialog-footer" v-if="!isView">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="trigger2Submit" :disabled="submiting">上报</el-button>
        </div>
@@ -97,18 +172,60 @@
    import personSelect from './personSelect'
    import { hiddenDangerReport } from '@/api/hiddenDanger';
    import {getToken} from "@/utils/auth";
    import {modHiddenDangerReport} from "../../../../../../api/hiddenDanger";
    import Cookies from "_js-cookie@2.2.0@js-cookie";
    export default {
        name: "reportDialog",
        data(){
            return {
                baseUrl: process.env.BASE_API + 'hiddenDanger/report',
                headers: {
                    'Authorization': getToken()
                disabled:false,
                title:'',
                fileRoad:process.env.BASE_API + '/task/web/upload',
                uploadForm:{
                },
                header:{Authorization:''},
                submiting:false,
                levels:[
                    {"key":"URGENT","value":"重大隐患"},
                    {"key":"COMMON","value":"一般隐患"},
                departmentList: [],
                userList: [],
                execUidList:[],
                allProduceDeviceData: [],
                allSafetyRiskUnitData: [],
                safetyRiskUnitData: [],
                dangerLevelList: [
                    { id: 1, name: '一般隐患' },
                    { id: 2, name: '重大隐患' }
                ],
                dangerSourceList: [
                    { id: 1, name: '日常排查' },
                    { id: 2, name: '综合性排查' },
                    { id: 3, name: '专业性排查' },
                    { id: 4, name: '季节性排查' },
                    { id: 5, name: '重点时段及节假日前排查' },
                    { id: 6, name: '事故类比排查' },
                    { id: 7, name: '复产复工前排查' },
                    { id: 8, name: '外聘专家诊断式排查' },
                    { id: 9, name: '管控措施失效' },
                    { id: 10, name: '其他' }
                ],
                dangerResultList: [
                    { id: 1, name: '无' },
                    { id: 2, name: '轻伤' },
                    { id: 3, name: '重伤' },
                    { id: 4, name: '死亡' }
                ],
                dangerTypeList: [
                    { id: 1, name: '安全' },
                    { id: 2, name: '工艺' },
                    { id: 3, name: '电气' },
                    { id: 4, name: '仪表' },
                    { id: 5, name: '消防' },
                    { id: 6, name: '总图' },
                    { id: 7, name: '设备' },
                    { id: 8, name: '其他' }
                ],
                rectifyTypeList: [
                    { id: 1, name: '即查即改' },
                    { id: 2, name: '限期整改' }
                ],
                pickerOptions:{
                    disabledDate(now){
@@ -117,19 +234,41 @@
                },
                fileList: [],
                dataForm: {
                    rectifydeadline:'',
                    rectifymeasure:'',
                    rectifier:'',
                    rectifierid:'',
                    note: '',
                    level:''
                    dangerDesc: null,
                    dangerCode: null,
                    depId: null,
                    produceDeviceId: null,
                    riskUnitId: null,
                    dangerSource: null,
                    dangerLevel: null,
                    dangerType: null,
                    dangerReason: null,
                    dangerResult: null,
                    rectifyType: null,
                    rectifyDepId: null,
                    liablePersonId: null,
                    rectifyTime: null,
                    cost: null,
                    rectifyDesc: null,
                    reportImage:[]
                },
                dataFormRules:{
                    level: [{ required: true, message: '隐患级别不能为空', trigger: 'change' }],
                    rectifier: [{ required: true, message: '整改人不能为空', trigger: 'change' }],
                    rectifymeasure: [{ required: true, message: '整改措施不能为空', trigger: 'blur' }],
                    rectifydeadline: [{ required: true, message: '整改期限不能为空', trigger: 'change' }],
                    note: [{ required: true, message: '上报说明不能为空', trigger: 'blur' }],
                    dangerDesc: [{ required: true, message: '请填写隐患情况描述', trigger: 'blur' }],
                    dangerCode: [{ required: true, message: '请填写隐患名称', trigger: 'blur' }],
                    depId: [{ required: true, message: '请选择隐患所属部门', trigger: 'change' }],
                    produceDeviceId: [{ required: true, message: '请选择生产装置', trigger: 'change' }],
                    riskUnitId: [{ required: true, message: '请选择风险分析单元', trigger: 'change' }],
                    dangerSource: [{ required: true, message: '请选择隐患来源', trigger: 'change' }],
                    dangerLevel: [{ required: true, message: '请选择隐患等级', trigger: 'change' }],
                    dangerType: [{ required: true, message: '请选择隐患类型', trigger: 'change' }],
                    dangerReason: [{ required: true, message: '请填写隐患产生原因分析', trigger: 'blur' }],
                    dangerResult: [{ required: true, message: '请选择隐患可能后果', trigger: 'change' }],
                    rectifyType: [{ required: true, message: '请选择整改类型', trigger: 'change' }],
                    rectifyDepId: [{ required: true, message: '请选择整改单位', trigger: 'change' }],
                    liablePersonId: [{ required: true, message: '请选择整改责任人', trigger: 'change' }],
                    rectifyTime: [{ required: true, message: '请选择整改期限', trigger: 'change' }],
                    cost: [{ required: true, message: '请选择整改资金', trigger: 'blur' }],
                    rectifyDesc: [{ required: true, message: '请填写整改内容', trigger: 'blur' }]
                },
                dialogFormVisible: false,
                isView:false,
@@ -141,57 +280,123 @@
        methods:{
            resetDataForm(){
                this.dataForm = {
                    rectifydeadline:'',
                    rectifymeasure:'',
                    rectifier:'',
                    rectifierid:'',
                    note: '',
                    level:''
                    dangerDesc: null,
                    dangerCode: null,
                    depId: null,
                    produceDeviceId: null,
                    riskUnitId: null,
                    dangerSource: null,
                    dangerLevel: null,
                    dangerType: null,
                    dangerReason: null,
                    dangerResult: null,
                    rectifyType: null,
                    rectifyDepId: null,
                    liablePersonId: null,
                    rectifyTime: null,
                    cost: null,
                    rectifyDesc: null
                }
            },
            show(){
            show(type, value, userList,departmentList, allProduceDeviceData, allSafetyRiskUnitData){
                this.title = type
                this.dialogFormVisible = true
                this.isView = false
                this.resetDataForm()
                this.userList = JSON.parse(JSON.stringify(userList))
                this.departmentList = departmentList;
                this.allProduceDeviceData = JSON.parse(JSON.stringify(allProduceDeviceData));
                this.allSafetyRiskUnitData = allSafetyRiskUnitData;
                if(type === '新增'){
                    this.dataForm = {
                        dangerDesc: null,
                        dangerCode: null,
                        depId: null,
                        produceDeviceId: null,
                        riskUnitId: null,
                        dangerSource: null,
                        dangerLevel: null,
                        dangerType: null,
                        dangerReason: null,
                        dangerResult: null,
                        rectifyType: null,
                        rectifyDepId: null,
                        liablePersonId: null,
                        rectifyTime: null,
                        cost: null,
                        rectifyDesc: null,
                        reportImages:[]
                    }
                }else if(type === '修改'){
                    console.log(value)
                    for( let key in this.dataForm){
                        this.dataForm[key] = JSON.parse(JSON.stringify(value))[key]
                    }
                    this.dataForm.id = JSON.parse(JSON.stringify(value)).id
                    this.fileList = value.reportImages.map(item => {
                        return {
                            url : process.env.IMG_API + item
                        }
                    })
                }

            },
            trigger2Submit(){
                this.$refs["dataForm"].validate(valid =>{
                    if(valid){
                        this.submiting = true
                        let formData = new FormData()
                        formData.append('rectifier', this.dataForm.rectifier)
                        formData.append("rectifierid",this.dataForm.rectifierid)
                        formData.append("level",this.dataForm.level)
                        formData.append("rectifymeasure",this.dataForm.rectifymeasure)
                        formData.append("rectifydeadline",this.dataForm.rectifydeadline)
                        formData.append("note",this.dataForm.note)
                        this.fileList.forEach(file=>{
                            formData.append("files",file.raw)
                        this.dataForm.reportImages = this.fileList.map(item => {
                            return item.url.substring(process.env.IMG_API.length)
                        })
                        hiddenDangerReport(formData).then(res=>{
                            if (res.data.code === '200') {
                                this.dialogFormVisible = false
                        if(this.title === '新增'){
                            this.submiting = true
                            hiddenDangerReport(this.dataForm).then(res=>{
                                if (res.data.code === '200') {
                                    this.dialogFormVisible = false
                                    this.$message({
                                        message: '创建成功',
                                        type: 'success'
                                    });
                                    this.$emit("refresh")
                                }else{
                                    this.$message({
                                        message: res.data.message,
                                        type: 'warning'
                                    });
                                }
                            }).catch(err=>{
                                console.log(err)
                                this.$message({
                                    message: '创建成功',
                                    type: 'success'
                                });
                                this.$emit("refresh")
                            }else{
                                this.$message({
                                    message: res.data.message,
                                    message: "接口错误,请联系管理员",
                                    type: 'warning'
                                });
                            }
                            this.fileList = []
                            }).catch(err=>{
                            console.log(err)
                            this.$message({
                                message: "接口错误,请联系管理员",
                                type: 'warning'
                            });
                        }).finally(()=>{
                            }).finally(()=>{
                                this.submiting = false
                        })
                            })
                        }else{
                            this.submiting = true
                            modHiddenDangerReport(this.dataForm).then(res=>{
                                if (res.data.code === '200') {
                                    this.dialogFormVisible = false
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    this.$emit("refresh")
                                }else{
                                    this.$message({
                                        message: res.data.message,
                                        type: 'warning'
                                    });
                                }
                            }).catch(err=>{
                                console.log(err)
                                this.$message({
                                    message: "接口错误,请联系管理员",
                                    type: 'warning'
                                });
                            }).finally(()=>{
                                this.submiting = false
                            })
                        }

                    }else{
                        this.$message({
                            type:'warning',
@@ -199,8 +404,21 @@
                        })
                    }
                })

            },

            changeUnit() {
                this.dataForm.riskUnitId = null;
                this.safetyRiskUnitData = this.allSafetyRiskUnitData.filter((item) => item.produceDeviceId === this.dataForm.produceDeviceId);
            },

            changeExec(){
                if(this.dataForm.rectifyDepId === '') {
                    this.execUidList = []
                }
                this.dataForm.liablePersonId = ''
                this.execUidList = this.userList.filter ( item => item.department === this.dataForm.rectifyDepId)
            },

            showPersonSelect(){
                this.$refs.selectPerson.show();
            },
@@ -210,17 +428,57 @@
            },


            handleChange(file, fileList) {
                this.fileList = fileList
            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;
}
    .el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
        display: none;
    }