soc_app/src/views/menu/LZRegister/index.vue

<template>
  <div class="lvzhi" ref="container">
    <nav-bar></nav-bar>
    <van-sticky :container="container">
      <DatePicker ref="DatePicker" @change="changeDate"></DatePicker>
    </van-sticky>
    <div class="lz-container" id="lz-container" @scroll="handleScroll">
      <div class="lz-list">
        <div class="list-item">
          <p>今日履职</p>
          <van-tabs >
            <van-tab title="待完成">
              <template #title>待完成 {{dayList.unfinished.length}} </template>
              <van-empty description="暂无数据" v-if="!dayList.unfinished.length"/>
              <van-cell-group  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
                  :to="{path:path,query:{id:v.id}}"
                  :value="getDicts(v.status,'resumption_status')"
                  :value-class="`title-orange`"/>
              </van-cell-group>
            </van-tab>
            <van-tab title="未完成">
              <template #title>未完成 {{dayList.proceed.length}} </template>
              <van-empty description="暂无数据" v-if="!dayList.proceed.length"/>
              <van-cell-group v-else>
                <van-cell
                  v-for="v in dayList.proceed"
                  :key="v.id"
                  :title="v.planName"
                  :label="formatTime(v.planStartTime,v.planEndTime,'HH:mm')"
                  is-link
                  :to="{path:path,query:{id:v.id}}"
                  :value="getDicts(v.status,'resumption_status')"
                  :value-class="`title-orange`"/>
              </van-cell-group>
            </van-tab>
            <van-tab title="已完成">
              <template #title>已完成 {{dayList.finished.length}} </template>
              <van-empty description="暂无数据" v-if="!dayList.finished.length"/>
              <van-cell-group 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}}"
                  :value="getDicts(v.status,'resumption_status')"
                  :value-class="`title-orange`"/>
              </van-cell-group>
            </van-tab>
          </van-tabs>
        </div>


        <div class="list-item">
          <p>周期履职</p>
          <van-tabs >
            <van-tab title="待完成">
              <template #title>待完成 {{otherList.unfinished.length}} </template>
              <van-empty description="暂无数据" v-if="!otherList.unfinished.length"/>
              <van-cell-group 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
                  :to="{path:path,query:{id:v.id}}"
                  :value="getDicts(v.status,'resumption_status')"
                  :value-class="`title-orange`"/>
              </van-cell-group>
            </van-tab>
            <van-tab title="未完成">
              <template #title>未完成 {{otherList.proceed.length}} </template>
              <van-empty description="暂无数据" v-if="!otherList.proceed.length"/>
              <van-cell-group 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')"
                  is-link
                  :to="{path:path,query:{id:v.id}}"
                  :value="getDicts(v.status,'resumption_status')"
                  :value-class="`title-orange`"/>
              </van-cell-group>
            </van-tab>
            <van-tab title="已完成">
              <template #title>已完成 {{otherList.finished.length}} </template>
              <van-empty description="暂无数据" v-if="!otherList.finished.length"/>
              <van-cell-group 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}}"
                  :value="getDicts(v.status,'resumption_status')"
                  :value-class="`title-orange`"/>
              </van-cell-group>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import DatePicker from '@/components/DatePicker';
import {mapGetters} from "vuex";
import {dataList} from "./api";
import dayjs from "dayjs";

export default {
  components:{NavBar,DatePicker},
  data(){
    return{
      //绑定的日期
      date:new Date(),
      //设置浮动的容器
      container: null,
      //今日履职
      dayList: {
        unfinished:[],
        proceed:[],
        finished:[],
      },
      //周期履职
      otherList:{
        unfinished:[],
        proceed:[],
        finished:[],
      },
      //配置子页面路径
      path:'/lz-edit',
      //字典表
      dicts: ['resumption_status'],
    }
  },
  mounted() {
    this.container = this.$refs.container;
    this.initDatalist();
    document.getElementById('lz-container')
  },
  computed:{
    ...mapGetters(['orgName','orgId']),
  },
  watch:{

  },
  methods:{
    handleScroll(e){
      let scrollTop = document.getElementById('lz-container').scrollTop;
      this.$refs.DatePicker.showPicker = false;
      console.log(scrollTop,'555')
    },
    //格式化时间范围
    formatTime(start,end,format){
      return `${dayjs(start).format(format)}-${dayjs(end).format(format)}`;
    },
    //页面第一次加载
    initDatalist(){
      let data = {
        dateTime: dayjs(new Date()).format('YYYY-MM-DD'),
        orgId: this.orgId,
        roleId:this.roleId,
      }
      dataList(data).then(res=>{
        console.log(res,'ressss')
        this.setData(res);
      })
    },
    //点击日期获取数据
    getDatalist(){
      let data = {
        dateTime: this.date,
        orgId: this.orgId,
        roleId:this.roleId,
      }
      dataList(data).then(res=>{
        console.log(res,'ressssssssss')
        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();
    },
  }
}
</script>
<style lang="scss">
.lvzhi{
  .van-empty{
    background-color: #fff;
  }
  .van-cell-group{
    background-color: #fff;
  }
}
</style>
<style lang="scss" scoped>
  .lvzhi{
    height: 100%;
    overflow: hidden;
  }
  .lz-container{
    height: calc(100vh - 190px);
    overflow: scroll;
  }
  .top-date-box{
    padding: 0 20px;
  }
  .lz-list{
    box-sizing: border-box;
    overflow: auto;
  }
  .list-item{
    margin: 20px;
    >p{
      color:#999;
      font-size: 30px;
      height: 60px;
      line-height: 60px;
    }
  }
  .title-red{
    color: #f16363;
  }
  .title-red{
    color: #58dc33;
  }
  .title-orange{
    color: #fd8104;
  }
</style>