FE-V2-PC/src/views/safetyCheck/worktable/toDoListBox.vue

<template>
  <div class="toDoListBox">
    <div class="toDoListBox-form-box">
      <div class="form-button-box">
        <p :class="queryParams.manageStatus == 0?'check-p':''" @click="titleClickButton(0)">待检查</p>
        <p :class="queryParams.manageStatus == 1?'check-p':''" @click="titleClickButton(1)">检查中</p>
        <p :class="queryParams.manageStatus == 2?'check-p':''" @click="titleClickButton(2)">待复核</p>
      </div>
      <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true">
        <el-form-item label="" prop="searchValue" label-width="80px">
          <el-input
            maxLength="30"
            v-model="queryParams.searchValue"
            placeholder="搜索实验室/房间号"
            style="width: 186px">
            <p slot="append" class="el-icon-search" @click="handleQuery"></p>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="toDoListBox-list-box scrollbar-box"
         @mouseleave="tableTimerFun"
         @mouseenter="tableTimerOff"
         ref="scrollDiv">
      <div  class="for-list-box"
            v-for="(item,index) in tableList" :key="index">
        <div class="for-name-box">
          <p class="name-p">{{item.subjectName}}-{{item.roomNumber}}</p>
          <p class="type-p" v-if="item.isOverdue == 1">已逾期</p>
          <p class="null-p"></p>
          <img v-if="item.isAttachment == 1" @click="lookDocumentListButton(1,item)"
               src="@/assets/ZDimages/safetyCheck/icon_gzt_bg.png">
        </div>
        <div class="for-title-box">
          <p>{{item.title}}</p>
        </div>
        <div class="for-button-box">
          <p>{{item.manageStatus==0?'待检查':(item.manageStatus==1?'检查中':(item.manageStatus==2?'待复核':''))}}</p>
          <p>{{item.checkType==1?'校院巡查':(item.checkType==2?'实验室自查':'')}}</p>
          <p>{{item.collegeName}}</p>
        </div>
        <div class="for-time-box">
          <p>计划周期：{{item.cycleStartTime}} 至 {{item.cycleEndTime}}</p>
          <p v-if="queryParams.manageStatus == 0" :class="item.checkIsStatus?'':'noButton'" @click="goPage(item)">{{item.checkIsStatus?'开始检查':'计划未开始'}}</p>
          <p v-if="queryParams.manageStatus == 1" @click="goPage(item)">编辑</p>
          <p v-if="queryParams.manageStatus == 2" @click="addDialogOpen(true,item)">复核</p>
        </div>
        <img class="position-img" v-if="item.checkRange == 1" src="@/assets/ZDimages/safetyCheck/icon_xyxc_qx.png">
        <img class="position-img" v-if="item.checkRange == 2" src="@/assets/ZDimages/safetyCheck/icon_xyxc_xy.png">
        <img class="position-img" v-if="item.checkRange == 3" src="@/assets/ZDimages/safetyCheck/icon_xyxc_sys.png">
      </div>
      <img  v-if="!tableList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
    </div>
    <infoDialog v-if="infoDialogType" :propsInfoDialogData="propsInfoDialogData"></infoDialog>
    <lookDocumentListDialog v-if="lookDocumentListType" :propsLookDocumentListData="propsLookDocumentListData"></lookDocumentListDialog>
  </div>
</template>

