soc_app/src/views/menu/resumption/list.vue

<template>
  <div class="lvzhi">
    <NavBar :go="{ type: 'push', path: '/menu' }"/>
    <div>
      <date-cell title="日期" is-row v-model="date" date-type="date" @change="changeDate"/>
<!--      <DatePicker ref="DatePicker" @change="changeDate"></DatePicker>-->
      <div class="lz-list">
        <div class="list-item">
          <p>每日履职</p>
          <van-tabs>
            <van-tab title="待完成" :badge="dayList.unfinished.length === 0 ? false :dayList.unfinished.length">
              <Empty v-if="!dayList.unfinished.length"/>
              <div class="list-container" v-else>
                  <van-cell
                    v-for="v in dayList.unfinished"
                    :key="v.id"
                    :title="v.planName"
                    :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
                    is-link
                    @click="onClick(path,v.id,date,v.planStartTime)"
                    :value-class="`title-orange`">
                    <template #right-icon>
                      <span :style="{ color: getState(getDictLabel(v.status, 'resumption_status')) }">
                        {{ getDictLabel(v.status, 'resumption_status') }}
                      </span>
                    </template>
                  </van-cell>
              </div>
            </van-tab>
            <van-tab title="未完成" :badge="dayList.proceed.length=== 0 ? false :dayList.proceed.length">
              <Empty v-if="!dayList.proceed.length"/>
              <div class="list-container" v-else>
                  <van-cell
                    v-for="v in dayList.proceed"
                    :key="v.id"
                    :title="v.planName"
                    :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
                    :value-class="`title-red`">
                    <template #right-icon>
                      <span :style="{ color: getState(getDictLabel(v.status, 'resumption_status')) }">
                        {{ getDictLabel(v.status, 'resumption_status') }}
                      </span>
                    </template>
                  </van-cell>
              </div>
            </van-tab>
            <van-tab title="已完成" :badge="dayList.finished.length=== 0 ? false :dayList.finished.length">
              <Empty v-if="!dayList.finished.length"/>
              <div class="list-container" v-else>
                  <van-cell
                    v-for="v in dayList.finished"
                    :key="v.id"
                    :title="v.planName"
                    :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
                    is-link
                    :to="{path:path,query:{id:v.id,taskDate:date}}"
                    :value-class="`title-green`">
                    <template #right-icon>
                      <span :style="{ color: getState(getDictLabel(v.status, 'resumption_status')) }">
                        {{ getDictLabel(v.status, 'resumption_status') }}
                      </span>
                    </template>
                  </van-cell>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <div class="list-item">
          <p>周期履职</p>
          <van-tabs >
            <van-tab title="待完成" :badge="otherList.unfinished.length=== 0 ? false :otherList.unfinished.length">
              <Empty v-if="!otherList.unfinished.length"/>
              <div class="list-container" v-else>
                  <van-cell
                    v-for="v in otherList.unfinished"
                    :key="v.id"
                    :title="v.planName"
                    :label="formatTime(v.planStartTime,v.planEndTime,'YYYY-MM-DD')"
                    is-link
                    @click="onClick(path,v.id,date,v.planStartTime)"
                    :value-class="`title-orange`">
                    <template #right-icon>
                      <span :style="{ color: getState(getDictLabel(v.status, 'resumption_status')) }">
                        {{ getDictLabel(v.status, 'resumption_status') }}
                      </span>
                    </template>
                  </van-cell>
              </div>
            </van-tab>
            <van-tab title="未完成" :badge="otherList.proceed.length=== 0 ? false :otherList.proceed.length">
              <Empty v-if="!otherList.proceed.length"/>
              <div class="list-container" v-else>
                  <van-cell
                    v-for="v in otherList.proceed"
                    :key="v.id"
                    :title="v.planName"
                    :label="formatTime(v.planStartTime,v.planEndTime,'YYYY-MM-DD')"
                    :value-class="`title-red`">
                    <template #right-icon>
                      <span :style="{ color: getState(getDictLabel(v.status, 'resumption_status')) }">
                        {{ getDictLabel(v.status, 'resumption_status') }}
                      </span>
                    </template>
                  </van-cell>
              </div>
            </van-tab>
            <van-tab title="已完成" :badge="otherList.finished.length=== 0 ? false :otherList.finished.length">
              <Empty v-if="!otherList.finished.length"/>
              <div class="list-container" v-else>
                  <van-cell
                    v-for="v in otherList.finished"
                    :key="v.id"
                    :title="v.planName"
                    :label="formatTime(v.planStartTime,v.planEndTime,'YYYY-MM-DD')"
                    is-link
                    :to="{path:path,query:{id:v.id,taskDate:date}}"
                    :value-class="`title-green`">
                    <template #right-icon>
                      <span :style="{ color: getState(getDictLabel(v.status, 'resumption_status')) }">
                        {{ getDictLabel(v.status, 'resumption_status') }}
                      </span>
                    </template>
                  </van-cell>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import DatePicker from '@/components/DatePicker';
