wdt_erp_process_h5/pages/edt/TabulateStatisticsList.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="3" 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.slice(0, 3)"
					:key="cellIndex"
					align="center"
					>
					<!-- 根据 cellIndex 来判断显示内容 -->
					<template v-if="cellIndex === 0 && row[0] !== '汇总'">
						<a href="#" @click.prevent="detail(row[3])">{{ cell }}</a> <!-- 使用 row[3] 传递 officeId -->
					</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: ["村级名称", "清运总数", "当前月清运数"], // 去掉了 "officeId"
				// 表格的数据，二维数组表示每一行
				tableData: []
			};
		},

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

		methods: {
			load() {
				// 根据所属村落id将所有清运数据进行统计展示
				disposeRubbishService.getAllOfficeDetailCollect(this.id).then((data) => {
					console.log(data);
					this.tableData = data.map(item => [
						item.officeName,  // 第 0 列：村级名称
						item.all,         // 第 1 列：清运总数
						item.month,       // 第 2 列：当前月清运数
						item.officeId     // 第 3 列：officeId 作为隐藏的参数
					]);
				}).catch(error => {
					console.error('数据加载失败:', error);
				});
			},

			detail(officeId) {
				console.log('查看详情', officeId)
				uni.navigateTo({
					url: `/pages/edt/TabulateStatisticsDetail?id=${officeId}`, // 使用 officeId 作为参数
					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>