ezhizao_dms_app/pages/addNewBatch/index.vue

<template>
	<view class='container'>
		<view class='content'>
			<view>
				<text class='title'>选择批次号</text>
				<view>
					<view class="batchNo uni-row">
						<view :class="{'batchNo-item':true, 'uni-row': true,'batchNoCheck':batchNoCheck === item}"
							v-for="(item,index) in batchNoList" :key='index' @click="handleCheckBatchNo(item)">
							{{item.lotCode}}
						</view>
					</view>
				</view>
			</view>
			<view class='middle'>
				<view class='segment'></view>
				<uni-icons type="link" size="30" style="margin: 10rpx;  transform: rotate(135deg);"></uni-icons>
				<view class='segment'></view>
			</view>
			<view>
				<text class='title'>绑定载具</text>
				<view class="vehicleList uni-row">
					<view class="vehicleNo uni-row" v-for="(item,index) in vehicleList">
						<text>{{item.carrierCode}}</text>
						<text @click="handleDelVehicleNo(index)">×</text>
					</view>
				</view>
				<view>
					<button style='background-color: rgba(0, 226, 166,1);
						   color: white;margin: 20rpx auto;
						   width: 80%;' @click='handleScanCode'>扫码</button>
				</view>
			</view>
			<view class='middle'>
				<view class='segment'></view>
				<uni-icons type="paperclip" size="30" style="margin: 10rpx;"></uni-icons>
				<view class='segment'></view>
			</view>
			<view class="incomingInfo">
				<text class='title' style="margin-bottom: 50rpx;">基础信息</text>
				<view class="uni-row info">
					<label for="HeatNo">炉号:</label>
					<select id="incomingInfo" class="uni-input data-select" v-model="basicInfo.heatNo">
						<option class="data-select-options" v-for="(item,index) in range">{{item.text}}</option>
					</select>
					<!-- <input id="HeatNo" class="uni-input" v-model="basicInfo.heatNo" placeholder="请填写" /> -->
					<!-- <text id="HeatNo" class="uni-input">{{basicInfo.heatNo}}</text> -->
				</view>
				<view class='segment' style="width: 90%;margin: 20rpx auto;"></view>
				<view class="uni-row info">
					<label for="manufacturer">厂家:</label>
					<!-- <input id="manufacturer" class="uni-input" v-model="basicInfo.manufacturer" placeholder="请填写" /> -->
					<text id="manufacturer" class="uni-input">{{basicInfo.manufacturer}}</text>
				</view>
				<view class='segment' style="width: 90%;margin: 20rpx auto;"></view>
				<view class="uni-row info">
					<label for="incomingInfo">来料日期:</label>
					<!-- <input id="incomingInfo" class="uni-input" v-model="basicInfo.incomingInfo" placeholder="请填写" /> -->
					<text id="incomingInfo" class="uni-input">{{basicInfo.incomingInfo}}</text>
				</view>
				<view class='segment' style="width: 90%;margin: 20rpx auto;"></view>
				<view class="uni-row info">
					<label for="incomingInfo">材质:</label>
					<!-- <input id="incomingInfo" class="uni-input" v-model="basicInfo.incomingInfo" placeholder="请填写" /> -->
					<text id="incomingInfo" class="uni-input">{{basicInfo.materia}}</text>
				</view>
				<view class='segment' style="width: 90%;margin: 20rpx auto;"></view>
			</view>
		</view>
		<view class='bottom uni-row'>
			<button class='add' type=primary @click='handleAdd'>添加</button>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getLotList
	} from "@/api/business/lot.js"
	import {
		saveDayWork
	} from '@/api/business/dayWork.js'
	import {
		store
	} from '@/store/index.js'
	import {
		getCarrierById
	} from '@/api/business/carrier.js'

	const batchNoCheck = ref(null) // 批次号是否选中
	const batchNoList = ref([]) // 批次号列表
	const vehicleList = ref([])
	const basicInfo = ref({ // 基础信息对象
		heatNo: 'cs222',
		manufacturer: 'DMS',
		incomingInfo: 'L123456',
		materia: 'dx1111'
	})
	const dayWork = ref({})
	const curSubPlan = ref({})
	const range = ref([{
			value: 0,
			text: "LNO001"
		},
		{
			value: 1,
			text: "LNO002"
		},
		{
			value: 2,
			text: "LNO003"
		},
	])
	const emit = defineEmits(['batchReporting-addBatch']);

	onLoad(() => {
		// 处理特殊字符JSON解析失败报错
		curSubPlan.value = store.planSubDetails;
		console.log(curSubPlan.value)
		dayWork.value = {
			productionPlanDetailSubDetailId: curSubPlan.value.id,
			productionPlanDetailId: curSubPlan.value.productionPlanDetailId,
			productionPlanId: curSubPlan.value.productionDetailId,
			technologicalProcessId: curSubPlan.value.technologicalProcessId
		}
		init();
	})

	function init() {
		let obj = {}
		obj.productionPlanId = curSubPlan.value.productionPlanId;
		getLotList(obj).then(res => {
			batchNoList.value = res.rows;
		})
	}

	function handleCheckBatchNo(item) {
		batchNoCheck.value = item;
		dayWork.value.lotId = item.id;
	}

	function handleDelVehicleNo(index) {
		vehicleList.value.splice(index, 1);
	}

	function handleValidate() {
		if (batchNoCheck.value && vehicleList.value) {
			return true;
		} else {
			return false;
		}
	}

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

	function handleAdd() {
		dayWork.value.dayworkCarriers = vehicleList.value;
		console.log(dayWork.value)
		console.log(batchNoCheck.value)
		console.log(vehicleList.value)
		if (handleValidate()) {
			saveDayWork(dayWork.value).then(res => {
				console.log(res)
				if (res.code === 200) {
					uni.showToast({
						icon: 'success',
						title: '添加成功',
						duration: 2000
					});
					uni.$emit('batchReporting-addBatch');
					uni.$emit('dayworkItemUpdate');
					uni.navigateBack({
						url: '/pages/batchReporting/index'
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg,
						duration: 2000
					});
				}
			})
		} else {
			uni.showToast({
				icon: 'error',
				title: '未选择完整信息',
				duration: 2000
			});
		}

	}
