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

<template>
  <div class="inspectionManagement-infoPage">
    <div class="title-max-box">
      <p class="title-p">检查详情</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  :model="addForm" 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>
            <el-form-item label="检查组织" prop="checkType">
              <p style="background-color: #f5f5f5;color:#333;border-radius:4px;width:690px;padding:0 15px;">{{addForm.checkCategory==1?'综合检查':(addForm.checkCategory==2?'专项检查':'')}}</p>
            </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.roomNumber?addForm.subjectName+'-'+addForm.roomNumber: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" v-if="addForm.checkResult">
              <p style="background-color: #f5f5f5;color:#333;border-radius:4px;width:690px;padding:0 15px;">{{addForm.checkResult==0?'不符合':(addForm.checkResult==1?'符合':'')}}</p>
            </el-form-item>
            <div style="display: flex">
              <el-form-item v-if="addForm.checkResult==0" :label="addForm.rectifyNotice == 1?'整改告知书':'整改通知书'" style="width: 300px">
                <div class="data-button-box">
                  <p class="look-button" @click="lookDocumentButton(1)">查看</p>
                  <p class="download-button" @click="downloadButton">下载</p>
                </div>
              </el-form-item>
              <el-form-item label="材料附件" style="width: 300px" v-if="addForm.checkResult!=1&&addForm.isAttachment == 1">
                <div class="data-button-box">
                  <p class="look-button" @click="lookDocumentListButton(1)">查看</p>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="top-form-right-box">
            <el-form-item label="检查组织" prop="checkType">
              <p style="background-color: #f5f5f5;color:#333;border-radius:4px;width:450px;padding:0 15px;">{{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-input disabled v-model="addForm.rectifyDeadline" placeholder="未填写" maxLength="10" style="width: 450px"/>
            </el-form-item>
            <el-form-item label="材料附件" style="width: 450px" v-if="addForm.checkResult==1&&addForm.isAttachment == 1">
              <div class="data-button-box">
                <p class="look-button" @click="lookDocumentListButton(1)">查看</p>
              </div>
            </el-form-item>
          </div>
        </div>
        <!--综合检查-->
        <div class="bottom-form-box" v-if="addForm.checkResult==0 && addForm.checkCategory==1">
          <div class="bottom-form-title-box">
            <p>不符合项</p>
            <p>隐患数：{{addForm.dangerNum}}</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>
            <div class="for-content-box">
              <div class="content-box">
                <div class="min-content-box">
                  <div class="left-min-content-box">
                    <p></p>
                    <p>隐患状态</p>
                    <p></p>
                  </div>
                  <div class="right-min-content-box">
                    <p class="button-p" @click="addDialogOpen(true,item)">{{item.rectifyStatus==1?'已完成':(item.rectifyStatus==2?'待整改':(item.rectifyStatus==3?'待复核':(item.rectifyStatus==4?'暂无法整改':'')))}} <i class="el-icon-d-arrow-right"></i></p>
                  </div>
                </div>
                <div class="min-content-box">
                  <div class="left-min-content-box">
                    <p></p>
                    <p>检查项目</p>
                    <p></p>
                  </div>
                  <div class="right-min-content-box" style="height:120px;">
                    <div class="inspection-box">
                      <p class="scrollbar-box">{{item.hazardCheckProStr}}</p>
                      <p v-if="item.hazardCheckCount>0">此检查项在当前实验室累计出现 <span>{{item.hazardCheckCount}}</span> 次隐患</p>
                    </div>
                  </div>
                </div>
                <div class="min-content-box">
                  <div class="left-min-content-box">
                    <p></p>
                    <p>隐患描述</p>
                    <p></p>
                  </div>
                  <div class="right-min-content-box" style="height:120px;">
                    <div class="text-box">
                      <p class="null-p"></p>
                      <p class="text-p scrollbar-box">{{item.hazardDescribe}}</p>
                      <p class="null-p"></p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="content-box">
                <div class="min-content-box">
                  <div class="left-min-content-box">
                    <p></p>
                    <p>隐患等级</p>
                    <p></p>
                  </div>
                  <div class="right-min-content-box">
                    <p class="title-p">{{item.hazardLevel==2?'一般隐患':(item.hazardLevel==1?'重大隐患':(item.hazardLevel==3?'管理问题':''))}}</p>
                  </div>
                </div>
                <div class="min-content-box">
                  <div class="left-min-content-box">
                    <p></p>
                    <p>检查要点</p>
                    <p></p>
                  </div>
                  <div class="right-min-content-box" style="height:120px;">
                    <div class="text-box">
                      <p class="null-p"></p>
                      <p class="text-p scrollbar-box">{{item.hazardCheckPoint}}</p>
                      <p class="null-p"></p>
                    </div>
                  </div>
                </div>
                <div class="min-content-box">
                  <div class="left-min-content-box">
                    <p></p>
                    <p>隐患照片</p>
                    <p></p>
                  </div>
                  <div class="right-min-content-box" style="height:120px;">
                    <div class="img-box">
                      <img :src="imgItem.fileUrl" @click="lookImg(item.uploadDtoList,imgIndex)"
                           v-for="(imgItem,imgIndex) in item.uploadDtoList" :ley="imgIndex">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--专项检查项-->
        <div class="bottom-form-box" v-if="(addForm.checkResult==0||addForm.checkResult==1) && addForm.checkCategory==2">
          <div class="bottom-form-title-box">
            <p>检查项</p>
            <p>检查项：{{addForm.checkHazardInfoVoList.length}}</p>
          </div>
          <div class="for-max-big-box for-max-big-box-special" v-for="(item,index) in addForm.checkHazardInfoVoList" :key="index">
            <div class="for-title-box">
              <p class="for-title-p">{{index+1}}、【{{item.hazardName}}{{item.hazardName}}】专项检查</p>
              <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 for-big-box-special" v-if="item.lookType" v-for="(item2,index2) in item.checkHazardDtoList">
              <el-form-item label="检查项目"  label-width="123px">
                <el-radio-group v-model="item2.checkFlag" style="margin-right: 20px;" disabled>
                  <el-radio :label="1">符合</el-radio>
                  <el-radio :label="0">不符合</el-radio>
                </el-radio-group>
                <el-cascader
                  disabled
                  @change="(val)=>cascaderChange(val,item2,index2)"
                  v-model="item2.hazardCheckPro"
                  style="width: 730px"
                  placeholder="请选择检查项"
                  :options="options"
                  :props="{ checkStrictly: false, value: 'id', label: 'labelName',emitPath:false }"
                  popper-class="cascader-filterable-hazardCheckPro"
                  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="button-p" v-if="item2.checkFlag==0" @click="addDialogOpen(true,item2)">{{item2.rectifyStatus==1?'已完成':(item2.rectifyStatus==2?'待整改':(item2.rectifyStatus==3?'待复核':(item2.rectifyStatus==4?'暂无法整改':'')))}} <i class="el-icon-d-arrow-right"></i></p>
              </el-form-item>
              <el-form-item v-if="item2.checkFlag==0" label="隐患等级"  label-width="123px">
                <el-select v-model="item2.hazardLevel" clearable placeholder="请选择隐患等级" style="width: 408px" disabled>
                  <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 v-if="item2.checkFlag==0" label="隐患描述"  label-width="123px" >
                <el-input
                  disabled
                  style="width: 898px"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入隐患描述"
                  resize="none"
                  maxlength="100"
                  show-word-limit
                  v-model="item2.hazardDescribe">
                </el-input>
              </el-form-item>
              <el-form-item label="语音备注：" label-width="123px" class="el-form-item-bottom" v-if="item2.voiceRemark[0]">
                <div class="audio-box" v-for="(voiceItem,voiceIndex) in item2.voiceRemark" :key="voiceIndex">
                  <audio controls :src="voiceItem.url"></audio>
                </div>
              </el-form-item>
              <el-form-item v-if="item2.checkFlag==0" label="隐患照片"  label-width="123px">
                <div class="for-img-box" v-for="(img,imgIndex) in item2.uploadDtoList" :key="imgIndex">
                  <img class="for-img" :src="img.fileUrl" @click="lookImg(item2.uploadDtoList,imgIndex)">
                </div>
              </el-form-item>
            </div>
          </div>
        </div>

      </el-form>
    </div>
    <lookImgDialog ref="lookImgDialog"></lookImgDialog>
    <infoDialog v-if="infoDialogType" :propsInfoDialogData="propsInfoDialogData"></infoDialog>
    <lookDocumentDataDialog v-if="lookDocumentType" :propsLookDocumentData="propsLookDocumentData"></lookDocumentDataDialog>
    <lookDocumentListDialog v-if="lookDocumentListType" :propsLookDocumentListData="propsLookDocumentListData"></lookDocumentListDialog>
  </div>
</template>

<script>
import { checkOptionList, findCheckManage, getFindByCheckPlanId } from '@/api/safetyCheck/index'
  import lookImgDialog from '@/components/lookImgDialog/lookImgDialog.vue'
  import lookDocumentDataDialog from '@/components/lookDocumentDialog/lookDocumentDataDialog.vue'
  import lookDocumentListDialog from '@/components/lookDocumentDialog/lookDocumentListDialog.vue'
  import infoDialog from '@/views/safetyCheck/components/infoDialog/infoDialog.vue'
import { getToken } from '@/utils/auth'
  export default {
    name: 'infoPage',
    props:{
      propsInfoData:{},
    },
    components: {
      lookImgDialog,
      infoDialog,
      lookDocumentDataDialog,
      lookDocumentListDialog
    },
    data(){
      return{
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        //子组件数据
        lookDocumentType:false,
        propsLookDocumentData:{},
        lookDocumentListType:false,
        propsLookDocumentListData:{},
        propsInfoDialogData:{},
        //页面
        imgType:1,
        infoDialogType:false,
        addForm:{},
        options:[],
      }
    },
    created(){},
    mounted(){
      this.checkOptionList();
      this.findCheckManage();
    },
    methods:{
      //查询详情
      findCheckManage(){
        findCheckManage({id:this.propsInfoData.id}).then(response => {
          if(response.data.checkCategory==2){
            if(response.data.checkHazardInfoVoList[0]){
              response.data.checkHazardInfoVoList.forEach(function(item) {
                item.lookType = true;
                item.checkHazardDtoList.forEach(function(item2) {
                  item2.hazardCheckCode=item2.code
                  item2.voiceRemark=JSON.parse(item2.voiceRemark)
                })
              })
            }
          }
          this.$set(this,'addForm',response.data);
          console.log(this.addForm)
        });

      },
      //开关详情页面
      addDialogOpen(type,data){
        if(this.infoDialogType != type){
          if(type){
            let obj = {
              id:data.id
            }
            console.log(obj)
            this.$set(this,'propsInfoDialogData',obj);
            this.$set(this,'infoDialogType',type);
          }else{
            this.$set(this,'infoDialogType',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 || list[i].level == 3){
            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
          }
        }

      },
      //返回事件
      outButton(){
        this.$parent.goAddPage(1);
      },
      //收起/展开
      dataLookButton(item){
        item.lookType = !item.lookType
      },
      //查看图片
      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);
      },
      // 单个下载按钮
      downloadButton(){
        if(this.addForm.rectifyNotice == 1){
          //告知
          this.download('/zd-security/checkManage/getRectifyNotification/'+this.addForm.id, {}, this.addForm.title+'(整改告知书).docx')
        }else if(this.addForm.rectifyNotice == 2){
          //通知
          this.download('/zd-security/checkManage/getRectifyAdviceNote/'+this.addForm.id, {}, this.addForm.title+'(整改通知书).docx')
        }
      },
      //查看单个文档
      lookDocumentButton(type){
        if(type==1){
          this.$set(this,'propsLookDocumentData',{
            title:this.addForm.rectifyNotice == 1?'整改告知书':'整改通知书',
            type:this.addForm.rectifyNotice == 1?3:2,
            id:this.addForm.id,
            name:this.addForm.title
          });
          this.$set(this,'lookDocumentType',true);
        }else{
          this.$set(this,'lookDocumentType',false);
        }
      },
      // 多个下载按钮
      allDownloadButton(){
        this.download(this.lookDocumentList[this.lookDocumentListIndex].url, {}, this.lookDocumentList[this.lookDocumentListIndex].name)
      },
      //查看多个文档
      lookDocumentListButton(type){
        if(type==1){
          getFindByCheckPlanId({checkPlanId:this.addForm.checkPlanId}).then(response => {
            let list = [];
            for(let i=0;i<response.data.length;i++){
              let obj = {
                name:response.data[i].fileName,
                url:response.data[i].fileUrl,
              }
              list.push(obj);
            }
            this.$set(this,'propsLookDocumentListData',{
              title:"查看附件",
              list:list
            });
            this.$set(this,'lookDocumentListType',true);
          });
        }else{
          this.$set(this,'lookDocumentListType',false);
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .inspectionManagement-infoPage{
    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;
        }
        .data-button-box{
          display: flex;
          padding-top: 5px;
          .look-button{
            width: 70px;
            height: 30px;
            background: #0045AF;
            border-radius: 4px 4px 4px 4px;
            color:#fff;
            font-size:14px;
            text-align: center;
            line-height:30px;
            margin-right:12px;
            cursor: pointer;
          }
          .download-button{
            width: 70px;
            height: 30px;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            border: 1px solid #0045AF;
            color:#0045AF;
            font-size:14px;
            text-align: center;
            line-height:30px;
            cursor: pointer;
          }
        }
      }
      .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;
      border-bottom:none;
      overflow: hidden;
      margin:0 81px 40px;
      .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-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-content-box{
        display: flex;
        .content-box{
          flex:1;
          display: flex;
          flex-direction: column;
          .min-content-box{
            display: flex;
            .left-min-content-box{
              display: flex;
              flex-direction: column;
              width:120px;
              border-right:1px solid #E0E0E0;
              border-bottom:1px solid #E0E0E0;
              p:nth-child(1){
                flex:1;
              }
              p:nth-child(2){
                font-size:16px;
                color:#333;
                text-align: center;
                min-height:40px;
                line-height:40px;
              }
              p:nth-child(3){
                flex:1;
              }
            }
            .right-min-content-box{
              width:588px;
              border-right:1px solid #E0E0E0;
              border-bottom:1px solid #E0E0E0;
              .button-p{
                width:200px;
                color:#0183FA;
                font-size:16px;
                min-height:40px;
                line-height:40px;
                margin-left:39px;
                cursor: pointer;
                i{
                  font-size:14px;
                }
              }
              .inspection-box{
                height:120px;
                padding:12px 20px;
                font-size:14px;
                color:#333;
                line-height:18px;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                p:nth-child(1){
                  flex:1;
                }
                p:nth-child(2){
                  margin-top:10px;
                  height:20px;
                  line-height:20px;
                  span{
                    color:#FF0000;
                  }
                }
              }
              .text-box{
                height:120px;
                padding:0 20px;
                display: flex;
                flex-direction: column;
                .null-p{
                  flex:1;
                }
                .text-p{
                  max-height:100px;
                  font-size:14px;
                  color:#333;
                  line-height:18px;
                }
              }
              .title-p{
                font-size:16px;
                color:#333;
                min-height:40px;
                line-height:40px;
                margin-left:18px;
              }
              .img-box{
                height:120px;
                padding:0 20px;
                img{
                  height:80px;
                  width:80px;
                  border-radius:4px;
                  display: inline-block;
                  overflow: hidden;
                  margin:20px 10px 0 0;
                  cursor: pointer;
                }

              }
            }
          }
        }
      }
    }
    .for-big-box{
      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;
        }
      }
      .button-p{
        display: inline-block;
        margin-left: 20px;
        width:200px;
        color:#0183FA;
        font-size:16px;
        min-height:40px;
        line-height:40px;
        margin-left:39px;
        cursor: pointer;
        i{
          font-size:14px;
        }
      }
    }
    /*专项检查*/
    .for-max-big-box-special{
      margin-bottom: 20px;
      .for-big-box-special{
        border-bottom: 1px dotted #D8D8D8;
        margin:30px;
      }
      .for-big-box-special:last-of-type{
        border-bottom: none;
      }
    }
  }
  ::v-deep .is-disabled{
    .el-input__inner{
      background-color: #f5f5f5;
      color: #333;
      border-color: #f5f5f5;
      cursor:auto;
    }
  }
</style>