parking_operation/pages/collectorManagement/performanceRanking/performanceRanking.vue

<!--
 * @Description: 业绩排行
 * @Author: 空白格
 * @Date: 2022-06-20 09:15:39
 * @LastEditors: 空白格
 * @LastEditTime: 2022-06-20 15:49:36
 * @FilePath: \parking_operation\pages\collectorManagement\performanceRanking\performanceRanking.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->

<template>
  <view class="performance-ranking">
    <view class="performance-ranking-search">
      <view class="performance-ranking-search-item">
        <uni-datetime-picker v-model="dateRange" type="daterange" @change="dateChange" />
      </view>
      <view class="performance-ranking-search-item">
        <yealuoInputs
          v-if="loadAcheve"
          ref="yealuoInputs"
          :value="payeeNoList"
          placeholder="请勾选收费员"
          :binData="collectorList"
          checkType="checkbox"
          overflow="hide"
          @getBackVal="getBackVal"
          :selectIco="true"
        />
      </view>
      <view class="performance-ranking-search-item btn-item">
        <u-button text="搜索" size="small" class="custom-btn" type="primary" @click="handleQuery"></u-button>
        <u-button text="重置" size="small" class="custom-btn" @click="handleReset"></u-button>
      </view>
    </view>
    <view class="performance-ranking-content">
      <TableRanking
        :loading="tableData.loading"
        :padding="'0'"
        :tableTh="tableData.tableTh"
        :tableData="tableData.tableData"
        @pageChange="pageChange"
      />
    </view>
  </view>
</template>

<script>
import yealuoInputs from '@/components/yealuo-select/yealuo-select.vue';
import TableRanking from '@/components/tableRanking.vue';
export default {
  components: {
    yealuoInputs,
    TableRanking
  },
  data() {
    return {
      dateRange: [],
      collectorList: [],
      payeeNoList: '',
      loadAcheve: false,
      params: {
        payeeNoList: '',
        beginTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: {
        loading: false,
        tableTh: [
          {
            field: '工号',
            key: 'payeeNo',
            width: 100
          },
          {
            field: '姓名',
            key: 'payeeName'
          },
          {
            field: '实收金额(元)',
            key: 'realAmount'
          }
        ],
        tableData: {
          list: [],
          total: 0
        }
      }
    };
  },
  onShow() {
    this.getCollectorList();
    this.getList();
  },
  methods: {
    /**
     * 获取所有收费员
     * @date 2022-06-20
     * @returns {any}
     */
    getCollectorList() {
      uni.$u.api.tollCollectorPerformanceApi
        .getAllTollCollectorApi()
        .then((res) => {
          const { code, rows } = res;
          if (code === 200) {
            this.collectorList = rows.map((item) => {
              return { id: item.payeeNo, value: item.payeeName };
            });
            this.loadAcheve = true;
          }
        });
    },
    /**
     * 获取数据
     */
    getList() {
      this.tableData.loading = true;
      uni.$u.api.statisticalReportApi
        .getTollCollectorAchieveListApi({ ...this.params })
        .then((res) => {
          const { code, rows, total } = res;
          if (code === 200) {
            this.tableData.tableData.list = rows;
            this.tableData.tableData.total = total;
          }
          this.tableData.loading = false;
        });
    },
    handleQuery() {
      this.getList();
    },
    handleReset() {
      this.params = {
        payeeNoList: '',
        beginTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10
      };
      this.dateRange = [];
      this.$refs['yealuoInputs'].clearData();
      this.getList();
    },
    getBackVal(val) {
      if (typeof val === 'string') {
        let curList = val.split(','),
          valList = [];
        if (curList.length) {
          curList.forEach((item) => {
            valList.push(item.split('|')[1]);
          });
        }
        this.params.payeeNoList = valList.join(',');
      }
    },
    /**
     * 时间范围选择触发
     * @param {*} e
     */
    dateChange(e) {
      this.params.beginTime = e[0];
      this.params.endTime = e[1];
    },
    /**
     * 分页触发
     * @param {*} page
     */
    pageChange(page) {
      this.params.pageNum = page;
      this.getList();
    }
  }
};
</script>
<style lang="scss">
	page {
	  background-color: #1767f2;
	  min-height: calc(100vh - 44px);
	}
</style>
<style lang="scss" scoped>
@import './performanceRanking.scss';
</style>