ezhizao_dms_app/pages/addNewBatch/index.vue

<template>
	<view class='container'>
		<view class="content">
			<view>
				<text class='title'>选择批次号</text>
				<view class="batchNo uni-row">
					<view :class="{'batchNo-item':true, 'uni-row': true}" v-for="(item,index) in batchNoList"
						:key='index'>
						<!-- ,'batchNoCheck':batchNoCheck === item -->
						<!-- @click="handleCheckBatchNo(item)" -->
						{{item.lotCode}}
					</view>
				</view>
				<view class="inpAndScan uni-row">
					<uni-easyinput v-if="batchNoList.length > 0" class="inp" suffixIcon="checkmarkempty"
						v-model="inpValue" placeholder="可手动修正批次" @iconClick="iconClick"></uni-easyinput>
					<view v-if="batchNoList.length > 0" class="scanLotCode" @click="handleConfirmLotCode">
						<text>扫码修正批次</text>
					</view>
				</view>
			</view>segment
			<view class='middle'>
				<view class=''></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>
				<text class='title' style="margin-bottom: 50rpx;">基础信息</text>
				<view class="uni-row info">
					<label for="HeatNo">炉号:</label>
					<uni-data-select id="incomingInfo" class="uni-input data-select" v-model="basicInfo" :localdata="furnaceNumberInfoList" :clear="false"
						@change="handleFurnaceNumberChange"></uni-data-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.factory}}</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.incomingDate}}</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="material uni-input">{{basicInfo.firstTechnicalRequirement}}{{basicInfo.secondTechnicalRequirement || basicInfo.secondTechnicalRequirement != '' ? basicInfo.secondTechnicalRequirement : ''}}</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,
		checkCarrier
	} from '@/api/business/carrier.js'
	import {
		getFurnaceNoInfo
	} from '@/api/p2/furnaceNoInfo.js'
	import {
		getToken
	} from '@/utils/auth'

	const batchNoCheck = ref(null) // 批次号是否选中
	const batchNoList = ref([]) // 批次号列表
	const vehicleList = ref([])
	const basicInfo = ref({}) // 基础信息对象
	const dayWork = ref({})
	const curPlan = ref({})
	const furnaceNumberInfoList = ref([])
	const emit = defineEmits(['batchReporting-addBatch']);
	const inpValue = ref('')
	const lotList = ref([])

	onLoad(() => {
		// 处理特殊字符JSON解析失败报错
		curPlan.value = store.planDetails;
		dayWork.value = {
			productionPlanDetailId: curPlan.value.id,
			productionPlanId: curPlan.value.productionDetailId,
			technologicalProcessId: curPlan.value.technologicalProcessId,
			deptId: store.curDeptDetails.deptId
		}
		init();
	})

	function init() {
		let obj = {}
		obj.productionPlanDetailId = store.planDetails.id;
		getLotList(obj).then(res => {
			console.log(res)
			lotList.value = res.rows;
			if (res.rows.length > 0) {
				batchNoList.value = [res.rows[0]];
				dayWork.value.lotId = batchNoList.value[0].id;
				dayWork.value.lotCode = batchNoList.value[0].lotCode;
			} else {
				batchNoList.value = res.rows;
			}
		})

		// 拉取炉号信息from p2
		let token = 'Bearer ' + getToken();
		let header = {
			Authorization: token
		}
		uni.request({
			url: 'http://120.46.159.163:7002/business/furnaceNoInfo/getFurnaceNoInfo',
			data: {
				productionPlanNo: store.planDetails.productionPlanNo,
				lineNumber: store.planDetails.lineNumber
			},
			method: 'GET',
			header,
			sslVerify: false,
			success: (res) => {
				console.log(res.data);
				if(res.data.code == 200 && res.data.data.length > 0){
					for (let i = 0; i < res.data.data.length; i++) {
						furnaceNumberInfoList.value[i] = {
							text: res.data.data[i].factory,
							value: res.data.data[i]
						} 
					}
					
					basicInfo.value = res.data.data[0];
					console.log(basicInfo.value);
					console.log(furnaceNumberInfoList.value)
				}
			}
		})
	}

	// 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 iconClick() {
		checkLotCode(inpValue.value);
	}

	function checkLotCode(lotCode) {
		if (lotList.value.some(item => item.lotCode == lotCode)) {
			for (let i = 0; i < lotList.value.length; i++) {
				if (lotList.value[i].lotCode == lotCode) {
					batchNoList.value = [lotList.value[i]];
					dayWork.value.lotId = lotList.value[i].id;
					dayWork.value.lotCode = lotList.value[i].lotCode;
					uni.showToast({
						icon: "none",
						title: "该批次号可用",
						duration: 2000
					})
					return true;
				}
			}
		} else {
			uni.showToast({
				icon: "none",
				title: "该批次号已被使用或不属于该产品",
				duration: 2000
			})
			return false;
		}
	}

	function handleConfirmLotCode() {
		// 引入原生插件
		const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
		// 调用插件的 mpaasScan 方法
		mpaasScanModule.mpaasScan({
				// 扫码识别类型，参数可多选，qrCode、barCode，
				// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
				scanType: ["qrCode", "barCode"],
				// 是否隐藏相册，默认false不隐藏
				hideAlbum: false,
			},
			(ret) => {
				console.log(ret);
				// uni.showModal({
				// 	title: "扫码结果",
				// 	// 返回值中，有三个参数 resp_code、resp_message、resp_result
				// 	// resp_code 表示返回结果值，10：用户取消，11：其他错误，1000：成功
				// 	// resp_message 表示返回结果信息
				// 	// resp_result 表示扫码结果，只有成功才会有返回
				// 	content: JSON.stringify(ret),
				// 	showCancel: false,
				// 	confirmText: "确定",
				// });
				if (ret.resp_result) {
					checkLotCode(ret.resp_result);
				} else {
					uni.showToast({
						icon: "none",
						title: "条形码可能损坏,请重新扫码或手动修正批次号",
						duration: 2000
					})
				}
			}
		);
	}

	function handleFurnaceNumberChange(){
		
	}

	// 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;
	// 				}
	// 			}
	// 			checkCarrier(vehicleObj.carrierId).then(response => {
	// 				if (response.code == 200) {
	// 					vehicleList.value.push(vehicleObj);
	// 				} else {
	// 					uni.showToast({
	// 						icon: 'none',
	// 						title: response.msg
	// 					})
	// 					return;
	// 				}
	// 			})
	// 		}
	// 	});
	// }

	function handleAdd() {
		// dayWork.value.dayworkCarriers = vehicleList.value;
		console.log(dayWork.value)
		// console.log(batchNoCheck.value)
		// console.log(vehicleList.value)
		if (checkLotCode(dayWork.value.lotCode)) {
			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: "none",
				title: "该批次号已被使用或不属于该产品",
				duration: 2000
			})
		}
	}
