ezhizao_dms_app/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;">
				<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>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	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)

	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 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 && checkedCarriers.values.includes(l.carriers)
					})
					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)
		}
	}
</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>