uniapp-shirt-fabric-scan/pages/production-replenishment/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/audio2.js'
	import {
		audit,
		getBillList,
		save,
		submit
	} from '../../api/production_replenishment';
	import modal from '../../plugins/modal';
	import {
		executeSql
	} from '../../utils/database';
	import {
		getAuditParam,
		getSaveParam,
		getSubmitParam
	} from '../../utils/params';
	import submitHelper from '../../utils/submitHelper';
	export default {
		data() {
			return {
				indexList: [],
				billSummary: [], // 这里存放处理后的每个 FBillNo 的统计结果
				selectedItemId: null,
				stageLists: [],
				tableName: "bill",
			};
		},
		onLoad(option) {
			this.indexList = JSON.parse(decodeURIComponent(option.Info))
			this.stageLists = JSON.parse(decodeURIComponent(option.stageInfo))
			console.log(this.indexList)
			console.log(this.stageLists)
		},
		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(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);
			},
			// submit() {
			// 	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
			// 	}
			// 	const savaParam = getSaveParam(this.selectedItemId, this.indexList)
			// 	console.log(savaParam)
			// 	let vm = this
			// 	save(JSON.stringify(savaParam)).then( //保存
			// 		res => {
			// 			console.log(res)
			// 			if (res.Result.ResponseStatus.IsSuccess == true) {
			// 				const FID = res.Result.NeedReturnData[0]["FID"]
			// 				console.log(FID)
			// 				const submitParam = getSubmitParam(FID)
			// 				console.log(submitParam)
			// 				submit(JSON.stringify(submitParam)).then( //提交
			// 					res => {
			// 						console.log(res)
			// 						if (res.Result.ResponseStatus.IsSuccess == true) {
			// 							const Id = res.Result.ResponseStatus.SuccessEntitys[0]["Id"]
			// 							console.log(Id)
			// 							const auditParam = getAuditParam(Id)
			// 							audit(JSON.stringify(auditParam)).then( //提交
			// 								res => {
			// 									console.log(res)
			// 									if (res.Result.ResponseStatus.IsSuccess == true) {
			// 										vm.indexList = vm.indexList.filter(item => item.FID !==
			// 											FID)
			// 										vm.billSummary = vm.billSummary.filter(item => item.FID !==
			// 											FID)
			// 										uni.showModal({
			// 											title: "提示",
			// 											content: "提交成功",
			// 											showCancel: true,
			// 											success: function(res) {
			// 												if (res.confirm) {
			// 													// vm.submit(FID)											
			// 												} else {
			// 													// 执行取消后的操作
			// 												}
			// 											}
			// 										})
			// 										playVoice(audioUrls.successVoiceUrl)
			// 									} else {
			// 										uni.showToast({
			// 											title: res.Result.ResponseStatus.Errors[0]
			// 												.Message,
			// 											duration: 2000,
			// 											icon: "error"
			// 										})

			// 									}
			// 								}
			// 							).catch(error => {
			// 								// 处理失败的情况
			// 								console.error('audit failed:', error);
			// 								uni.showToast({
			// 									title: error,
			// 									duration: 3000,
			// 									icon: "none"
			// 								})
			// 							})
			// 						} else {
			// 							uni.showToast({
			// 								title: res.Result.ResponseStatus.Errors[0].Message,
			// 								duration: 2000,
			// 								icon: "error"
			// 							})

			// 						}
			// 					}
			// 				).catch(error => {
			// 					playVoice(audioUrls.failVoiceUrl)
			// 					uni.showModal({
			// 						title: "提示",
			// 						content: error,
			// 						showCancel: true,
			// 						success: function(res) {
			// 							if (res.confirm) {
			// 								// vm.submit(FID)											
			// 							} else {
			// 								// 执行取消后的操作
			// 							}
			// 						}
			// 					})
			// 					// 处理失败的情况
			// 					console.error('Submit failed:', error);
			// 				})


			// 			} else {
			// 				uni.showToast({
			// 					title: res.Result.ResponseStatus.Errors[0].Message,
			// 					duration: 2000,
			// 					icon: "error"
			// 				})

			// 			}
			// 		}
			// 	).catch(error => {
			// 		// 处理失败的情况
			// 		console.error('Sava failed:', error);
			// 		playVoice(audioUrls.failVoiceUrl)
			// 		uni.showModal({
			// 			title: "提示",
			// 			content: error,
			// 			showCancel: true,
			// 			success: function(res) {
			// 				if (res.confirm) {
			// 					// vm.submit(FID)											
			// 				} else {
			// 					// 执行取消后的操作
			// 				}
			// 			}
			// 		})
			// 	})
			// },
			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>