564 lines
11 KiB
Vue
564 lines
11 KiB
Vue
<template>
|
|
<view class="container">
|
|
|
|
|
|
<!-- 物料条码输入框 -->
|
|
<view class="input-section">
|
|
<view class="input-group">
|
|
<text class="input-label">物料条码</text>
|
|
<uni-easyinput
|
|
v-model="barcodeInput"
|
|
placeholder="请扫描或输入物料条码"
|
|
@input="handleBarcodeInput"
|
|
@clear="handleClear"
|
|
clearable
|
|
:maxlength="-1"
|
|
class="barcode-input"
|
|
/>
|
|
</view>
|
|
|
|
|
|
<!-- 入口选择框 -->
|
|
<view class="input-group">
|
|
<text class="input-label">入口选择</text>
|
|
<uni-data-select
|
|
v-model="selectedEntrance"
|
|
:localdata="entranceOptions"
|
|
placeholder="请选择入口"
|
|
|
|
class="select-input"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 解析结果显示区域 -->
|
|
<view class="result-section" v-if="parsedData">
|
|
<view class="section-title">
|
|
<text>解析结果</text>
|
|
</view>
|
|
|
|
<view class="result-grid">
|
|
<view class="result-item">
|
|
<text class="result-label">MODEL</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.MODEL"
|
|
placeholder="型号"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">COLOR</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.COLOR"
|
|
placeholder="颜色"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">SERIAL</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.SERIAL"
|
|
placeholder="序列号"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">V</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.V"
|
|
placeholder="电压"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">Hz</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.Hz"
|
|
placeholder="频率"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">PH</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.PH"
|
|
placeholder="相数"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">N.W.</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.NW"
|
|
placeholder="净重"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">G.W.</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.GW"
|
|
placeholder="毛重"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
|
|
<view class="result-item">
|
|
<text class="result-label">ITEM_CODE</text>
|
|
<uni-easyinput
|
|
v-model="parsedData.ITEM_CODE"
|
|
placeholder="物料编码"
|
|
readonly
|
|
:clearable="false"
|
|
class="result-input"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 入库操作按钮 -->
|
|
<view class="action-section">
|
|
<button
|
|
class="submit-btn"
|
|
@click="handleSubmitInbound"
|
|
:disabled="isSubmitting"
|
|
>
|
|
<text v-if="!isSubmitting">确认入库</text>
|
|
<text v-else>入库中...</text>
|
|
</button>
|
|
</view>
|
|
|
|
<!-- 示例说明 -->
|
|
<view class="example-section">
|
|
<view class="section-title">
|
|
<text>输入格式示例</text>
|
|
</view>
|
|
<view class="example-text">
|
|
<text>MODEL:M-221F COLOR:3000 SERIAL:25318S7000F03 V:230 Hz:50 PH:1 N.W.:216kg G.W.:243kg ITEM_CODE:KC01001000333 @:30F0007S81352$S0T0U3RDS7S0S0S0T0T3T0U7T0$8135240LP0A@</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { addInJob } from '@/api/in/order'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
barcodeInput: '',
|
|
parsedData: null,
|
|
|
|
selectedEntrance: '',
|
|
isSubmitting: false,
|
|
|
|
// 入口选项
|
|
entranceOptions: [
|
|
{ value: 'G1005', text: 'G1005' },
|
|
{ value: 'L2012', text: 'L2012' },
|
|
{ value: 'L2013', text: 'L2013' }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// 处理条码输入事件
|
|
handleBarcodeInput(value) {
|
|
if (value && value.trim()) {
|
|
this.parseBarcode(value.trim())
|
|
} else {
|
|
this.parsedData = null
|
|
}
|
|
},
|
|
|
|
// 解析条码数据
|
|
parseBarcode(barcode) {
|
|
try {
|
|
// 初始化解析结果对象
|
|
const result = {
|
|
MODEL: '',
|
|
COLOR: '',
|
|
SERIAL: '',
|
|
V: '',
|
|
Hz: '',
|
|
PH: '',
|
|
NW: '',
|
|
GW: '',
|
|
ITEM_CODE: ''
|
|
}
|
|
|
|
// 定义正则表达式来匹配各个字段
|
|
const patterns = {
|
|
MODEL: /MODEL:([^\s]+)/i,
|
|
COLOR: /COLOR:([^\s]+)/i,
|
|
SERIAL: /SERIAL:([^\s]+)/i,
|
|
V: /V:([^\s]+)/i,
|
|
Hz: /Hz:([^\s]+)/i,
|
|
PH: /PH:([^\s]+)/i,
|
|
NW: /N\.W\.:([^\s]+)/i,
|
|
GW: /G\.W\.:([^\s]+)/i,
|
|
ITEM_CODE: /ITEM_CODE:([^\s]+)/i
|
|
}
|
|
|
|
// 逐个匹配字段
|
|
for (const [key, pattern] of Object.entries(patterns)) {
|
|
const match = barcode.match(pattern)
|
|
if (match && match[1]) {
|
|
result[key] = match[1]
|
|
}
|
|
}
|
|
|
|
// 设置解析结果
|
|
this.parsedData = result
|
|
|
|
// 显示解析成功提示
|
|
uni.showToast({
|
|
title: '条码解析成功',
|
|
icon: 'success',
|
|
duration: 1500
|
|
})
|
|
|
|
} catch (error) {
|
|
console.error('条码解析失败：', error)
|
|
uni.showToast({
|
|
title: '条码格式错误',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
this.parsedData = null
|
|
}
|
|
},
|
|
|
|
// 清除输入
|
|
handleClear() {
|
|
this.barcodeInput = ''
|
|
this.parsedData = null
|
|
},
|
|
|
|
// 处理入库提交
|
|
async handleSubmitInbound() {
|
|
// 表单验证
|
|
if (!this.barcodeInput.trim()) {
|
|
uni.showToast({
|
|
title: '请输入物料条码',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
if (!this.selectedEntrance) {
|
|
uni.showToast({
|
|
title: '请选择入口',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
|
|
// if (!this.parsedData) {
|
|
// uni.showToast({
|
|
// title: '请先解析物料条码',
|
|
// icon: 'none',
|
|
// duration: 2000
|
|
// })
|
|
// return
|
|
// }
|
|
|
|
// 开始提交
|
|
this.isSubmitting = true
|
|
|
|
try {
|
|
// 根据入口选择确定楼层
|
|
let floor
|
|
if(this.selectedEntrance=='L1011' || this.selectedEntrance=='L1012'){
|
|
floor='2'
|
|
}else{
|
|
floor='1'
|
|
}
|
|
// 准备提交数据
|
|
const submitData = {
|
|
trayCode: this.barcodeInput.trim(),
|
|
entranceId: this.selectedEntrance,
|
|
floor: floor,
|
|
type:1
|
|
}
|
|
|
|
console.log('提交入库数据：', submitData)
|
|
|
|
// 调用入库API
|
|
const response = await addInJob(submitData)
|
|
console.log(response)
|
|
if (response.code==200){
|
|
// 入库成功
|
|
uni.showToast({
|
|
title: '入库成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
|
|
// 清空表单
|
|
this.barcodeInput = ''
|
|
this.parsedData = null
|
|
this.selectedEntrance = ''
|
|
|
|
console.log('入库成功：', response)
|
|
}else{
|
|
uni.showToast({
|
|
title: response.msg||'入库失败',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('入库操作失败：', error)
|
|
uni.showToast({
|
|
title: response.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} finally {
|
|
this.isSubmitting = false
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
padding: 20rpx;
|
|
background-color: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
margin-bottom: 30rpx;
|
|
text-align: center;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
}
|
|
|
|
.input-section {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
|
|
.input-group {
|
|
margin-bottom: 30rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.input-label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #606266;
|
|
margin-bottom: 16rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.barcode-input,
|
|
.select-input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.result-section {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
|
|
.section-title {
|
|
margin-bottom: 24rpx;
|
|
padding-bottom: 16rpx;
|
|
border-bottom: 2rpx solid #ebeef5;
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
}
|
|
|
|
.result-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 20rpx;
|
|
|
|
.result-item {
|
|
.result-label {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: #606266;
|
|
margin-bottom: 12rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.result-input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-section {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
text-align: center;
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
|
border: none;
|
|
border-radius: 12rpx;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.3);
|
|
|
|
&:active {
|
|
transform: translateY(2rpx);
|
|
box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.3);
|
|
}
|
|
|
|
&:disabled {
|
|
background: linear-gradient(135deg, #c0c4cc 0%, #d3d4d6 100%);
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.example-section {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
|
|
.section-title {
|
|
margin-bottom: 20rpx;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
}
|
|
}
|
|
|
|
.example-text {
|
|
background-color: #f8f9fa;
|
|
padding: 20rpx;
|
|
border-radius: 8rpx;
|
|
border-left: 4rpx solid #409eff;
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #606266;
|
|
line-height: 1.6;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 深度选择器样式
|
|
:deep(.uni-easyinput__content) {
|
|
background-color: #f5f7fa;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #dcdfe6;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
:deep(.uni-easyinput__content-input) {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
:deep(.is-input-border) {
|
|
border-color: #dcdfe6 !important;
|
|
}
|
|
|
|
:deep(.uni-easyinput__content:hover) {
|
|
border-color: #c0c4cc;
|
|
}
|
|
|
|
:deep(.uni-easyinput__content.is-focus) {
|
|
border-color: #409eff;
|
|
}
|
|
|
|
:deep(.is-disabled) {
|
|
background-color: #f5f7fa;
|
|
border-color: #e4e7ed;
|
|
}
|
|
|
|
// uni-data-select 样式
|
|
:deep(.uni-select) {
|
|
.uni-select__input-box {
|
|
background-color: #f5f7fa;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #dcdfe6;
|
|
transition: all 0.3s ease;
|
|
height: 80rpx;
|
|
|
|
.uni-select__input-text {
|
|
font-size: 28rpx;
|
|
color: #606266;
|
|
}
|
|
|
|
.uni-select__input-placeholder {
|
|
font-size: 28rpx;
|
|
color: #c0c4cc;
|
|
}
|
|
}
|
|
|
|
.uni-select__input-box:hover {
|
|
border-color: #c0c4cc;
|
|
}
|
|
}
|
|
</style> |