FE-V2-PC/src/views/safetyCheck/components/addPage/addPage.vue

<template>
  <div class="inspectionManagement-addPage" v-loading.fullscreen.lock="loading">
    <div class="title-max-box">
      <p class="title-p">{{addPageTitle}}</p>
      <p class="title-button add-button-one-90" @click="outButton">返回</p>
      <img class="position-img" v-if="addForm.checkRange == 1" src="@/assets/ZDimages/safetyCheck/icon_xyxc_qx.png">
      <img class="position-img" v-if="addForm.checkRange == 2" src="@/assets/ZDimages/safetyCheck/icon_xyxc_xy.png">
      <img class="position-img" v-if="addForm.checkRange == 3" src="@/assets/ZDimages/safetyCheck/icon_xyxc_sys.png">
    </div>
    <div class="content-max-box scrollbar-box">
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="82px">
        <div class="top-form-box">
          <div class="top-form-left-box">
            <el-form-item label="计划标题" prop="title">
              <el-input disabled v-model="addForm.title" placeholder="未填写" style="width: 690px"/>
            </el-form-item>
            <div style="display: flex">
              <el-form-item label="学院" prop="collegeName">
                <el-input disabled v-model="addForm.collegeName" placeholder="未填写" style="width: 300px"/>
              </el-form-item>
              <el-form-item label="实验室" prop="subjectName" label-width="110px">
                <el-input disabled v-model="addForm.subjectName" placeholder="未填写" style="width: 280px"/>
              </el-form-item>
            </div>
            <el-form-item label="检查要求" prop="checkDemand">
              <p style="background-color: #f5f5f5;color:#333;border-radius:4px;width:690px;padding:10px 15px;font-size:14px;line-height:20px;min-height:40px;">{{addForm.checkDemand}}<span v-if="!addForm.checkDemand" style="color:#999;">未输入</span></p>
              <!--<el-input disabled v-model="addForm.checkDemand" placeholder="未填写" style="width: 690px"/>-->
            </el-form-item>
            <el-form-item label="检查结果" prop="checkResult">
              <el-select v-model="addForm.checkResult" @change="checkResultChange" placeholder="请选择检查结果" style="width: 690px">
                <el-option :key="0" label="不符合" :value="0"></el-option>
                <el-option :key="1" label="符合" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="整改通知" prop="rectifyNotice" v-if="addForm.checkResult === 0">
              <el-radio-group v-model="addForm.rectifyNotice" style="margin-top:5px;">
                <el-radio :label="1">整改告知书</el-radio>
                <el-radio :label="2">整改通知书</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="top-form-right-box">
            <el-form-item label="检查类型" prop="checkType">
              <p style="background-color: #f5f5f5;width:450px;padding:0 15px;line-height:40px;border-radius:4px;">{{addForm.checkType==1?'校院巡查':(addForm.checkType==2?'实验室自查':'')}}</p>
            </el-form-item>
            <el-form-item label="楼栋" prop="buildName">
              <el-input disabled v-model="addForm.buildName" placeholder="未填写" maxLength="10" style="width: 450px"/>
            </el-form-item>
            <el-form-item :label="addForm.checkType==1?'计划周期':(addForm.checkType==2?'任务周期':'')" prop="data9">
              <el-input disabled v-model="addForm.cycleStartTime+' 至 '+addForm.cycleEndTime" placeholder="未填写" maxLength="10" style="width: 450px"/>
            </el-form-item>
            <el-form-item label="整改期限" prop="rectifyDeadline" v-if="addForm.checkResult === 0">
              <el-date-picker
                style="width: 450px"
                v-model="addForm.rectifyDeadline"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                :clearable="false"
                placeholder="选择整改期限">
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="bottom-form-box" v-if="addForm.checkResult === 0">
          <div class="bottom-form-title-box">
            <p>不符合项</p>
            <p>隐患数：{{addForm.checkHazardDtoList.length}}</p>
          </div>
          <div class="for-max-big-box" v-for="(item,index) in addForm.checkHazardDtoList" :key="index">
            <div class="for-title-box">
              <p class="for-title-p">第{{index+1}}隐患项</p>
              <div class="for-del-box">
                <p class="el-icon-delete"></p>
                <p @click="delCheckHazardDtoList(index)">删除此项</p>
              </div>
              <div class="for-button-box" @click="dataLookButton(item)">
                <p :class="item.lookType?'el-icon-arrow-up':'el-icon-arrow-down'"></p>
                <p>{{item.lookType?'收起':'展开'}}</p>
              </div>
            </div>
            <div class="for-big-box" v-if="item.lookType">
              <el-form-item label="隐患等级" :prop="'checkHazardDtoList.'+index+'.hazardLevel'" :rules="rules.hazardLevel" label-width="123px">
                <el-select v-model="item.hazardLevel" clearable placeholder="请选择隐患等级" style="width: 408px">
                  <el-option :key="2" label="一般隐患" :value="2"></el-option>
                  <el-option :key="1" label="重大隐患" :value="1"></el-option>
                  <el-option :key="3" label="管理问题" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="检查项目" :prop="'checkHazardDtoList.'+index+'.hazardCheckPro'" :rules="rules.hazardCheckPro" label-width="123px">
                <el-cascader
                  @change="(val)=>cascaderChange(val,index)"
                  v-model="item.hazardCheckPro"
                  style="width: 898px"
                  placeholder="请选择检查项"
                  :options="options"
                  :props="{ checkStrictly: false, value: 'id', label: 'labelName',emitPath:false }"
                  filterable>
                  <template slot-scope="{data}">
                    <el-tooltip :content="data.labelName" v-if="data.labelName.length>22">
                      <p style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
                    </el-tooltip>
                    <p v-else style="max-width:300px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{data.labelName}}</p>
                  </template>
                </el-cascader>
                <p class="hazard-check-count-p" v-if="hazardCheckCount>0">此检查项在当前实验室累计出现 <span>{{hazardCheckCount}}</span> 次隐患</p>
              </el-form-item>
              <el-form-item label="检查要点" label-width="123px">
                <el-input
                  style="width: 898px"
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 6}"
                  placeholder="未查到此项检查要点，可在此输入添加"
                  resize="none"
                  maxlength="100"
                  show-word-limit
                  v-model="item.hazardCheckPoint">
                </el-input>
              </el-form-item>
              <el-form-item label="隐患描述" :prop="'checkHazardDtoList.'+index+'.hazardDescribe'" :rules="rules.hazardDescribe" label-width="123px">
                <el-input
                  style="width: 898px"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入隐患描述"
                  resize="none"
                  maxlength="100"
                  show-word-limit
                  v-model="item.hazardDescribe">
                </el-input>
              </el-form-item>
              <el-form-item label="隐患照片" :prop="'checkHazardDtoList.'+index+'.uploadDtoList'" :rules="rules.uploadDtoList" label-width="123px">
                <div class="for-img-box" v-for="(img,imgIndex) in item.uploadDtoList" :key="imgIndex">
                  <img class="for-img" :src="img.fileUrl" @click="lookImg(item.uploadDtoList,imgIndex)">
                  <p class="for-del-button el-icon-circle-close" @click="delImg(index,imgIndex)"></p>
                </div>
                <el-upload
                  style="display: inline-block;overflow: hidden"
                  v-if="item.uploadDtoList.length<5"
                  class="avatar-uploader"
                  :action="uploadImgUrl"
                  :show-file-list="false"
                  :on-success="(res)=>handleAvatarSuccess(res,item)"
                  :headers="headers"
                  :before-upload="(res)=>beforeAvatarUpload(res,item)">
                  <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
                </el-upload>
              </el-form-item>
              <el-form-item label="" label-width="123px" style="margin-bottom:40px;">
                <p>支持jpg/png/bmp/gif格式，且不超过2M，最多上传5张</p>
              </el-form-item>
            </div>
          </div>
          <p class="add-bottom-button" @click="addObject">+新增隐患检查项</p>
        </div>
      </el-form>
    </div>
    <div class="bottom-button-max-box">
      <p></p>
      <p class="reset-button-one" @click="outButton">取消</p>
      <p class="add-button-two-90" @click="upDataButton(1)">保存</p>
      <p class="inquire-button-one" @click="upDataButton(2)">提交</p>
    </div>
    <lookImgDialog ref="lookImgDialog"></lookImgDialog>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
  import { findCheckManage,checkOptionList,checkManageUpdate,countHazardNum } from '@/api/safetyCheck/index'
  export default {
    name: 'addPage',
    props:{
      propsAddData:{},
    },
    components: {
      lookImgDialog,
    },
    data(){
      return{
        loading:false,
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        //期限时间
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
          }
        },
        addPageTitle:"",
        //新增-编辑
        options:[],
        addForm:{},
        //上传用名称保存
        upDataName:"",
        // 表单校验
        rules: {
          checkResult: [
            { required: true, message: "请选择检查结果", trigger: "blur" },
          ],
          rectifyNotice: [
            { required: true, message: "请选择整改通知", trigger: "blur" },
          ],
          rectifyDeadline: [
            { required: true, message: "请选择整改期限", trigger: "blur" },
          ],
          hazardLevel: [
            { required: true, message: "请选择隐患等级", trigger: "blur" },
          ],
          hazardCheckPro: [
            { required: true, message: "请选择检查项目", trigger: "blur" },
          ],
          hazardDescribe: [
            { required: true, message: "请输入隐患描述", trigger: "blur" },
            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "blur" },
          ],
          uploadDtoList: [
            { required: true, message: "请上传隐患照片", trigger: "blur" },
          ],
        },
        //隐患发生次数
        hazardCheckCount:0,
      }
    },
    created(){
      this.$set(this,'addPageTitle',this.propsAddData.title);
      this.checkOptionList();
      this.findCheckManage();
    },
    mounted(){},
    methods:{
      //保存/提交按钮
      upDataButton(type){
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(this.addForm));
            if(obj.checkResult === 0){
              if(!obj.checkHazardDtoList[0]){
                this.msgError('请添加隐患检查项')
                return
              }
              for(let i=0;i<obj.checkHazardDtoList.length;i++){
                delete obj.checkHazardDtoList[i].lookType
              }
              obj.dangerNum = obj.checkHazardDtoList.length
            }else{
              obj.checkHazardDtoList = [];
            }
            obj.manageStatus = type
            checkManageUpdate(obj).then(response => {
              this.msgSuccess(response.msg);
              this.$parent.goAddPage(4);
            });
          }
        })
      },
      //查询详情
      findCheckManage(){
        findCheckManage({id:this.propsAddData.id}).then(response => {
          response.data.checkResult = response.data.checkResult === 0 || response.data.checkResult === 1?response.data.checkResult:"";
          response.data.rectifyNotice = response.data.rectifyNotice?response.data.rectifyNotice:"";
          response.data.rectifyDeadline = response.data.rectifyDeadline?response.data.rectifyDeadline:"";
          for(let i=0;i<response.data.checkHazardDtoList.length;i++){
            response.data.checkHazardDtoList[i].lookType = true;
          }
          this.$set(this,'addForm',response.data);
        });
      },
      //返回事件
      outButton(){
        this.$parent.goAddPage(1);
      },
      // 删除图片
      delImg(index,imgIndex){
        this.addForm.checkHazardDtoList[index].uploadDtoList.splice(imgIndex,1);
      },
      //收起/展开
      dataLookButton(item){
        item.lookType = !item.lookType
      },
      //检查结果选中
      checkResultChange(val){
        if(val == 0){
          //不符合时如果没有检查项则写入一条
          if(!this.addForm.checkHazardDtoList[0]){
            this.addObject();
          }
        }
      },
      //新增检查
      addObject(){
        if(this.addForm.checkHazardDtoList.length<10){
          let obj = {
            hazardCheckCode:'',
            hazardCheckName:'',
            hazardCheckPoint:'',
            hazardCheckPro:'',
            hazardDescribe:'',
            hazardLevel:'',
            lookType:true,
            uploadDtoList:[],
          };
          this.addForm.checkHazardDtoList.push(obj);
        }
      },
      //删除检查项
      delCheckHazardDtoList(index){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.addForm.checkHazardDtoList.splice(index,1);
        }).then(() => {
        }).catch(() => {});
      },
      //检查项选中
      cascaderChange(val,index){
        let obj = this.getCascaderDataQuery(val,this.options);
        if(!obj){
          this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckPro','');
          this.msgError('未找到相关项目')
          return
        }
        this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckCode',obj.code);
        this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckName',obj.name);
        this.$set(this.addForm.checkHazardDtoList[index],'hazardCheckPoint',obj.mainPoint);
        countHazardNum({subId:this.addForm.subId, hazardCheckPro:val}).then( response => {
          this.$set(this,'hazardCheckCount',response.data);
        })
      },
      //查看图片
      lookImg(list,index){
        for(let i=0;i<list.length;i++){
          list[i].name = list[i].fileName;
          list[i].url = list[i].fileUrl;
        }
        this.$refs.lookImgDialog.lookImgDialogOpen(1,list,index);
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(res,item) {
        this.$set(this,'loading',false);
        if(item.uploadDtoList.length>4){
          this.msgError('最多只可上传5张')
          return
        }
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let obj ={
          fileName:this.upDataName,
          fileUrl:res.data.url,
          fileType:2,
          source:2,
        };
        item.uploadDtoList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file,item) {
        if(item.uploadDtoList.length>4){
          this.msgError('最多只可上传5张')
          return false
        }
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif' || file.type == 'image/bmp') {
          if(file.size> 2100000){
            this.msgError('上传图片大小不能超过2M')
            return false
          }
          this.$set(this,'loading',true);
          this.upDataName = file.name;
          type = true;
        }else{
          this.msgError('仅支持jpg/png/bmp/gif格式')
          type = false;
        }
        return type;
      },
      //获取检查项
      checkOptionList(){
        checkOptionList().then( response => {
          this.$set(this,'options',response.data);
          this.getCascaderData(this.options);
        })
      },
      //联级选择器数据处理
      getCascaderData(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          list[i].labelName = list[i].code? list[i].code +' '+ list[i].name:list[i].name
          if(list[i].level == 0 || list[i].level == 1 || list[i].level == 2){
            if(list[i].children){
              if(list[i].children[0]){
                self.getCascaderData(list[i].children)
                if(list[i].children){
                  if(!list[i].children[0]){
                    list.splice(i,1)
                    i--
                  }
                }else{
                  list.splice(i,1)
                  i--
                }
              }else{
                list.splice(i,1)
                i--
              }
            }else{
              list.splice(i,1)
              i--
            }
          }else{
            delete list[i].children
          }
        }
      },
      //联级选择器数据查询
      getCascaderDataQuery(text,list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(list[i].id == text){
            return list[i]
          }else{
            if(list[i].children){
              let obj = self.getCascaderDataQuery(text,list[i].children)
              if(obj){
                return obj
              }
            }
          }
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .inspectionManagement-addPage{
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    *{
      font-weight:500;
    }
    .title-max-box{
      position: relative;
      height:90px;
      display: flex;
      border-bottom:1px solid #dedede;
      .title-p{
        flex:1;
        color:#0045AF;
        margin-left:64px;
        line-height:90px;
        font-size:16px;
      }
      .title-button{
        width:70px;
        margin:24px 31px;
      }
      .position-img{
        width:80px;
        height:80px;
        position: absolute;
        top:0;
        left:0;
      }
    }
    .content-max-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .top-form-box{
        padding:40px 85px 20px;
        display: flex;
        .top-form-left-box{
          min-height:317px;
          width:770px;
          margin-right:90px;
        }
        .top-form-right-box{
          min-height:317px;
          width:534px;

        }
      }
      .bottom-form-box{
        .bottom-form-title-box{
          background: #F5F5F5;
          display: flex;
          margin-bottom:31px;
          p{
            font-size:16px;
            line-height:50px;
          }
          p:nth-child(1){
            color:#333;
            margin-left:30px;
            flex:1;
          }
          p:nth-child(2){
            color:#0183FA;
            margin-right:37px;
          }
        }
        .add-bottom-button{
          cursor: pointer;
          color:#0183FA;
          border-radius:4px;
          border:1px dashed #0183FA;
          width:800px;
          line-height:40px;
          text-align: center;
          font-size:14px;
          margin: 20px auto;
        }
      }
    }
    .for-max-big-box{
      border:1px solid #dedede;
      overflow: hidden;
      margin:0 81px;
      .for-title-box{
        display: flex;
        background: #F5F5F5;
        border-bottom:1px solid #dedede;
        line-height:50px;
        .for-title-p{
          color:#333333;
          font-size:16px;
          margin-left: 30px;
          flex:1;
        }
        .for-del-box{
          color:#0183FA;
          margin-left:46px;
          cursor: pointer;
          display: flex;
          p{
            font-size:14px;
            line-height:50px;
            margin-right:8px;
          }
        }
        .for-button-box{
          color:#0183FA;
          margin-left:46px;
          margin-right:43px;
          cursor: pointer;
          display: flex;
          p{
            font-size:14px;
            line-height:50px;
            margin-right:8px;
          }
        }
      }
      .for-big-box{
        height:540px;
        padding-top:27px;
        .up-img-p{
          height:80px;
          width:80px;
          line-height:80px;
          text-align: center;
          font-size:16px;
          border-radius:4px;
          border:1px dashed #E0E0E0;
        }
        .for-img-box{
          width:80px;
          height:80px;
          border-radius:4px;
          display: inline-block;
          overflow: hidden;
          margin-right:20px;
          position: relative;
          .for-img{
            width:80px;
            height:80px;
            display: inline-block;
            overflow: hidden;
            cursor: pointer;
          }
          .for-del-button{
            background: rgba(0,0,0,0.7);
            width:20px;
            height:20px;
            line-height: 20px;
            text-align: center;
            color:#fff;
            border-bottom-left-radius:4px;
            cursor: pointer;
            position: absolute;
            top:0;
            right:0;
          }
        }
        .hazard-check-count-p{
          display: inline-block;
          margin-left: 20px;
          font-size: 14px;
          line-height: 40px;
          span{
            color:#FF0000;
          }
        }
      }
    }
    .bottom-button-max-box{
      height:80px;
      display: flex;
      border-top:1px solid #dedede;
      p{
        margin-top:20px;
      }
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        width:90px;
        margin-right:20px;
      }
      p:nth-child(3){
        width:90px;
        margin-right:20px;
      }
      p:nth-child(4){
        width:90px;
        margin-right:20px;
      }
    }
  }
  ::v-deep .is-disabled{
    .el-input__inner{
      background-color: #f5f5f5;
      color: #333;
      border-color: #f5f5f5;
      cursor:auto;
    }
  }
</style>