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

964 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>
<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>
<view
class="picker-input"
@click="showWarehousePickerForItem(index)"
>
<text class="picker-text" :class="{ 'picker-placeholder': !item.warehouseName }">
{{ item.warehouseName || '请选择目标库区' }}
</text>
<text class="picker-arrow"></text>
</view>
</view>
<view class="split-field">
<text class="field-label-optional">毛重 (kg)</text>
<input
v-model="item.grossWeight"
type="digit"
placeholder="请输入毛重(选填)"
class="field-input"
/>
</view>
<view class="split-field">
<text class="field-label-optional">净重 (kg)</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>
<!-- 库区选择弹窗 -->
<uni-popup ref="warehousePopup" type="bottom">
<view class="warehouse-popup">
<view class="popup-header">
<text class="popup-title">选择库区</text>
<text class="popup-close" @click="closeWarehousePickerForItem"></text>
</view>
<view class="popup-search">
<input
v-model="warehouseSearchKeyword"
@input="filterWarehousesInPicker"
placeholder="搜索库区名称"
class="search-input"
/>
</view>
<scroll-view class="popup-body" scroll-y>
<view
class="warehouse-item"
v-for="warehouse in filteredWarehousesInPicker"
:key="warehouse.warehouseId"
@click="selectWarehouseFromPicker(warehouse)"
>
<text class="warehouse-name">{{ warehouse.warehouseName }}</text>
<text class="warehouse-check" v-if="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].warehouseId === warehouse.warehouseId"></text>
</view>
<view class="empty-tip" v-if="!filteredWarehousesInPicker || filteredWarehousesInPicker.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'
import { listWarehouse } from '@/api/wms/warehouse.js'
export default {
data() {
return {
form: {
coilId: undefined,
hasMergeSplit: 1 // 1表示分卷
},
coilDetail: {},
splitCoils: [
{
currentCoilNo: '',
team: '',
hasMergeSplit: 1,
warehouseId: undefined,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: [],
showWarehouseList: false,
grossWeight: '',
netWeight: ''
},
{
currentCoilNo: '',
team: '',
hasMergeSplit: 1,
warehouseId: undefined,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: [],
showWarehouseList: false,
grossWeight: '',
netWeight: ''
}
],
warehouses: [],
warehouseSearchKeyword: '',
filteredWarehousesInPicker: [],
currentPickerItemIndex: -1,
loading: false
}
},
computed: {
operatorName() {
return this.$store.state.user.nickName || this.$store.state.user.name || '未知'
}
},
onLoad() {
this.loadWarehouses();
},
mounted() {
this.loadWarehouses();
},
methods: {
// 加载库区列表
async loadWarehouses() {
console.log('开始加载库区...');
try {
const res = await listWarehouse({ pageNum: 1, pageSize: 1000 });
console.log("库区返回值", res);
if (res.code === 200) {
this.warehouses = res.data || [];
console.log('库区加载成功,数量:', this.warehouses.length);
// 为每个分卷初始化库区列表
this.splitCoils.forEach(item => {
item.filteredWarehouses = [...this.warehouses];
});
console.log('分卷库区列表初始化完成');
} else {
console.error('库区加载失败:', res.msg);
}
} catch (err) {
console.error('加载库区异常:', err);
}
},
// 过滤库区(为特定分卷)
filterWarehousesForItem(index) {
console.log(`分卷页面过滤库区,分卷${index + 1},关键词:`, this.splitCoils[index].warehouseKeyword);
console.log('分卷页面当前库区列表:', this.warehouses);
const item = this.splitCoils[index];
const keyword = item.warehouseKeyword.trim().toLowerCase();
if (!keyword) {
item.filteredWarehouses = [...this.warehouses];
} else {
item.filteredWarehouses = this.warehouses.filter(warehouse => {
const name = (warehouse.warehouseName || '').toLowerCase();
return name.includes(keyword);
});
}
console.log(`分卷页面过滤后库区数量:`, item.filteredWarehouses.length);
item.showWarehouseList = true;
},
// 选择库区(为特定分卷)
selectWarehouseForItem(index, warehouse) {
const item = this.splitCoils[index];
item.warehouseId = warehouse.warehouseId;
item.warehouseName = warehouse.warehouseName;
item.warehouseKeyword = warehouse.warehouseName;
item.showWarehouseList = false;
},
// 关闭所有库区搜索列表
closeWarehouseList() {
this.splitCoils.forEach(item => {
item.showWarehouseList = false;
});
},
// 显示库区选择器(为特定分卷)
showWarehousePickerForItem(index) {
this.currentPickerItemIndex = index;
this.warehouseSearchKeyword = '';
this.filteredWarehousesInPicker = [...this.warehouses];
this.$refs.warehousePopup.open();
},
// 关闭库区选择器
closeWarehousePickerForItem() {
this.currentPickerItemIndex = -1;
this.$refs.warehousePopup.close();
},
// 在选择器中过滤库区
filterWarehousesInPicker() {
const keyword = this.warehouseSearchKeyword.trim().toLowerCase();
if (!keyword) {
this.filteredWarehousesInPicker = [...this.warehouses];
} else {
this.filteredWarehousesInPicker = this.warehouses.filter(warehouse => {
const name = (warehouse.warehouseName || '').toLowerCase();
return name.includes(keyword);
});
}
},
// 从选择器中选择库区
selectWarehouseFromPicker(warehouse) {
if (this.currentPickerItemIndex !== -1) {
const item = this.splitCoils[this.currentPickerItemIndex];
item.warehouseId = warehouse.warehouseId;
item.warehouseName = warehouse.warehouseName;
item.warehouseKeyword = warehouse.warehouseName;
}
this.closeWarehousePickerForItem();
},
// 扫码
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获取enter_coil_no和current_coil_no
const qrcodeRecord = qrcodeRes.data;
const content = JSON.parse(qrcodeRecord.content);
const enterCoilNo = content.enter_coil_no;
const currentCoilNo = content.current_coil_no;
if (!enterCoilNo) {
throw new Error('二维码中未包含有效的入场钢卷号');
}
// 3. 通过追溯接口获取准确的钢卷信息
const traceRes = await getMaterialCoilTrace(enterCoilNo, currentCoilNo);
if (traceRes.code !== 200 || !traceRes.data || !traceRes.data.records || traceRes.data.records.length === 0) {
throw new Error('未找到钢卷信息');
}
// 4. 找到当前数据
let coilData = null;
for (const record of traceRes.data.records) {
if (record.dataType === 1 && record.currentCoilNo === currentCoilNo) {
coilData = record;
break;
}
}
if (!coilData) {
for (const record of traceRes.data.records) {
if (record.dataType === 1) {
coilData = record;
break;
}
}
}
if (!coilData) {
coilData = traceRes.data.records[0];
}
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,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: this.warehouses,
showWarehouseList: false,
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,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: this.warehouses,
showWarehouseList: false,
grossWeight: '',
netWeight: ''
},
{
currentCoilNo: '',
team: '',
hasMergeSplit: 1,
warehouseId: undefined,
warehouseName: '',
warehouseKeyword: '',
filteredWarehouses: this.warehouses,
showWarehouseList: false,
grossWeight: '',
netWeight: ''
}
];
}
}
});
},
// 提交分卷
handleConfirm() {
// 验证所有分卷都有钢卷号和班组
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: this.coilDetail.itemType,
itemId: this.coilDetail.itemId,
warehouseId: item.warehouseId || this.coilDetail.warehouseId, // 使用分卷的库区或原库区
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;
}
}
}
</style>