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

@@ -18,7 +18,7 @@
 			</el-col>
 		</el-row>
 
-		<el-row style="border: 1px solid #ccc">
+		<el-row style="border: 1px solid #ccc; display: flex;">
 			<el-col :span="8">
 				<div class="select-list">
 					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
@@ -30,19 +30,19 @@
 							v-for="n in 10"
 							:key="n"
 							:label="'设备' + n"
-                            :true-label="n"
+							@change="() => handleChange(n)"
 							class="sl__body-item"></el-checkbox>
 					</el-checkbox-group>
 				</div>
 			</el-col>
-			<el-col :span="8" style="border-left: 1px solid #ccc">
+			<el-col :span="8" style="border-left: 1px solid #ccc;">
 				<div class="select-list">
 					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
 						<span style="">物料BOM</span>
 					</div>
 					<el-checkbox-group v-model="selectedMBom" class="sl__body">
 						<el-checkbox
-							v-for="n in 10"
+							v-for="n in materialBomList"
 							:key="n"
 							class="sl__body-item"></el-checkbox>
 					</el-checkbox-group>
@@ -55,7 +55,7 @@
 					</div>
 					<el-checkbox-group v-model="selectedPBom" class="sl__body">
 						<el-checkbox
-							v-for="n in 10"
+							v-for="n in paramBomList"
 							:key="n"
 							class="sl__body-item"></el-checkbox>
 					</el-checkbox-group>
@@ -64,7 +64,7 @@
 		</el-row>
 	</div>
 </template>
-
+;
 <script>
 export default {
 	name: 'BomSelector',
@@ -76,18 +76,40 @@ export default {
 			selectedEquipments: [],
 			selectedMBom: [],
 			selectedPBom: [],
+			selected: [],
+            materialBomList: [],
+            paramBomList: [],
 		};
 	},
-    watch: {
+	watch: {
-        selectedEquipments: {
+		selected: {
-            handler(val) {
+			handler(val) {
-                console.log(val);
+				console.log(val);
-            },
+			},
-            deep: true,
+			deep: true,
-        },
+		},
-    },
+	},
 	computed: {},
-	methods: {},
+	methods: {
+		handleChange(id) {
+            this.materialBomList = [];
+            this.paramBomList = [];
+			this.selected.push({
+				id: id,
+			});
+		},
+		handleBomChange(eqId, id, type) {
+			const record = this.selected.find((item) => item.id === eqId);
+			if (record) {
+				record[type == 'param' ? 'paramBomId' : 'materialBomId'] = id;
+			} else {
+				this.selected.push({
+					id: eqId,
+					[type == 'param' ? 'paramBomId' : 'materialBomId']: id,
+				});
+			}
+		},
+	},
 };
 </script>
 
@@ -104,12 +126,12 @@ export default {
 	flex-direction: column;
 	gap: 6px;
 	padding: 6px;
-    
+
 	> .el-checkbox {
-        margin: 0;
+		margin: 0;
-        padding: 3px 6px;
+		padding: 3px 6px;
 		border-radius: 4px;
-        transition: background 0.3s ease-in-out;
+		transition: background 0.3s ease-in-out;
 
 		&:hover {
 			background: #0001;
@@ -118,6 +140,6 @@ export default {
 }
 
 .sl__header {
-    border-bottom: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
 }
 </style>