ezhizao_dms_app/pages/changeBox/index.vue

<template>
	<view class='container'>
		<view class='content'>
			<view>
				<text class='title'>当前箱号</text>

				<view class="vehicleList uni-row" style="overflow: auto;">
					<view class="vehicleNo uni-row" v-for="(item,index) in vehicleList">
						<text>{{item.carrierCode}}</text>
						<text @click="handleDelVehicleNo(item)">×</text>
					</view>
				</view>
				<view style="border-top:1rpx solid #e1e1e1; height: 500rpx; overflow: auto; width: 90%;margin: 0 auto">
					<view class="uni-row" style="align-items: center;">
						<view style="flex: 3;margin-left: 60rpx;">箱号</view>
						<view style="flex: 3;">是否废弃</view>
						<view style="flex: 4; ">废弃原因</view>
					</view>
					<view class="vehicleNo uni-row" v-for="(item,index) in discardVehicleList"
						style="align-items: center;justify-content: space-around;">
						<view class="uni-row discardVehicleNo"><text>{{item.carrierCode}}</text>
							<text @click="handleDelDiscardVehicleList(item)">×</text>
						</view>
						<view class="uni-row">
							<switch color="#ff0000" style="transform:scale(0.7)" @change="handleSwitchChange(item)" />
						</view>
						<view class="uni-row">
							<uni-data-select v-model="item.reason" :localdata="abanonmentList" style="width: 240rpx;"
								:clear="false"></uni-data-select>
						</view>
					</view>

				</view>
				<view class="btn">
					<button class='submit code' @click="handleScanCode">扫码</button>
				</view>
			</view>
			<view class='bottom uni-row'>
				<button class='submit' type=primary @click="debounce(handleSubmit,300)">提交</button>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getDictInfoByType
	} from '@/api/dict/dict.js'
	import {
		getDayworkCarrierList
	} from '@/api/business/dayworkCarrier.js'
	import {
		saveDayWork
	} from '@/api/business/dayWork.js'
	import {
		store
	} from '@/store/index.js'
	import {
		debounce
	} from '@/utils/common.js'
	import {
		addCarrierReject
	} from '@/api/business/carrier.js'

	const vehicleList = ref([])
	const discardVehicleList = ref([])
	const abanonmentList = ref([])

	let dayWorkInfo = store.dayworkInfo;

	onLoad(() => {
		let reqParam = {
			dayworkId: dayWorkInfo.id,
			isChanged: 0
		}
		init(reqParam);
	})

	function init(data) {
		console.log(data)
		getDayworkCarrierList(data).then(res => {
			console.log(res)
			if (res.code == 200) {
				vehicleList.value = res.rows;
				console.log(vehicleList.value)
			}
		})
		getDictInfoByType('reason_for_abandonment').then((res) => {
			for (var i = 0; i < res.data.length; i++) {
				abanonmentList.value[i] = {
					text: res.data[i].dictLabel,
					value: res.data[i].dictValue
				}
			}
		})
	}

	function handleSwitchChange(item) {
		item.checked = !item.checked
	}

	// function handleSelectRejectReason(item) {
	// 	for (var i = 0; i < abanonmentList.value.length; i++) {
	// 		if(abanonmentList.value[i].value == item.reason ) {
	// 			item.reason = abanonmentList.value[i].text
	// 		}
	// 	}
	// }
	function handleDelVehicleNo(item) {
		vehicleList.value.splice(item, 1);
		let discardVehicleInfo = {
			carrierCode: item.carrierCode,
			checked: false,
			reason: '',
			carrierId: item.carrierId
		}
		discardVehicleList.value.push(discardVehicleInfo)
	}

	function handleDelDiscardVehicleList(item) {
		discardVehicleList.value.splice(item, 1)
		vehicleList.value.push(item)
	}

	function handleScanCode() {
		uni.scanCode({
			scanType: ['qrCode'], // 条形码扫描
			onlyFromCamera: true, // 只允许相机扫码
			autoZoom: false,
			success: function(res) {
				let vehicleObj = JSON.parse(res.result);
				if (!vehicleObj.carrierId || vehicleObj.carrierId == "") {
					uni.showToast({
						icon: "error",
						title: "请扫载具码",
						duration: 1000
					})
					return;
				}
				for (let i = 0; i < vehicleList.value.length; i++) {
					if (vehicleList.value[i].carrierId === vehicleObj.carrierId) {
						uni.showToast({
							icon: "error",
							title: "载具已存在",
							duration: 1000
						})
						return;
					}
				}
				vehicleList.value.push(JSON.parse(res.result));
			}
		});
	}

	function handleSubmit() {
		dayWorkInfo.dayworkCarriers = vehicleList.value;
		saveDayWork(dayWorkInfo).then(res => {
			if (res.code === 200) {
				uni.showToast({
					icon: 'success',
					title: '添加成功'
				});
				// uni.$emit('batchReporting-addBatch')
				uni.$emit('dayworkItemUpdate');
				uni.navigateBack({
					url: '/pages/batchReporting/index'
				})
			} else {
				uni.showToast({
					icon: 'error',
					title: res.msg
				});
			}
		})
		
		let carrierRejectList = []
		let flag = true;
		for (var i = 0; i < discardVehicleList.value.length; i++) {
			if (discardVehicleList.value[i].checked && discardVehicleList.value[i].reason == "") {
				uni.showToast({
					icon: 'error',
					title: '第' + (i + 1) + '条未选择废弃原因'
				});
				flag = false;
			}
			if (discardVehicleList.value[i].checked && discardVehicleList.value[i].reason !== "") {
				carrierRejectList.push(discardVehicleList.value[i])
			}
		}
		if(carrierRejectList.length > 0 && flag){
			addCarrierReject(carrierRejectList).then((response) => {
				if (response.code == 200) {
			
				} else {
					uni.showToast({
						icon: 'error',
						title: '添加失败',
					});
				}
			})
		}
	}
</script>

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

	.bottom {
		background-color: white;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		align-items: center;

	}

	.submit {
		margin: 0 auto;
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 0;
	}

	.code {
		background-color: rgba(0, 226, 166, 1);
		color: white;
	}

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

		.vehicleList {
			justify-content: flex-start;
			flex-wrap: wrap;
			width: 100%;
			height: 45%;
			// max-height: 300rpx;
			overflow: auto;
			padding: 0 80rpx;

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


		}
	}

	.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;
	}

	.btn {
		position: fixed;
		top: 940rpx;
		left: 0;
		right: 0;
	}

	.segment {
		width: 280rpx;
		height: 1rpx;
		border: 1px solid rgba(187, 187, 187, 1);
	}
</style>