crm-mobile/pages_oa/legwork/component/legworkStatistics.vue

<template>
  <view class="legwork-statistics">
    <view class="filter" @click="handleToggleFilter">
      <view class="left">
        时间范围
      </view>
      <view class="right">
        <text class="time">
          {{ filterObj.timeStr }}
        </text>
        <text class="wk wk-arrow-right" />
      </view>
    </view>

    <wk-scroll-view
      :status="listStatus"
      class="list-scroll"
      @refresh="getList(true)"
      @loadmore="getList()">
      <sign-user-info
        v-for="(item, index) in listData"
        :key="index"
        :item-data="item"
        @click="handleTo(item)">
        <template
          v-slot:default="{ scopeData }">
          <span class="text">{{ scopeData.count }}位</span>
        </template>
      </sign-user-info>
    </wk-scroll-view>

    <filter-section
      v-if="showFilter"
      :filter-data="filterObj"
      @change="handleChangeFilter"
      @close="handleToggleFilter" />
  </view>
</template>

<script>
  import { LegworkStatistics } from 'API/oa/legwork'

  import SignUserInfo from '../../component/signUserInfo'
  import FilterSection from './filterSection.vue'

  import moment from 'moment'
  import mainListMixins from '@/mixins/mainList.js'

  export default {
    name: 'LegworkStatistics',
    components: {
      SignUserInfo,
      FilterSection
    },
    mixins: [mainListMixins],
    data() {
      return {
        loading: false,
        showFilter: false,
        filterObj: {
          data: {
            startTime: moment().format('YYYY-MM-DD') + ' 00:00:00',
            endTime: moment().format('YYYY-MM-DD') + ' 23:59:59'
          },
          timeIndex: 0,
          timeStr: '今天'
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList(flag = false) {
        if (this.loading) return
        this.loading = true

        if (flag) {
          this.listParams.page = 0
        }
        this.listParams.page++
        this.listStatus = 'loading'

        LegworkStatistics({
        ...this.listParams,
        ...this.filterObj.data
        }).then(res => {
          this.loading = false
          console.log('static list: ', res)
          if (this.listParams.page === 1) {
            this.listData = []
          }
          this.listData = this.listData.concat(res.list)
          if (res.hasOwnProperty('lastPage')) {
            this.listStatus = res.lastPage ? 'noMore' : 'more'
          } else {
            this.listStatus = res.list.length === 0 ? 'noMore' : 'more'
          }
        }).catch(() => {
          this.loading = false
          this.listStatus = 'more'
        })
      },

      handleToggleFilter() {
        this.showFilter = !this.showFilter
      },

      handleChangeFilter(data) {
        console.log(data)
        this.filterObj = data
        this.getList(true)
      },

      handleTo(item) {
        let title = `${item.realname}(${this.filterObj.timeStr})`
        this.$Router.navigateTo({
          url: '/pages_oa/legwork/statisticsDetail',
          query: {
            userId: item.userId,
            title: title,
          ...this.filterObj.data
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.text {
  font-size: 30rpx;
  color: $light;
}

.legwork-statistics {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .filter {
    width: 100%;
    font-size: 26rpx;
    color: $dark;
    background-color: white;
    box-shadow: 0 8rpx 8rpx 0 rgba(28,108,255,0.1);
    padding: 18rpx 32rpx;
    @include left;
    .left {
      flex: 1;
      font-size: $wk-font-base;
    }
    .right {
      @include left;
      .time {
        font-size: $wk-font-base;
      }
      .wk-arrow-right {
        font-size: $wk-font-sm;
        margin-left: 20rpx;
      }
    }
  }

  .list-scroll {
    flex: 1;
    overflow: hidden;
    margin-top: 20rpx;
  }
}
</style>