update equipment attach process

.env.dev

@@ -13,11 +13,11 @@ VUE_APP_TITLE = MES系统
 
 # 芋道管理系统/开发环境
 # VUE_APP_BASE_API = 'http://100.64.0.26:48082'
-VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 # VUE_APP_BASE_API = 'http://192.168.4.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.49:48080'
-# VUE_APP_BASE_API = 'http://192.168.1.8:48080'
+VUE_APP_BASE_API = 'http://192.168.1.8:48082'
 # VUE_APP_BASE_API = 'http://192.168.4.159:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.56:48080'
 # VUE_APP_BASE_API = 'http://192.168.4.159:48080'

src/views/extend/processFlowView/components/BomSelection.vue

@@ -27,10 +27,10 @@ export default {
 	// 	event: 'update',
 	// },
 	props: {
-		// selected: {
-		// 	type: String,
-		// 	default: '',
-		// },
+		currentSelect: {
+			type: String,
+			default: null,
+		},
 		list: {
 			type: Array,
 			default: () => [],
@@ -44,7 +44,7 @@ export default {
 		return {
 			list__inner: [],
 			selected: null,
-            randomKey: Math.random()
+			randomKey: Math.random(),
 		};
 	},
 	watch: {
@@ -57,6 +57,13 @@ export default {
 			deep: true,
 			immediate: true,
 		},
+		currentSelect: {
+			handler(val) {
+				this.selected = val;
+				this.randomKey = Math.random();
+			},
+			immediate: true,
+		},
 	},
 	methods: {
 		handleChange(bomItem, selected) {
@@ -76,7 +83,7 @@ export default {
 		clearSelected() {
 			console.log('clearSelected');
 			this.selected = null;
-            this.randomKey = Math.random()
+			this.randomKey = Math.random();
 			// this.$emit('update', null);
 			// this.$nextTick(() => {
 			// 	this.$forceUpdate();

src/views/extend/processFlowView/components/BomSelector.vue

@@ -29,13 +29,21 @@
 						</span>
 					</div>
 					<div class="sl__body">
-						<el-checkbox
+						<div
+							class="sl__body-item"
 							v-for="eq in filteredBomList"
-							:key="eq.id + refreshKey"
-							:label="eq.name"
-							:checked="selectedEquipments.includes(eq.id)"
-							@change="(e) => handleEquipmentChange(eq, e)"
-							class="sl__body-item"></el-checkbox>
+							:key="eq.id + refreshKey">
+							<el-checkbox
+								:key="refreshKey"
+								:checked="selectedEquipments.includes(eq.id)"
+								@change="(e) => handleEquipmentChange(eq, e)"
+								class=""></el-checkbox>
+							<span
+								:key="'label' + refreshKey"
+								@click.stop="() => handleLoadDom(eq)">
+								{{ eq.name }}
+							</span>
+						</div>
 					</div>
 				</div>
 			</el-col>
@@ -47,9 +55,10 @@
 
 					<BomSelection
 						ref="materialsBomList"
-						key="materialsBomList"
+						:key="materialsBomList.equipmentId + 'materialsBomList'"
 						:list="materialsBomList"
 						:equipment-id="materialsBomList.equipmentId"
+						:current-select="currentSelectedMaterialBomId"
 						@change="handleMaterialBomChange" />
 				</div>
 			</el-col>
@@ -61,9 +70,10 @@
 
 					<BomSelection
 						ref="valuesBomList"
-						key="valuesBomList"
+						:key="valuesBomList.equipmentId + 'valuesBomList'"
 						:list="valuesBomList"
 						:equipment-id="valuesBomList.equipmentId"
+						:current-select="currentSelectedValueBomId"
 						@change="handleValueBomChange" />
 				</div>
 			</el-col>
@@ -98,6 +108,8 @@ export default {
 			materialsBomList: [],
 			valuesBomList: [],
 			refreshKey: Math.random(),
+			currentSelectedMaterialBomId: null,
+			currentSelectedValueBomId: null,
 		};
 	},
 	watch: {
@@ -121,6 +133,26 @@ export default {
 		},
 	},
 	methods: {
+		commit() {
+			this.$emit('update', this.selected);
+		},
+
+		handleLoadDom(eq) {
+			// 只显示 dom 列表
+			this.currentEquipment = eq.id;
+			this.materialsBomList = eq.materialsBom;
+			this.valuesBomList = eq.valuesBom;
+			// 回复选中的bom信息
+			if (this.selectedEquipments.includes(eq.id)) {
+				const selectedItem = this.selected.find(
+					(item) => item.equipmentId == eq.id
+				);
+				this.currentSelectedMaterialBomId =
+					selectedItem.equMaterialBomId ?? null;
+				this.currentSelectedValueBomId = selectedItem.equValueBomId ?? null;
+			}
+		},
+
 		handleEquipmentChange(eq, selected) {
 			this.currentEquipment = eq.id;
 			this.materialsBomList = eq.materialsBom;
@@ -133,18 +165,20 @@ export default {
 					equValueBomId: null,
 					equMaterialBomId: null,
 				});
-				this.$emit('update', this.selected);
+				// this.$emit('update', this.selected);
 			} else {
 				// 清空选择状态
 				this.selectedEquipments = this.selectedEquipments.filter(
 					(id) => id !== eq.id
 				);
-				this.$refs.materialsBomList.clearSelected();
-				this.$refs.valuesBomList.clearSelected();
+				// this.$refs.materialsBomList.clearSelected();
+				// this.$refs.valuesBomList.clearSelected();
+				this.currentSelectedMaterialBomId = null;
+				this.currentSelectedValueBomId = null;
 				this.selected = this.selected.filter(
 					(item) => item.equipmentId !== eq.id
 				);
-				this.$emit('update', this.selected);
+				// this.$emit('update', this.selected);
 			}
 		},
 
@@ -162,11 +196,12 @@ export default {
 				});
 				// 强制更新'设备'一栏
 				this.refreshKey = Math.random();
-				this.$emit('update', this.selected);
+				// this.$emit('update', this.selected);
 				return;
 			}
 			selectedItem && (selectedItem.equMaterialBomId = selected ? bomId : null);
-			this.$emit('update', this.selected);
+			this.currentSelectedMaterialBomId = selected ? bomId : null;
+			// this.$emit('update', this.selected);
 		},
 
 		handleValueBomChange(equipmentId, bomId, selected) {
@@ -182,11 +217,12 @@ export default {
 					equMaterialBomId: null,
 				});
 				this.refreshKey = Math.random();
-				this.$emit('update', this.selected);
+				// this.$emit('update', this.selected);
 				return;
 			}
 			selectedItem && (selectedItem.equValueBomId = selected ? bomId : null);
-			this.$emit('update', this.selected);
+			this.currentSelectedValueBomId = selected ? bomId : null;
+			// this.$emit('update', this.selected);
 		},
 	},
 };
