huarun/traceCodePackages/traceabilityReport/pages/ganmaoling/index.vue

<template>
	<view class="detail-page">
		<view class="tip">数据更新时间：{{ formatDate(new Date().setDate(new Date().getDate() - 1), 'YYYY-MM-DD') || '--' }}</view>
		<view class="card" :style="{ height: tableBodyHeight + 'rpx' }">
			<scroll-view class="grid-scroll" scroll-y="true" scroll-x="true" :show-scrollbar="false"
				:style="{ maxHeight: tableBodyHeight + 'rpx' }" enhanced @scrolltolower="onTableScrollToLower">
				<view :style="{
					width: '2685rpx',
				}">
					<view class="grid-header">
						<!-- Row 1 -->
						<text class="hcell header-group hcell-sticky-left" style="grid-column: 1 / 2; grid-row: 1 / 2; z-index: 12;">该企业累计预警次数</text>
						<text class="hcell header-group" style="grid-column: 2 / 7; grid-row: 1 / 2;">客户基础信息</text>
						<text class="hcell header-group" style="grid-column: 7 / 16; grid-row: 1 / 2;">流转信息</text>

						<!-- Row 2 -->
						<text class="hcell hcell-sticky-left" style="grid-column: 1 / 2; grid-row: 2 / 3;">累计预警次数</text>
						<text class="hcell" style="grid-column: 2 / 3; grid-row: 2 / 3;">客户名称</text>
						<text class="hcell" style="grid-column: 3 / 4; grid-row: 2 / 3;">客户所在省份</text>
						<text class="hcell" style="grid-column: 4 / 5; grid-row: 2 / 3;">客户级别</text>
						<text class="hcell" style="grid-column: 5 / 6; grid-row: 2 / 3;">客户性质</text>
						<text class="hcell" style="grid-column: 6 / 7; grid-row: 2 / 3;">责任经理</text>
						<text class="hcell" style="grid-column: 7 / 8; grid-row: 2 / 3;">收货企业名称</text>
						<text class="hcell" style="grid-column: 8 / 9; grid-row: 2 / 3;">收货企业所在省份</text>
						<text class="hcell" style="grid-column: 9 / 10; grid-row: 2 / 3;">单据时间</text>
						<text class="hcell" style="grid-column: 10 / 11; grid-row: 2 / 3;">单据类型</text>
						<text class="hcell" style="grid-column: 11 / 12; grid-row: 2 / 3;">产品名称</text>
						<text class="hcell" style="grid-column: 12 / 13; grid-row: 2 / 3;">批号</text>
						<text class="hcell" style="grid-column: 13 / 14; grid-row: 2 / 3;">发货地</text>
						<text class="hcell" style="grid-column: 14 / 15; grid-row: 2 / 3;">数量</text>
						<text class="hcell" style="grid-column: 15 / 16; grid-row: 2 / 3;">链路</text>
					</view>

					<view v-if="!loading && rows.length > 0" class="grid-body">
						<view v-for="(row, idx) in rows" :key="idx" class="grow">
							<!-- Common Columns (merged) -->
							<view v-if="row.flags.common" class="gcell gcol-1 sticky-left gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.alertCount }}</view>
							<view v-if="row.flags.common" class="gcell gcol-2 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.customerName }}</view>
							<view v-if="row.flags.common" class="gcell gcol-3 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.customerProvince }}</view>
							<view v-if="row.flags.common" class="gcell gcol-4 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.customerLevel }}</view>
							<view v-if="row.flags.common" class="gcell gcol-5 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.customerNature }}</view>
							<view v-if="row.flags.common" class="gcell gcol-6 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.manager }}</view>
							<view v-if="row.flags.common" class="gcell gcol-7 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.receiverName }}</view>
							<view v-if="row.flags.common" class="gcell gcol-8 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.receiverProvince }}</view>
							<view v-if="row.flags.common" class="gcell gcol-9 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.docTime }}</view>
							<view v-if="row.flags.common" class="gcell gcol-10 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.docType }}</view>
							<view v-if="row.flags.common" class="gcell gcol-11 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common }">{{ row.productName }}</view>
							
							<!-- Detail Columns (not merged) -->
							<view class="gcell gcol-12">{{ row.batchNo }}</view>
							<view class="gcell gcol-13">{{ row.sourceRegion }}</view>
							<view class="gcell gcol-14">{{ row.quantity }}</view>

							<!-- Link Column (merged) -->
							<view v-if="row.flags.common" class="gcell gcol-15 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.common, borderRight: 'none' }">{{ row.traceLink }}</view>
						</view>
						<view class="gcell gcell-full loading-row" v-if="hasMore">
							<view class="loading-wrapper">
								<image class="loading-icon" src="../../../static/images/loading.png" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view v-if="loading" class="loading-wrap">
				<view class="loading-row">
					<view class="loading-wrapper">
						<image class="loading-icon" src="../../../static/images/loading.png" />
					</view>
				</view>
			</view>
			<view v-if="showEmptyData" class="empty-data">
				<EmptyView text="无相关数据" />
			</view>
		</view>
		<view class="fab-btn" @click="downloadTable">
			<text class="fab-text">下载表格</text>
		</view>
	</view>
