gdy_app_8/src/okr/view/okrHome/okrBack.vue

<template>
  <div style="height: 100%;" :class="{ bg_fff: skeletonLoad }">
    <van-nav-bar title="待办提醒" left-text="" left-arrow @click-left="routerBak" />
    <VanSkeleton :skeLoad="skeletonLoad">
      <template>
        <header class="performanceList">
          <van-tabs v-model="active" @change="minFormTabs" swipeable>
            <van-tab v-for="(item, index) in minFormactive" :key="index">
              <template #title>
                <div style="position: relative;">
                  {{item.name}}
                  <em v-if="item.age > 0" class="cunt" :class="{ cunts: item.age > 99 }">
                    <i v-if="item.age < 100">{{ item.age }}</i>
                    <i v-else>99+</i>
                  </em>
                </div>
              </template>
            </van-tab>
          </van-tabs>
        </header>
        <scroller ref="work_bench_scroller" class="all"  :on-refresh="refresh" :on-infinite="infinite" noDataText="我也是有底线的" :list="backlogList">
          <div>
            <van-empty description="暂无信息" v-if="backlogList.length == 0" />
            <div v-else v-for="(item, index) in backlogList" :key="index">
              <div class="backlog_list_tit">{{ item.time }}</div>
              <div v-for="(arr, keys) in item.list" :key="keys" @click="openDetail(arr)" :style="'z-index:' + (item.list.length - keys)" class="performanceList backlog_list">
                  <div class="flex-box" style="align-items: center;">
                     <span class="flex-1" v-html="arr.content"></span>
                     <van-icon name="arrow" color="#b1b1b1" />
                  </div>
              </div>
            </div>
          </div>
        </scroller>
      </template>
    </VanSkeleton>
  </div>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import VanSkeleton from '@/performance/components/public/VanSkeleton'
import { Tab, Tabs } from 'vant'
Vue.use(Tab).use(Tabs)
export default {
  data () {
    return {
      skeletonLoad: false, // 过度骨架屏
      // minFormactive: [{ name: '未读', age: 0 }, { name: '已读' }],
      minFormactive: [{ name: '未读', age: 0 }],
      active: 0,
      backlogList: [],

      unread: [], // 未处理
      read: [], // 已处理
      ccData: {
        fb: 0,
        has_follow: 0, // 状态
        page: 1, // 当期页
        page_size: 10 // 一页多少数据
      },

      theBackupListcc: []
    }
  },
  components: { VanSkeleton },
  methods: {
    openDetail(item) {
      if (item.target_type == 1 || item.target_type == 2) {
        if(item.target_type == 1){
          this.$router.push({ name: 'targetDetail', query: { id: item.target_id} })
        }else{
          this.$router.push({ name: 'krDetail', query: { id: item.target_id} })
        }
      } else  if(item.target_type == 3){
        this.$router.push({ name: 'taskDetail', query: { id: item.target_id} })
      } else  if(item.target_type == 4){
        this.$router.push({ name:'projectDetail',query:{id:item.target_id}})
      }
    },
    cc (callback) {
      // 抄送
      let hasMore = false
      let params = this.ccData
      this.$axiosUser('get', '/api/pro/okr/notice', params).then(res => {
        if (res.data.code == 1) {
          let list = res.data.data.list
          if (this.ccData.page === 1) {
            this.theBackupListcc = list
          } else {
            this.theBackupListcc = this.theBackupListcc.concat(list)
          }
          hasMore = list.length !== 10
          callback && callback(hasMore)
          let data = this.theBackupListcc
          if (this.active == 0) {
            this.minFormactive[0].age = res.data.data.total
          }
          this.format(data)
          this.skeletonLoad = false
        }
      })
    },
    minFormTabs (key) {
      this.ccData.page = 1
      this.ccData.has_follow = key
      this.cc()
    },
    format (data) {
      data.forEach(item => {
        // 转换展示的时间格式
        let time=Number(item.update_time+'000');
        if (moment(time).format('YYYY') == moment().format('YYYY')) {
          item.tineKind = moment(time).format('MM月DD日')
        } else {
          item.tineKind = moment(time).format('YYYY年MM月DD日')
        }
      })
      // 转换成可用格式
      let bbt = []
      data.forEach(item => {
        if (bbt[item.tineKind]) {
          bbt[item.tineKind].list.push(item)
        } else {
          bbt[item.tineKind] = true
          bbt[item.tineKind] = {
            time: item.tineKind,
            list: []
          }
          bbt[item.tineKind].list.push(item)
        }
      })
      let listdata = []
      for (let i in bbt) {
        listdata.push(bbt[i])
      }
      this.$nextTick(() => {
        this.backlogList = listdata
      })
    },
    // 上拉刷新
    refresh (done) {
      this.ccData.page = 1
      this.cc(done)
    },
    // 下拉加载
    infinite (done) {
      this.ccData.page++
      this.cc(done)
    },
    vantabTit (data) {
      let num = data.age ? '(' + data.age + ')' : ''
      return data.name + num
    },
    // 返回上一页
    routerBak () {
      this.$route_back()
    }
  },
}
</script>

<style scoped lang="less">
.all {
  height: calc(100% - 1.82rem) !important;
  position: relative !important;
  background-color: #f5f7fa;
}
header {
  background-color: #fff;
  padding-left: 0.2rem;
  font-size: 0.3rem;
  z-index: 1;
}
.backlog_list_tit {
  background-color: #f5f7fa;
  padding: 0.2rem 0 0.2rem 0.2rem;
  font-size: 0.28rem;
}
.backlog_list {
  padding: 0.24rem 0.32rem;
  span {
    font-size: 0.29rem;
    padding-right: 0.2rem;
  }
}
.cunt {
  background-color: #f15532;
  text-align: center;
  line-height: 0.4rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  position: absolute;
  top: 0.26rem;
  left: 2.1rem;
  color: #fff;
  font-size: 0.24rem;
  font-style: normal;
  i {
    font-style: normal;
  }
}
.cunts {
  width: auto !important;
  padding: 0 .04rem 0 .08rem !important;
  border-radius: .8rem !important;
}
</style>