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

实现成品和原材料的选择器组件，包含类型选择、搜索过滤和弹窗交互功能

apps/hand-factory/components/panels/code/apart.vue

@@ -80,57 +80,18 @@
 						<view class="split-field">
 							<text class="field-label-optional">目标库位</text>
 							<klp-warehouse-picker v-model="item.warehouseId" placeholder="请选择目标库区" />
-							<!-- <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">实际库区</text>
 							<klp-warehouse-picker v-model="item.actualWarehouseId" placeholder="请选择实际库区" ware-type="actual" />
-							<!-- <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">物品类型</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>
-
-						<!-- 产品选择（仅当选择了成品类型时显示） -->
-						<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>
+						
+						<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>
@@ -159,78 +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="closeProductPickerForItem">✕</text>
-				</view>
-				<view class="popup-search">
-					<input v-model="productSearchKeyword" @input="filterProductsInPicker" placeholder="搜索产品名称"
-						class="search-input" />
-				</view>
-				<scroll-view class="popup-body" scroll-y>
-					<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="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].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="closeRawMaterialPickerForItem">✕</text>
-				</view>
-				<view class="popup-search">
-					<input v-model="rawMaterialSearchKeyword" @input="filterRawMaterialsInPicker" placeholder="搜索原材料名称"
-						class="search-input" />
-				</view>
-				<scroll-view class="popup-body" scroll-y>
-					<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="currentPickerItemIndex !== -1 && splitCoils[currentPickerItemIndex].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="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">
@@ -270,15 +159,6 @@
 		getMaterialCoil,
 		getMaterialCoilTrace
 	} from '@/api/wms/coil.js'
-	import {
-		listWarehouse
-	} from '@/api/wms/warehouse.js'
-	import {
-		listProduct
-	} from '@/api/wms/product.js'
-	import {
-		listRawMaterial
-	} from '@/api/wms/rawMaterial.js'
 
 	export default {
 		data() {
@@ -343,95 +223,7 @@
 			}
 		},
 
-		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);
-				}
-			},
-
-			// 显示物品类型选择器
-			showItemTypePickerForItem(index) {
-				this.currentPickerItemIndex = index;
-				this.$refs.itemTypePopup.open();
-			},
-
-			// 关闭物品类型选择器
-			closeItemTypePickerForItem() {
-				this.$refs.itemTypePopup.close();
-				this.currentPickerItemIndex = -1;
-			},
-
-			// 选择物品类型
-			selectItemType(type) {
-				if (this.currentPickerItemIndex === -1) return;
-
-				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 if (type === 'raw_material') {
-					this.showRawMaterialPickerForItem(currentIndex);
-				}
-			},
-
 			// 显示BOM弹窗
 			showBomDialog() {
 				this.$refs.bomPopup.open();
@@ -442,151 +234,6 @@
 				this.$refs.bomPopup.close();
 			},
 
-			// 显示产品选择器（为特定分卷）
-			showProductPickerForItem(index) {
-				this.currentPickerItemIndex = index;
-				this.productSearchKeyword = '';
-				this.filteredProductsInPicker = [...this.products];
-				this.$refs.productPopup.open();
-			},
-
-			// 关闭产品选择器
-			closeProductPickerForItem() {
-				this.$refs.productPopup.close();
-				this.currentPickerItemIndex = -1;
-			},
-
-			// 过滤产品（在选择器中）
-			filterProductsInPicker() {
-				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) {
-				if (this.currentPickerItemIndex === -1) return;
-
-				const item = this.splitCoils[this.currentPickerItemIndex];
-				item.itemId = product.productId;
-				item.itemType = 'product';
-				item.productName = product.productName; // 保存产品名称用于显示
-				uni.showToast({
-					title: `分卷 ${this.currentPickerItemIndex + 1} 已选择产品：${product.productName}`,
-					icon: 'success'
-				});
-				this.closeProductPickerForItem();
-			},
-
-			// 显示原材料选择器（为特定分卷）
-			showRawMaterialPickerForItem(index) {
-				this.currentPickerItemIndex = index;
-				this.rawMaterialSearchKeyword = '';
-				this.filteredRawMaterialsInPicker = [...this.rawMaterials];
-				this.$refs.rawMaterialPopup.open();
-			},
-
-			// 关闭原材料选择器
-			closeRawMaterialPickerForItem() {
-				this.$refs.rawMaterialPopup.close();
-				this.currentPickerItemIndex = -1;
-			},
-
-			// 过滤原材料（在选择器中）
-			filterRawMaterialsInPicker() {
-				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) {
-				if (this.currentPickerItemIndex === -1) return;
-
-				const item = this.splitCoils[this.currentPickerItemIndex];
-				item.itemId = material.rawMaterialId;
-				item.itemType = 'raw_material';
-				item.rawMaterialName = material.rawMaterialName; // 保存原材料名称用于显示
-				uni.showToast({
-					title: `分卷 ${this.currentPickerItemIndex + 1} 已选择原材料：${material.rawMaterialName}`,
-					icon: 'success'
-				});
-				this.closeRawMaterialPickerForItem();
-			},
-
-			// 过滤库区（为特定分卷）
-			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);
-					});
-				}
-			},
-
 			// 扫码
 			handleScan() {
 				uni.scanCode({