v3-lab-web/src/views/safetyCheck/components/initiateInspect/historyRecordsComponent.vue

<!--历史记录-->
<template>
  <div class="page-container initiateInspect-historyRecordsComponent">
    <!--检查信息-->
    <div v-if="!newData.checkFlag">
      <p class="content-right-title-min-p">
        隐患信息
        <span :class="newData.showType?'el-icon-arrow-down':'el-icon-arrow-up'" @click="infoShowButton"></span>
      </p>
      <div v-if="newData.showType" style="margin-top:20px;">
        <div class="right-text-box">
          <p class="right-text-name-p">隐患描述</p>
          <div class="right-text-text-box" style="width:704px;">
            <p style="min-height:80px;">{{newData.hazardDescribe?newData.hazardDescribe:'-'}}</p>
          </div>
        </div>
        <div class="right-text-box" v-if="newData.uploadDtoList[0]">
          <p class="right-text-name-p">现场照片</p>
          <img class="for-img" :src="imgItem.fileUrl" @click="lookImg(newData.uploadDtoList,imgIndex)"
               v-for="(imgItem,imgIndex) in newData.uploadDtoList" :key="imgIndex">
        </div>
      </div>
    </div>
    <!--整改展示/复核展示-->
    <div v-for="(item,index) in dataList" :key="index">
      <div>
        <p class="content-right-title-min-p">
          隐患整改
          <span :class="item.topShowType?'el-icon-arrow-down':'el-icon-arrow-up'" @click="topShowButton(index)"></span>
        </p>
        <div v-if="item.topShowType" style="margin-top:20px;">
          <div class="right-text-box">
            <p class="right-text-name-p">整改结果</p>
            <div class="right-check-box">
              <div class="right-min-check-title-box">
                <p></p>
              </div>
              <p class="right-check-title-p">{{item.rectifyResult?'已整改':'暂无法整改'}}</p>
            </div>
          </div>
          <div class="right-text-box">
            <p class="right-text-name-p">整改措施</p>
            <div class="right-text-text-box" style="width:704px;">
              <p style="min-height:80px;">{{item.rectifyMeasure}}</p>
            </div>
          </div>
          <div class="right-text-box">
            <p class="right-text-name-p">现场照片</p>
            <img class="for-img" :src="imgItem.fileUrl" @click="lookImg(item.rectifyUploadList,imgIndex)"
                 v-for="(imgItem,imgIndex) in item.rectifyUploadList" :key="imgIndex">
          </div>
          <div class="right-text-box" style="display: flex;">
            <div class="right-text-box">
              <p class="right-text-name-p">整改人</p>
              <div class="right-text-text-box" style="height:40px;width:300px;">
                <p>{{item.rectifyName}}{{item.rectifyAccount?'-'+item.rectifyAccount:''}}</p>
              </div>
            </div>
            <div class="right-text-box">
              <p class="right-text-name-p">处理时间</p>
              <div class="right-text-text-box" style="height:40px;width:300px;">
                <p>{{parseTime(item.rectifyTime,"{y}-{m}-{d} {h}:{i}")}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="item.examineResult !== null">
        <p class="content-right-title-min-p">
          复查验证
          <span :class="item.bottomShowType?'el-icon-arrow-down':'el-icon-arrow-up'" @click="bottomShowButton(index)"></span>
        </p>
        <div v-if="item.bottomShowType" style="margin-top:20px;">
          <div class="right-text-box">
            <p class="right-text-name-p">复查结果</p>
            <div class="right-check-box">
              <div class="right-min-check-title-box">
                <p></p>
              </div>
              <p class="right-check-title-p">{{item.examineResult?'复查完毕':'退回整改'}}</p>
            </div>
          </div>
          <div class="right-text-box">
            <p class="right-text-name-p">验证情况</p>
            <div class="right-text-text-box" style="width:704px;">
              <p style="min-height:80px;">{{item.examineOpinion}}</p>
            </div>
          </div>
          <div class="right-text-box">
            <p class="right-text-name-p">现场照片</p>
            <img class="for-img" :src="imgItem.fileUrl" @click="lookImg(item.examineUploadList,imgIndex)"
                 v-for="(imgItem,imgIndex) in item.examineUploadList" :key="imgIndex">
          </div>
          <div class="right-text-box" style="display: flex;">
            <div class="right-text-box">
              <p class="right-text-name-p">复查人</p>
              <div class="right-text-text-box" style="height:40px;width:300px;">
                <p>{{item.reviewName}}{{item.reviewAccount?'-'+item.reviewAccount:''}}</p>
              </div>
            </div>
            <div class="right-text-box">
              <p class="right-text-name-p">复查时间</p>
              <div class="right-text-text-box" style="height:40px;width:300px;">
                <p>{{parseTime(item.reviewTime,"{y}-{m}-{d} {h}:{i}")}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'historyRecordsComponent',
    props:{
      historyRecordsComponentPropsData:{},
    },
    data(){
      return{
        newData:{
          checkFlag:true,
          showType:true,
          hazardDescribe:"",
          uploadDtoList:[],
        },
        dataList:[],
      }
    },
    created(){
      let obj = JSON.parse(JSON.stringify(this.historyRecordsComponentPropsData))
      for(let i=0;i<obj.checkRectifyVoList.length;i++){
        obj.checkRectifyVoList[i].topShowType = true;
        obj.checkRectifyVoList[i].bottomShowType = true;
      }
      this.$set(this,'newData',obj.orderInfo);
      this.$set(this,'dataList',obj.checkRectifyVoList);
    },
    mounted(){
    },
    methods:{
      //整改展开隐藏按钮
      infoShowButton(){
        this.$set(this.newData,'showType',!this.newData.showType);
      },
      //整改展开隐藏按钮
      topShowButton(index){
        this.$set(this.dataList[index],'topShowType',!this.dataList[index].topShowType);
      },
      //复查展开隐藏按钮
      bottomShowButton(index){
        this.$set(this.dataList[index],'bottomShowType',!this.dataList[index].bottomShowType);
      },
      //照片预览
      lookImg(list,index){
        this.$parent.fullScreenViewClick(list,index);
      },
      //文件预览
      lookFile(item){
        let obj = {
          fileName:item.rectifyMaterialName,
          fileUrl:item.rectifyMaterialUrl,
        };
        this.$parent.fullScreenFileLookClick(obj);
      },
    },
  }
</script>

<style scoped lang="scss">
  .initiateInspect-historyRecordsComponent{
    border:1px solid #E0E0E0;
    border-top:none;
    .content-right-title-min-p{
      line-height:40px;
      background: #F5F5F5;
      padding-left:23px;
      border-top:1px solid #E0E0E0;
      border-bottom:1px solid #E0E0E0;
      span{
        float: right;
        font-size:20px;
        line-height:40px;
        margin-right:20px;
        cursor: pointer;
      }
    }
    .right-text-box{
      display: flex;
      margin-bottom:20px;
      .right-text-name-p{
        width:90px;
        line-height:40px;
        text-align: right;
        margin-right:14px;
        font-size:16px;
      }
      .right-text-title-box{
        font-size:14px;
        width:300px;
        padding:10px 20px;
        background-color: #f5f5f5;
        border: 1px solid #E0E0E0;
        border-radius: 4px 4px 4px 4px;
        p{
          line-height:20px;
          /*单行省略号*/
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
      }
      .right-text-text-box{
        font-size:14px;
        width:300px;
        padding:10px 20px;
        background-color: #f5f5f5;
        border: 1px solid #E0E0E0;
        border-radius: 4px 4px 4px 4px;
        p{
          line-height:20px;
        }
      }
      .right-no-check-box{
        height:40px;
        margin-right:20px;
        overflow: hidden;
        display: flex;
        cursor: pointer;
        div{
          margin:13px 0 0;
          width:16px;
          height:16px;
          border:1px solid #999;
          border-radius:50%;
          p{
            height:10px;
            width:10px;
            margin:2px;
            border-radius:50%;
          }
        }
        .right-no-check-title-p{
          margin-left:8px;
          height:40px;
          line-height:40px;
          color:#333;
          font-size:16px;
        }
      }
      .right-check-box{
        height:40px;
        margin-right:20px;
        overflow: hidden;
        display: flex;
        cursor: pointer;
        div{
          margin:13px 0 0;
          width:16px;
          height:16px;
          border:1px solid #0183FA;
          border-radius:50%;
          p{
            height:10px;
            width:10px;
            margin:2px;
            border-radius:50%;
            background-color: #0183FA;
          }
        }
        .right-check-title-p{
          margin-left:8px;
          height:40px;
          line-height:40px;
          color:#0183FA;
          font-size:16px;
        }
      }
      .for-img{
        cursor: pointer;
        display: block;
        width:100px;
        height:100px;
        margin-right:20px;
      }
      .up-file-box{
        display: flex;
        height:40px;
        img{
          margin-top:12px;
          width:16px;
          height:16px;
          display: block;
        }
        p:nth-child(2){
          line-height:40px;
          font-size:14px;
          margin:0 30px 0 15px;
          cursor: pointer;
        }
        p:nth-child(3){
          cursor: pointer;
          color:red;
          font-size:16px;
          height:16px;
          width:16px;
          line-height:16px;
          margin-top:12px;
          text-align: center
        }
      }
    }
  }
</style>