@@ -197,27 +233,31 @@ export default {
 	min-height: 200px;
 }
 
-.select-list {
-}
-
 .sl__body {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
 	padding: 6px;
-
-	> .el-checkbox {
-		margin: 0;
-		padding: 3px 6px;
-		border-radius: 4px;
-		transition: background 0.3s ease-in-out;
-
-		&:hover {
-			background: #0001;
-		}
-	}
 }
 
+.sl__body-item {
+	margin: 0;
+	padding: 3px 6px;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background 0.3s ease-in-out;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	> span {
+		flex: 1;
+	}
+
+	&:hover {
+		background: #0001;
+	}
+}
 .sl__header {
 	border-bottom: 1px solid #ccc;
 }

src/views/extend/processFlowView/components/ProcessBomList.vue

@@ -31,6 +31,9 @@
 				icon="el-icon-search"
 				placeholder="搜索"
 				v-model="searchText"
+				:disabled="currentDet == null"
+				@change="handleSearchTextChange"
+				clearable
 				style="margin-left: 20px">
 				<i slot="prefix" class="el-input__icon el-icon-search"></i>
 			</el-input>
@@ -68,7 +71,12 @@
 			@cancel="cancel"
 			@confirm="submitForm">
 			<!-- <CustomTransfer /> -->
