parking_operation/pages/dataOverview/statisticalReport/components/reallyReceivable.vue

<!-- 应收实收分析 -->
<template>
	<view class="container">
		<view class="tab">
			<u-tabs
				:list="tabList"
				lineColor="#fff"
				:activeStyle="{
					color: '#fff',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#000',
					transform: 'scale(1)'
				}"
				@click="tabClick">
			</u-tabs>
		</view>
		<view class="table">
			<view class="table-date" v-if="params.queryDate">{{ params.title }}</view>
			<view class="table-box">
				<uni-table emptyText="暂无更多数据" :loading="loading">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th class="table-box-th" align="center" v-for="(item, index) in tableTh" :key="index"
							:width="item.width || ''">{{ item.field }}
						</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in tableData.list" :key="index">
						<uni-td class="table-box-td" align="center" v-for="(field, fIndex) in tableTh" :key="fIndex">
							{{ item[field.key] }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tableTh: {
				type: Array,
				default: () => {
					return [{
							field: '时间',
							width: 120,
							key: 'statisTime'
						},
						{
							field: '应收金额(元)',
							width: 80,
							key: 'payAmount'
						},
						{
							field: '实收金额(元)',
							width: 80,
							key: 'realAmount'
						},
						{
							field: '逃费金额(元)',
							width: 80,
							key: 'runawayAmount'
						},
						{
							field: `“一分钱停车”减免`,
							width: 120,
							key: 'oneAmount'
						},
						{
							field: '“八折停车”减免',
							width: 110,
							key: 'eightAmount'
						},
						{
							field: '欠费金额(元)',
							width: 80,
							key: 'amtOwe'
						},
						{
							field: '退款金额(元)',
							width: 80,
							key: 'backAmount'
						}
					]
				}
			}
		},
		data() {
			return {
				currentDate: [],
				tableData: {
					list: []
				},
				params: {
					reportType: 2,
					queryDate: '',
					title: ''
				},
				loading: false,
				tabCurName: 'road',
				tabList: [
					{ name: '路段', value: 'road' },
					{ name: '停车场', value: 'parking' }
				]
			}
		},
		methods: {
			tabClick(item) {
				this.tabCurName = item.value
				if (this.tabCurName === 'road') {
					this.getReallyReceivableList()
				} else {
					this.getParkingReallyReceivableList()
				}
			},
			getData(obj) {
				this.params = obj
				this.getReallyReceivableList()
			},
			getReallyReceivableList() {
				this.loading = true
				uni.$u.api.statisticalReportApi.getReallyReceivableListApi(this.params).then(res => {
					if (res.code === 200) {
						this.tableData.list = res.data.itemList
					}
					this.loading = false
				})
			},
			getParkingReallyReceivableList() {
				this.loading = true
				uni.$u.api.statisticalReportApi.getParkingReallyReceivableListApi(this.params).then(res => {
					if (res.code === 200) {
						this.tableData.list = res.data.itemList
					}
					this.loading = false
				})
			}
		}
	}
</script>

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