soc_app/src/views/home/works.vue

<template>
  <div class="index-container">
    <nav-bar :leftArrow="false"></nav-bar>
    <weather-box @tabsClassChange="tabsClassChange"></weather-box>
    <!-- 步骤条 -->
    <van-tabs :class="tabsClass" color="#008cd6" @click="tabClickHandler" v-if="workList && workList.length > 0">
      <van-tab
        :title="i.taskTypeText"
        :name="worksLink(1, i.taskType)"
        v-for="i in workList"
        :key="i.taskType"
        :badge="i.nums"
      >
        <template v-for="item in workList">
          <!-- 列表 -->
          <div class="cellMargin" v-if="item.taskType == i.taskType" :key="item.taskType">
            <!-- 标题区域 -->
            <!-- lz -->
            <van-cell
              :value="item.nums"
              is-link
              :to="{ path: worksLink(3, item.taskType) }"
              :id="worksLink(1, item.taskType)"
            >
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="titleLeft"> </span>
                <span class="custom-title">{{ item.taskTypeText }} </span>
              </template>
            </van-cell>
            <!-- 待办区域 -->
            <div class="marginCls" v-if="item.taskType == i.taskType">
              <!-- <van-empty description="暂无数据" /> -->
              <van-cell-group v-if="item.taskType!=2">
                <van-cell 
                  @click.stop="isFalgHandler(i, item.taskType, item.id)"
                  v-for="(i, index) in item.dataList"
                  :key="index"
                  class="mainTitle"
                  :value="worksLink(2, item.taskType, i.recStatus ? i.recStatus : i.status)"
                  :label="
                    i.startTime.substring(5, i.startTime.length - 3) +
                    '至' +
                    i.endTime.substring(5, i.endTime.length - 3)
                  "
                  :value-class="iColorClas(item.taskType, i.status)"
                >
                  <template #title>
                    <span class="custom-title"
                      >{{ i.taskName }}
                      <van-tag
                        class="resetDy"
                        @click.stop="resetHandler(i.id)"
                        v-if="i.status == 1 && item.taskType == 3"
                        type="primary"
                        >重新调阅</van-tag
                      ></span
                    >
                  </template>

                  <template #right-icon>
                    <van-icon name="arrow" class="rightIcon" />
                  </template>
                </van-cell>
              </van-cell-group>
              
              <van-collapse v-if="item.taskType==2" class="check-register list-item" v-model="activeNames">
                <van-collapse-item :name="v.id" v-for="(v,i) in item.dataList" :key="v.id+i">
                    <template #title>
                      <div class="item-title">
                      <!-- <div class="textTitle">{{ v.taskName}}</div> -->
                      <van-cell :title="v.taskName" :border="false" :label="v.startTime.substring(5, v.startTime.length - 3) +
                    '至' +
                    v.endTime.substring(5, v.endTime.length - 3)" ></van-cell>
                      <div class="collapse-title">
                        <div :class="{'active':v.active==2}" @click.stop="changeList(v,2)">
                          <p>{{v.uncompleted.length}}</p>
                        </div>
                        <!-- <div :class="{'active':v.active==1}" @click.stop="changeList(v,1)">
                          <p>{{v.completed.length}}</p>
                          <p>已检查</p>
                        </div>   -->
                        </div>
                      </div>
                    </template>
                  <div class="check-item-list">                    
                    <van-cell
                      v-for="(a,index) in v.uncompleted" :key="a.id"
                      :title="a.beCheckedOrgName"
                      @click.stop="isFalgHandler(a, item.taskType, item.id)">
                      <template #right-icon>
                        <div>
                          <span :class="iColorClas(item.taskType, a.status)">
                            {{worksLink(2, item.taskType, a.recStatus ? a.recStatus : a.status)}}
                          </span>
                        </div>
                      </template>
                    </van-cell>
                  </div>
          </van-collapse-item>
          </van-collapse>
            </div>
          </div>
        </template>
      </van-tab>
    </van-tabs>

    <!-- 扫描弹框 -->
    <scandialog ref="scandialog" @input="resultImg" @changeNFC="getNFC"></scandialog>
  </div>
