fix: 采购入库颜色机型单选

pages/home/wt/components/purchaseReceiving/taskForm.vue

@@ -228,21 +228,21 @@
 							<uni-datetime-picker v-if="!row.isSave" type="datetime" v-model="row.detailExpireDate" />
 							<text v-else class="info-value">{{ row.detailExpireDate || '-' }}</text>
 						</view>
-						<!-- 机型 - 多选 -->
+						<!-- 机型 - 单选 -->
 						<view class="info-row edit-row">
 							<text class="info-label">机型</text>
-							<view v-if="!row.isSave" class="color-picker-trigger" @click="openModelPicker(row, index)">
-								<text class="picker-value" :class="{ 'placeholder': !row.modelKey }">{{ row.modelKey || '请选择机型' }}</text>
-							</view>
-							<text v-else class="info-value">{{ row.modelKeyNames || '-' }}</text>
+							<picker v-if="!row.isSave" class="info-picker" mode="selector" :value="row.modelIndex" :range="modelOptions" range-key="dictValue" @change="(e) => onModelChange(e, index)">
+								<view class="picker-value">{{ row.modelKeyName || '请选择机型' }}</view>
+							</picker>
+							<text v-else class="info-value">{{ row.modelKeyName || '-' }}</text>
 						</view>
-						<!-- 颜色 - 多选 -->
+						<!-- 颜色 - 单选 -->
 						<view class="info-row edit-row">
 							<text class="info-label">颜色</text>
-							<view v-if="!row.isSave" class="color-picker-trigger" @click="openColorPicker(row, index)">
-								<text class="picker-value" :class="{ 'placeholder': !row.colorKey }">{{ row.colorKey || '请选择颜色' }}</text>
-							</view>
-							<text v-else class="info-value">{{ row.colorKey || '-' }}</text>
+							<picker v-if="!row.isSave" class="info-picker" mode="selector" :value="row.colorIndex" :range="colorOptions" range-key="dictValue" @change="(e) => onColorChange(e, index)">
+								<view class="picker-value">{{ row.colorKeyName || '请选择颜色' }}</view>
+							</picker>
+							<text v-else class="info-value">{{ row.colorKeyName || '-' }}</text>
 						</view>
 					</view>
 					<view class="card-footer">
@@ -317,12 +317,6 @@
 				</view>
 			</view>
 		</view>
-		<!-- 选择颜色 -->
-		<ba-tree-picker ref="colorTreePicker" :multiple="true" @select-change="onColorConfirm" title="选择颜色"
-			:localdata="colorTreeData" valueKey="id" textKey="name" childrenKey="child" />
-		<!-- 选择机型 -->
-		<ba-tree-picker ref="modelTreePicker" :multiple="true" @select-change="onModelConfirm" title="选择机型"
-			:localdata="modelTreeData" valueKey="id" textKey="name" childrenKey="child" />
 	</view>
 </template>
 
@@ -335,12 +329,10 @@
 	import { parameterGetByCode } from '@/api/mainData/index.js'
 	import { getListByNameOrModeType, getCode, contactQueryByCategoryIdsAPI, getCategoryPackageDisposition, getProduceTreeByPid, warehouseDefinitionList, getAssetNum, getWarehouseList, isVerifyRepeatIsStock } from '@/api/warehouseManagement/index.js'
 	import { mapGetters, mapActions } from 'vuex'
