parking_operation/pages/collectorManagement/performanceRanking/performanceRanking.vue

<!--
 * @Description: 业绩排行
 * @Author: 空白格
 * @Date: 2022-06-20 09:15:39
 * @LastEditors: 空白格
 * @LastEditTime: 2022-11-16 13:38:03
 * @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="'2'" :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: undefined,
					beginTime: undefined,
					endTime: undefined,
					sortField: 'realAmount',
					sortOrder: 'desc',
					pageNum: 1,
					pageSize: 10
				},
				tableData: {
					loading: false,
					tableTh: [{
							field: '工号',
							key: 'payeeNo',
							width: 100
						},
						{
							field: '姓名',
							key: 'payeeName',
							width: 80
						},
						{
							field: '实收金额(元)',
							key: 'realAmount',
							width: 100
						},
						{
							field: '追缴现金金额(元)',
							key: 'pursueCashAmt',
							width: 100
						},
						{
							field: '追缴非现金金额(元)',
							key: 'pursueOtherAmt',
							width: 100
						}
					],
					tableData: {
						list: [],
						total: 0
					}
				}
			};
		},
		onShow() {
			// this.getCollectorList();
			const firstToday = uni.$u.timeFormat(this.getLastMonthFirst(), 'yyyy-mm-dd'),
				lastToday = uni.$u.timeFormat(this.getLastMonthLast(), 'yyyy-mm-dd');
			this.dateRange = [firstToday, lastToday];
			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;
				if (this.dateRange.length)(this.params.beginTime = this.dateRange[0]), (this.params.endTime = this
					.dateRange[1]);
				uni.$u.api.statisticalReportApi.getTollCollectorAchieveListApi({
					...this.params
				}).then((res) => {
					const {
						code,
						rows,
						total
					} = res;
					if (code === 200) {
						this.tableData.tableData.list = rows.map((item) => {
							return {
								...item,
								pursueAmt: item.pursueOtherAmt + item.pursueCashAmt
							};
						});
						this.tableData.tableData.total = total;
					}
					this.tableData.loading = false;
				});
			},
			handleQuery() {
				this.getList();
			},
			handleReset() {
				this.params = {
					payeeNoList: undefined,
					beginTime: undefined,
					endTime: undefined,
					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];
				this.getList();
			},
			/**
			 * 分页触发
			 * @param {*} page
			 */
			pageChange(page) {
				this.params.pageNum = page;
				this.getList();
			},
			/**
			 * 获取上个月的第一天
			 */
			getLastMonthFirst() {
				const date = new Date()
				const firstDate = new Date(date.getFullYear(), date.getMonth() - 1, 1);
				return firstDate
			},
			/**
			 * 获取上个月的最后一天
			 */
			getLastMonthLast() {
				const date = new Date()
				const enddate = new Date(date.getFullYear(), date.getMonth(), 0)
				return enddate
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #1767f2;
		min-height: calc(100vh - 44px);
	}
</style>
<style lang="scss" scoped>
	@import './performanceRanking.scss';
</style>