</template>

<script>
import scandialog from '@/components/nfcPopup/alone.vue'
import TopBar from '@/components/TopBar'
import WeatherBox from "@/components/weatherBox/index.vue";
import { Toast, Dialog } from 'vant'
import { base64ToBlob } from '@/utils/base64TurnImg.js'
import { registration, resetTask } from '@/api/toConsult.js'
import { upload } from '@/api/public'
import { getPanelList } from '@/api/drillTask.js'
export default {
  name: 'works',
  components: { TopBar, scandialog ,WeatherBox},
  data() {
    return {
      big_box: 'big_box',
      active: 0,
      tabsClass:'tab-tabs',
      taskId: '', //监控调阅ID
      workList: [], //工作台列表
      oldScrollTop: '',
      falg: false, //待调阅的时候 不进行跳转页面单独处理
      activeNames:[],
    }
  },
  mounted() {
    if (this.orgId) {
      this.$refs.topbar.getTheWeather()
    }
    // if (this.$refs.topbar.list?.length > 0) {
    //   this.big_box = 'big_boxTwo'
    // }
  },
  created() {
    this.getList()
  },
  methods: {
    tabsClassChange(str){
      this.tabsClass=str||'tab-tabs'
    },
    iColorClas(type, status) {
      if (status == 0|| (type == 9 && status == 1)|| (type == 9 && status == 10) || (type == 0 && status == 1) || (type == 2 && status == 1)) {
        return 'wj-title-blue'
      }
      else if(type == 9 && status == 13) 
      {
        return 'wj-title-red'
      }
      else {
        return 'wj-title-orange'
      }
    },
    isFalgHandler(i, taskType, id) {
      // if (i.isExist != undefined && i.isExist == 0) {
      //   return Dialog.alert({
      //     message: '机构下没有主机摄像头，不能开启调阅任务!',
      //     confirmButtonText: '关闭'
      //   })
      // }
      //如果当前是待调阅任务 当前页面处理之后再跳转 不是则正常跳转
      if (i.status == 0 && taskType == 3) {
        this.falg = false
        this.taskId = i.id
        this.$refs.scandialog.visible = true
        this.globalLoading = true
      } else {
        this.falg = true
        this.$router.push({ path: this.worksLink(4, taskType, i.status, i.id, i) })
      }
    },

    getList() {
      getPanelList().then(res => {
        let { data, code, msg } = res

        this.workList = data
      })
    },
    worksLink(type, val, taskType = '', id = '', item) {
      //type 列表类型区分 //val 类型值 //taskType 具体列表项区分 //id 任务id
      let str = ''
      let strName = ''
      let path = ''
      let pathInfo = ''
      switch (val) {
        case 0:
          str = '/lz'
          strName = '待履职'
          path = '/resumption'
          pathInfo = `/resumption_detail`
          break
        case 3:
          str = '/dy'
          strName = '待调阅'
          path = '/monitoringCall'
          pathInfo = '/consultInfo_' + id
          break
        case 2:
          strName = '待检查'
          path = '/securityCheckRegister'
          pathInfo = '/securityDetail' + id
          str = '/jc'
          break
        case 4:
          str = '/yl'
          strName = '待登记'
          path = '/rehearsalTask'
          pathInfo = '/addRehearsalTask/' + id
          break
        case 5:
          str = '/px'
          strName = '待登记'
          path = '/training'
          pathInfo = '/Addtraining/' + id
          break
        case 7:
          str = '/py'
          strName = '待评优'
          path = '/rehearsaloptimal'
          pathInfo = '/commentSign/' + id

          break
        case 8:
          str = '/wbpj'
          strName = '待评价'
          path = '/resumptionEvaluate'
          pathInfo = '/evaluate/' + id + '_add'

          break
        case 9:
          str = '/wtzg'
          strName = '待确认'
          path = '/problemItem'
          pathInfo = '/problemDetail?id=' + id + '&type=confirm'

          break
        case '/qt':
          str = '/qt'
        case 10:
          str = '/lfsp'
          strName = '待审批'
          path = '/visitCheck'
          pathInfo = '/visitCheckDetail?id=' + id
          break
      }

      if (type == 1) {
        return str
      } else if (type == 2) {
        //返回跳转文字
        //履职
        if (val == 0 && taskType == 2) {
          strName = '进行中'
        }
        //安全检查
        if (val == 2 && taskType == 2) {
          strName = '进行中'
        }

        //监控调阅
        if (val == 3 && taskType == 1) {
          strName = '调阅中'
        }
        //演练登记
        if (val == 4 && taskType == 2) {
          strName = '待评价'
        } else if (val == 4 && taskType == 1) {
          strName = '待签名'
        } else if (val == 4 && taskType == 5) {
          strName = '待提交'
        } else if (val == 4 && taskType == 10) {
          strName = '待评优'
        }
        //教育培训
        if (val == 5 && taskType == 0) {
          strName = '待登记'
        } else if (val == 5 && taskType == 1) {
          strName = '待签名'
        } else if (val == 5 && taskType == 4) {
          strName = '待提交'
        }
          //问题整改
          if (val == 9 && taskType == 0) {
          strName = '待确认'
        } else if (val == 9 && taskType == 10) {
          strName = '待整改'
        }else if (val == 9 && taskType == 13) {
          strName = '已逾期'
        }else if (val == 9 && taskType == 1) {
          strName = '待审批'
        }
        return strName
      } else if (type == 3) {
        //返回列表路径
        return path
      } else {
        //返回详情路径

        //问题整改
        if (val == 9 && taskType == 1) {
          strName = '待审批'
          // pathInfo = '/consultInfo/' + id + '_1'
          pathInfo = '/problemDetail?id=' + id + '&type=confirmDissent'

        }
        if (val == 9 && taskType == 10) {
          strName = '待整改'
          pathInfo = '/problemDetail?id=' + id + '&type=reform'
        }
        if (val == 9 && taskType == 13) {
          strName = '已逾期'
          pathInfo = '/problemDetail?id=' + id + '&type=reform'
        }
        //监控调阅
        if (val == 3 && taskType == 1) {
          strName = '调阅中'
          pathInfo = '/consultInfo/' + id + '_1'
        }
        //演练登记评价跳转
        if (val == 4 && taskType == 2) {
          pathInfo = '/rehearsalTasinfo/' + id + '_evaluate'
        }
        //演练登记签名跳转
        if (val == 4 && taskType == 1) {
          pathInfo = '/rehearsalTaskSign/' + id + '_edit'
        }
        //评优推优跳转
        if (val == 7 && taskType == 10) {
          pathInfo = '/commentSign/' + id + '_comment'
        }
        //教育培训签名跳转
        if (val == 5 && taskType == 1) {
          pathInfo = '/personnelSignature/' + id + '_edit'
        }
        //安全检查跳转
        if ((val == 2 && taskType == 1) || (val == 2 && taskType == 2)) {
          pathInfo = `/securityAdd?id=${id}&enable=${taskType}`
        }
        //履职跳转
        if ((val == 0 && taskType == 1) || (val == 0 && taskType == 2)) {
          pathInfo = `/resumption_detail?id=${id}&enable=${taskType}&taskDate=${item.startTime.split(' ')[0]}
`
        }
        return pathInfo
      }
    },
    //监控调阅待调阅弹框处理
    //文件上传
    resultImg(img) {
      this.photoHandler(img[0].url)
    },
    //上传NFC
    getNFC(nfc) {
      this.photoHandler('', nfc)
    },
    //扫描图片并上传到服务器和后端
    photoHandler(img = '', nfc = '') {
      //上传到服务器
      //开始调阅上传
      let obj = {
        startPicture: img,
        startNfc: nfc,
        taskId: this.taskId
      }
      registration(obj).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          Toast.success('扫描成功')
          this.$router.push('/consultInfo/' + this.taskId)
        }
      })
    },
    //tab栏点击
    tabClickHandler(name) {
      // const filePath = `/#${name}`
      // const tempLink = document.createElement('a')
      // tempLink.style.display = 'none'
      // tempLink.href = filePath
      // tempLink.setAttribute('target', '_self')
      // document.body.appendChild(tempLink)
      // tempLink.click()
      // document.body.removeChild(tempLink)
    },
    //重新调阅
    resetHandler(id) {
      Dialog.confirm({
        title: '提示',
        message: '确认要对该任务进行重新调阅吗?'
      }).then(() => {
        resetTask(id).then(res => {
          if (res.code == 200) {
            Toast.success('初始化任务成功')
            this.getList()
          }
        })
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrolling)
  }
}
</script>
<style>
.van-info {
  right: -12px;
}
</style>
<style lang="scss" scoped>
.van-cell__right-icon {
}
.van-cell::after {
  background-color: #008cd6;
}
.titleLeft {
  display: inline-block;
  width: 8px;
  height: 40px;
  background-color: #008cd6;
  vertical-align: middle;
  margin-right: 10px;
}