</template>

<script>
import EmptyView from "../../../wigets/empty.vue";
import request, { downloadFile } from '../../../request/index.js'
import { formatDate } from '../../../utils/utils.js'
export default {
	components: {
		EmptyView,
	},
	data() {
		return {
			isLoading: false,
			tableBodyHeight: 0,
			baseRowHeight: 76,
			loading: false,
			rows: [],
			totalCount: 0,
			fetchLoading: false,
			hasMore: false,
			pageNum: 1,
			pageSize: 15,
		};
	},
	created() {
		this.tableBodyHeight = 14 * 80;
		// this.fetchList();
		this.generateFakeData();
	},
	computed: {
		showEmptyData() {
			if (this.loading) return false;
			if (this.rows.length === 0) {
				return true;
			}
			return false;
		},
	},
	methods: {
		formatDate,
		generateFakeData() {
			const fakeRows = [];
			const baseCommonData = {
				customerProvince: '广东',
				customerLevel: '一级',
				customerNature: '商业',
				manager: '张三',
				receiverProvince: '广西',
				docTime: '2023-01-01',
				docType: '销售出库',
				productName: '感冒灵颗粒',
				traceLink: 'A -> B -> C'
			};
			
			for (let i = 0; i < 15; i++) {
				// 模拟一个单据有 1-3 个批号明细
				const detailCount = Math.floor(Math.random() * 3) + 1;
				const details = [];
				for (let j = 0; j < detailCount; j++) {
					details.push({
						batchNo: 'BATCH' + i + '-' + j,
						sourceRegion: j % 2 === 0 ? '华南片区' : '华东片区',
						quantity: 100 + j * 50
					});
				}

				// 公共数据
				const commonData = {
					...baseCommonData,
					alertCount: String(i + 1), // 显式转为字符串
					customerName: '测试客户' + i,
					receiverName: '测试收货企业' + i,
				};

				// 生成扁平化行数据
				details.forEach((detail, index) => {
					fakeRows.push({
						...commonData,
						...detail,
						spans: {
							common: index === 0 ? detailCount : 0 // 首行 span 为明细总数，其他为 0
						},
						flags: {
							common: index === 0 // 仅首行显示公共列
						}
					});
				});
			}
			this.rows = fakeRows;
			this.loading = false;
		},
		// computeBlackLeafCount(node) {
		// 	if (!node || !node.dataList || !node.dataList.length) return 1;
		// 	let sum = 0;
		// 	node.dataList.forEach((c) => {
		// 		sum += this.computeBlackLeafCount(c);
		// 	});
		// 	node.leafCount = sum;
		// 	return sum;
		// },
		// buildBlackRows(data) {
		// 	const res = [];
		// 	(data || []).forEach((companyNode) => {
		// 		const cLeaves = this.computeBlackLeafCount(companyNode);
		// 		let companyStarted = false;
		// 		(companyNode.dataList || []).forEach((expNode) => {
		// 			const eLeaves = this.computeBlackLeafCount(expNode);
		// 			let exporterStarted = false;
		// 			const groups = {};
		// 			(expNode.dataList || []).forEach((item) => {
		// 				const key = item.currentENTName || "";
		// 				if (!groups[key]) groups[key] = [];
		// 				groups[key].push(item);
		// 			});
		// 			Object.keys(groups).forEach((prodName) => {
		// 				const group = groups[prodName];
		// 				let productStarted = false;
		// 				group.forEach((batch) => {
		// 					res.push({
		// 						entName: companyNode.entName,
		// 						orgCode: companyNode.orgCode,
		// 						time: batch.time,
		// 						physicName: expNode.physicName,
		// 						currentENTName: prodName,
		// 						fromRegionName: batch.fromRegionName,
		// 						fromQuantity: batch.fromQuantity,
		// 						produceBatchNo: batch.produceBatchNo,
		// 						tracCode: batch.tracCode,
		// 						toQuantity: batch.toQuantity,
		// 						spans: {
		// 							entName: companyStarted ? 0 : cLeaves,
		// 							physicName: exporterStarted ? 0 : eLeaves,
		// 							currentENTName: productStarted ? 0 : group.length,
		// 						},
		// 						flags: {
		// 							entName: !companyStarted,
		// 							physicName: !exporterStarted,
		// 							currentENTName: !productStarted,
		// 						},
		// 					});
		// 					companyStarted = true;
		// 					exporterStarted = true;
		// 					productStarted = true;
		// 				});
		// 			});
		// 		});
		// 	});
		// 	return res;
		// },
		onTableScrollToLower(e) {
			if (e?.detail?.direction === 'right') return
			// if (this.isLoading) return;
			// if (this.rows.length >= this.totalCount) return;
			// this.isLoading = true;
			// const remain = this.totalCount - this.rows.length;
			// const toAdd = Math.min(15, remain);
			// setTimeout(() => {
			//   const more = this.rows.slice(0, toAdd);
			//   this.rows = this.rows.concat(more);
			//   this.isLoading = false;
			// }, 800);
			// this.fetchList();
		},
		resetFetch() {
			// this.loading = true;
			// this.rows = [];
			// this.totalCount = 0;
			// this.fetchLoading = false;
			// this.hasMore = true;
			// this.pageNum = 1;
			// this.fetchList();
			this.generateFakeData();
		},
		fetchList() {
			if (this.fetchLoading || !this.hasMore) return;
			this.fetchLoading = true;
			let url = `/report/getBlacklistReport`;
			try {
				request(url, {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					path: '/blacklist/index.vue',
				}).then(res => {
					if (res.code == 200) {
						const { total, list } = res.data || {};
						this.totalCount = total || 0;
						let _list = [];
						if (Array.isArray(list)) {
							// _list = this.buildBlackRows(list);
						}
						this.rows = [...this.rows, ..._list];
						if (this.rows.length < this.totalCount) {
							this.hasMore = true;
							this.pageNum++;
						} else {
							this.hasMore = false;
						}
					}
					this.isLoading = false;
					this.loading = false;
					this.fetchLoading = false;
				}).catch(() => {
					this.isLoading = false;
					this.loading = false;
					this.fetchLoading = false;
				})
			} catch (res) {
				this.isLoading = false;
				this.loading = false;
				this.fetchLoading = false;
			}
		},
		downloadTable() {
			downloadFile('', {
				id: '',
				path: '/blacklist/index.vue',
			})
		},
	},
};
</script>

