ezhizao_dms_h5/pages/outsourcedReturnCheck/carriers.vue

<template>
	<view class='container'>
		<view class='content'>
			<view class='title uni-row' style="border-bottom-style: solid; border-bottom-width: 1px;">
				<view class="item-info uni-row">
					<text class="label">外协单：</text>
					<text class="label right">{{ form.formCode }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">外协商：</text>
					<text class="label right">{{ form.supplierName }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">带箱方式：</text>
					<text class="label right">{{ form.packagingMethod == '0' ? '原箱' : '新箱' }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">箱子数量：</text>
					<text class="label right">{{ form.carrierCount }}</text>
				</view>
			</view>
			<view class="vehicleList uni-row" style="padding: 0 2px; margin-bottom: 30px;">
				<view v-for="(ditem, index) in details"
					style="border-bottom-style: solid; border-bottom-width: 1px;width: 100%; flex-direction: row; flex-wrap: wrap;">
					<view :class="'vehicleNo uni-row' +(checkItem(item) ? ' success' :'')"
						v-for="(item,index) in ditem.carriers">
						<text>{{item.code}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class='bottom uni-row'>
			<button class='bottom-btn left-btn' @click="handleScanCode">逐箱核对</button>
		</view>
		<uni-popup ref="inputDialog" type="dialog" style="z-index: 2;">
			<view
				style="background-color: aliceblue; width: 20rem; height: 10rem; padding-top: 3rem; display: flex; flex-direction: column; justify-content: space-between;">
				<view style="display: flex;flex-direction: row;justify-content: center; margin-bottom: 2rem;">
					<view></view>
					<view>{{ message }}</view>
				</view>
				<view style="display: flex;flex-direction: row;justify-content: space-between; margin-bottom: 2rem;">
					<button @click="cancelConfirm">取消</button>
					<button @click="continueScna">继续扫码</button>
				</view>
			</view>
		</uni-popup>
		<QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" />
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import QrScanner from '../vueQrCode/index.vue'
	import {
		store
	} from '@/store/index.js'
	import {
		getOutsourceOrderList,
		getOutsourceOrderCarrier
	} from '@/api/business/outsource.js'
	import {
		debounce
	} from '@/utils/common.js'

	const form = ref({})
	// const carriers = ref([])
	const details = ref([])
	const checkedCarriers = ref([])
	const message = ref('')
	const showConfirm = ref(false)
	const inputDialog = ref(null)
	const showQrCodeReader = ref(false);

	onMounted(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('acceptDataFromOpenerPage', function(data) {
			if (data && data.data) {
				form.value = data.data
				init()
			}
		})
	})

	function init() {
		getCarrierList()
	}

	function cancelConfirm() {
		inputDialog.value.close()
	}

	function continueScna() {
		inputDialog.value.close()
		handleScanCode()
	}

	function getCarrierList() {
		// 获取该外协单所有关联箱
		getOutsourceOrderCarrier(form.value).then(res => {
			// console.log(res)
			details.value = res.data.details
			form.value.carrierCount = res.data.form.carrierCount
			console.log(res)
		})
	}
	/*
		function checkItem(item) {
			// console.log(item)
			if (checkedCarriers.value.findIndex(v => item.id === v) >= 0) {
				return true
			} else {
				return false;
			}
			// return true;
		}
	*/
	function checkItem(item) {
		if (checkedCarriers.value.findIndex(v => item.code === v) >= 0) {
			return true
		} else {
			return false;
		}
	}
	/* 【原有的handleScanCode代码】
		function handleScanCode() {
			// 引入原生插件
			const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
			// const mpaasScanModule = false
			if (mpaasScanModule) {
				// 调用插件的 mpaasScan 方法
				mpaasScanModule.mpaasScan({
						// 扫码识别类型，参数可多选，qrCode、barCode，
						// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
						scanType: ["qrCode", "barCode"],
						// 是否隐藏相册，默认false不隐藏
						hideAlbum: false,
					},
					(ret) => {
						let vehicleObj = JSON.parse(ret.resp_result);
						if (!vehicleObj.carrierId || vehicleObj.carrierId == "") {
							message.value = '请扫载具码'
							inputDialog.value.open()
							return;
						}
						let checked = false
						let allChecked = true
						details.value.forEach(l => {
							checked = checked || (l.carriers.findIndex(e => e.id === vehicleObj.carrierId) >= 0)
							// allChecked = allChecked && (l.carriers.findIndex(e => e.id === vehicleObj.carrierId) >= 0)
							if (checked) {
								checkedCarriers.value.push(vehicleObj.carrierId)
							}
							allChecked = allChecked && l.carriers.every(t => checkedCarriers.value.includes(t.id))
						})
						if (checked) {
							uni.showToast({
								icon: 'none',
								title: '已扫箱' + vehicleObj.carrierCode
							})
							if (allChecked) {
								debonce(() => {
									uni.showToast({
										icon: 'none',
										title: '已验证所有箱码'
									})
								}, 700)
							} else {
								debounce(handleScanCode, 700)
							}
						} else {
							message.value = '该箱号' + vehicleObj.carrierCode + '不在此发出单'
							inputDialog.value.open()
							return
						}
					}
				);
			} else {
				// message.value = '测试dialog'
				// console.log(message.value)
				// inputDialog.value.open()
				// if (checkedCarriers.value.length < details.value[0].carriers.length) {
				// 	checkedCarriers.value.push(details.value[0].carriers[checkedCarriers.value.length].id)
				// } else {
				// 	checkedCarriers.value.pop()
				// }
				// debounce(handleScanCode, 700)
				let vehicleObj = {
					carrierId: "1",
					carrierCode: "1"
				};

				if (!vehicleObj.carrierId || vehicleObj.carrierId == "") {
					message.value = '请扫载具码'
					inputDialog.value.open()
					return;
				}
				let checked = false
				let allChecked = true
				details.value.forEach(l => {
					checked = checked || (l.carriers.findIndex(e => e.id === vehicleObj.carrierId) >= 0)
					// allChecked = allChecked && (l.carriers.findIndex(e => e.id === vehicleObj.carrierId) >= 0)
					if (checked) {
						checkedCarriers.value.push(vehicleObj.carrierId)
					}
					allChecked = allChecked && l.carriers.every(t => checkedCarriers.value.includes(t.id))
				})
				if (checked) {
					uni.showToast({
						icon: 'none',
						title: '已扫箱' + vehicleObj.carrierCode
					})
					if (allChecked) {
						debonce(() => {
							uni.showToast({
								icon: 'none',
								title: '已验证所有箱码'
							})
						}, 700)
					} else {
						debounce(handleScanCode, 700)
					}
				} else {
					message.value = '该箱号' + vehicleObj.carrierCode + '不在此发出单'
					inputDialog.value.open()
					return
				}
			}
		}
	*/
	//H5扫码器回调
	function onDecodeHandler(data) {
		showQrCodeReader.value = false;
		let vehicleObj = {
			carrierCode: data
		};
		if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
			message.value = '请扫载具码'
			inputDialog.value.open()
			return;
		}
		let checked = false
		let allChecked = true
		details.value.forEach(l => {
			checked = checked || (l.carriers.findIndex(e => e.code === vehicleObj.carrierCode) >=
				0)
			if (checked) {
				checkedCarriers.value.push(vehicleObj.carrierCode)
			}
			allChecked = allChecked && l.carriers.every(t => checkedCarriers.value.includes(t
				.code))
		})
		if (checked) {
			uni.showToast({
				icon: 'none',
				title: '已扫箱' + vehicleObj.carrierCode
			})
			if (allChecked) {
				debonce(() => {
					uni.showToast({
						icon: 'none',
						title: '已验证所有箱码'
					})
				}, 700)
			} else {
				debounce(handleScanCode, 700)
			}
		} else {
			message.value = '该箱号' + vehicleObj.carrierCode + '不在此发出单'
			inputDialog.value.open()
			return
		}
	}


	//H5扫码器关闭
	function qrReaderClose() {
		showQrCodeReader.value = false;
	}

	function handleScanCode() {
		showQrCodeReader.value = true;
		// 引入原生插件
		// const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
		// // const mpaasScanModule = false
		// if (mpaasScanModule) {
		// 	// 调用插件的 mpaasScan 方法
		// 	mpaasScanModule.mpaasScan({
		// 			// 扫码识别类型，参数可多选，qrCode、barCode，
		// 			// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
		// 			scanType: ["qrCode", "barCode"],
		// 			// 是否隐藏相册，默认false不隐藏
		// 			hideAlbum: false,
		// 		},
		// 		(ret) => {
		// 			let vehicleObj = {
		// 				carrierCode: ret.resp_result
		// 			};
		// 			if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
		// 				message.value = '请扫载具码'
		// 				inputDialog.value.open()
		// 				return;
		// 			}
		// 			let checked = false
		// 			let allChecked = true
		// 			details.value.forEach(l => {
		// 				checked = checked || (l.carriers.findIndex(e => e.code === vehicleObj.carrierCode) >=
		// 					0)
		// 				if (checked) {
		// 					checkedCarriers.value.push(vehicleObj.carrierCode)
		// 				}
		// 				allChecked = allChecked && l.carriers.every(t => checkedCarriers.value.includes(t
		// 					.code))
		// 			})
		// 			if (checked) {
		// 				uni.showToast({
		// 					icon: 'none',
		// 					title: '已扫箱' + vehicleObj.carrierCode
		// 				})
		// 				if (allChecked) {
		// 					debonce(() => {
		// 						uni.showToast({
		// 							icon: 'none',
		// 							title: '已验证所有箱码'
		// 						})
		// 					}, 700)
		// 				} else {
		// 					debounce(handleScanCode, 700)
		// 				}
		// 			} else {
		// 				message.value = '该箱号' + vehicleObj.carrierCode + '不在此发出单'
		// 				inputDialog.value.open()
		// 				return
		// 			}
		// 		}
		// 	);
		// } else {
		// 	let vehicleObj = {
		// 		carrierId: "0",
		// 		carrierCode: "500001"
		// 	};

		// 	if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
		// 		message.value = '请扫载具码'
		// 		inputDialog.value.open()
		// 		return;
		// 	}
		// 	let checked = false
		// 	let allChecked = true
		// 	details.value.forEach(l => {
		// 		checked = checked || (l.carriers.findIndex(e => e.code === vehicleObj.carrierCode) >= 0)
		// 		// allChecked = allChecked && (l.carriers.findIndex(e => e.id === vehicleObj.carrierId) >= 0)
		// 		if (checked) {
		// 			checkedCarriers.value.push(vehicleObj.carrierCode)
		// 		}
		// 		allChecked = allChecked && l.carriers.every(t => checkedCarriers.value.includes(t.code))
		// 	})
		// 	if (checked) {
		// 		uni.showToast({
		// 			icon: 'none',
		// 			title: '已扫箱' + vehicleObj.carrierCode
		// 		})
		// 		if (allChecked) {
		// 			debonce(() => {
		// 				uni.showToast({
		// 					icon: 'none',
		// 					title: '已验证所有箱码'
		// 				})
		// 			}, 700)
		// 		} else {
		// 			debounce(handleScanCode, 700)
		// 		}
		// 	} else {
		// 		message.value = '该箱号' + vehicleObj.carrierCode + '不在此发出单'
		// 		inputDialog.value.open()
		// 		return
		// 	}
		// }
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		background-color: #f5f5f5;
	}

	.bottom {
		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: rgba(0, 226, 166, 1);
			}

			&.right-btn {
				margin-left: 24rpx;
			}
		}
	}

	.content {
		width: 90%;
		height: calc(100% - 250rpx);
		background-color: rgba(255, 255, 255, 1);
		margin: 50rpx auto;
		padding-bottom: 50rpx;
		border-radius: 12rpx;

		.vehicleList {
			justify-content: baseline;
			align-content: flex-start;
			flex-wrap: wrap;
			width: 100%;
			height: 100%;
			padding: 0 64rpx;
			overflow: auto;

			.vehicleNo {
				padding: 0 10rpx;
				margin: 10rpx;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 60rpx;
				border: 1px solid rgba(213, 213, 213, 1);
				color: rgba(213, 213, 213, 1);
				border-radius: 6rpx;
			}

			.success {
				border: 1px solid rgba(44, 112, 213, 1.0);
				color: rgba(44, 112, 213, 1.0);
			}
		}

		.disuseList {
			border-top: 2rpx solid #e1e1e1;
			height: calc(100% - 480rpx - 20rpx);
			overflow: auto;
			width: 90%;
			margin: 0 auto;
			padding-top: 20rpx;
		}

		.title {
			display: flex;
			width: 100%;
			justify-content: space-around;
			flex-wrap: wrap;
			gap: 10px;

			.item-info {
				margin-bottom: 8rpx;
				width: calc(50% - 20px);

				.label {
					font-size: 28rpx;
					width: 220rpx;
					color: #808080;

					&.right {
						flex: 1;
						color: #000000;
					}
				}
			}
		}
	}

	.discardVehicleNo {
		padding: 0 10rpx;
		margin: 10rpx;
		justify-content: space-between;
		align-items: center;
		width: 150rpx;
		height: 60rpx;
		border: 1px solid rgba(213, 213, 213, 1);
		border-radius: 6rpx;
	}

	.title {
		margin: 30rpx auto;
		width: 30%;
		font-size: 36rpx;
		font-weight: bold;
	}
</style>