From f3d27a2baa065d06d8f392b3a678d5ab3a1ea4ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 4 Nov 2025 17:41:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(hand-factory):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=89=A9=E5=93=81=E7=B1=BB=E5=9E=8B=E9=80=89=E6=8B=A9=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

实现成品和原材料的选择器组件，包含类型选择、搜索过滤和弹窗交互功能
---
 .../klp-material-picker.vue                   | 466 ++++++++++++++++++
 .../components/panels/code/apart.vue          | 365 +-------------
 .../components/panels/code/merge.vue          | 409 +--------------
 .../components/panels/code/typing.vue         | 454 +----------------
 4 files changed, 489 insertions(+), 1205 deletions(-)
 create mode 100644 apps/hand-factory/components/klp-material-picker/klp-material-picker.vue

diff --git a/apps/hand-factory/components/klp-material-picker/klp-material-picker.vue b/apps/hand-factory/components/klp-material-picker/klp-material-picker.vue
new file mode 100644
index 0000000..d709601
--- /dev/null
+++ b/apps/hand-factory/components/klp-material-picker/klp-material-picker.vue
@@ -0,0 +1,466 @@
+<template>
+	<view>
+		<!-- 物品类型选择 -->
+		<view class="form-item form-item-optional">
+			<text class="form-label-optional">物品类型</text>
+			<view class="picker-input" @click="!disabled && showItemTypePicker()" :class="{ 'picker-input-disabled': disabled }">
+				<text class="picker-text" :class="{ 'picker-placeholder': !itemType }">
+					{{ itemType === 'product' ? '成品' : itemType === 'raw_material' ? '原料' : '请选择物品类型' }}
+				</text>
+				<text class="picker-arrow" v-if="!disabled">▼</text>
+			</view>
+		</view>
+
+		<!-- 产品选择（仅当选择了成品类型时显示） -->
+		<view class="form-item form-item-optional" v-if="itemType === 'product'">
+			<text class="form-label-optional">选择产品</text>
+			<view class="picker-input" @click="!disabled && showProductPicker()" :class="{ 'picker-input-disabled': disabled }">
+				<text class="picker-text" :class="{ 'picker-placeholder': !selectedName }">
+					{{ loadingProducts ? '加载中...' : selectedName || '请选择产品' }}
+				</text>
+				<text class="picker-arrow" v-if="!disabled && !loadingProducts">▼</text>
+			</view>
+		</view>
+
+		<!-- 原材料选择（仅当选择了原料类型时显示） -->
+		<view class="form-item form-item-optional" v-if="itemType === 'raw_material'">
+			<text class="form-label-optional">选择原材料</text>
+			<view class="picker-input" @click="!disabled && showRawMaterialPicker()" :class="{ 'picker-input-disabled': disabled }">
+				<text class="picker-text" :class="{ 'picker-placeholder': !selectedName }">
+					{{ loadingRawMaterials ? '加载中...' : selectedName || '请选择原材料' }}
+				</text>
+				<text class="picker-arrow" v-if="!disabled && !loadingRawMaterials">▼</text>
+			</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="filterProducts" placeholder="搜索产品名称" class="search-input" />
+				</view>
+				<scroll-view scroll-y class="popup-body">
+					<view v-if="loadingProducts" class="loading-tip">
+						<text>加载中...</text>
+					</view>
+					<!-- 严格遍历产品过滤列表 -->
+					<view class="warehouse-item" v-for="product in filteredProducts" :key="'product_' + product.productId" @click="selectProduct(product)" v-else>
+						<text class="warehouse-name">{{ product.productName }}【{{ product.specification || '暂无规格' }}】</text>
+						<text class="warehouse-check" v-if="itemId === product.productId">✓</text>
+					</view>
+					<view class="empty-tip" v-if="!loadingProducts && (!filteredProducts || filteredProducts.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="filterRawMaterials" placeholder="搜索原材料名称" class="search-input" />
+				</view>
+				<scroll-view scroll-y class="popup-body">
+					<view v-if="loadingRawMaterials" class="loading-tip">
+						<text>加载中...</text>
+					</view>
+					<!-- 严格遍历原材料过滤列表 -->
+					<view class="warehouse-item" v-for="material in filteredRawMaterials" :key="'material_' + material.rawMaterialId" @click="selectRawMaterial(material)" v-else>
+						<text class="warehouse-name">{{ material.rawMaterialName }}【{{ material.specification || '暂无规格' }}】</text>
+						<text class="warehouse-check" v-if="itemId === material.rawMaterialId">✓</text>
+					</view>
+					<view class="empty-tip" v-if="!loadingRawMaterials && (!filteredRawMaterials || filteredRawMaterials.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="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>
+
+<script>
+	import { listProduct } from '@/api/wms/product.js'
+	import { listRawMaterial } from '@/api/wms/rawMaterial.js'
+
+	export default {
+		name: 'ItemSelector',
+		props: {
+			itemType: {
+				type: String,
+				default: ''
+			},
+			itemId: {
+				type: [String, Number],
+				default: undefined
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			pageSize: {
+				type: Number,
+				default: 1000
+			}
+		},
+		data() {
+			return {
+				// 严格隔离的数据源
+				products: [],         // 仅存放产品数据
+				rawMaterials: [],     // 仅存放原材料数据
+				loadingProducts: false,
+				loadingRawMaterials: false,
+				selectedName: '',
+				// 独立的搜索和过滤结果
+				productSearchKeyword: '',
+				filteredProducts: [],
+				rawMaterialSearchKeyword: '',
+				filteredRawMaterials: []
+			};
+		},
+		created() {
+			this.loadProducts()
+			this.loadRawMaterials()
+		},
+		watch: {
+			itemId: {
+				immediate: true,
+				handler(newVal) {
+					if (!newVal) {
+						this.selectedName = '';
+						return;
+					}
+					// 严格根据类型匹配名称
+					if (this.itemType === 'product') {
+						const product = this.products.find(p => p.productId === newVal);
+						this.selectedName = product?.productName || '';
+					} else if (this.itemType === 'raw_material') {
+						const material = this.rawMaterials.find(m => m.rawMaterialId === newVal);
+						this.selectedName = material?.rawMaterialName || '';
+					}
+				}
+			},
+			itemType(newVal) {
+				if (newVal === 'product') {
+					this.productSearchKeyword = ''
+					this.filteredProducts = [...this.products]
+				} else if (newVal === 'raw_material') {
+					this.rawMaterialSearchKeyword = ''
+					this.filteredRawMaterials = [...this.rawMaterials]
+				}
+			}
+		},
+		methods: {
+			// 加载产品数据（严格过滤非产品数据）
+			async loadProducts() {
+				if (this.loadingProducts) return
+				this.loadingProducts = true
+				try {
+					const res = await listProduct({
+						pageNum: 1,
+						pageSize: this.pageSize
+					});
+					if (res.code === 200) {
+						// 原始数据
+						const originData = res.rows || res.data || [];
+						console.log('产品原始数据', originData)
+						// 过滤出真正的产品数据（通过是否包含productId标识）
+						this.products = originData.filter(item => item.productId !== undefined && item.productId !== null);
+						// 初始化过滤列表
+						this.filteredProducts = [...this.products];
+						console.log('产品列表加载完成，数量：', this.products.length);
+					} else {
+						console.error('产品加载失败:', res.msg);
+						uni.showToast({ title: '产品数据加载失败', icon: 'none' });
+					}
+				} catch (err) {
+					console.error('产品加载异常:', err);
+					uni.showToast({ title: '产品数据加载异常', icon: 'none' });
+				} finally {
+					this.loadingProducts = false;
+				}
+			},
+
+			// 加载原材料数据（严格过滤非原材料数据）
+			async loadRawMaterials() {
+				if (this.loadingRawMaterials) return
+				this.loadingRawMaterials = true
+				try {
+					const res = await listRawMaterial({
+						pageNum: 1,
+						pageSize: this.pageSize
+					});
+					if (res.code === 200) {
+						// 原始数据
+						const originData = res.rows || res.data || [];
+						// 过滤出真正的原材料数据（通过是否包含rawMaterialId标识）
+						this.rawMaterials = originData.filter(item => item.rawMaterialId !== undefined && item.rawMaterialId !== null);
+						// 初始化过滤列表
+						this.filteredRawMaterials = [...this.rawMaterials];
+						console.log('原材料列表加载完成，数量：', this.rawMaterials.length);
+					} else {
+						console.error('原材料加载失败:', res.msg);
+						uni.showToast({ title: '原材料数据加载失败', icon: 'none' });
+					}
+				} catch (err) {
+					console.error('原材料加载异常:', err);
+					uni.showToast({ title: '原材料数据加载异常', icon: 'none' });
+				} finally {
+					this.loadingRawMaterials = false;
+				}
+			},
+
+			// 产品过滤（仅基于产品列表）
+			filterProducts() {
+				const keyword = this.productSearchKeyword.trim().toLowerCase();
+				this.filteredProducts = keyword 
+					? this.products.filter(p => {
+							// 只基于产品名称过滤，且确保是产品数据
+							return p.productName && p.productName.toLowerCase().includes(keyword)
+						})
+					: [...this.products];
+			},
+
+			// 原材料过滤（仅基于原材料列表）
+			filterRawMaterials() {
+				const keyword = this.rawMaterialSearchKeyword.trim().toLowerCase();
+				this.filteredRawMaterials = keyword
+					? this.rawMaterials.filter(m => {
+							// 只基于原材料名称过滤，且确保是原材料数据
+							return m.rawMaterialName && m.rawMaterialName.toLowerCase().includes(keyword)
+						})
+					: [...this.rawMaterials];
+			},
+
+			// 选择产品（强制类型为product）
+			selectProduct(product) {
+				// 额外校验是否为产品数据
+				if (!product.productId) return;
+				
+				this.$emit('update:itemId', product.productId);
+				this.$emit('update:itemType', 'product');
+				this.selectedName = product.productName;
+				uni.showToast({ title: `已选择产品：${product.productName}`, icon: 'success' });
+				this.closeProductPicker();
+			},
+
+			// 选择原材料（强制类型为raw_material）
+			selectRawMaterial(material) {
+				// 额外校验是否为原材料数据
+				if (!material.rawMaterialId) return;
+				
+				this.$emit('update:itemId', material.rawMaterialId);
+				this.$emit('update:itemType', 'raw_material');
+				this.selectedName = material.rawMaterialName;
+				uni.showToast({ title: `已选择原材料：${material.rawMaterialName}`, icon: 'success' });
+				this.closeRawMaterialPicker();
+			},
+
+			// 类型选择逻辑
+			selectItemType(type) {
+				this.$emit('update:itemType', type);
+				this.$emit('update:itemId', undefined);
+				this.closeItemTypePicker();
+				
+				if (type === 'product' && !this.loadingProducts) {
+					this.showProductPicker()
+				} else if (type === 'raw_material' && !this.loadingRawMaterials) {
+					this.showRawMaterialPicker()
+				}
+			},
+
+			// 弹窗控制
+			showItemTypePicker() {
+				this.$refs.itemTypePopup.open();
+			},
+			closeItemTypePicker() {
+				this.$refs.itemTypePopup.close();
+			},
+			showProductPicker() {
+				this.$refs.productPopup.open();
+			},
+			closeProductPicker() {
+				this.$refs.productPopup.close();
+			},
+			showRawMaterialPicker() {
+				this.$refs.rawMaterialPopup.open();
+			},
+			closeRawMaterialPicker() {
+				this.$refs.rawMaterialPopup.close();
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	/* 样式保持不变 */
+	.form-item-optional {
+		margin-bottom: 30rpx;
+
+		.form-label-optional {
+			display: block;
+			font-size: 28rpx;
+			color: #333;
+			margin-bottom: 15rpx;
+			font-weight: 500;
+		}
+	}
+
+	.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;
+			}
+		}
+
+		.popup-body {
+			max-height: 400rpx;
+
+			.loading-tip {
+				text-align: center;
+				padding: 60rpx 0;
+				color: #666;
+				font-size: 28rpx;
+			}
+
+			.warehouse-item {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 30rpx;
+				border-bottom: 1rpx solid #f5f5f5;
+
+				&: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;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/apps/hand-factory/components/panels/code/apart.vue b/apps/hand-factory/components/panels/code/apart.vue
index 4584282..549a066 100644
--- a/apps/hand-factory/components/panels/code/apart.vue
+++ b/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({
diff --git a/apps/hand-factory/components/panels/code/merge.vue b/apps/hand-factory/components/panels/code/merge.vue
index de21374..2aaf265 100644
--- a/apps/hand-factory/components/panels/code/merge.vue
+++ b/apps/hand-factory/components/panels/code/merge.vue
@@ -72,15 +72,7 @@
 			<!-- 目标库区 -->
 			<view class="form-item form-item-optional">
 				<text class="form-label-optional">目标库位</text>
-				<view 
-					class="picker-input" 
-					@click="showWarehousePicker()"
-				>
-					<text class="picker-text" :class="{ 'picker-placeholder': !warehouseName }">
-						{{ warehouseName || '请选择目标库位' }}
-					</text>
-					<text class="picker-arrow">▼</text>
-				</view>
+				<klp-warehouse-picker v-model="warehouseId" :disabled="coilDetail.dataType === 0" placeholder="请选择目标库区" />
 			</view>
 			
 			<!-- 实际库区 -->
@@ -90,48 +82,11 @@
 					ware-type="actual" />
 			</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 
-					class="picker-input" 
-					@click="showProductPicker()"
-				>
-					<text class="picker-text" :class="{ 'picker-placeholder': !selectedProductName }">
-						{{ selectedProductName || '请选择产品' }}
-					</text>
-					<text class="picker-arrow">▼</text>
-				</view>
-			</view>
-			
-			<!-- 原材料选择（仅当选择了原料类型时显示） -->
-			<view class="form-item form-item-optional" v-if="itemType === 'raw_material'">
-				<text class="form-label-optional">选择原材料</text>
-				<view 
-					class="picker-input" 
-					@click="showRawMaterialPicker()"
-				>
-					<text class="picker-text" :class="{ 'picker-placeholder': !selectedRawMaterialName }">
-						{{ selectedRawMaterialName || '请选择原材料' }}
-					</text>
-					<text class="picker-arrow">▼</text>
-				</view>
-			</view>
+			<klp-material-picker
+				:item-type.sync="itemType" 
+				:item-id.sync="itemId" 
+				:page-size="2000" 
+			/>
 			
 			<!-- 毛重 -->
 			<view class="form-item form-item-optional">
@@ -174,131 +129,12 @@
 		<view class="tip-card" v-if="scannedCoils.length === 1">
 			<text class="tip-text">至少需要扫描 2 个钢卷才能进行合卷操作</text>
 		</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="closeWarehousePicker">✕</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="warehouseId === warehouse.warehouseId">✓</text>
-					</view>
-					<view class="empty-tip" v-if="!filteredWarehousesInPicker || filteredWarehousesInPicker.length === 0">
-						<text>未找到匹配的库区</text>
-					</view>
-				</scroll-view>
-			</view>
-		</uni-popup>
-		
-		<!-- 产品选择弹窗 -->
-		<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 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="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 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="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="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>
 
 <script>
 import { getGenerateRecord } from '@/api/wms/code.js'
 import { updateMaterialCoil, 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() {
@@ -331,19 +167,6 @@ export default {
 		}
 	},
 	
-	
-	onLoad() {
-		this.loadWarehouses();
-		this.loadProducts();
-		this.loadRawMaterials();
-	},
-	
-	mounted() {
-		this.loadWarehouses();
-		this.loadProducts();
-		this.loadRawMaterials();
-	},
-	
 	computed: {
 		operatorName() {
 			return this.$store.state.user.nickName || this.$store.state.user.name || '未知'
@@ -351,226 +174,6 @@ export default {
 	},
 	
 	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 || [];
-					this.filteredWarehouses = [...this.warehouses];
-					console.log('合卷页面库区加载成功，数量:', this.warehouses.length);
-				} else {
-					console.error('合卷页面库区加载失败:', res.msg);
-				}
-			} catch (err) {
-				console.error('合卷页面加载库区异常:', err);
-			}
-		},
-		
-		// 加载产品列表
-		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() {
-			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.itemId = product.productId;
-			this.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() {
-			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.itemId = material.rawMaterialId;
-			this.itemType = 'raw_material';
-			this.selectedRawMaterialName = material.rawMaterialName;
-			uni.showToast({
-				title: `已选择原材料：${material.rawMaterialName}`,
-				icon: 'success'
-			});
-			this.closeRawMaterialPicker();
-		},
-		
-		// 过滤库区
-		filterWarehouses() {
-			console.log('合卷页面过滤库区，关键词:', this.warehouseKeyword);
-			console.log('合卷页面当前库区列表:', this.warehouses);
-			const keyword = this.warehouseKeyword.trim().toLowerCase();
-			if (!keyword) {
-				this.filteredWarehouses = this.warehouses;
-			} else {
-				this.filteredWarehouses = this.warehouses.filter(warehouse => {
-					const name = (warehouse.warehouseName || '').toLowerCase();
-					return name.includes(keyword);
-				});
-			}
-			console.log('合卷页面过滤后库区数量:', this.filteredWarehouses.length);
-			this.showWarehouseList = true;
-		},
-		
-		// 选择库区
-		selectWarehouse(warehouse) {
-			this.warehouseId = warehouse.warehouseId;
-			this.warehouseName = warehouse.warehouseName;
-			this.warehouseKeyword = warehouse.warehouseName;
-			this.showWarehouseList = false;
-		},
-		
-		// 关闭库区搜索列表
-		closeWarehouseList() {
-			this.showWarehouseList = false;
-		},
-		
-		// 显示库区选择器
-		showWarehousePicker() {
-			this.warehouseSearchKeyword = '';
-			this.filteredWarehousesInPicker = [...this.warehouses];
-			this.$refs.warehousePopup.open();
-		},
-		
-		// 关闭库区选择器
-		closeWarehousePicker() {
-			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);
-				});
-			}
-		},
-		
-		// 从选择器中选择库区
-		async selectWarehouseFromPicker(warehouse) {
-			this.warehouseId = warehouse.warehouseId;
-			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 = '';
-			
-			this.closeItemTypePicker();
-			
-			// 根据类型自动弹出对应的选择器
-			if (type === 'product') {
-				this.showProductPicker();
-			} else if (type === 'raw_material') {
-				this.showRawMaterialPicker();
-			}
-		},
-		
 		// 扫码
 		handleScan() {
 			uni.scanCode({
diff --git a/apps/hand-factory/components/panels/code/typing.vue b/apps/hand-factory/components/panels/code/typing.vue
index 44c190f..94a4ab2 100644
--- a/apps/hand-factory/components/panels/code/typing.vue
+++ b/apps/hand-factory/components/panels/code/typing.vue
@@ -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;