DeXun/klp-mono
9
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hand-factory): 添加物品类型选择组件

Browse Source 
实现成品和原材料的选择器组件，包含类型选择、搜索过滤和弹窗交互功能
This commit is contained in:
砂糖
2025-11-04 17:41:42 +08:00
parent 157bf7559c
commit f3d27a2baa
4 changed files with 489 additions and 1205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

454
apps/hand-factory/components/panels/code/typing.vue
View File

@@ -83,41 +83,13 @@
placeholder="请选择目标库区" ware-type="actual" />
</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 class="picker-input" @click="coilDetail.dataType !== 0 && showProductPicker()"
:class="{ 'picker-input-disabled': coilDetail.dataType === 0 }">
<text class="picker-text" :class="{ 'picker-placeholder': !selectedProductName }">
{{ selectedProductName || '请选择产品' }}
</text>
<text class="picker-arrow" v-if="coilDetail.dataType !== 0">▼</text>
</view>
</view>
<!-- 原材料选择（仅当选择了原料类型时显示） -->
<view class="form-item form-item-optional" v-if="form.itemType === 'raw_material'">
<text class="form-label-optional">选择原材料</text>
<view class="picker-input" @click="coilDetail.dataType !== 0 && showRawMaterialPicker()"
:class="{ 'picker-input-disabled': coilDetail.dataType === 0 }">
<text class="picker-text" :class="{ 'picker-placeholder': !selectedRawMaterialName }">
{{ selectedRawMaterialName || '请选择原材料' }}
</text>
<text class="picker-arrow" v-if="coilDetail.dataType !== 0">▼</text>
</view>
</view>
<!-- 物品类型、产品、原材料选择（使用封装组件） -->
<klp-material-picker
:item-type.sync="form.itemType"
:item-id.sync="form.itemId"
:disabled="coilDetail.dataType === 0"
:page-size="2000"
/>
<!-- 毛重 -->
<view class="form-item form-item-optional">
@@ -148,74 +120,6 @@
</view>
</view>
<!-- 产品选择弹窗 -->
<uni-popup ref="productPopup" type="bottom">
<view class="warehouse-popup">
<view class="popup-header">
<text class="popup-title">选择产品</text>
<text class="popup-close" @click="closeProductPicker">✕</text>
</view>
<view class="popup-search">
<input v-model="productSearchKeyword" @input="filterProductsInPicker" placeholder="搜索产品名称"
class="search-input" />
</view>
<scroll-view scroll-y class="popup-body">
<view class="warehouse-item" v-for="product in filteredProductsInPicker" :key="product.productId"
@click="selectProductFromPicker(product)">
<text class="warehouse-name">{{ product.productName }}</text>
<text class="warehouse-check" v-if="form.itemId === product.productId">✓</text>
</view>
<view class="empty-tip" v-if="!filteredProductsInPicker || filteredProductsInPicker.length === 0">
<text>未找到匹配的产品</text>
</view>
</scroll-view>
</view>
</uni-popup>
<!-- 原材料选择弹窗 -->
<uni-popup ref="rawMaterialPopup" type="bottom">
<view class="warehouse-popup">
<view class="popup-header">
<text class="popup-title">选择原材料</text>
<text class="popup-close" @click="closeRawMaterialPicker">✕</text>
</view>
<view class="popup-search">
<input v-model="rawMaterialSearchKeyword" @input="filterRawMaterialsInPicker" placeholder="搜索原材料名称"
class="search-input" />
</view>
<scroll-view scroll-y class="popup-body">
<view class="warehouse-item" v-for="material in filteredRawMaterialsInPicker" :key="material.rawMaterialId"
@click="selectRawMaterialFromPicker(material)">
<text class="warehouse-name">{{ material.rawMaterialName }}</text>
<text class="warehouse-check" v-if="form.itemId === material.rawMaterialId">✓</text>
</view>
<view class="empty-tip" v-if="!filteredRawMaterialsInPicker || filteredRawMaterialsInPicker.length === 0">
<text>未找到匹配的原材料</text>
</view>
</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="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">
@@ -256,23 +160,16 @@
getMaterialCoilTrace
} from '@/api/wms/coil.js'
import {
listWarehouse
} from '@/api/wms/warehouse.js'
import {
getRawMaterial,
listRawMaterial
getRawMaterial
} from '@/api/wms/rawMaterial.js'
import {
listProduct
} from '@/api/wms/product.js'
export default {
data() {
return {
form: {
coilId: undefined,
itemType: '',
itemId: undefined,
itemType: '', // 由ItemSelector组件双向绑定
itemId: undefined, // 由ItemSelector组件双向绑定
team: '',
currentCoilNo: '',
warehouseId: undefined,
@@ -291,14 +188,6 @@
currentWarehouseName: '',
warehouseSearchKeyword: '',
filteredWarehousesInPicker: [],
products: [], // 产品列表
productSearchKeyword: '',
filteredProductsInPicker: [],
selectedProductName: '', // 已选择的产品名称
rawMaterials: [], // 原材料列表
rawMaterialSearchKeyword: '',
filteredRawMaterialsInPicker: [],
selectedRawMaterialName: '', // 已选择的原材料名称
loading: false,
qrcodeStatus: 1 // 二维码状态：0=历史码，1=当前有效码
}
@@ -311,172 +200,14 @@
}
},
onLoad() {
this.loadProducts();
this.loadRawMaterials();
},
mounted() {
this.loadProducts();
this.loadRawMaterials();
},
methods: {
// 加载产品列表
async loadProducts() {
console.log('开始加载产品列表...');
try {
const res = await listProduct({
pageNum: 1,
pageSize: 1000
});
console.log("产品返回值", res);
if (res.code === 200) {
this.products = res.rows || res.data || [];
this.filteredProductsInPicker = this.products;
console.log('产品加载成功，数量:', this.products.length);
} else {
console.error('产品加载失败:', res.msg);
}
} catch (err) {
console.error('加载产品异常:', err);
}
},
// 加载原材料列表
async loadRawMaterials() {
console.log('开始加载原材料列表...');
try {
const res = await listRawMaterial({
pageNum: 1,
pageSize: 1000
});
console.log("原材料返回值", res);
if (res.code === 200) {
this.rawMaterials = res.rows || res.data || [];
this.filteredRawMaterialsInPicker = this.rawMaterials;
console.log('原材料加载成功，数量:', this.rawMaterials.length);
} else {
console.error('原材料加载失败:', res.msg);
}
} catch (err) {
console.error('加载原材料异常:', err);
}
},
// 显示产品选择器
showProductPicker() {
this.productSearchKeyword = '';
this.filteredProductsInPicker = [...this.products];
this.$refs.productPopup.open();
},
// 关闭产品选择器
closeProductPicker() {
this.$refs.productPopup.close();
},
// 过滤产品（在选择器中）
filterProductsInPicker() {
console.log('过滤产品，关键词:', this.productSearchKeyword);
const keyword = this.productSearchKeyword.trim().toLowerCase();
if (!keyword) {
this.filteredProductsInPicker = [...this.products];
} else {
this.filteredProductsInPicker = this.products.filter(product => {
const name = (product.productName || '').toLowerCase();
return name.includes(keyword);
});
}
},
// 从选择器中选择产品
selectProductFromPicker(product) {
this.form.itemId = product.productId;
this.form.itemType = 'product';
this.selectedProductName = product.productName;
uni.showToast({
title: `已选择产品：${product.productName}`,
icon: 'success'
});
this.closeProductPicker();
},
// 显示原材料选择器
showRawMaterialPicker() {
this.rawMaterialSearchKeyword = '';
this.filteredRawMaterialsInPicker = [...this.rawMaterials];
this.$refs.rawMaterialPopup.open();
},
// 关闭原材料选择器
closeRawMaterialPicker() {
this.$refs.rawMaterialPopup.close();
},
// 过滤原材料（在选择器中）
filterRawMaterialsInPicker() {
console.log('过滤原材料，关键词:', this.rawMaterialSearchKeyword);
const keyword = this.rawMaterialSearchKeyword.trim().toLowerCase();
if (!keyword) {
this.filteredRawMaterialsInPicker = [...this.rawMaterials];
} else {
this.filteredRawMaterialsInPicker = this.rawMaterials.filter(material => {
const name = (material.rawMaterialName || '').toLowerCase();
return name.includes(keyword);
});
}
},
// 从选择器中选择原材料
selectRawMaterialFromPicker(material) {
this.form.itemId = material.rawMaterialId;
this.form.itemType = 'raw_material';
this.selectedRawMaterialName = material.rawMaterialName;
uni.showToast({
title: `已选择原材料：${material.rawMaterialName}`,
icon: 'success'
});
this.closeRawMaterialPicker();
},
// 处理库区选择变化（可选，如需获取完整库区信息）
// 处理库区选择变化
handleWarehouseChange(warehouse) {
console.log('选中的库区信息:', warehouse)
// 可在这里更新库区名称等信息
this.form.warehouseName = warehouse.warehouseName
this.currentWarehouseName = warehouse.warehouseName
},
// 显示物品类型选择器
showItemTypePicker() {
this.$refs.itemTypePopup.open();
},
// 关闭物品类型选择器
closeItemTypePicker() {
this.$refs.itemTypePopup.close();
},
// 选择物品类型
selectItemType(type) {
// 设置物品类型
this.form.itemType = type;
// 清空之前选择的物品
this.form.itemId = undefined;
this.selectedProductName = '';
this.selectedRawMaterialName = '';
this.closeItemTypePicker();
// 根据类型自动弹出对应的选择器
if (type === 'product') {
this.showProductPicker();
} else if (type === 'raw_material') {
this.showRawMaterialPicker();
}
},
// 扫码
handleScan() {
uni.scanCode({
@@ -621,14 +352,12 @@
if (res.confirm) {
this.handleReset()
}
}
});
},
// 重新扫码
handleReset() {
this.form = {
coilId: undefined,
itemType: '',
@@ -646,7 +375,6 @@
this.bomItemList = [];
this.warehouseKeyword = '';
this.currentWarehouseName = '';
this.selectedProductName = '';
this.filteredWarehouses = this.warehouses;
this.qrcodeStatus = 1; // 重置二维码状态
},
@@ -908,32 +636,6 @@
}
}
/* 详情网格 */
.detail-grid {
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.detail-label {
font-size: 28rpx;
color: #666;
}
.detail-value {
font-size: 28rpx;
color: #333;
font-weight: 500;
}
}
}
/* 表单项 */
.form-item {
margin-bottom: 30rpx;
@@ -989,140 +691,6 @@
}
}
/* 选择器输入框 */
.picker-input {
width: 100%;
height: 88rpx;
padding: 0 24rpx;
background: #f8f9fa;
border: 2rpx solid #e8e8e8;
border-radius: 12rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s;
&:active {
background: #fff;
border-color: #007aff;
}
&.picker-input-disabled {
background: #f5f5f5;
color: #999;
cursor: not-allowed;
}
.picker-text {
flex: 1;
font-size: 28rpx;
color: #333;
&.picker-placeholder {
color: #999;
}
}
.picker-arrow {
font-size: 24rpx;
color: #999;
margin-left: 10rpx;
}
}
/* 库区选择弹窗 */
.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: #007aff;
}
}
}
.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: #f0f7ff;
}
.warehouse-name {
flex: 1;
font-size: 28rpx;
color: #333;
}
.warehouse-check {
font-size: 32rpx;
color: #007aff;
font-weight: bold;
}
}
.empty-tip {
text-align: center;
padding: 60rpx 0;
color: #999;
font-size: 28rpx;
}
}
}
/* 操作者信息 */
.operator-info {
display: flex;