.van-cell__title {
  color: #008cd6;
}
::v-deep.van-cell__value {
  // width: 20%;
  float: right;
  display: -webkit-flex;
  -webkit-flex: none;
  flex: none;
}

.mainTitle {
  .van-cell__title {
    color: black;
  }
}
.cellMargin {
  margin: 20px;
  -margin-top: 0px;
  height: calc(100vh - 412px);
  box-shadow: 0 1px 4px #ccc;
  background-color: #fff;
  overflow-y: scroll;
}
.marginCls {
  min-height: 400px;
  width: 100%;
  background-color: #fff;
  // overflow-y: scroll;
}
.empty {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.index-container {
}

.big_box {
  height: calc(100vh - 520px);
  overflow: auto;
}
.tab-tabs {
  padding-top: 90px;
}
.tabs-padding-none {
  padding-top: 0px;
}
.big_boxTwo {
  height: calc(100vh - 570px);

  overflow: auto;
}
a {
  text-decoration: none;
  color: inherit;
  margin-right: 10px;
}
.rightIcon {
  color: #969799;
  line-height: 46px;
  font-size: 40px;
}
.van-collapse-item{
  ::v-deep .van-cell{
    align-items: center;
    // padding:10px 5px 10px 5px !important;
  }
  ::v-deep .van-cell__title{
    color:black !important;
    // padding:10px 5px 10px 5px !important;
  }
  
}
.check-register{
  .org-line{
    padding:0 10px;
    background-color: #fff;
  }
  .search-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    >div{
      width: 50%;
    }
  }
  .org-label{
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 28px;
  }
  .card-list{
    padding:0 5px 0px 5px;
    height: calc(100vh - 370px);
    overflow: auto;
  }
  .list-item{
    margin: 20px 0px 20px 0px;
    // padding:20 0px 20px 0px;
  }
  .item-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    // border-bottom: 1px solid #f5f5f5;
    padding-bottom: 10px;
  }
  .check-item-list{
    -max-height: 500px;
    overflow: auto;
  }
  .card-num{
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #008cd6;
  }
  .collapse-title{
    width: 50%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28px;
    color: #ccc;
    >div{
      width: 100px;
      font-size: 24px;
      height: 70px;
      padding: 5px 10px;
      border: 2px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 3px 6px #eaeaea;
      >p{
        height: 28px;
        // line-height: 28px;
        text-align: center;
      }
    }
    >div{
      color: #fff;
      background-color: #008cd6;
      border: 3px solid #008cd6;
    }
  }
  .flex-box{
    display: flex;
    align-items: center;
    >div{
      margin-right: 40px;
    }
  }
  .search-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    >div{
      width: 50%;
    }
  }
}
</style>