<style scoped>
.detail-page {
	box-sizing: border-box;
	padding: 24rpx;
	position: relative;
	background: #f3f6f9;
	padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
}

.tip {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 30rpx;
}

.card {
	position: relative;
	margin-top: 12rpx;
	font-size: 30rpx;
	overflow: hidden;
}

	.grid-header {
		position: sticky;
		top: 0;
		z-index: 10;
		display: grid;
		grid-template-columns: 200rpx 220rpx 160rpx 140rpx 140rpx 140rpx 220rpx 160rpx 200rpx 140rpx 200rpx 180rpx 160rpx 140rpx 300rpx;
		grid-auto-rows: 76rpx;
	}

	.grid-header .hcell {
		background: #eaf2ff;
		font-weight: bold;
		color: #2c69ff;
		border-bottom: 1rpx solid #d0d7de;
		border-right: 1rpx solid #d0d7de;
	}

	.header-group {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #dae8ff !important;
	}

	.hcell {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 26rpx;
		padding: 0 10rpx;
	}

	.hcell:last-child {
		border-right: none;
	}

	.hcell-sticky-left {
		position: sticky;
		left: 0;
		z-index: 11;
	}

	.grid-scroll {
		border-radius: 16rpx;
		margin-top: 8rpx;
		overflow: hidden;
	}

	.grid-body {
		background: #fff;
		display: grid;
		grid-template-columns: 200rpx 220rpx 160rpx 140rpx 140rpx 140rpx 220rpx 160rpx 200rpx 140rpx 200rpx 180rpx 160rpx 140rpx 300rpx;
		grid-auto-rows: auto;
	}

	.grow {
		display: contents;
	}

	.gcell {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #d0d7de;
		border-right: 1rpx solid #d0d7de;
		background: #fff;
		color: #333;
		padding: 0 10rpx;
		text-align: center;
		line-height: 40rpx;
		min-height: 76rpx;
		font-size: 26rpx;
		word-break: break-all;
	}