</script>

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

	.incomingInfo {
		overflow: auto;
		height: 30%;
	}

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

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

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

		.title {
			margin: 10rpx 39%;
			width: 30%;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.batchNo {
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
		height: 320rpx;
		overflow: auto;
		padding: 0 80rpx;
		margin-bottom: 40rpx;
		border-radius: 6rpx;

		.batchNo-item {
			justify-content: center;
			align-items: center;
			width: 240rpx;
			margin: 10rpx;
			height: 60rpx;
			border: 1px solid rgba(213, 213, 213, 1);
			border-radius: 6rpx;
		}

		.batchNoCheck {
			color: #FFF;
			border: 1 solid rgba(22, 132, 252, 1);
			background-color: rgba(22, 132, 252, 1);
		}
	}

	.vehicleList {
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
		height: 120rpx;
		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;
		}
	}

	.middle {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center
	}

	.segment {
		width: 280rpx;
		background-color: rgba(213, 213, 213, 1);
		border: 1rpx solid rgba(213, 213, 213, 1);
	}

	.info {
		width: 100%;
		justify-content: space-around;
		align-items: center;

		label {
			flex: 1;
			text-combine-upright: all;
			margin: 0 30rpx;

		}

		text {
			flex: 3;
			// width: 80%;
		}

		.data-select {
			flex: 3;
			width: 80%;
			height: 60rpx;
			margin-right: 40rpx;
			border-radius: 18rpx;
			background-color: #FFF;

			.data-select-options {
				width: 200rpx;
			}
		}
	}
</style>