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-confirm ref="confirm" @submit="handleDoIt"></dialog-confirm>
</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 confirm = ref(null)
	const flag = ref(false)
	const selection = ref([])

	onLoad(() => {
	})

	function init() {
	}

	function handleScanCode() {
		uni.scanCode({
			scanType: ['qrCode'],
			onlyFromCamera: true, // 只允许相机扫码
			success: function(res) {
				console.log(res.result)
				let vehicleObj = JSON.parse(res.result);
				getDayworkItemByCarrierId({
					carrierId: vehicleObj.carrierId,
					status: 6
				}).then(response => {
					console.log(response)
					// for (let i = 0; i < products.value.length; i++) {
					// 	if (products.value[i].lotCode === res.data[0].lotCode) {
					// 		console.log(products.value[i].lotCode);
					// 		console.log(res.data[0].lotCode)
					// 		uni.showToast({
					// 			icon: "error",
					// 			title: "该批次已存在"
					// 		})
					// 		console.log("该批次已存在")
					// 		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() {
		if (selection.value.length > 0) {
			let msg = "是否确认接收";
			confirm.value.open(msg);
		}
	}

	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() {
		// 设置周转状态
		for (var i = 0; i < selection.value.length; i++) {
			selection.value[i].status = '7';
			selection.value[i].recipientId = store.userInfo.userId;
		}
		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() {
		handleDoReceipt();
	}
</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>