parking_operation/pages/statisticalReport/roadModel/components/recoveryReport.vue

<!--
 * @Description: 统计报表 => 追缴统计(路段)
 * @Author: 空白格
 * @Date: 2022-08-03 11:21:31
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-03 11:46:05
 * @FilePath: \parking_operation\pages\statisticalReport\roadModel\components\recoveryReport.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved. 
-->
<template>
  <view class="container">
    <view class="table">
      <view class="table-date" v-if="currentDate">{{ currentDate.join(' 至 ') }}</view>
      <view class="table-box">
        <TableRanking
          :loading="loading"
          :padding="'0'"
          :tableTh="tableTh"
          :tableData="tableData"
          @pageChange="pageChange"
        />
      </view>
    </view>
    <view class="total">
      <view>
        数据统计，收费员共
        <text>{{ totalData.dataCount || 0 }}</text>人，累计追缴
        <text>{{ totalData.pursueCount || 0 }}</text>次，其中追缴现金金额
        <text>{{ totalData.cashAmt || 0 }}</text>元，追缴非现金金额
        <text>{{ totalData.otherAmount || 0 }}</text>元，追缴总额共计
        <text>{{ totalData.quickAmt || 0 }}</text>元
      </view>
    </view>
  </view>
</template>

<script>
import TableRanking from '@/components/tableRanking.vue';
export default {
  components: {
    TableRanking
  },
  props: {
    tableTh: {
      type: Array,
      default: () => {
        return [
          {
            field: '收费员',
            width: 120,
            key: 'payeeName'
          },
          {
            field: '追缴次数',
            width: 80,
            key: 'pursueCount'
          },
          {
            field: '追缴现金金额(元)',
            width: 80,
            key: 'cashAmt'
          },
          {
            field: '追缴非现金金额(元)',
            width: 80,
            key: 'otherAmount'
          },
          {
            field: '追缴总额(元)',
            width: 80,
            key: 'totalAmt'
          }
        ];
      }
    }
  },
  data() {
    return {
      loading: false,
      tableData: {
        current: 1,
        total: 0,
        list: []
      },
      totalData: {},
      currentDate: [],
      beginTime: undefined,
      endTime: undefined
    };
  },
  methods: {
    getData(data) {
      if (data.length) {
        this.beginTime = data[0];
        this.endTime = data[1];
      }
      this.currentDate = data;
      this.tableData.current = 1;
      this.getIncomeTotal();
      this.getIncomeList();
    },
    getIncomeTotal() {
      uni.$u.api.statisticalReportApi
        .getRecoverySumReportApi({
          beginTime: this.beginTime,
          endTime: this.endTime
        })
        .then((res) => {
          if (res.code === 200) {
            this.totalData = res.data;
          }
        });
    },
    getIncomeList() {
      this.loading = true;
      uni.$u.api.statisticalReportApi
        .getRecoveryReportApi({
          beginTime: this.beginTime,
          endTime: this.endTime,
          pageNum: this.tableData.current,
          pageSize: 10
        })
        .then((res) => {
          if (res.code === 200) {
            this.tableData.list = res.rows;
            this.tableData.total = res.total;
          }
          this.loading = false;
        });
    },
    pageChange(cur) {
      this.tableData.current = cur;
      this.getIncomeList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import './report.scss';
</style>