wdt_erp_process_h5/pages/edt/DisposeRubbishListDetail.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">
							<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'
	import taskService from "@/api/flowable/taskService"
	import pick from "lodash.pick";

	export default {
		data() {
			return {
				id:'',
				yearMonth:'',
				// 表格的头部
				tableHeaders: ["清运编号", "完成状态", "完成时间", "处理方式"],
				// 表格的数据，二维数组表示每一行
				tableData: []
			};
		},

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

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

			async handleLinkClick(cell) {
				try {

					// 先根据编号查询具体信息
					const dispose = await disposeRubbishService.getByNo(cell);

					// 获取流程名称
					let rowName = await taskService.getProcessNameByInstanceId(dispose.procInsId);

					if (dispose.status === '5') {
						// 如果流程状态为 '5'，获取历史流程定义ID
						const row = await taskService.getHistoryProcessDefinitionIdByInstanceId(dispose.procInsId);

						const data = await taskService.getTaskDef({
							taskDefKey: row.taskDefinitionKey,
							procInsId: dispose.procInsId,
							procDefId: row.processDefinitionId
						});

						// 构建导航所需的查询参数
						let query = {
							readOnly: true,
							taskId: row.executionId,
							title: `${rowName}【${rowName}】`,
							formTitle: `${rowName}`,
							...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')
						};

						// 执行导航
						uni.navigateTo({
							url: '/pages/workbench/task/TaskFormDetail?flow=' + JSON.stringify(query)
						});

					} else {
						// 如果流程状态不是 '5'，获取当前的流程定义ID
						const row = await taskService.getProcessDefinitionIdByInstanceId(dispose.procInsId);

						const data = await taskService.getTaskDef({
							taskDefKey: row.taskDefinitionKey,
							procInsId: row.processInstanceId,
							procDefId: row.processDefinitionId
						});

						// 构建导航所需的查询参数
						let query = {
							readOnly: true,
							taskId: row.executionId,
							title: `${rowName}【${rowName}】`,
							formTitle: `${rowName}`,
							...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')
						};

						// 执行导航
						uni.navigateTo({
							url: '/pages/workbench/task/TaskFormDetail?flow=' + JSON.stringify(query)
						});
					}
				} catch (error) {
					console.error('数据加载失败:', error);
				}
			}
		}
	};
</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>