gdy_app_8/src/point/view/task/my_task.vue

<template>
  <div class="my_task_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <TabsList
      ref="tabsList"
      :tabsOption="tabsOption"
      @onRefresh="onRefresh"
      @onInfinite="onInfinite"
      @onTabChange="onTabChange"
      @onConfirm="onConfirm"
      @onCancel="onCancel"
      enablePullUpRefresh
      :isSameContent="true">
      <div slot="filter" style="background: #fff;padding:0.32rem; padding-top: 0;">
        <div class="" v-for="(item,index) in screen_list" :key="index">
          <p>{{item.title}}</p>
          <div class="selected_list">
            <span v-for="(d,i) in item.list" :key="i" @click="onselect(item,d)" :class="{selected: filter[item.mapping] === d.id}">{{d.name}}</span>
          </div>
        </div>
      </div>

      <div slot="content">
        <div v-if="filter.status == 'running'">
           <div style="background-color:#f5f7fa;padding: 0.02rem 0.32rem;border-radius: 5px;border: 0.24rem solid #f5f7fa;" class="flex-box-ce">
             <span class="flex-1 tab-item" @click="activeNames=item.index" :class="item.index==activeNames? 'tab-item-active':''" v-for="(item,index) in tabs" :key="index">{{item.name}}</span>
           </div>
          <template v-if="activeNames=='1'">
            <van-cell-group v-for="(item,index) in list " :key="index" @click="detail(item)">
              <van-cell class="task_list" :title="item.task_name">
                <template slot="default">
                  <template v-if="item.status == 4">
                      <span class="point red" v-if="item.point_config.review_point> 0">+{{item.point_config.review_point}}{{item.pt_name}}</span>
                      <span class="point green" v-if="item.point_config.review_point< 0">{{item.point_config.review_point}}{{item.pt_name}}</span>
                  </template>
                  <template v-else>
                      <span class="point red" v-if="item.point_config.base_point> 0">+{{item.point_config.base_point}}{{item.pt_name}}</span>
                      <span class="point green" v-if="item.point_config.base_point< 0">{{item.point_config.base_point}}{{item.pt_name}}</span>
                  </template>
                </template>
                <template slot="label">
                  <div class="clear" style="margin-top: 0.3rem">
                    <span class="date red">{{item.expire_time}}截止</span>
                    <van-button class="fr complete_task" v-show="item.status == 1" type="info" @click.stop="complete_task(item)" size="small">完成任务</van-button>
                    <span class="fr orange bg" v-show="item.status == 2">待审批</span>
                    <span class="fr red bg" v-show="item.review_status == 2">审批驳回</span>
                    <span class="fr green bg" v-show="item.review_status == 1">审批通过</span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
            <div v-if="list.length == 0" style="background: #fff;color: #909399;font-size: 14px;margin: 0;text-align: center;padding: 0.5rem 0;">
              <img src="static/images/new_noData.png" style="width: 40%;" alt="" />
              <p>今日没有待完成任务哦</p>
            </div>
          </template>
          <template v-if="activeNames=='2'">
            <van-cell-group v-for="(item,index) in list " :key="index" @click="detail(item)">
              <van-cell class="task_list" :title="item.task_name">
                <template slot="default">
                  <template v-if="item.status == 4">
                      <span class="point red" v-if="item.point_config.review_point> 0">+{{item.point_config.review_point}}{{item.pt_name}}</span>
                      <span class="point green" v-if="item.point_config.review_point< 0">{{item.point_config.review_point}}{{item.pt_name}}</span>
                  </template>
                  <template v-else>
                      <span class="point red" v-if="item.point_config.base_point> 0">+{{item.point_config.base_point}}{{item.pt_name}}</span>
                      <span class="point green" v-if="item.point_config.base_point< 0">{{item.point_config.base_point}}{{item.pt_name}}</span>
                  </template>
                </template>
                <template slot="label">
                  <div class="clear" style="margin-top: 0.3rem">
                    <span class="date fontColorC" >{{item.expire_time}}截止</span>
                    <van-button class="fr complete_task" v-show="item.status == 1" type="info" @click.stop="complete_task(item)" size="small">完成任务</van-button>
                    <span class="fr orange bg" v-show="item.status == 2">待审批</span>
                    <span class="fr red bg" v-show="item.review_status == 2">审批驳回</span>
                    <span class="fr green bg" v-show="item.review_status == 1">审批通过</span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
            <div v-if="list.length == 0" style="background: #fff;color: #909399;font-size: 14px;margin: 0;text-align: center;padding: 0.5rem 0;">
              <img src="static/images/new_noData.png" style="width: 40%;" alt="" />
              <p>没有逾期任务哦</p>
            </div>
          </template>
          <template v-if="activeNames=='3'">
            <van-cell-group v-for="(item,index) in list " :key="index" @click="detail(item)">
              <van-cell v-if="date != item.expire_time.slice(0,10)" class="task_list" :title="item.task_name">
                <template slot="default">
                  <template v-if="item.status == 4">
                      <span class="point red" v-if="item.point_config.review_point> 0">+{{item.point_config.review_point}}{{item.pt_name}}</span>
                      <span class="point green" v-if="item.point_config.review_point< 0">{{item.point_config.review_point}}{{item.pt_name}}</span>
                  </template>
                  <template v-else>
                      <span class="point red" v-if="item.point_config.base_point> 0">+{{item.point_config.base_point}}{{item.pt_name}}</span>
                      <span class="point green" v-if="item.point_config.base_point< 0">{{item.point_config.base_point}}{{item.pt_name}}</span>
                  </template>
                </template>
                <template slot="label">
                  <div class="clear" style="margin-top: 0.3rem">
                    <span class="date" :class="item.expire_time_color?'red':'fontColorC'" >{{item.expire_time}}截止</span>
                    <van-button class="fr complete_task" v-show="item.status == 1" type="info" @click.stop="complete_task(item)" size="small">完成任务</van-button>
                    <span class="fr orange bg" v-show="item.status == 2">待审批</span>
                    <span class="fr red bg" v-show="item.status == 3">审批驳回</span>
                    <span class="fr green bg" v-show="item.status == 4">审批通过</span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
            <div v-if="list.length == 0" style="background: #fff;color: #909399;font-size: 14px;margin: 0;text-align: center;padding: 0.5rem 0;">
              <img src="static/images/new_noData.png" style="width: 40%;" alt="" />
              <p>没有其他待完成任务哦</p>
            </div>
          </template>
        </div>
        <van-cell-group v-if="filter.status != 'running'">
          <van-cell v-for="(item,index) in list " :key="index" @click="detail(item)" class="task_list" :title="item.task_name">
            <template slot="default">
              <template v-if="item.status == 4">
                  <span class="point red" v-if="item.point_config.review_point> 0">+{{item.point_config.review_point}}{{item.pt_name}}</span>
                  <span class="point green" v-if="item.point_config.review_point< 0">{{item.point_config.review_point}}{{item.pt_name}}</span>
              </template>
              <template v-else>
                  <span class="point red" v-if="item.point_config.base_point> 0">+{{item.point_config.base_point}}{{item.pt_name}}</span>
                  <span class="point green" v-if="item.point_config.base_point< 0">{{item.point_config.base_point}}{{item.pt_name}}</span>
              </template>
            </template>
            <template slot="label">
              <div class="clear" style="margin-top: 0.3rem">
                <span class="date fontColorC" >{{item.expire_time}}截止</span>
                <van-button class="fr complete_task" v-show="item.status == 1" type="info" @click.stop="complete_task(item)" size="small">完成任务</van-button>
                <span class="fr orange bg" v-show="item.review_status == 0">待处理</span>
                <span class="fr green  bg" v-show="item.review_status == 1">已通过</span>
                <span class="fr red bg" v-show="item.review_status == 2">已拒绝</span>
              </div>
            </template>
          </van-cell>
          <noData style="position: absolute;top: 50vh;margin-top: -3rem;background-color:rgb(245, 245, 245);" :list='list' />
        </van-cell-group>
      </div>
    </TabsList>

  </div>
