更新录入合卷分卷添加选择分类

This commit is contained in:
2025-11-01 13:41:00 +08:00
parent 5e47f4065e
commit 8a0327b63e
3 changed files with 390 additions and 69 deletions

View File

@@ -15,6 +15,10 @@
<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">
@@ -90,46 +94,60 @@
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 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 class="split-field" v-if="item.itemType === 'product'">
<text class="field-label-optional">选择产品</text>
<view
class="picker-input"
@click="showProductPickerForItem(index)"
>
<text class="picker-text" :class="{ 'picker-placeholder': !item.productName }">
{{ item.productName || '请选择产品' }}
</text>
<text class="picker-arrow"></text>
</view>
</view>
<!-- 物品类型选择 -->
<view class="split-field">
<text class="field-label-optional">物品类型</text>
<view
class="picker-input"
@click="showItemTypePickerForItem(index)"
>
<text class="picker-text" :class="{ 'picker-placeholder': !item.itemType }">
{{ item.itemType === 'product' ? '成品' : item.itemType === 'raw_material' ? '原料' : '请选择物品类型' }}
</text>
<text class="picker-arrow"></text>
</view>
<!-- 原材料选择仅当该分卷选择了原材料库区时显示 -->
<view class="split-field" v-if="item.itemType === 'raw_material'">
<text class="field-label-optional">选择原材料</text>
<view
class="picker-input"
@click="showRawMaterialPickerForItem(index)"
>
<text class="picker-text" :class="{ 'picker-placeholder': !item.rawMaterialName }">
{{ item.rawMaterialName || '请选择原材料' }}
</text>
<text class="picker-arrow"></text>
</view>
</view>
<!-- 产品选择仅当选择了成品类型时显示 -->
<view class="split-field" v-if="item.itemType === 'product'">
<text class="field-label-optional">选择产品</text>
<view
class="picker-input"
@click="showProductPickerForItem(index)"
>
<text class="picker-text" :class="{ 'picker-placeholder': !item.productName }">
{{ item.productName || '请选择产品' }}
</text>
<text class="picker-arrow"></text>
</view>
</view>
<!-- 原材料选择仅当选择了原料类型时显示 -->
<view class="split-field" v-if="item.itemType === 'raw_material'">
<text class="field-label-optional">选择原材料</text>
<view
class="picker-input"
@click="showRawMaterialPickerForItem(index)"
>
<text class="picker-text" :class="{ 'picker-placeholder': !item.rawMaterialName }">
{{ item.rawMaterialName || '请选择原材料' }}
</text>
<text class="picker-arrow"></text>
</view>
</view>
<view class="split-field">
<text class="field-label-optional">毛重 ()</text>
@@ -263,6 +281,54 @@
</scroll-view>
</view>
</uni-popup>
<!-- 物品类型选择弹窗 -->
<uni-popup ref="itemTypePopup" type="bottom">
<view class="warehouse-popup">
<view class="popup-header">
<text class="popup-title">选择物品类型</text>
<text class="popup-close" @click="closeItemTypePickerForItem"></text>
</view>
<scroll-view class="popup-body" scroll-y>
<view class="warehouse-item" @click="selectItemType('product')">
<text class="warehouse-name">成品</text>
<text class="warehouse-check" v-if="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].itemType === 'product'"></text>
</view>
<view class="warehouse-item" @click="selectItemType('raw_material')">
<text class="warehouse-name">原料</text>
<text class="warehouse-check" v-if="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].itemType === 'raw_material'"></text>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- 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>
@@ -424,26 +490,60 @@ export default {
if (this.currentPickerItemIndex === -1) return;
const item = this.splitCoils[this.currentPickerItemIndex];
const currentIndex = this.currentPickerItemIndex;
// 使用 $set 确保响应式更新
this.$set(item, 'warehouseId', warehouse.warehouseId);
this.$set(item, 'warehouseName', warehouse.warehouseName);
this.closeWarehousePickerForItem();
},
// 显示物品类型选择器
showItemTypePickerForItem(index) {
this.currentPickerItemIndex = index;
this.$refs.itemTypePopup.open();
},
// 关闭物品类型选择器
closeItemTypePickerForItem() {
this.$refs.itemTypePopup.close();
this.currentPickerItemIndex = -1;
},
// 选择物品类型
selectItemType(type) {
if (this.currentPickerItemIndex === -1) return;
// 根据库区ID判断类型999为成品库其他为原材料库
if (warehouse.warehouseId === 999) {
// 成品库,显示产品选择器
this.$set(item, 'itemType', 'product');
const item = this.splitCoils[this.currentPickerItemIndex];
const currentIndex = this.currentPickerItemIndex;
// 设置物品类型
this.$set(item, 'itemType', type);
// 清空之前选择的物品
this.$set(item, 'itemId', undefined);
this.$set(item, 'productName', '');
this.$set(item, 'rawMaterialName', '');
this.closeItemTypePickerForItem();
// 根据类型自动弹出对应的选择器
if (type === 'product') {
this.showProductPickerForItem(currentIndex);
} else {
// 其他库区,显示原材料选择器
this.$set(item, 'itemType', 'raw_material');
} else if (type === 'raw_material') {
this.showRawMaterialPickerForItem(currentIndex);
}
},
// 显示BOM弹窗
showBomDialog() {
this.$refs.bomPopup.open();
},
// 关闭BOM弹窗
closeBomDialog() {
this.$refs.bomPopup.close();
},
// 显示库区选择器(为特定分卷)
showWarehousePickerForItem(index) {
this.currentPickerItemIndex = index;
@@ -1270,4 +1370,120 @@ export default {
}
}
}
/* 参数按钮 */
.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>