-	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
 	import { unary } from 'lodash'
 	export default {
 		components: {
-			fileMain,
-			baTreePicker
+			fileMain
 		},
 		props: {
 			businessId: {
@@ -352,33 +344,16 @@
 		},
 		computed: {
 			...mapGetters(['dict', 'getDict', 'getDictValue']),
-			// 机型选项
-			modelOptions() {
-				return this.dict?.product_model_key || []
-			},
 			// 颜色选项（数组）
 			colorOptions() {
 				return this.dict?.product_color_key || []
 			},
-			// 颜色选项（树形结构，用于 ba-tree-picker）
-			colorTreeData() {
-				console.log('colorOptions~~~', this.colorOptions)
-				return this.colorOptions.map(item => ({
-					id: item.dictCode,
-					name: item.dictValue
-				}))
-			},
+
 			// 机型选项（数组）
 			modelOptions() {
 				return this.dict?.product_model_key || []
 			},
-			// 机型选项（树形结构，用于 ba-tree-picker）
-			modelTreeData() {
-				return this.modelOptions.map(item => ({
-					id: item.dictCode,
-					name: item.dictValue
-				}))
-			},
+
 			list() {
 				return this.showPackingList.length > 0 ? ['收货信息', '物品清单', '入库信息', '产品信息', '包装明细'] : ['收货信息', '物品清单', '入库信息', '产品信息']
 			},
@@ -481,12 +456,7 @@
 				{ label: '是', value: 1 },
 				{ label: '否', value: 0 }
 			],
-			// colorTreeData: [], // 颜色树形数据
-			currentColorRow: null, // 当前选择颜色的行
-			currentColorIndex: -1, // 当前选择颜色的行索引
-			// 机型相关
-			currentModelRow: null, // 当前选择机型的行
-			currentModelIndex: -1, // 当前选择机型的行索引
+
 		}
 		},
 		beforeDestroy() {
@@ -532,7 +502,11 @@
 							categoryModel: item.modelType, // 物品型号
 							specification: item.specification, // 规格
 							modelKey: item.modelKey ? item.modelKey : '', // 机型
+							modelKeyName: item.modelKey ? (this.modelOptions.find(o => o.dictCode === item.modelKey)?.dictValue || '') : '',
+							modelIndex: item.modelKey ? this.modelOptions.findIndex(o => o.dictCode === item.modelKey) : -1,
 							colorKey: item.colorKey ? item.colorKey : '', // 颜色
+							colorKeyName: item.colorKey ? (this.colorOptions.find(o => o.dictCode === item.colorKey)?.dictValue || '') : '',
+							colorIndex: item.colorKey ? this.colorOptions.findIndex(o => o.dictCode === item.colorKey) : -1,
 							brandNum: item.brandNum, // 牌号
 							batchNo: batchNo, // 批次号
 							supplierListOptions: supplierList[item.id], // 供应商列表
@@ -584,6 +558,7 @@
 		watch: {
 			packingList: {
 				handler(newVal) {
+					console.log('packingList~~', newVal)
 					this.showPackingList = newVal.slice(0, this.pageSize * (this.pickingPageNum > 0 ? this.pickingPageNum : 1));
 					this.pickingPageNum = Math.ceil(this.showPackingList.length / this.pageSize);
 				},
@@ -1257,77 +1232,24 @@
 					row.supplierCode = item.serialNo;
 				}
 			},
-			// 打开颜色选择器
-			openColorPicker(row, index) {
-				this.currentColorRow = row;
-				this.currentColorIndex = index;
-				// 获取已选中的颜色 ID 列表
-				const selectedIds = row.colorKey ? row.colorKey.split(',') : [];
-				// 初始化选择器
-				this.$nextTick(() => {
-					const picker = this.$refs.colorTreePicker;
-					picker._initTree();
-					// 设置已选中的项
-					if (selectedIds.length > 0) {
-						picker.treeList.forEach(item => {
-							if (selectedIds.includes(item.id)) {
-								item.checkStatus = 2;
-								item.orCheckStatus = 2;
-							}
-						});
-					}
-					picker._show();
-				});
-			},
-			// 颜色选择确认
-			onColorConfirm(data, name, allList) {
-				console.log('selectedList~~~', allList)
-				if (allList && allList.length > 0) {
-					const ids = allList.map(item => item.id).join(',');
-					const names = allList.map(item => item.name).join(',');
-					// 使用 $set 确保数据更新到 productList 中
-					this.$set(this.productList[this.currentColorIndex], 'colorKey', ids);
-					// 同时更新 currentColorRow 引用
-					this.currentColorRow.colorKey = ids;
-				} else {
-					this.$set(this.productList[this.currentColorIndex], 'colorKey', '');
-					this.currentColorRow.colorKey = '';
+			// 颜色选择变化
+			onColorChange(e, index) {
+				const val = Number(e.detail.value);
+				const item = this.colorOptions[val];
+				if (item) {
+					this.$set(this.productList[index], 'colorKey', item.dictCode);
+					this.$set(this.productList[index], 'colorKeyName', item.dictValue);
+					this.$set(this.productList[index], 'colorIndex', val);
 				}
 			},
-			// 打开机型选择器
-			openModelPicker(row, index) {
-				this.currentModelRow = row;
-				this.currentModelIndex = index;
-				// 获取已选中的机型 ID 列表
-				const selectedIds = row.modelKey ? row.modelKey.split(',') : [];
-				// 初始化选择器
-				this.$nextTick(() => {
-					const picker = this.$refs.modelTreePicker;
-					picker._initTree();
-					// 设置已选中的项
-					if (selectedIds.length > 0) {
-						picker.treeList.forEach(item => {
-							if (selectedIds.includes(item.id)) {
-								item.checkStatus = 2;
-								item.orCheckStatus = 2;
-							}
-						});
-					}
-					picker._show();
-				});
-			},
-			// 机型选择确认
-			onModelConfirm(data, name, allList) {
-				if (allList && allList.length > 0) {
-					const ids = allList.map(item => item.id).join(',');
-					const names = allList.map(item => item.name).join(',');
-					// 使用 $set 确保数据更新到 productList 中
-					this.$set(this.productList[this.currentModelIndex], 'modelKey', ids);
-					// 同时更新 currentModelRow 引用
-					this.currentModelRow.modelKey = ids;
-				} else {
-					this.$set(this.productList[this.currentModelIndex], 'modelKey', '');
-					this.currentModelRow.modelKey = '';
+			// 机型选择变化
+			onModelChange(e, index) {
+				const val = Number(e.detail.value);
+				const item = this.modelOptions[val];
+				if (item) {
+					this.$set(this.productList[index], 'modelKey', item.dictCode);
+					this.$set(this.productList[index], 'modelKeyName', item.dictValue);
+					this.$set(this.productList[index], 'modelIndex', val);
 				}
 			},
 			// 日期选择变化