ezhizao_dms_h5/pages/recerptSfprod/index.vue

<template>

	<view class='container '>
		<view v-if="products.length == 0" style="color: #999;margin: 50% auto;">
			<text>扫码添加批次</text>
		</view>
		<view v-else 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>
	<QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" />
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getDayworkItemByCarrierId,
		getDayworkItemByCarrierCode,
		updateDayWorkItemBatch
	} from '@/api/business/dayWorkItem.js'
	import QrScanner from '../vueQrCode/index.vue'
	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([])
	const showQrCodeReader = ref(false);

	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: "none",
						title: "请扫载具码",
					})
					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++) {
						if(products.value.some(item => item.id == response.data[i].id)){
							uni.showToast({
								icon: 'none',
								title: '该设批次已存在,请勿重复扫码添加'
							})
							return; 
						}
						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();
				})
			}
		);
	}
*/
	//H5扫码器回调
	function onDecodeHandler(data) {
		showQrCodeReader.value = false;
		let vehicleObj = {carrierCode: data};
				if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
					uni.showToast({
						icon: "none",
						title: "请扫载具码",
					})
					return;
				}
				getDayworkItemByCarrierCode({
					carrierCode: vehicleObj.carrierCode,
					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++) {
						if(products.value.some(item => item.id == response.data[i].id)){
							uni.showToast({
								icon: 'none',
								title: '该设批次已存在,请勿重复扫码添加'
							})
							return; 
						}
						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();
				})
	}
	
	
	//H5扫码器关闭
	function qrReaderClose() {
		showQrCodeReader.value = false;
	}
	
	function handleScanCode() {
		showQrCodeReader.value = false;
		// 引入原生插件
		// const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
		// // 调用插件的 mpaasScan 方法
		// mpaasScanModule.mpaasScan({
		// 		// 扫码识别类型，参数可多选，qrCode、barCode，
		// 		// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
		// 		scanType: ["qrCode", "barCode"],
		// 		// 是否隐藏相册，默认false不隐藏
		// 		hideAlbum: false,
		// 	},
		// 	(ret) => {
		// 		let vehicleObj = {carrierCode: ret.resp_result};
		// 		if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
		// 			uni.showToast({
		// 				icon: "none",
		// 				title: "请扫载具码",
		// 			})
		// 			return;
		// 		}
		// 		getDayworkItemByCarrierCode({
		// 			carrierCode: vehicleObj.carrierCode,
		// 			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++) {
		// 				if(products.value.some(item => item.id == response.data[i].id)){
		// 					uni.showToast({
		// 						icon: 'none',
		// 						title: '该设批次已存在,请勿重复扫码添加'
		// 					})
		// 					return; 
		// 				}
		// 				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() {
		if (selection.value.length > 0) {
			receipt.value.open();
		}else{
			uni.showToast({
				icon: 'none',
				title: '请选择批次后再确认领取',
				duration: 2000
			})
		}
	}

	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].place = data;
		}
		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: 'none',
					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>