<script>
  import { todoList, tobeReviewed,getFindByCheckPlanId } from '@/api/safetyCheck/index'
  import lookDocumentListDialog from '@/components/lookDocumentDialog/lookDocumentListDialog.vue'
  import infoDialog from '@/views/safetyCheck/components/infoDialog/infoDialog.vue'
  export default {
    name: 'toDoListBox',
    components: {
      infoDialog,
      lookDocumentListDialog
    },
    data(){
      return{
        //子组件数据
        infoDialogType:false,
        propsInfoDialogData:{},
        lookDocumentListType:false,
        propsLookDocumentListData:{},
        queryParams:{
          manageStatus:0,
          searchValue:"",
        },
        tableList:[],
        total:0,
        //跳转巡查权限
        goInspectionManagement:false,
        //跳转自查权限
        goSelfInspectionManagement:false,
        /*****************数据滚动相关*****************/
        tableTimer: null,

      }
    },
    created(){
      this.getList();
      this.setButtonList();
    },
    mounted(){

    },
    methods:{
      //滚动方法
      tableActionFun() {
        this.$refs.scrollDiv.scrollTop = 0;
        this.tableTimerFun();
      },
      //开始滚动
      tableTimerFun() {
        if(this.tableList[3]){
          this.tableTimer = window.setInterval(() => {
            let csrollTop = this.$refs.scrollDiv.scrollTop
            let maxHeight = this.$refs.scrollDiv.scrollHeight - this.$refs.scrollDiv.offsetHeight
            if (csrollTop >= maxHeight) {
              this.$refs.scrollDiv.scrollTop = 0;
            } else {
              this.$refs.scrollDiv.scrollTop += 1;
            }
          }, 30);
        }
      },
      //停止滚动
      tableTimerOff(){
        window.clearInterval(this.tableTimer)
      },
      //跳转
      goPage(item){
        //跳转 巡查/自查页面
        if(item.checkType == 1){
          //巡查
          if(this.goInspectionManagement){
            this.$router.push({
              path: `/safetyCheck/schoolInspection/inspectionManagement`,
              query:{
                id:item.id
              }
            })
          }else{
            this.msgError('没有相关权限,请联系管理员')
          }
        }else if(item.checkType == 2){
          //自查
          if(this.goSelfInspectionManagement){
            this.$router.push({
              path: `/safetyCheck/laboratorySelfTest/selfInspectionManagement`,
              query:{
                id:item.id
              }
            })
          }else{
            this.msgError('没有相关权限,请联系管理员')
          }
        }
      },
      //开关详情页面
      addDialogOpen(type,data){
        if(this.infoDialogType != type){
          if(type){
            let obj = {
              id:data.hazardId
            }
            this.$set(this,'propsInfoDialogData',obj);
            this.$set(this,'infoDialogType',type);
          }else{
            this.$set(this,'infoDialogType',type);
          }
        }
      },
      titleClickButton(type){
        if(this.queryParams.manageStatus != type){
          this.$set(this.queryParams,'manageStatus',type);
          this.getList();
        }
      },
      //获取数据列表
      getList(){
        clearInterval(this.tableTimer);
        if(this.queryParams.manageStatus == 2){
          tobeReviewed(this.queryParams.searchValue).then(response => {
            this.$set(this,'tableList',response.rows);
            this.tableActionFun();
          });
        }else{
          todoList(this.queryParams).then(response => {
            this.$set(this,'tableList',response.rows);
            this.tableActionFun();
          });
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      //查看多个文档
      lookDocumentListButton(type,item){
        if(type==1){
          getFindByCheckPlanId({checkPlanId:item.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);
        }
      },
      //权限查找
      setButtonList() {
        let localRoute = JSON.parse(localStorage.getItem("routeData"))
        this.forRouteData('inspectionManagement',localRoute);
        this.forRouteData('selfInspectionManagement',localRoute);
      },
      forRouteData(item,list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(item == list[i].path){
            if(item == 'inspectionManagement'){
              self.$set(self,'goInspectionManagement',true);
            }else if(item == 'selfInspectionManagement'){
              self.$set(self,'goSelfInspectionManagement',true);
            }
          }else{
            if(list[i].children){
              self.forRouteData(item,list[i].children)
            }
          }
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.tableTimer);
      this.$set(this,'tableTimer',null);
      this.$set(this,'tableList',[]);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.tableTimer);
      this.$set(this,'tableTimer',null);
      this.$set(this,'tableList',[]);
    }
  }
</script>

<style scoped lang="scss">
  .toDoListBox{
    height:676px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .toDoListBox-form-box{
      display: flex;
      padding:30px 20px 0;
      .form-button-box{
        display: flex;
        p{
          cursor: pointer;
          width:80px;
          height:30px;
          font-size:14px;
          color:#333;
          border:1px solid #E0E0E0;
          border-radius:4px;
          line-height:28px;
          text-align: center;
          margin-right:10px;
        }
        .check-p{
          color:#fff;
          border-color: #0183FA;
          background-color: #0183FA;
        }
      }
      ::v-deep .el-input__inner{
        height:30px;
        border: 1px solid #DCDFE6;
        border-right:none;
        padding-right:0;
      }
      ::v-deep .el-input-group__append{
        padding:0 11px;
        background-color: #fff;
        cursor: pointer;
      }
    }
    .toDoListBox-list-box{
      position: relative;
      padding:0 20px 20px;
      flex:1;
      .null-img{
        width:160px;
        margin:160px 0 0 170px;
      }
      .for-list-box{
        height:190px;
        border-radius:20px;
        border:1px solid rgba(0,0,0,0.1);
        margin-top:20px;
        position: relative;
        .for-name-box{
          overflow: hidden;
          padding:0 20px 0 58px;
          display: flex;
          margin:20px 0 12px;
          .name-p{
            height:24px;
            line-height:24px;
            font-size:16px;
            color:#333;
            max-width:280px;
            display:block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          .type-p{
            border-radius:4px;
            text-align: center;
            width:60px;
            margin:2px 0 2px 10px;
            height:20px;
            line-height:20px;
            color:#FF3131;
            font-size:14px;
            background-color: rgba(255,49,49,0.2);
          }
          .null-p{
            flex:1;
          }
          img{
            width:15px;
            height:16px;
            margin:4px 0 0 10px;
            cursor: pointer;
          }
        }
        .for-title-box{
          overflow: hidden;
          padding:0 20px 0 58px;
          display: flex;
          margin-bottom:18px;
          p{
            height:20px;
            line-height:20px;
            font-size:14px;
            color:#333;
            max-width:375px;
            display:block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
        .for-button-box{
          display: flex;
          margin:0 20px 20px 58px;
          font-size:14px;
          p:nth-child(1){
            width:80px;
            line-height:30px;
            background: rgba(1,131,250,0.1);
            margin-right:13px;
            border-radius:80px;
            text-align: center;
            color:#0183FA;
          }
          p:nth-child(2){
            padding:0 12px;
            line-height:30px;
            border:1px solid #E0E0E0;
            border-radius:80px;
            text-align: center;
            color:#666666;
          }
          p:nth-child(3){
            width:165px;
            line-height:30px;
            color:#333;
            margin-left:22px;
            display:block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }

        }
        .for-time-box{
          display: flex;
          height:42px;
          border-top:1px dashed #D8D8D8;
          line-height: 42px;
          p:nth-child(1){
            margin-left:20px;
            font-size:14px;
            flex:1;
            overflow: hidden;
          }
          p:nth-child(2){
            padding:0 20px;
            text-align: center;
            cursor: pointer;
            color:#0183FA;
            font-size:14px;
          }
          .noButton{
            color:#999!important;
            cursor: inherit!important;
          }
        }
        .position-img{
          width:80px;
          height:80px;
          position: absolute;
          left:0;
          top:0;
        }
      }
      .null-p{
        text-align: center;
        color:#999;
        line-height:100px;
      }
    }
  }
</style>