View File

@@ -83,7 +83,21 @@
</view>
</view>
<!-- 产品选择仅当选择了成品库区时显示 -->
<!-- 物品类型选择 -->
<view class="form-item form-item-optional">
<text class="form-label-optional">物品类型</text>
<view
class="picker-input"
@click="showItemTypePicker()"
>
<text class="picker-text" :class="{ 'picker-placeholder': !itemType }">
{{ itemType === 'product' ? '成品' : itemType === 'raw_material' ? '原料' : '请选择物品类型' }}
</text>
<text class="picker-arrow"></text>
</view>
</view>
<!-- 产品选择仅当选择了成品类型时显示 -->
<view class="form-item form-item-optional" v-if="itemType === 'product'">
<text class="form-label-optional">选择产品</text>
<view
@@ -97,7 +111,7 @@
</view>
</view>
<!-- 原材料选择仅当选择了原材料库区时显示 -->
<!-- 原材料选择仅当选择了原料类型时显示 -->
<view class="form-item form-item-optional" v-if="itemType === 'raw_material'">
<text class="form-label-optional">选择原材料</text>
<view
@@ -248,6 +262,26 @@
</scroll-view>
</view>
</uni-popup>
<!-- 物品类型选择弹窗 -->
<uni-popup ref="itemTypePopup" type="bottom">
<view class="warehouse-popup">
<view class="popup-header">
<text class="popup-title">选择物品类型</text>
<text class="popup-close" @click="closeItemTypePicker"></text>
</view>
<scroll-view class="popup-body" scroll-y>
<view class="warehouse-item" @click="selectItemType('product')">
<text class="warehouse-name">成品</text>
<text class="warehouse-check" v-if="itemType === 'product'"></text>
</view>
<view class="warehouse-item" @click="selectItemType('raw_material')">
<text class="warehouse-name">原料</text>
<text class="warehouse-check" v-if="itemType === 'raw_material'"></text>
</view>
</scroll-view>
</view>
</uni-popup>
</view>
</template>
@@ -497,15 +531,33 @@ export default {
this.warehouseName = warehouse.warehouseName;
this.warehouseKeyword = warehouse.warehouseName;
this.closeWarehousePicker();
},
// 显示物品类型选择器
showItemTypePicker() {
this.$refs.itemTypePopup.open();
},
// 关闭物品类型选择器
closeItemTypePicker() {
this.$refs.itemTypePopup.close();
},
// 选择物品类型
selectItemType(type) {
// 设置物品类型
this.itemType = type;
// 清空之前选择的物品
this.itemId = undefined;
this.selectedProductName = '';
this.selectedRawMaterialName = '';
// 根据库区ID判断类型999为成品库其他为原材料库
if (warehouse.warehouseId === 999) {
// 成品库,显示产品选择器
this.itemType = 'product';
this.closeItemTypePicker();
// 根据类型自动弹出对应的选择器
if (type === 'product') {
this.showProductPicker();
} else {
// 其他库区,显示原材料选择器
this.itemType = 'raw_material';
} else if (type === 'raw_material') {
this.showRawMaterialPicker();
}
},

View File

@@ -33,14 +33,10 @@
<text class="item-label">当前库区</text>
<text class="item-value">{{ currentWarehouseName || '未分配' }}</text>
</view>
<view class="info-item" v-if="materialDetail">
<view class="info-item full-width" v-if="materialDetail">
<text class="item-label">原材料</text>
<text class="item-value">{{ materialDetail.rawMaterialName || '-' }}</text>
</view>
<view class="info-item" v-if="materialDetail">
<text class="item-label">规格</text>
<text class="item-value">{{ materialDetail.specification || '-' }}</text>
</view>
</view>
</view>
@@ -84,7 +80,7 @@
/>
</view>
<!-- 库区选择 - 滚筒选择器 -->
<!-- 库区选择 -->
<view class="form-item form-item-optional">
<text class="form-label-optional">目标库区</text>
<view
@@ -99,7 +95,22 @@
</view>
</view>
<!-- 产品选择仅当选择了成品库区时显示 -->
<!-- 物品类型选择 -->
<view class="form-item form-item-optional">
<text class="form-label-optional">物品类型</text>
<view
class="picker-input"
@click="coilDetail.dataType !== 0 && showItemTypePicker()"
:class="{ 'picker-input-disabled': coilDetail.dataType === 0 }"
>
<text class="picker-text" :class="{ 'picker-placeholder': !form.itemType }">
{{ form.itemType === 'product' ? '成品' : form.itemType === 'raw_material' ? '原料' : '请选择物品类型' }}
</text>
<text class="picker-arrow" v-if="coilDetail.dataType !== 0"></text>
</view>
</view>
<!-- 产品选择仅当选择了成品类型时显示 -->
<view class="form-item form-item-optional" v-if="form.itemType === 'product'">
<text class="form-label-optional">选择产品</text>
<view
@@ -114,7 +125,7 @@
</view>
</view>
<!-- 原材料选择仅当选择了原材料库区时显示 -->
<!-- 原材料选择仅当选择了原料类型时显示 -->
<view class="form-item form-item-optional" v-if="form.itemType === 'raw_material'">
<text class="form-label-optional">选择原材料</text>
<view
@@ -271,6 +282,26 @@
</view>
</uni-popup>
<!-- 物品类型选择弹窗 -->
<uni-popup ref="itemTypePopup" type="bottom">
<view class="warehouse-popup">
<view class="popup-header">
<text class="popup-title">选择物品类型</text>
<text class="popup-close" @click="closeItemTypePicker"></text>
</view>
<scroll-view class="popup-body" scroll-y>
<view class="warehouse-item" @click="selectItemType('product')">
<text class="warehouse-name">成品</text>
<text class="warehouse-check" v-if="form.itemType === 'product'"></text>
</view>
<view class="warehouse-item" @click="selectItemType('raw_material')">
<text class="warehouse-name">原料</text>
<text class="warehouse-check" v-if="form.itemType === 'raw_material'"></text>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- BOM弹窗 -->
<uni-popup ref="bomPopup" type="bottom">
<view class="bom-popup">
@@ -554,15 +585,33 @@ import { listProduct } from '@/api/wms/product.js'
this.form.warehouseName = warehouse.warehouseName;
this.currentWarehouseName = warehouse.warehouseName;
this.closeWarehousePicker();
},
// 显示物品类型选择器
showItemTypePicker() {
this.$refs.itemTypePopup.open();
},
// 关闭物品类型选择器
closeItemTypePicker() {
this.$refs.itemTypePopup.close();
},
// 选择物品类型
selectItemType(type) {
// 设置物品类型
this.form.itemType = type;
// 清空之前选择的物品
this.form.itemId = undefined;
this.selectedProductName = '';
this.selectedRawMaterialName = '';
// 根据库区ID判断类型999为成品库其他为原材料库
if (warehouse.warehouseId === 999) {
// 成品库,显示产品选择器
this.form.itemType = 'product';
this.closeItemTypePicker();
// 根据类型自动弹出对应的选择器
if (type === 'product') {
this.showProductPicker();
} else {
// 其他库区,显示原材料选择器
this.form.itemType = 'raw_material';
} else if (type === 'raw_material') {
this.showRawMaterialPicker();
}
},
@@ -959,6 +1008,10 @@ import { listProduct } from '@/api/wms/product.js'
padding: 20rpx;
border-radius: 12rpx;
&.full-width {
flex: 0 0 100%;
}
.item-label {
display: block;
font-size: 24rpx;