uniapp-shirt-fabric-scan/pages/stock-dispatch/summary.vue

<template>
	<view class="table-container">
		<!-- 查询框 -->
		<view class="container">
			<view class="search-container">
			</view>
		</view>
		<!-- 表格容器 -->
		<scroll-view class="table-scroll" scroll-x scroll-y @scroll="onScroll">
			<!-- 表头 -->
			<view class="table-header" ref="tableHeader">
				<view class="table-cell1-1">单据编号</view>
				<view class="table-cell">单据总条数</view>
				<view class="table-cell"
					style="background-color: #f0f0f0;font-weight: bold;border-bottom: 1px solid #ccc;">已扫描条数</view>
				<view class="table-cell"
					style="background-color: #f0f0f0;font-weight: bold;border-bottom: 1px solid #ccc;">未扫描条数</view>
			</view>

			<!-- 表格内容 -->
			<view class="table-body">
				<!-- <checkbox-group @change="checkboxChange"> -->
				<view class="table-row" v-for="(item, index) in billSummary" :key="item.FID">
					<view class="table-cell1">
						<!-- <checkbox :value="item.FID" :checked="item.checked" />{{ item.FBillNo}} -->
						<view class="checkbox-container">
							<checkbox :value="item.FID" :checked="item.checked" @tap="handleCheckboxClick(item.FID)" />
						</view>
						<view>{{ item.FBillNo}}</view>
					</view>
					<view class="table-cell">{{ item.totalEntries }}</view>
					<view class="table-cell">{{ item.smzt1Count }}</view>
					<view class="table-cell">{{ item.totalEntries- item.smzt1Count }}</view>
				</view>
				<!-- </checkbox-group> -->
			</view>
		</scroll-view>
		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<button class="mini-btn button" type="primary" size="default" @click="handleSubmit">提交</button>
			<button class="mini-btn button" type="primary" size="default" @click="goBack">返回</button>
		</view>

	</view>
</template>
<script>
	import {
		playVoice,
		audioUrls
	} from '@/utils/audio.js'
	import {
		audit,
		getBillList,
		save,
		submit
	} from '../../api/production_replenishment';
	import modal from '../../plugins/modal';
	import {
		getAuditParam,
		getSaveParam,
		getSubmitParam
	} from '../../utils/params';
	import submitHelper from '../../utils/commonSubmitHelper.js';
	import {
		executeSql
	} from '../../utils/database';
	export default {
		data() {
			return {
				indexList: [],
				billSummary: [], // 这里存放处理后的每个 FBillNo 的统计结果
				selectedItemId: null,
				stageLists: [],
				tableName: "common_bill",
			};
		},
		onLoad(option) {
			this.indexList = JSON.parse(decodeURIComponent(option.Info))
			this.stageLists = JSON.parse(decodeURIComponent(option.stageInfo))
			console.log(this.indexList)
		},
		computed: {

		},
		mounted() {
			this.calculateSummary()
			console.log(this.billSummary)
		},
		onBackPress(e) {
			console.log("监听返回按钮事件", e);
			if (e.from == "backbutton") {
				this.goBack()
				return true
			}
		},

		methods: {
			calculateSummary() {
				const summary = {};
				// 遍历数据，统计每个 FBillNo 的总条数和 smzt=1 的数量
				this.indexList.forEach(item => {
					const {
						FID,
						FBillNo,
						smzt
					} = item;

					if (!summary[FBillNo]) {
						summary[FBillNo] = {
							FID: FID,
							FBillNo: FBillNo,
							totalEntries: 0,
							smzt1Count: 0
						};
					}

					summary[FBillNo].totalEntries++;

					if (smzt === 1) {
						summary[FBillNo].smzt1Count++;
					}
				});

				// 将 summary 对象转为数组，便于在模板中遍历展示
				this.billSummary = Object.values(summary);
			},
			goBack() {
				let vm = this
				uni.navigateBack({
					success: function() {
						// 传递数据给上一页
						uni.$emit('summary', vm.indexList);
					}
				});
			},
			onScroll(e) {
				const scrollLeft = e.detail.scrollLeft;
				this.headerLeft = -scrollLeft; // 更新表头左侧位置，实现横向滚动时的对齐效果
			},
			async handleSubmit(FID) {
				if (this.selectedItemId == null) {
					uni.showToast({
						title: '请选择单据',
						duration: 3000,
						icon: "error"
					})
					playVoice(audioUrls.failVoiceUrl)
					return
				}
				const selectedItem = this.billSummary.find(item => item.FID === this.selectedItemId);
				const areEqual = selectedItem ? selectedItem.totalEntries === selectedItem.smzt1Count : false;
				if (!areEqual) {
					uni.showToast({
						title: '单据未全扫描',
						duration: 3000,
						icon: "error"
					})
					playVoice(audioUrls.failVoiceUrl)
					return
				}
				try {
					// await submitHelper.submit(FormId,FID, this.indexList);
					const FormId = uni.getStorageSync('formId')
					await submitHelper.submit(FormId, this.selectedItemId, this.indexList);
					this.indexList = this.indexList.filter(item => item.FID !== this.selectedItemId);
					this.billSummary = this.billSummary.filter(item => item.FID !==
						this.selectedItemId)
					console.log(this.indexList)
					if (this.stageLists.length != 0) {
						// 处理每个对象
						this.stageLists.forEach(item => {
							// 过滤掉 FID 匹配的对象
							item.data = item.data.filter(obj => obj.FID !== this.selectedItemId);

							// 检查 data 数组是否为空
							if (item.data.length === 0) {
								console.log("data 数组为空"); //删除暂存
								this.deleteStages(item.id)
							} else {
								console.log("data 数组不为空");
							}
						})
						console.log(this.stageLists)
					}
				} catch (error) {
					this.handleError(error)
				}
			},
			async deleteStages(id) {
				let condition = `id = (${id})`
				let sql = `delete from ${this.tableName} where ${condition}`
				executeSql(sql).then(result => {
						console.log('结果:', result);
						// this.handleDeleteSuccess()
					})
					.catch(error => {
						console.error('捕获错误:', error); // 输出: 捕获错误: 失败的结果
						// this.handleDeleteFail(error)
					})
			},
			handleError(error) {
				playVoice(audioUrls.failVoiceUrl)
				console.error('操作失败:', error);
				modal.confirm(error.message || '操作失败').then(res => {
					if (res) {

					} else {
						// 用户点击取消，不执行任何操作
					}
				})
				// uni.showToast({
				// 	title: error.message || '操作失败',
				// 	duration: 3000,
				// 	icon: "none"
				// });
				// playVoice(audioUrls.failVoiceUrl)
				// console.error('操作失败:', error);
			},
			handleCheckboxClick(itemId) {
				console.log(itemId)
				// 取消之前选中的项
				if (this.selectedItemId === itemId) {
					this.selectedItemId = null;
					this.billSummary.forEach(item => {
						item.checked = false;
					});
					console.log(this.billSummary)
				} else {
					// 更新选中项
					this.selectedItemId = itemId;
					this.billSummary.forEach(item => {
						item.checked = (item.FID === itemId);
					});
					console.log(this.billSummary)
				}
				console.log(this.selectedItemId)
				this.$forceUpdate()
			},

		}
	};
