klp-mono/apps/hand-factory/components/panels/code/typing.vue

<template>
	<view class="container">
		<!-- 扫码按钮 -->
		<button class="scan-btn" @click="handleScan">点击扫码</button>
		
		<!-- 表单区域 -->
		<uni-form ref="form" v-model="form" :rules="rules" v-if="form.coilId" label-width="160rpx">
			<!-- 类型选择 -->
			<uni-form-item label="物料类型" prop="itemType">
				<uni-data-checkbox 
					v-model="form.itemType" 
					:localdata="[{ text: '原料', value: 'raw_material' }, { text: '产品', value: 'product' }]" 
				/>
			</uni-form-item>
			
			<!-- 物料选择 -->
			<uni-form-item label="原料/产品" prop="itemId">
				<klp-product-select 
					:item-type="form.itemType" 
					v-model="form.itemId"
				></klp-product-select>
			</uni-form-item>
			
			<!-- 班组输入 -->
			<uni-form-item label="所属班组" prop="team">
				<input 
					v-model="form.team" 
					placeholder="请输入班组名称" 
					class="input-control"
				/>
			</uni-form-item>
			
			<!-- 卷号输入 -->
			<uni-form-item label="当前卷号" prop="currentCoilNo">
				<input 
					v-model="form.currentCoilNo" 
					placeholder="请输入卷号信息" 
					class="input-control"
				/>
			</uni-form-item>
			
			<!-- 毛重输入 -->
			<uni-form-item label="毛重(kg)" prop="grossWeight">
				<input 
					v-model="form.grossWeight" 
					type="number" 
					placeholder="请输入毛重" 
					class="input-control"
				/>
			</uni-form-item>
			
			<!-- 净重输入 -->
			<uni-form-item label="净重(kg)" prop="netWeight">
				<input 
					v-model="form.netWeight" 
					type="number" 
					placeholder="请输入净重" 
					class="input-control"
				/>
			</uni-form-item>
			
			<!-- 确认按钮 -->
			<uni-form-item>
				<button class="confirm-btn" @click="handleConfirm">
					确认信息并录入系统
				</button>
			</uni-form-item>
		</uni-form>
	</view>
</template>

<script>
	import { getGenerateRecord } from '@/api/wms/code.js'
	import { updateMaterialCoil } from '@/api/wms/coil.js'
	
	export default { 
		data() {
			return {
				form: {
					coilId: undefined,
					itemType: 'raw_material',
					itemId: undefined,
					team: undefined,
					currentCoilNo: undefined,
					warehouseId: undefined,
					grossWeight: undefined,
					netWeight: undefined,
				},
				// 表单验证规则
				rules: {
					coilId: {
						required: true,
						message: '请先扫码获取卷ID',
						trigger: ['change', 'blur']
					},
					itemType: {
						required: true,
						message: '请选择物料类型',
						trigger: 'change'
					},
					itemId: {
						required: true,
						message: '请选择对应原料/产品',
						trigger: 'change'
					},
					team: {
						required: true,
						message: '请输入所属班组',
						trigger: 'blur'
					},
					currentCoilNo: {
						required: true,
						message: '请输入当前卷号',
						trigger: 'blur'
					},
					grossWeight: {
						required: true,
						message: '请输入毛重',
						trigger: 'blur',
						type: 'number'
					},
					netWeight: {
						required: true,
						message: '请输入净重',
						trigger: 'blur',
						type: 'number'
					}
				}
			}
		},
		methods: {
			// 处理扫码逻辑
			handleScan() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码结果：', res.result)
						getGenerateRecord(res.result).then(res => {
							const result = JSON.parse(res.data.content);
							this.$set(this.form, 'coilId', result.coil_id);
							// 扫码后验证coilId字段
							this.$refs.form.validateField('coilId');
							console.log('扫码获取的卷信息：', result);
						}).catch(err => {
							uni.showToast({
								title: '扫码信息解析失败',
								icon: 'none'
							})
						})
					},
					fail: (err) => {
						console.error('扫码失败：', err)
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						})
					}
				})
			},
			
			// 处理确认提交
			handleConfirm() {
				// 表单验证
				this.$refs.form.validate(valid => {
					if (valid) {
						// 验证通过，提交数据
						updateMaterialCoil(this.form).then(res => {
							uni.showToast({
								title: '录入成功',
								icon: 'success'
							})
							// 重置表单
							this.$refs.form.resetFields();
						}).catch(err => {
							console.error('提交失败：', err)
							uni.showToast({
								title: '录入失败，请重试',
								icon: 'none'
							})
						})
					} else {
						// 验证失败，不提交
						return false;
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx 20rpx;
	}
	
	/* 扫码按钮样式 */
	.scan-btn {
		width: 600rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		background-color: #007aff;
		color: white;
		border-radius: 50rpx;
		margin: 0 auto 60rpx;
		display: block;
		box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
	}
	
	/* 输入框样式 */
	.input-control {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
	}
	
	/* 确认按钮样式 */
	.confirm-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		background-color: #00b42a;
		color: white;
		border-radius: 10rpx;
		margin-top: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 180, 42, 0.2);
	}
	
	/* 表单项间距 */
	.uni-form-item {
		margin-bottom: 30rpx !important;
	}
</style>