feat(扫码功能): 重构扫码页面并新增分卷录入功能
- 重构扫码页面结构，采用标签页形式组织功能模块 - 新增分卷录入功能组件(apart.vue)和基础录入功能组件(typing.vue) - 新增物料选择组件(klp-product-select)和标签页组件(klp-tabs) - 新增WMS相关API接口(product.js, warehouse.js等) - 更新uni-data-select组件支持多选和插槽功能 - 更新uni-icons和uni-load-more组件版本及功能 - 移除冗余样式和代码，优化现有组件结构 refactor(组件): 优化acidity.vue组件使用新的标签页组件 style: 移除冗余CSS样式代码 chore: 更新多个uni_modules组件的package.json版本号
This commit is contained in:
砂糖
238
apps/hand-factory/components/panels/code/typing.vue
Normal file
238
apps/hand-factory/components/panels/code/typing.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user