huarun/packages/traceabilityReport/pages/blacklist/index.vue

<template>
	<view class="detail-page">
		<view class="tabs">
			<view class="tab" v-for="(t, i) in tabs" :key="t.label" :class="{ active: category == t.value }"
				:style="{ opacity: loading ? 0.5 : 1 }" @click="selectTab(t)">
				{{ t.label }}
			</view>
		</view>
		<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: '1296px',
				}">
					<view class="grid-header">
						<text class="hcell hcell-sticky-left">查询客户</text>
						<text class="hcell">社会信用代码</text>
						<text class="hcell">加入时间</text>
						<text class="hcell">品种</text>
						<text class="hcell">上游客户</text>
						<text class="hcell">货源片区</text>
						<text class="hcell">数量</text>
						<text class="hcell">批号</text>
						<text class="hcell">监管码样本（抽样）</text>
						<text class="hcell">终端到达数量</text>
					</view>

					<view v-if="!loading && rows.length > 0" class="grid-body">
						<view v-for="(row, idx) in rows" :key="idx + '-' + (row.produceBatchNo || '')" class="grow">
							<view v-if="row.flags.entName" class="gcell gcol-1 gspan" :class="['sticky-left']"
								:style="{ gridRowEnd: 'span ' + row.spans.entName }">{{ row.entName }}</view>
							<view v-if="row.flags.entName" class="gcell gcol-2 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.entName }">{{ row.orgCode }}</view>
							<view v-if="row.flags.entName" class="gcell gcol-3 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.entName }">{{ formatDate(row.time,
									'YYYY-MM-DD') || '--' }}</view>
							<view v-if="row.flags.physicName" class="gcell gcol-4 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.physicName }">{{ row.physicName }}</view>
							<view v-if="row.flags.currentENTName" class="gcell gcol-5 gspan"
								:style="{ gridRowEnd: 'span ' + row.spans.currentENTName }">{{ row.currentENTName }}
							</view>
							<view class="gcell gcol-6">{{ row.fromRegionName }}</view>
							<view class="gcell gcol-7">{{ row.fromQuantity }}</view>
							<view class="gcell gcol-8">{{ row.produceBatchNo }}</view>
							<view class="gcell gcol-9">{{ row.tracCode }}</view>
							<view class="gcell gcol-10">{{ row.toQuantity }}</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,
			tabs: [
				{
					label: "药品购进",
					value: "1",
				},
				{
					label: "药品销售",
					value: "2",
				},
			],
			category: "1",
			loading: false,
			rows: [],
			totalCount: 0,
			fetchLoading: false,
			hasMore: false,
			pageNum: 1,
			pageSize: 15,
		};
	},
	created() {
		this.tableBodyHeight = 14 * 80;
		// this.fetchList();
	},
	computed: {
		showEmptyData() {
			if (this.loading) return false;
			if (this.rows.length === 0) {
				return true;
			}
			return false;
		},
	},
	methods: {
		formatDate,
		selectTab(t) {
			if (this.loading) return;
			this.category = t.value;
			this.resetFetch();
		},
		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();
		},
		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;
	min-height: 100vh;
	background: #f3f6f9;
	padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
}

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

.tabs {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 90rpx;
	padding: 10rpx;
	margin-bottom: 30rpx;
}

.tab {
	flex: 1;
	height: 70rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24rpx;
	border-radius: 70rpx;
	font-size: 28rpx;
	color: #333;
}

.tab+.tab {
	margin-left: 12rpx;
}

.tab.active {
	background: #2c69ff;
	color: #fff;
}

.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: 340rpx 300rpx 220rpx 220rpx 220rpx 220rpx 220rpx 220rpx 340rpx 200rpx;
}

.grid-header .hcell {
	background: #eaf2ff;
	font-weight: bold;
	color: #2c69ff;
}

.hcell {
	height: 76rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.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: 340rpx 300rpx 220rpx 220rpx 220rpx 220rpx 220rpx 220rpx 340rpx 200rpx;
	grid-auto-rows: auto;
}

.grow {
	display: contents;
}

.gcell {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1rpx solid #eef0f4;
	border-right: 1rpx solid #eef0f4;
	background: #fff;
	color: #333;
	padding: 0 20rpx;
	text-align: center;
	line-height: 50rpx;
}

.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;
}

.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>