wdt_erp_process_h5/pages/edt/TabulateStatisticsDetail.vue

<template>
	<view class="u-content">
		<section style="margin-top: 1.5em; overflow-x: auto;">
			<table style="min-width: 400px;" cellspacing="0" cellpadding="5">
				<thead>
				<tr>
					<th colspan="4" style="text-align: center; font-size: 20px; font-weight: bold;">
						清运汇总表
					</th>
				</tr>
				<tr>
					<th v-for="(header, index) in tableHeaders" :key="index">{{ header }}</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="(row, rowIndex) in tableData" :key="rowIndex" :style="rowIndex % 2 === 1 ? 'background-color: #f6f8fa;' : ''">
					<td
							v-for="(cell, cellIndex) in row"
							:key="cellIndex"
							align="center"
							:style="cellIndex === 1 ? '' : ''"
					>
						<!-- 根据 cellIndex 来判断显示内容 -->
						<template v-if="cellIndex === 0 && cell !== '汇总'">
							<!--<u-link href="#" :text="cell" @click="handleLinkClick(cell)"></u-link>-->
							<a href="#" @click.prevent="handleLinkClick(cell)">{{ cell }}</a>
						</template>
						<template v-else>
							{{ cell }}
						</template>
					</td>
				</tr>
				</tbody>
			</table>
		</section>
	</view>
</template>

<script>
	import disposeRubbishService from '@/api/garbageClearance/disposeRubbishService'

	export default {
		data() {
			return {
				id:'',
				// 表格的头部
				tableHeaders: ["月份", "清运次数", "清运量（t）", "补贴（元）"],
				// 表格的数据，二维数组表示每一行
				tableData: []
			};
		},

		onLoad(val) {
			this.id = val.id;
			this.load();
		},

		methods: {
			load() {
				// 根据所属村落id将所有清运数据进行统计展示
				disposeRubbishService.getDetailCollectByOfficeId(this.id).then((data) => {
					console.log(data);
					this.tableData = data.map(item => [
						item.createDateStr,
						item.count,
						item.weight,
						item.subsidy
					]);
				}).catch(error => {
					console.error('数据加载失败:', error);
				});
			},

			handleLinkClick(cell) {
				console.log('查看详情',cell)
				uni.navigateTo({
					url: `/pages/edt/DisposeRubbishListDetail?id=`+this.id + `&yearMonth=`+cell,
					success: function(res) {
						// 跳转成功后的处理
						console.log('跳转成功');
					},
					fail: function(err) {
						// 跳转失败后的处理
						console.log('跳转失败', err);
					},
					complete: function() {
						// 无论跳转成功还是失败都会执行
						console.log('跳转完成');
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.u-content {
		padding: 24rpx;
		font-size: 32rpx;
		color: #333;
		line-height: 1.6;
	}
	table {
		box-sizing: border-box;
		border-top: 1px solid #dfe2e5;
		border-left: 1px solid #dfe2e5;
	}
	th {
		border-right: 1px solid #dfe2e5;
		border-bottom: 1px solid #dfe2e5;
	}
	td {
		border-right: 1px solid #dfe2e5;
		border-bottom: 1px solid #dfe2e5;
	}
	a {
		color: rgb(41, 121, 255); /* 设置默认链接颜色 */
		text-decoration: none; /* 可选: 去掉下划线 */
		font-size: 16px; /* 设置所有链接的字体大小 */
	}

	a:hover {
		color: rgb(41, 121, 255); /* 鼠标悬停时的颜色，与默认颜色一致 */
	}

	a:visited {
		color: rgb(41, 121, 255); /* 已访问链接的颜色，与默认颜色一致 */
	}

	a:active {
		color: rgb(41, 121, 255); /* 点击链接时的颜色，与默认颜色一致 */
	}
</style>