.gcell:last-child {
	/* border-right: none; */
}

.gcell.gcell-full {
	grid-column: 1 / -1;
	background: transparent;
	border: none;
}

.gspan {
	background: #fff;
}

.gcol-1 {
	grid-column: 1;
}

.gcol-2 {
	grid-column: 2;
}

.gcol-3 {
	grid-column: 3;
}

.gcol-4 {
	grid-column: 4;
}

.gcol-5 {
	grid-column: 5;
}

.gcol-6 {
	grid-column: 6;
}

.gcol-7 {
	grid-column: 7;
}

.gcol-8 {
	grid-column: 8;
}

.gcol-9 {
	grid-column: 9;
}

.gcol-10 {
	grid-column: 10;
}

.gcol-11 {
	grid-column: 11;
}

.gcol-12 {
	grid-column: 12;
}

.gcol-13 {
	grid-column: 13;
}

.gcol-14 {
	grid-column: 14;
}

.gcol-15 {
	grid-column: 15;
}

.sticky-left {
	position: sticky;
	left: 0;
	z-index: 9;
	background: #fff;
}

.loading-row {
	justify-content: flex-start;
}

.loading-wrapper {
	position: sticky;
	top: 50%;
	left: 0;
	width: calc(100vw - 48rpx);
	height: 76rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-icon {
	width: 40rpx;
	height: 40rpx;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.empty-data,
.loading-wrap {
	position: absolute;
	left: 0;
	top: 85rpx;
	z-index: 999;
	width: 100%;
	background-color: #fff;
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.fab-btn {
	position: fixed;
	bottom: calc(50rpx + env(safe-area-inset-bottom));
	right: 30rpx;
	background-color: #007aff;
	color: #ffffff;
	padding: 20rpx 40rpx;
	border-radius: 50rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
	z-index: 100;
}

.fab-text {
	font-size: 28rpx;
	font-weight: bold;
}
</style>