</script>

<style>
	.table-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.search-container {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		align-items: stretch;
		/* padding: 2px; */
		border-bottom: 1px solid #ccc;
		flex-wrap: wrap;
	}

	.search-input {
		/* padding: 8px; */
		margin-right: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		width: 200px;
	}

	.search-button {
		/* padding: 8px 16px; */
		border: none;
		border-radius: 4px;
		background-color: #007bff;
		color: #fff;
		cursor: pointer;
	}

	.search-button:hover {
		background-color: #0056b3;
	}

	.table-scroll {
		/* position: absolute; */
		flex: 1;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.table-header {
		position: sticky;
		top: 0;
		background-color: #f0f0f0;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		display: flex;
		z-index: 1;
		/* 确保表头在内容之上 */
	}

	.table-cell1 {
		min-width: 160px;
		display: flex;
		justify-content: left;
		align-items: center;
		border-right: 1px solid #ccc;
	}

	.table-cell1-1 {
		min-width: 160px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 1px solid #ccc;
	}

	.table-cell {
		min-width: 100px;
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 1px solid #ccc;
	}

	.header-cell {
		border-right: none;
		/* 取消最后一列的右边框 */
	}

	.table-body {
		flex: 1;
		width: fit-content;
		/* 使内容宽度适应内容的宽度 */
	}

	.table-row {
		display: flex;
		border-bottom: 1px solid #ccc;
	}

	.checkbox {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-bar {
		display: flex;
		/* justify-content: center; */
		justify-content: flex-end;
		/* 将按钮靠右对齐 */
		align-items: center;
		/* padding: 10px; */
		padding: 3px;
		background-color: #f0f0f0;
	}

	.button {
		margin: 0 10px;
		/* padding: 10px 20px; */
	}

	.cancel-btn {
		background-color: #ff0000;
		/* 取消按钮样式 */
		color: #fff;
	}

	.confirm-btn {
		background-color: #00ff00;
		/* 确认按钮样式 */
		color: #fff;
	}

	.checkbox-container {
		display: flex;
		align-items: center;
		margin-left: 10px;
		margin-right: 10px;
		/* 可根据需要调整间距 */
	}
</style>