import Empty from '@/components/EmptyBox';
import {mapGetters} from "vuex";
import {dataList} from "./api";
import dayjs from "dayjs";
import {getDict} from "@/api/toConsult";
import DateCell from "@/components/dateCell/index.vue";

export default {
  name: 'resumption',
  components:{DateCell, NavBar,DatePicker,Empty},
  data(){
    return{
      //绑定的日期
      date:dayjs(new Date()).format('YYYY-MM-DD'),
      //设置浮动的容器
      container: null,
      //今日履职
      dayList: {
        unfinished:[],
        proceed:[],
        finished:[],
      },
      //周期履职
      otherList:{
        unfinished:[],
        proceed:[],
        finished:[],
      },
      //配置子页面路径
      path:'/resumption_detail',
      statusList:[],
      dicts: ['resumption_status'],
    }
  },
  // created() {
  //   getDict( 'resumption_status' ).then(res => {
  //     let { data } = res
  //     this.statusList = data;
  //   })
  // },
  mounted() {
    this.initDatalist();
  },
  computed:{
    ...mapGetters(['dictionary','orgName','orgId','roleList']),
    // stateList(){
    //   return this.statusList
    // },
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      if(to.params.event === 'refresh'){
        vm.getDatalist();
      }
    })
  },
  methods:{
    onClick(path,id,date,planStartTime){
      let now = new Date();
      let start = new Date(planStartTime);
      if(now > start){
        this.$router.push({path:path,query:{id:id,enable:1,taskDate:date}})
      }else{
        this.$toast.fail({
          message: '任务未到开始时间！',
          position: 'top'
        })
      }
    },
    getState(state) {
      switch (state) {
        case '待履职':
          return '#008cd6'
        case '进行中':
          return '#d9b627'
        case '已完成':
          return '#009240'
        case '已逾期':
          return '#D7000F'
      }
    },
    getDicts(s){
      return this.stateList.find(v=> s == v.dictValue).dictLabel;
    },
    //格式化时间范围
    formatTime(start,end,format){
      return `${dayjs(start).format(format)}-${dayjs(end).format(format)}`;
    },
    //页面第一次加载
    initDatalist(){
      let roleIds = this.roleList.map(v=>{return v.roleId})
      let data = {
        dateTime: dayjs(new Date()).format('YYYY-MM-DD'),
        orgId: this.orgId,
        roleId:roleIds,
      }
      dataList(data).then(res=>{
        this.setData(res);
      })
    },
    //点击日期获取数据
    getDatalist(){
      let roleIds = this.roleList.map(v=>{return v.roleId})
      let data = {
        dateTime: this.date,
        orgId: this.orgId,
        roleId:roleIds,
      }
      dataList(data).then(res=>{
        this.setData(res);
      })
    },
    //给本地数据赋值
    setData(res){
      //今日
      this.dayList.unfinished = res.data.day['1'];
      this.dayList.proceed = res.data.day['3']
      this.dayList.finished = res.data.day['2'];
      //周期
      this.otherList.unfinished = res.data.noDay['1'];
      this.otherList.proceed = res.data.noDay['3']
      this.otherList.finished = res.data.noDay['2'];
    },
    queryMoth(){

    },
    //点击时间
    changeDate(val){
      console.log(val,'val')
      this.date = val;
      this.getDatalist();
    },
  },
  destroyed(){
    window.openCameraCallBack = null;
    window.openNFCScanCallBack = null;
  }
}
</script>
<style lang="scss">
.lvzhi{
  .van-empty{
    //padding: 20px;
    background-color: #fff;
  }
  .van-tabs__wrap{
    height: 90px;
    border-bottom: 1px solid #f5f5f5;
  }
  .van-cell-group{
    background-color: #fff;
  }
  .van-tabs__line{
    background-color: #008cd6;
  }
  .van-info {
    background-color: #008cd6;
  }
}
</style>
<style lang="scss" scoped>
.lvzhi{
  height: 100%;
  overflow: hidden;
}
.top-date-box{
  padding: 0 20px;
}
.lz-list{
  height: calc(100vh - 280px);
  overflow: auto;
}
.list-item{
  margin: 20px;
  >p{
    color:#333;
    font-size: 30px;
    height: 90px;
    line-height: 90px;
    background-color: #fff;
    padding-left: 20px;
    border-bottom: 1px solid #f5f5f5;
  }
}
.list-container{
  max-height: 700px;
  overflow: auto;
}
.title-red{
  color: #f16363;
}
.title-green{
  color: #58dc33;
}
.title-orange{
  color: #fd8104;
}
</style>