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

@@ -0,0 +1,84 @@
+<!-- 
+    filename: BomSelection.vue
+    author: liubin
+    date: 2023-11-20 13:23:36
+    description: 
+-->
+
+<template>
+	<div class="bom-selection">
+		<el-checkbox
+			v-for="item in list__inner"
+			:key="item.id"
+			:label="item.name"
+			:disabled="item.disabled"
+			@change="(e) => handleChange(item, e)"
+			class="sl__body-item"></el-checkbox>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'BomSelection',
+	components: {},
+	props: {
+		list: {
+			type: Array,
+			default: () => [],
+		},
+		equipmentId: {
+			type: String,
+			default: '',
+		},
+	},
+	data() {
+		return {
+			list__inner: [],
+			selected: '',
+		};
+	},
+	watch: {
+		list: {
+			handler(val) {
+				if (val) {
+					this.list__inner = val.map((item) => ({ ...item, disabled: false }));
+				}
+			},
+			deep: true,
+			immediate: true,
+		},
+	},
+	methods: {
+		handleChange(bomItem, selected) {
+			this.list__inner = this.list__inner.map((item) => ({
+				...item,
+				disabled: selected ? item.id !== bomItem.id : false,
+			}));
+			this.$emit('change', this.equipmentId, bomItem.id, selected);
+			this.$nextTick(() => {
+				this.$forceUpdate();
+			});
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.bom-selection {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 6px;
+}
+
+.sl__body-item {
+	margin: 0;
+	padding: 3px 6px;
+	border-radius: 4px;
+	transition: background 0.3s ease-in-out;
+
+	&:hover {
+		background: #0001;
+	}
+}
+</style>

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

@@ -29,10 +29,7 @@
 						<el-checkbox
 							v-for="eq in bomList"
 							:key="eq.id"
-							:label="`${eq.name} (${
+							:label="eq.name"
-								selectedMBom[currentEquipment].length +
-								selectedPBom[currentEquipment].length
-							} / 2)`"
 							@change="(e) => handleEquipmentChange(eq, e)"
 							class="sl__body-item"></el-checkbox>
 					</el-checkbox-group>
@@ -43,20 +40,12 @@
 					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
 						<span style="">物料BOM</span>
 					</div>
-					<el-checkbox-group
+
-						v-model="selectedMBom[currentEquipment]"
+					<BomSelection
-						class="sl__body">
+						key="materialsBomList"
-						<el-checkbox
+						:list="materialsBomList"
-							v-for="mb in materialsBomList"
+						:equipment-id="materialsBomList.equipmentId"
-							:key="mb.id"
+						@change="handleMaterialBomChange" />
-							:label="mb.name"
-							:disabled="mb.disabled || false"
-							@change="
-								(e) =>
-									handleMaterialBomChange(mb, materialsBomList.equipmentId, e)
-							"
-							class="sl__body-item"></el-checkbox>
-					</el-checkbox-group>
 				</div>
 			</el-col>
 			<el-col :span="8" style="border-left: 1px solid #ccc">
@@ -64,19 +53,12 @@
 					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
 						<span style="">参数BOM</span>
 					</div>
-					<el-checkbox-group
+
-						v-model="selectedPBom[currentEquipment]"
+					<BomSelection
-						class="sl__body">
+						key="valuesBomList"
-						<el-checkbox
+						:list="valuesBomList"
-							v-for="vb in valuesBomList"
+						:equipment-id="valuesBomList.equipmentId"
-							:key="vb.id"
+						@change="handleValueBomChange" />
-							:label="vb.name"
-							:disabled="vb.disabled || false"
-							@change="
-								(e) => handleValueBomChange(vb, valuesBomList.equipmentId, e)
-							"
-							class="sl__body-item"></el-checkbox>
-					</el-checkbox-group>
 				</div>
 			</el-col>
 		</el-row>
@@ -84,9 +66,10 @@
 </template>
 ;
 <script>
+import BomSelection from './BomSelection.vue';
 export default {
 	name: 'BomSelector',
-	components: {},
+	components: { BomSelection },
 	props: {
 		bomList: {
 			type: Array,
@@ -97,56 +80,17 @@ export default {
 		return {
 			searchText: '',
 			selectedEquipments: [],
-			selectedMBom: { default: [] },
-			selectedPBom: { default: [] },
 			selected: [],
 			materialsBomList: [],
 			valuesBomList: [],
-			currentEquipment: 'default',
 		};
 	},
-	watch: {
-		selected: {
-			handler(val) {
-				console.log(val);
-			},
-			deep: true,
-		},
-	},
-	computed: {},
-	created() {},
-	mounted() {
-		// 准备v-model
-		this.bomList.forEach((item) => {
-			this.$set(this.selectedMBom, item.id, []);
-			this.$set(this.selectedPBom, item.id, []);
-		});
-	},
 	methods: {
 		handleEquipmentChange(eq, selected) {
 			this.currentEquipment = eq.id;
-			this.materialsBomList =
+			this.materialsBomList = eq.materialsBom;
-				// [
+			this.valuesBomList = eq.valuesBom;
-				// 	{
-				// 		id: 1,
-				// 		name: 'mb-1',
-				// 	},
-				// 	{
-				// 		id: 2,
-				// 		name: 'mb-2',
-				// 	},
-				// 	{
-				// 		id: 3,
-				// 		name: 'mb-3',
-				// 	},
-				// ] ||
-				eq.materialsBom || [];
-			this.valuesBomList = eq.valuesBom || [];
-			// 重新确保equipmentId已经被加载上去了
-			this.materialsBomList.equipmentId = eq.id;
-			this.valuesBomList.equipmentId = eq.id;
 
-			console.log('eq', selected, eq, this.selectedEquipments);
 			if (selected) {
 				this.selected.push({
 					equipmentId: eq.id,
@@ -158,28 +102,21 @@ export default {
 				this.selected = this.selected.filter(
 					(item) => item.equipmentId !== eq.id
 				);
-				this.selectedMBom[eq.id] = [];
-				this.selectedPBom[eq.id] = [];
 			}
 		},
-		handleValueBomChange(vb, equipmentId, selected) {
+
+		handleMaterialBomChange(equipmentId, bomId, selected) {
 			const selectedItem = this.selected.find(
 				(item) => item.equipmentId == equipmentId
 			);
-			selectedItem.equValueBomId = selected ? vb.id : null;
+			selectedItem.equMaterialBomId = selected ? bomId : null;
-			this.valuesBomList.forEach((item) => {
-				item.disabled = selected ? item.id !== vb.id : false;
-			});
 		},
-		handleMaterialBomChange(mb, equipmentId, selected) {
+
-			debugger;
+		handleValueBomChange(equipmentId, bomId, selected) {
 			const selectedItem = this.selected.find(
 				(item) => item.equipmentId == equipmentId
 			);
-			selectedItem.equMaterialBomId = selected ? mb.id : null;
+			selectedItem.equValueBomId = selected ? bomId : null;
-			this.materialsBomList.forEach((item) => {
-				item.disabled = selected ? item.id !== mb.id : false;
-			});
 		},
 	},
 };

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

@@ -218,9 +218,11 @@ export default {
 				'post'
 			).then(({ code, data }) => {
 				if (code == 0) {
-					this.bomList = data.map(eq => {
+					this.bomList = data.map((eq) => {
-						if (eq.materialsBom) eq.materialsBom.equipmentId = eq.id 
+						eq.materialsBom = eq.materialsBom || [];
-						if (eq.valuesBom) eq.valuesBom.equipmentId = eq.id
+						eq.valuesBom = eq.valuesBom || [];
+						eq.materialsBom.equipmentId = eq.id;
+						eq.valuesBom.equipmentId = eq.id;
 						return eq;
 					});
 				} else {