392 lines
8.2 KiB
Vue
392 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="header">
|
|||
|
|
<button class="back" @click="back"><i class="icon icon-arrow_back"
|
|||
|
|
style="color:#05DCEF;font-size:36rpx"></i></button>
|
|||
|
|
<text class="title">手动码盘入库</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="content">
|
|||
|
|
<!-- 顶部提示 -->
|
|||
|
|
<view class="tip">
|
|||
|
|
<view class="tip-icon"><i class="icon icon-info" style="color:#05DCEF"></i></view>
|
|||
|
|
<text class="tip-text">请先扫描载具号，然后添加物料信息进行码盘入库</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 载具条码 -->
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">载具号</text>
|
|||
|
|
<view class="input-wrap">
|
|||
|
|
<i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
|
|||
|
|
<input class="input" placeholder="请扫描或输入载具号" v-model="vehicleCode" @blur="resolveVehicle" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 物料条码 -->
|
|||
|
|
<view class="field">
|
|||
|
|
<text class="label">物料条码</text>
|
|||
|
|
<view class="input-wrap">
|
|||
|
|
<i class="left-icon icon icon-qr_code_2" style="font-size:36rpx"></i>
|
|||
|
|
<input class="input" placeholder="请扫描物料二维码" v-model="goodsCode" @blur="resolveCode" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 操作按钮组 -->
|
|||
|
|
<view class="button-row">
|
|||
|
|
<button class="btn" @click="addGoods"><i class="icon icon-add"
|
|||
|
|
style="margin-right:8rpx"></i>添加物料</button>
|
|||
|
|
<button class="btn" @click="finish"><i class="icon icon-task_alt"
|
|||
|
|
style="margin-right:8rpx"></i>码盘完成</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 列表统计 -->
|
|||
|
|
<view class="list-header"><text>已添加物料 ({{ packageData.length }})</text></view>
|
|||
|
|
|
|||
|
|
<!-- 物料卡片列表：尽量还原 RN 的布局与字段 -->
|
|||
|
|
<view class="list">
|
|||
|
|
<view v-for="item in packageData" :key="item.id" class="card">
|
|||
|
|
<view class="card-header">
|
|||
|
|
<view class="card-header-left">
|
|||
|
|
<text class="card-header-text">批次：{{ item.batch }}</text>
|
|||
|
|
<text class="card-header-text">物料：{{ item.segment1 }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="card-actions">
|
|||
|
|
<button class="card-action-button" @click="editItem(item)"><i
|
|||
|
|
class="icon icon-edit"></i></button>
|
|||
|
|
<button class="card-action-button" @click="deleteItem(item.id)"><i
|
|||
|
|
class="icon icon-delete"></i></button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="card-content">
|
|||
|
|
<view class="card-row">
|
|||
|
|
<view class="card-field">
|
|||
|
|
<text class="card-label">物料编码</text>
|
|||
|
|
<text class="card-value">{{ item.segment1 }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="card-field">
|
|||
|
|
<text class="card-label">物料ID</text>
|
|||
|
|
<text class="card-value">{{ item.itemId }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="card-row">
|
|||
|
|
<view class="card-field">
|
|||
|
|
<text class="card-label">数量</text>
|
|||
|
|
<view class="editable-value">
|
|||
|
|
<input class="num-input" type="number" v-model="item.quantity" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="card-field">
|
|||
|
|
<text class="card-label">重量(kg)</text>
|
|||
|
|
<view class="editable-value">
|
|||
|
|
<input class="num-input" type="number" v-model="item.weight" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="card-row">
|
|||
|
|
<view class="card-field">
|
|||
|
|
<text class="card-label">产品数据</text>
|
|||
|
|
<text class="card-value">{{ item.productData }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="card-field">
|
|||
|
|
<text class="card-label">区域/库位</text>
|
|||
|
|
<text class="card-value">{{ item.area || '-' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { DialogUtils } from '@/utils/dialog.js';
|
|||
|
|
let nextId = 1
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
vehicleCode: '',
|
|||
|
|
goodsCode: '',
|
|||
|
|
packageData: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
back() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
resolveVehicle() {
|
|||
|
|
const code = (this.vehicleCode || '').trim()
|
|||
|
|
if (!code) return
|
|||
|
|
if (code.length === 15) {
|
|||
|
|
DialogUtils.showSuccessMessage('扫描成功', `车辆码: ${code}`)
|
|||
|
|
} else {
|
|||
|
|
DialogUtils.showErrorMessage('校验失败', '无效的车辆码长度')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
resolveCode() {
|
|||
|
|
const code = (this.goodsCode || '').trim()
|
|||
|
|
if (!code) return
|
|||
|
|
const parts = code.split(',')
|
|||
|
|
if (![6, 7, 8].includes(parts.length)) {
|
|||
|
|
DialogUtils.showWarningMessage('提示', '物料条码格式不正确')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const p = parts.slice(0, 6)
|
|||
|
|
const item = {
|
|||
|
|
id: String(nextId++),
|
|||
|
|
segment1: p[0],
|
|||
|
|
itemId: p[1],
|
|||
|
|
batch: p[2],
|
|||
|
|
quantity: p[3],
|
|||
|
|
weight: p[4],
|
|||
|
|
productData: p[5],
|
|||
|
|
area: ''
|
|||
|
|
}
|
|||
|
|
if (this.packageData.some(x => x.batch === item.batch)) {
|
|||
|
|
DialogUtils.showWarningMessage('重复', '该物料已在列表中')
|
|||
|
|
} else {
|
|||
|
|
this.packageData.push(item)
|
|||
|
|
}
|
|||
|
|
this.goodsCode = ''
|
|||
|
|
},
|
|||
|
|
addGoods() {
|
|||
|
|
this.resolveCode()
|
|||
|
|
},
|
|||
|
|
deleteItem(id) {
|
|||
|
|
this.packageData = this.packageData.filter(x => x.id !== id)
|
|||
|
|
},
|
|||
|
|
editItem(item) {
|
|||
|
|
DialogUtils.toast('可编辑数量与重量')
|
|||
|
|
},
|
|||
|
|
finish() {
|
|||
|
|
DialogUtils.toast('码盘完成')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.header {
|
|||
|
|
position: relative;
|
|||
|
|
height: 120rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #F5F5F5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tip {
|
|||
|
|
flex-direction: row;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #f2fdff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tip-icon {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: #e6f7ff;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tip-text {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-wrap {
|
|||
|
|
height: 96rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
border: 1px solid #e6e6e6;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left-icon {
|
|||
|
|
color: #05DCEF;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
margin: 24rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 92rpx;
|
|||
|
|
border: none;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 46rpx;
|
|||
|
|
background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
box-shadow: 0 8rpx 22rpx rgba(5, 220, 239, .25);
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-header {
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, .06)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
flex-direction: row;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
border-bottom: 1px solid rgba(0, 0, 0, .08);
|
|||
|
|
background: linear-gradient(90deg, var(--grad-primary-start), var(--grad-primary-mid));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header-left {
|
|||
|
|
flex: 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header-text {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-right: 16rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-action-button {
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-content {
|
|||
|
|
padding: 16rpx;
|
|||
|
|
background: #fff
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-row {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
margin-bottom: 12rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-field {
|
|||
|
|
flex: 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-label {
|
|||
|
|
color: #888;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
display: block
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-value {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 28rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.editable-value {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num-input {
|
|||
|
|
width: 220rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
border: 1px solid #e6e6e6;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 0 12rpx;
|
|||
|
|
font-size: 28rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
border: none;
|
|||
|
|
color: #05DCEF;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
</style>
|