</template>
<script>

import TabsList from '@/components/TabsList'
import Vue from 'vue'
import {Tab, Tabs, DropdownMenu, DropdownItem,Collapse, CollapseItem } from 'vant'
import moment from 'moment'

Vue.use(Tab).use(Tabs).use(DropdownMenu).use(DropdownItem).use(Collapse).use(CollapseItem)
export default {
  components: {TabsList},
  // 数据
  data () {
    return {
      tabs:[
        {name:'逾期任务',index:'2',num:0},
        {name:'今日任务',index:'1',num:0},
        {name:'其他任务',index:'3',num:0}
      ],
      moment,
      page:1,
      yqList:[],//逾期任务
      yqTotal:0,
      toList: [], // 放今天待完成
      toTotal:0,
      laList: [], // 放代完成
      laTotal:0,
      time: moment().format('YYYY-MM-DD HH:mm'),
      date: moment().format('YYYY-MM-DD'),
      tips: '暂无数据',
      title: '我的任务',
      loading: true,
      activeNames: '2',
      filter: {
        page: 1,
        status: 'rewrite',
        sort: 'publish',
        source_type: 0,
        pt_id: 0,
        page_size:20,
      },
      tabsOption: [
        { title: '驳回重做', value: 'rewrite' },
        { title: '待完成', value: 'running' },
        { title: '待审批', value: 'complete' },
        { title: '已审批', value: 'reviewed' }
      ],
      screen_list: [
        {
          title: '任务类型',
          mapping: 'pt_id',
          list: [
            {name: '全部', id: 0}
          ]
        },
        {
          title: '排序',
          mapping: 'sort',
          list: [
            {name: '按发布时间', id: 'publish'},
            {name: '按截止时间', id: 'expire'}
          ]
        }
      ],
      list:[],
   }
  },
  watch:{
    activeNames(){
      this.onConfirm();
    }
  },
  // 方法
  methods: {
    // 选择条件
    onselect (item, subItem) {
      this.filter[item.mapping] = subItem.id
    },
    onConfirm() {
      this.$refs.tabsList.triggerPullToRefresh()
    },
    onCancel () {
      this.screen_list.forEach(e => {
        this.filter[e.mapping] = e.list[0].id
      })
      this.$refs.tabsList.triggerPullToRefresh()
    },
    // 加载
    showLoading () {
      this.$toast.loading({
        loadingType: 'spinner',
        message: '正在处理'
      })
    },
    onTabChange (value) {
      this.loading = true
      this.list = []
      this.laList = []
      this.filter.status = value.activeTab
      this.$refs.tabsList.triggerPullToRefresh()
    },
    onInfinite (params) {
      if(this.filter.status=='running'){
        this.page++;
        this.getToDay(true,params.done)
      }else{
        this.filter.page++;
        this.get_list(true,params.done)
      }
    },
    onRefresh (params) {
      if(this.filter.status === 'running'){
        this.getToDay(false,params.done)
      }else{
        this.get_list(false,params.done)
      }
    },

    get_list (is,callback) {
      // 需要告诉scroller 组件是否还有数据未加载
      let hasMore = false
      this.loading = true
      is? '':this.filter.page=1;
      this.$axiosUser('get', '/api/pro/integral/work/list', this.filter).then((res) => {
        if (res.data.code == 1) {
          const list = res.data.data.list
          this.laTotal=res.data.data.total
          if (this.filter.page === 1) {
            this.list = list
          } else {
            this.list = this.list.concat(list)
          }
          // 检查是否超时
          this.list.forEach(element => {
            if (moment(this.time).isBefore(element.expire_time)) {
              element.expire_time_color = false
            } else {
              element.expire_time_color = true
            }
          })
          // 需要告诉scroller 组件是否还有数据未加载 true没有 flase 还有
          hasMore = list.length !== 20
          callback && callback(hasMore)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getToDay (is,callback) {
      let hasMore = false
      this.loading = true
      is? '':this.page=1;
      let data={
          page:is? this.page:1,
          page_size:20,
          status:'running',
          today: this.activeNames.toString(),
          sort: this.filter.sort,
          source_type: 0,
          pt_id: this.filter.pt_id
      }
      this.$axiosUser('get', '/api/pro/integral/work/list',data).then(res => {
        let list=res.data.data.list||[];
        if (this.page === 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        hasMore = list.length !== 20
        callback && callback(hasMore)
      }).finally(() => {
        this.loading = false
      })
    },
    //  进入详情
    detail (item) {
      this.$router.push({name: 'taskFile', query: {task_id: item.id}})
    },
    // 完成任务
    complete_task (item) {
      this.$router.push({name: 'process', query: {work_id: item.id, progress: 100}})
    }
  },
  // 组件挂载完成
  mounted () {
    let arr = this.$getTypes
    this.screen_list[0].list.push(...arr)
  },
  activated() {
  	 this.$refs.tabsList.triggerPullToRefresh()
  }

}
</script>
<style scoped>
.tab-item{
  background-color: rgb(236, 237, 239);
  text-align: center;
  font-weight: 500;
  padding: 0.1rem;
  color: #646566;
}
.tab-item-active{
  background-color: #fff;
  color: #141c28;
  border-radius: 5px;
}
.body_com{height: calc(100% - 1.92rem); position: relative;}
.task_list .van-cell__title span{
  font-size: 0.36rem;
}
.task_list .van-cell__title span.date{
  font-size: 0.28rem;
}
.task_list .van-cell__title .complete_task{
  position: absolute;
  right: 0.24rem;
  bottom: 0.24rem;
  z-index: 2;
}
.task_list .van-cell__title .fr.orange,.task_list .van-cell__title .fr.red,.task_list .van-cell__title .fr.green{
  position: absolute;
  right: 0.24rem;
  bottom: 0.24rem;
  z-index: 2;
  font-size: 0.28rem;
}
.task_list .van-cell__title .complete_task span{
  font-size: inherit;
}
.task_list /deep/ .van-cell__value{
  flex: none;
}
.selected_list span{
  display: inline-block;
  height: 0.72rem;
  background: #f5f7fa;
  border-radius: 0.08rem;
  line-height: 0.72rem;
  touch-action: none;
  padding: 0 0.2rem;
  margin-right: 0.2rem;
  font-size: 0.3rem;
}
.selected_list span.selected{
  color: #26a2ff;
  background: #26a2ff33;
}
.van-cell-group{
  margin-top: 0;
}
.task {
  /* background: #F5F7FA; */
  color: #222;
  font-size: 14px;
  /* padding: 0.05rem 0.32rem 0.15rem 0.32rem; */
}
.bkColor {
  background-color: #fff;
}
.activeColor {
   background-color: transparent;
}
.my_task_box /deep/ .van-row--justify-center{
  top:50vh;
}
</style>