ezhizao_dms_app/pages/recerptSfprod/index.vue

<template>

	<view class='container '>
		<view class='content'>
			<text class='title'>{{title}}</text>
			<view :class="{'item-table':true, 'selected':isSelected(item)}" scroll-y v-for="(item,index) in products"
				@click="handleSelection(item,index)">
				<view class="uni-row table-layout">
					<text class='tbhead left'>产品描述</text>
					<text class='tbhead right'>{{item['productDescription']}}</text>
				</view>
				<view class="uni-row table-layout">
					<text class='tbbody left'>批次</text>
					<text class='tbbody right'>{{item['lotCode']}}</Text>
				</view>
				<view class="uni-row table-layout">
					<text class='tbbody left'>箱数</text>
					<text class='tbbody right'>{{item['carriers']}}</Text>
				</view>
				<view class="uni-row table-layout">
					<text class='tbbody  left'>箱号</text>
					<text class='tbbody right'>{{item['carrierName']}}</text>
				</view>

			</view>
		</view>
		<view class='btn uni-row'>
			<button class='bottom-btn left-btn' type="primary" @click="handleScanCode">扫码添加</button>
			<button class='bottom-btn right-btn' type="primary" @click="handleConfirmReceipt">确定领取</button>
		</view>
	</view>
	<dialog-receipt ref="receipt" @submit="handleDoIt"></dialog-receipt>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getDayworkItemByCarrierId,
		updateDayWorkItemBatch
	} from '@/api/business/dayWorkItem.js'
	import {
		store
	} from '@/store/index.js'

	const title = ref(null)
	const sum = ref(0)
	const products = ref([])
	const receipt = ref(null)
	const flag = ref(false)
	const selection = ref([])

	onLoad(() => {})

	function init() {}

	function handleScanCode() {
		// 引入原生插件
		const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
		// 调用插件的 mpaasScan 方法
		mpaasScanModule.mpaasScan({
				// 扫码识别类型，参数可多选，qrCode、barCode，
				// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
				scanType: ["qrCode", "barCode"],
				// 是否隐藏相册，默认false不隐藏
				hideAlbum: false,
			},
			(ret) => {
				let vehicleObj = JSON.parse(ret.resp_result);
				if (!vehicleObj.carrierId || vehicleObj.carrierId == "") {
					uni.showToast({
						icon: "error",
						title: "请扫载具码",
						duration: 1000
					})
					return;
				}
				getDayworkItemByCarrierId({
					carrierId: vehicleObj.carrierId,
					status: 6
				}).then(response => {
					console.log(response)
					if (response.data.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '该批次已被领取'
						})
						return;
					}
					for (let i = 0; i < response.data.length; i++) {
						products.value.push(response.data[i]);
						console.log(products.value)
					}
					console.log(products.value)
					let sum = 0; //总箱数
					for (let i = 0; i < products.value.length; i++) {
						products.value[i].carriers = products.value[i].carrierName.split('、').length;
						sum += products.value[i].carriers;
					}
					title.value = products.value[0].deptName + ' (' + sum + '箱)';
					console.log(products.value)
					init();
				})
			}
		);
	}

	function handleConfirmReceipt() {
		receipt.value.open();
		if (selection.value.length > 0) {
			receipt.value.open();
		}
	}

	function isSelected(item) {
		return selection.value.includes(item);
	}

	function handleSelection(item, index) {
		const buttonIndex = selection.value.findIndex(selectedItem => selectedItem === item);
		if (buttonIndex > -1) {
			selection.value.splice(buttonIndex, 1); // 取消选中
		} else {
			selection.value.push(item); // 选中
		}
		console.log(selection.value, "selection");
	}

	function handleDoReceipt(data) {
		// 设置周转状态
		for (var i = 0; i < selection.value.length; i++) {
			selection.value[i].status = '7';
			selection.value[i].recipientId = store.userInfo.userId;
			selection.value[i].placeId = data.id;
			selection.value[i].place = data.code;
		}
		console.log(selection.value)
		updateDayWorkItemBatch(selection.value).then(res => {
			if (res.code === 200) {
				uni.showToast({
					icon: 'success',
					title: '操作成功',
					duration: 2000
				});
				init();
			} else {
				uni.showToast({
					icon: 'error',
					title: '操作失败',
					duration: 2000
				});
			}
		})
		products.value = [];
		selection.value = [];
		title.value = null;
	}

	function handleDoIt(data) {
		handleDoReceipt(data);
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		overflow: auto;
		background-color: rgba(245, 245, 245, 1);

		.content {
			width: 94%;
			/* height: auto; */
			background-color: rgba(255, 255, 255, 1);
			margin: 50rpx auto;
			border-radius: 12rpx;

			.selected {
				border: 1px solid #1684fc;
			}

			.title {
				margin-left: 10rpx;
				width: 90%;
				font-size: 36rpx;
				font-weight: bold;
			}

			.item-table {
				margin: 10rpx auto;
				width: 90%;

				.table-layout {
					background-color: rgba(236, 245, 255, 1);
					align-items: center;

					.tbhead {
						background-color: rgba(236, 245, 255, 1);
						font-size: 28rpx;
						height: 56rpx;
						line-height: 56rpx;
						padding-left: 6rpx;
						border-bottom: 1px solid lightgray;
					}

					.tbbody {
						font-size: 28rpx;
						background-color: rgba(238, 240, 245, 1);
						width: 70%;
						height: 56rpx;
						line-height: 56rpx;
						padding-left: 6rpx;
						border-bottom: 1px solid lightgray;
					}

					.left {
						color: rgba(136, 136, 136, 1);
						flex: 1;
					}

					.right {
						flex: 3;
					}
				}
			}
		}

		.btn {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			height: 100rpx;
			padding: 16rpx 24rpx;
			align-items: center;
			background-color: #FFFFFF;
			justify-content: space-between;

			.bottom-btn {
				flex: 1;
				font-size: 28rpx;
				color: #FFFFFF;

				&.left-btn {
					// background-color: #a4adb3;
				}

				&.right-btn {
					background-color: #1684fc;
					margin-left: 24rpx;

				}
			}
		}
	}
</style>