</script>

<style lang="scss">
	.container {
		height: 90%;
		background-color: #f5f5f5;
		padding-bottom: 112rpx;
	}

	.bottom {
		background-color: white;
		width: 100%;
		position: fixed;
		bottom: 0;
		align-items: center;
		background-color: #ffffff;
		padding: 16rpx 0;

		.add {
			margin: 0 auto;
			width: 80%;
			height: 80rpx;
		}
	}

	.content {
		position: relative;
		width: auto;
		background-color: rgba(255, 255, 255, 1);
		margin: 32rpx;
		padding-bottom: 50rpx;
		padding-top: 20rpx;
		border-radius: 12rpx;

		.title {
			width: auto;
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
	}

	.inpAndScan {
		justify-content: space-between;
		width: calc(88% + 20rpx);
		margin: 0 auto;

		.inp {
			width: 52%;
			margin: 10rpx;
			height: 74rpx;
		}

		.scanLotCode {
			border-radius: 6rpx;
			border: 1rpx solid rgba(22, 132, 252, 1);
			height: 60rpx;
			margin: 10rpx;
			height: 72rpx;
			width: 36%;
			text-align: center;
			line-height: 72rpx;
			background-color: rgba(22, 132, 252, 1);
			color: white;
		}
	}

	.batchNo {
		// justify-content: flex-start;
		// flex-wrap: wrap;
		// width: auto;
		// height: 320rpx;
		// overflow: auto;
		// padding-left: calc(100% - 88% - 4rpx - 40rpx);
		// margin-bottom: 40rpx;
		// border-radius: 6rpx;
		justify-content: center;

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

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

	.vehicleList {
		justify-content: flex-start;
		flex-wrap: wrap;
		width: auto;
		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: 96%;
		justify-content: space-around;
		align-items: center;

		label {
			flex: 1;
			text-combine-upright: all;
			margin: 0 20rpx 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;
			}
		}
	}
	
	.material {
		height: auto;
		width: 60%;
	}
</style>