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

1005 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="apart-container">
<!-- 扫码按钮 -->
<view class="scan-section" v-if="!form.coilId">
<view class="scan-btn-wrapper" @click="handleScan">
<view class="scan-icon">
<text class="icon-camera">📷</text>
</view>
<text class="scan-tip">扫描要分卷的钢卷</text>
</view>
</view>
<!-- 原钢卷信息 -->
<view class="info-card" v-if="form.coilId">
<view class="card-title">
<text class="title-dot"></text>
<text class="title-text">原钢卷信息</text>
<view class="more-btn" @click.stop="showBomDialog"
v-if="coilDetail.bomItemList && coilDetail.bomItemList.length > 0">
<text class="icon-more"></text>
<text class="more-text">参数</text>
</view>
</view>
<view class="info-grid">
<view class="info-item">
<text class="item-label">入场钢卷号</text>
<text class="item-value">{{ coilDetail.enterCoilNo || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">当前钢卷号</text>
<text class="item-value">{{ coilDetail.currentCoilNo || '-' }}</text>
</view>
<view class="info-item">
<text class="item-label">当前库区</text>
<text class="item-value">{{ (coilDetail.warehouse && coilDetail.warehouse.warehouseName) || '未分配' }}</text>
</view>
</view>
</view>
<!-- 分卷列表 -->
<view class="form-card" v-if="form.coilId" @click="closeWarehouseList">
<view class="card-title">
<text class="title-dot"></text>
<text class="title-text">分卷配置</text>
</view>
<!-- 分卷数量选择 -->
<view class="form-item">
<text class="form-label">分卷数量</text>
<view class="split-count-selector">
<view class="count-btn" :class="{ 'count-btn-disabled': splitCoils.length <= 2 }"
@click="changeSplitCount(-1)">
<text>-</text>
</view>
<text class="count-value">{{ splitCoils.length }}</text>
<view class="count-btn" :class="{ 'count-btn-disabled': splitCoils.length >= 10 }"
@click="changeSplitCount(1)">
<text>+</text>
</view>
</view>
</view>
<!-- 分卷信息列表 -->
<view class="split-list">
<view class="split-item" v-for="(item, index) in splitCoils" :key="index">
<view class="split-header">
<text class="split-title">分卷 {{ index + 1 }}</text>
</view>
<view class="split-body">
<view class="split-field">
<text class="field-label">新钢卷号</text>
<input v-model="item.currentCoilNo" placeholder="请输入新钢卷号" class="field-input" />
</view>
<view class="split-field">
<text class="field-label">班组</text>
<input v-model="item.team" placeholder="请输入班组名称" class="field-input" />
</view>
<view class="split-field">
<text class="field-label-optional">目标库位</text>
<klp-warehouse-picker v-model="item.warehouseId" placeholder="请选择目标库区" />
</view>
<view class="split-field">
<text class="field-label-optional">实际库区</text>
<klp-warehouse-picker v-model="item.actualWarehouseId" placeholder="请选择实际库区" ware-type="actual" />
</view>
<klp-material-picker
:item-type.sync="item.itemType"
:item-id.sync="item.itemId"
:page-size="2000"
/>
<view class="split-field">
<text class="field-label-optional">毛重 ()</text>
<input v-model="item.grossWeight" type="digit" placeholder="请输入毛重(选填)" class="field-input" />
</view>
<view class="split-field">
<text class="field-label-optional">净重 ()</text>
<input v-model="item.netWeight" type="digit" placeholder="请输入净重(选填)" class="field-input" />
</view>
</view>
</view>
</view>
<!-- 操作者信息 -->
<view class="operator-info">
<text class="operator-label">操作人</text>
<text class="operator-name">{{ operatorName }}</text>
</view>
<!-- 操作按钮 -->
<view class="action-buttons">
<button class="btn btn-secondary" @click="handleReset">重新扫码</button>
<button class="btn btn-primary" @click="handleConfirm" :disabled="loading">
{{ loading ? '提交中...' : '确认分卷' }}
</button>
</view>
</view>
<!-- BOM弹窗 -->
<uni-popup ref="bomPopup" type="bottom">
<view class="bom-popup">
<view class="popup-header">
<text class="popup-title">BOM 清单</text>
<text class="popup-close" @click="closeBomDialog"></text>
</view>
<scroll-view class="popup-body" scroll-y>
<view class="bom-item" v-for="(item, index) in coilDetail.bomItemList" :key="index">
<view class="bom-index">{{ index + 1 }}</view>
<view class="bom-content">
<view class="bom-row">
<text class="bom-label">{{ item.attrKey }}:</text>
<text class="bom-value">{{ item.attrValue }}</text>
</view>
<view class="bom-row" v-if="item.remark">
<text class="bom-label">备注:</text>
<text class="bom-value">{{ item.remark }}</text>
</view>
</view>
</view>
<view class="empty-tip" v-if="!coilDetail.bomItemList || coilDetail.bomItemList.length === 0">
<text>暂无参数数据</text>
</view>
</scroll-view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
getGenerateRecord
} from '@/api/wms/code.js'
import {
updateMaterialCoil,
getMaterialCoil,
getMaterialCoilTrace
} from '@/api/wms/coil.js'
export default {
data() {
return {
form: {
coilId: undefined,
hasMergeSplit: 1 // 1表示分卷
},
coilDetail: {},
splitCoils: [{
currentCoilNo: '',
team: '',
hasMergeSplit: 1,
warehouseId: undefined,
actualWarehouseId: undefined,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: [],
showWarehouseList: false,
itemType: '',
itemId: undefined,
productName: '',
rawMaterialName: '',
grossWeight: '',
netWeight: ''
},
{
currentCoilNo: '',
team: '',
hasMergeSplit: 1,
warehouseId: undefined,
actualWarehouseId: undefined,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: [],
showWarehouseList: false,
itemType: '',
itemId: undefined,
productName: '',
rawMaterialName: '',
grossWeight: '',
netWeight: ''
}
],
warehouses: [],
warehouseSearchKeyword: '',
filteredWarehousesInPicker: [],
products: [], // 产品列表
productSearchKeyword: '',
filteredProductsInPicker: [],
rawMaterials: [], // 原材料列表
rawMaterialSearchKeyword: '',
filteredRawMaterialsInPicker: [],
currentPickerItemIndex: -1,
loading: false
}
},
computed: {
operatorName() {
return this.$store.state.user.nickName || this.$store.state.user.name || '未知'
}
},
methods: {
// 显示BOM弹窗
showBomDialog() {
this.$refs.bomPopup.open();
},
// 关闭BOM弹窗
closeBomDialog() {
this.$refs.bomPopup.close();
},
// 扫码
handleScan() {
uni.scanCode({
success: async (res) => {
console.log('扫码结果:', res.result);
try {
const qrcodeId = res.result;
// 1. 获取二维码详情
const qrcodeRes = await getGenerateRecord(qrcodeId);
if (qrcodeRes.code !== 200) {
throw new Error('未找到二维码记录');
}
// 2. 解析content获取current_coil_id
const qrcodeRecord = qrcodeRes.data;
const content = JSON.parse(qrcodeRecord.content);
// 优先使用current_coil_id当前有效的钢卷ID如果没有则使用coil_id兼容旧数据
let coilId = content.current_coil_id && content.current_coil_id !== 'null' ? content.current_coil_id : null;
if (!coilId) {
coilId = content.coil_id && content.coil_id !== 'null' ? content.coil_id : null;
}
// 检查二维码状态
if (qrcodeRecord.status === 0) {
uni.showModal({
title: '提示',
content: '该二维码已失效,无法进行分卷操作',
showCancel: false
});
return;
}
if (!coilId) {
throw new Error('二维码中未包含有效的钢卷ID');
}
// 3. 直接通过钢卷ID获取钢卷详情
const coilRes = await getMaterialCoil(coilId);
if (coilRes.code !== 200 || !coilRes.data) {
throw new Error('未找到钢卷信息');
}
const coilData = coilRes.data;
this.coilDetail = coilData;
this.form.coilId = coilData.coilId;
console.log('钢卷详情:', coilData);
uni.showToast({
title: '扫码成功',
icon: 'success'
});
} catch (err) {
console.error('扫码处理失败:', err);
uni.showToast({
title: err.message || '扫码信息解析失败',
icon: 'none',
duration: 2000
});
}
},
fail: (err) => {
console.error('扫码失败:', err);
uni.showToast({
title: '扫码失败,请重试',
icon: 'none'
});
}
});
},
// 修改分卷数量
changeSplitCount(delta) {
const newCount = this.splitCoils.length + delta;
if (newCount < 2 || newCount > 10) {
return;
}
if (delta > 0) {
// 增加分卷
this.splitCoils.push({
currentCoilNo: '',
team: '',
hasMergeSplit: 1,
warehouseId: undefined,
actualWarehouseId: undefined,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: this.warehouses,
showWarehouseList: false,
itemType: '',
itemId: undefined,
productName: '',
rawMaterialName: '',
grossWeight: '',
netWeight: ''
});
} else {
// 减少分卷
this.splitCoils.pop();
}
},
// 重新扫码
handleReset() {
uni.showModal({
title: '确认重新扫码',
content: '是否要清空当前数据并重新扫码?',
success: (res) => {
if (res.confirm) {
this.form = {
coilId: undefined,
hasMergeSplit: 1
};
this.coilDetail = {};
this.splitCoils = [{
currentCoilNo: '',
team: '',
hasMergeSplit: 1,
warehouseId: undefined,
actualWarehouseId: undefined,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: this.warehouses,
showWarehouseList: false,
itemType: '',
itemId: undefined,
productName: '',
rawMaterialName: '',
grossWeight: '',
netWeight: ''
},
{
currentCoilNo: '',
team: '',
hasMergeSplit: 1,
warehouseId: undefined,
actualWarehouseId: undefined,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: this.warehouses,
showWarehouseList: false,
itemType: '',
itemId: undefined,
productName: '',
rawMaterialName: '',
grossWeight: '',
netWeight: ''
}
];
}
}
});
},
// 提交分卷
handleConfirm() {
// 历史数据不允许分卷
if (this.coilDetail.dataType === 0) {
uni.showModal({
title: '历史数据',
content: '此为历史记录,不允许进行分卷操作',
showCancel: false
});
return;
}
// 验证所有分卷都有钢卷号和班组
for (let i = 0; i < this.splitCoils.length; i++) {
if (!this.splitCoils[i].currentCoilNo) {
uni.showToast({
title: `请输入分卷 ${i + 1} 的钢卷号`,
icon: 'none'
});
return;
}
if (!this.splitCoils[i].team) {
uni.showToast({
title: `请输入分卷 ${i + 1} 的班组`,
icon: 'none'
});
return;
}
}
this.loading = true;
// 构建提交数据
const submitData = {
coilId: this.form.coilId,
enterCoilNo: this.coilDetail.enterCoilNo, // 添加入场钢卷号
supplierCoilNo: this.coilDetail.supplierCoilNo, // 保留厂家原料卷号
currentCoilNo: this.coilDetail.currentCoilNo, // 添加当前钢卷号
hasMergeSplit: 1, // 分卷标识
newCoils: this.splitCoils.map(item => ({
currentCoilNo: item.currentCoilNo,
team: item.team,
hasMergeSplit: 1,
itemType: item.itemType || this.coilDetail.itemType, // 优先使用分卷的itemType
itemId: item.itemId || this.coilDetail.itemId, // 优先使用分卷的itemId
warehouseId: item.warehouseId || this.coilDetail.warehouseId, // 使用分卷的库区或原库区
actualWarehouseId: item.actualWarehouseId || this.coilDetail.actualWarehouseId,
grossWeight: item.grossWeight ? Number(item.grossWeight) : null,
netWeight: item.netWeight ? Number(item.netWeight) : null
}))
};
updateMaterialCoil(submitData).then(res => {
if (res.code === 200) {
uni.showToast({
title: '分卷成功',
icon: 'success'
});
setTimeout(() => {
this.handleReset();
}, 1500);
} else {
uni.showToast({
title: res.msg || '分卷失败',
icon: 'none'
});
}
}).catch(err => {
console.error('提交失败:', err);
uni.showToast({
title: '分卷失败,请重试',
icon: 'none'
});
}).finally(() => {
this.loading = false;
});
}
}
}
</script>
<style scoped lang="scss">
.apart-container {
padding-bottom: 30rpx;
}
/* 扫码区域 */
.scan-section {
padding: 80rpx 40rpx;
background: #fff;
border-radius: 16rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
.scan-btn-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 30rpx;
.scan-icon {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(255, 149, 0, 0.3);
&:active {
transform: scale(0.95);
}
}
.icon-camera {
font-size: 70rpx;
}
.scan-tip {
font-size: 28rpx;
color: #666;
}
}
}
/* 卡片样式 */
.info-card,
.form-card {
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.card-title {
display: flex;
align-items: center;
margin-bottom: 25rpx;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #f0f0f0;
.title-dot {
width: 8rpx;
height: 28rpx;
background: #ff9500;
border-radius: 4rpx;
margin-right: 12rpx;
}
.title-text {
flex: 1;
font-size: 32rpx;
font-weight: 600;
color: #333;
}
}
/* 信息网格 */
.info-grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
.info-item {
flex: 1;
min-width: 45%;
background: #f8f9fa;
padding: 20rpx;
border-radius: 12rpx;
.item-label {
display: block;
font-size: 24rpx;
color: #999;
margin-bottom: 10rpx;
}
.item-value {
display: block;
font-size: 28rpx;
color: #333;
font-weight: 500;
}
}
}
/* 表单项 */
.form-item {
margin-bottom: 30rpx;
.form-label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 15rpx;
font-weight: 500;
&::before {
content: '*';
color: #ff4d4f;
margin-right: 6rpx;
}
}
}
/* 分卷数量选择器 */
.split-count-selector {
display: flex;
align-items: center;
justify-content: center;
gap: 40rpx;
padding: 20rpx 0;
.count-btn {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
color: #fff;
font-size: 40rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.2);
&:active {
transform: scale(0.95);
}
&.count-btn-disabled {
background: #e8e8e8;
color: #999;
box-shadow: none;
}
}
.count-value {
font-size: 48rpx;
font-weight: 600;
color: #333;
min-width: 80rpx;
text-align: center;
}
}
/* 分卷列表 */
.split-list {
margin-top: 20rpx;
.split-item {
background: #f8f9fa;
border-radius: 12rpx;
padding: 24rpx;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.split-header {
margin-bottom: 20rpx;
.split-title {
font-size: 28rpx;
font-weight: 600;
color: #ff9500;
}
}
.split-body {
.split-field {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.field-label {
display: block;
font-size: 26rpx;
color: #666;
margin-bottom: 12rpx;
}
.field-label-optional {
display: block;
font-size: 26rpx;
color: #666;
margin-bottom: 12rpx;
}
.field-input {
width: 100%;
height: 80rpx;
padding: 0 20rpx;
background: #fff;
border: 2rpx solid #e8e8e8;
border-radius: 10rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
&:focus {
border-color: #ff9500;
}
}
.picker-input {
width: 100%;
height: 80rpx;
padding: 0 20rpx;
background: #fff;
border: 2rpx solid #e8e8e8;
border-radius: 10rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s;
&:active {
background: #f0f7ff;
border-color: #ff9500;
}
.picker-text {
flex: 1;
font-size: 28rpx;
color: #333;
&.picker-placeholder {
color: #999;
}
}
.picker-arrow {
font-size: 24rpx;
color: #999;
margin-left: 10rpx;
}
}
}
}
}
}
/* 操作者信息 */
.operator-info {
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 0;
margin-top: 20rpx;
.operator-label {
font-size: 26rpx;
color: #999;
}
.operator-name {
font-size: 26rpx;
color: #ff9500;
font-weight: 500;
}
}
/* 操作按钮 */
.action-buttons {
display: flex;
gap: 20rpx;
margin-top: 30rpx;
.btn {
flex: 1;
height: 88rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 500;
border: none;
transition: all 0.2s;
&:active {
transform: scale(0.98);
}
&[disabled] {
opacity: 0.6;
}
}
.btn-secondary {
background: #f5f5f5;
color: #666;
}
.btn-primary {
background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
color: #fff;
box-shadow: 0 4rpx 16rpx rgba(255, 149, 0, 0.3);
}
}
/* 库区选择弹窗 */
.warehouse-popup {
background: #fff;
border-radius: 24rpx 24rpx 0 0;
max-height: 70vh;
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
.popup-title {
font-size: 32rpx;
color: #333;
font-weight: 600;
}
.popup-close {
font-size: 40rpx;
color: #999;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.popup-search {
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #f0f0f0;
.search-input {
width: 100%;
height: 80rpx;
padding: 0 20rpx;
background: #f8f9fa;
border: 2rpx solid #e8e8e8;
border-radius: 10rpx;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
&:focus {
background: #fff;
border-color: #ff9500;
}
}
}
.popup-body {
max-height: 400rpx;
.warehouse-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
&:active {
background: #fff3e0;
}
.warehouse-name {
flex: 1;
font-size: 28rpx;
color: #333;
}
.warehouse-check {
font-size: 32rpx;
color: #ff9500;
font-weight: bold;
}
}
.empty-tip {
text-align: center;
padding: 60rpx 0;
color: #999;
font-size: 28rpx;
}
}
}
/* 参数按钮 */
.more-btn {
display: flex;
align-items: center;
gap: 8rpx;
padding: 8rpx 16rpx;
background: #fff3e0;
border-radius: 20rpx;
border: 1rpx solid #ff9500;
.icon-more {
font-size: 24rpx;
color: #ff9500;
}
.more-text {
font-size: 24rpx;
color: #ff9500;
}
}
/* BOM弹窗 */
.bom-popup {
background: #fff;
border-radius: 24rpx 24rpx 0 0;
max-height: 70vh;
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f0f0f0;
.popup-title {
font-size: 32rpx;
color: #333;
font-weight: 600;
}
.popup-close {
font-size: 40rpx;
color: #999;
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
.popup-body {
padding: 30rpx;
max-height: 500rpx;
.bom-item {
display: flex;
gap: 20rpx;
padding: 24rpx;
background: #f8f9fa;
border-radius: 12rpx;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.bom-index {
width: 60rpx;
height: 60rpx;
background: #ff9500;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: bold;
flex-shrink: 0;
}
.bom-content {
flex: 1;
.bom-row {
display: flex;
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
.bom-label {
font-size: 26rpx;
color: #666;
min-width: 120rpx;
}
.bom-value {
font-size: 26rpx;
color: #333;
font-weight: 500;
}
}
}
}
.empty-tip {
text-align: center;
padding: 60rpx 0;
color: #999;
font-size: 28rpx;
}
}
}
</style>