-			<BomSelector :bom-list="bomList" v-model="selectedBoms" />
+			<BomSelector
+				ref="bomSelector"
+				v-if="open"
+				:bom-list="bomList"
+				:value="selectedBoms"
+				@update="selectedBoms = $event" />
 		</base-dialog>
 	</section>
 </template>
@@ -94,7 +102,7 @@ export default {
 			choosedEquipments: [],
 			searchBarFormConfig: [{ label: '工序下设备' }],
 			tableProps: [
-				{ prop: 'equipmentId', label: '设备名称' },
+				{ prop: 'equName', label: '设备名称' },
 				{ prop: 'materialName', label: '物料BOM' },
 				{ prop: 'valueName', label: '参数BOM' },
 			],
@@ -104,9 +112,11 @@ export default {
 			queryParams: {
 				pageNo: 1,
 				pageSize: 10,
+				equipmentName: '',
 			},
 			searchText: '',
 			selectedBoms: [],
+			timer: null,
 		};
 	},
 	watch: {
@@ -125,7 +135,20 @@ export default {
 	},
 	methods: {
 		handleEmitFun() {},
+
 		handleTableBtnClick() {},
+
+		handleSearchTextChange(val) {
+			if (this.timer) clearTimeout(this.timer);
+			this.timer = setTimeout(() => {
+				console.log('geting list.......');
+				this.queryParams.equipmentName = val;
+				this.$nextTick(() => {
+					this.getList(this.currentDet);
+				});
+			}, 300);
+		},
+
 		put(payload) {
 			return this.http(this.updateUrl, 'put', payload);
 		},
@@ -146,27 +169,32 @@ export default {
 				data: method !== 'get' ? payload : null,
 			});
 		},
-		async submitForm() {
-			console.log('selectedBoms', this.selectedBoms);
-			if (this.selectedBoms.length) {
-				const { code, data } = await this.http(
-					'/extend/process-flow-det-equipment/createList',
-					'post',
-					this.selectedBoms.map((item) => ({
-						...item,
-						flowDetId: this.currentDet.detId,
-					}))
-				);
-				if (code == 0) {
-					this.$message.success('操作成功');
-					this.getList(this.currentDet);
-					this.cancel();
+		submitForm() {
+			// 现将子组件的修改提交更新至本组件
+			this.$refs.bomSelector.commit();
+			// 再提交至后端
+			this.$nextTick(async () => {
+				console.log('selectedBoms', this.selectedBoms);
+				if (this.selectedBoms.length) {
+					const { code, data } = await this.http(
+						'/extend/process-flow-det-equipment/createList',
+						'post',
+						this.selectedBoms.map((item) => ({
+							...item,
+							flowDetId: this.currentDet.detId,
+						}))
+					);
+					if (code == 0) {
+						this.$message.success('操作成功');
+						this.getList(this.currentDet);
+						this.cancel();
+					} else {
+						this.$message.error('操作失败');
+					}
 				} else {
-					this.$message.error('操作失败');
+					this.$message.info('请选择设备');
 				}
-			} else {
-				this.$message.info('请选择设备');
-			}
+			});
 		},
 		async getList({
 			detId,
@@ -202,7 +230,7 @@ export default {
 						// 设置选中状态
 						eq.materialsBom.chosen = eq.materialsBomChoseId ?? null;
 						eq.valuesBom.chosen = eq.valuesBomChoseId ?? null;
-						if (eq.materialsBom.chosen || eq.valuesBom.chosen) {
+						if (eq.equChose || eq.materialsBom.chosen || eq.valuesBom.chosen) {
 							this.selectedBoms.push({
 								equipmentId: eq.id,
 								equMaterialBomId: eq.materialsBom.chosen,