add BomSelector

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

@@ -0,0 +1,123 @@
+<!-- 
+    filename: BomSelector.vue
+    author: liubin
+    date: 2023-11-17 16:23:28
+    description: 
+-->
+
+<template>
+	<div class="bom-selector">
+		<el-row>
+			<el-col :span="8">
+				<el-input
+					v-model="searchText"
+					placeholder="搜索"
+					style="margin-bottom: 12px; user-select: none">
+					<i slot="prefix" class="el-input__icon el-icon-search"></i>
+				</el-input>
+			</el-col>
+		</el-row>
+
+		<el-row style="border: 1px solid #ccc">
+			<el-col :span="8">
+				<div class="select-list">
+					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
+						<span style="">可分配设备</span>
+						<span>1/24</span>
+					</div>
+					<el-checkbox-group v-model="selectedEquipments" class="sl__body">
+						<el-checkbox
+							v-for="n in 10"
+							:key="n"
+							:label="'设备' + n"
+                            :true-label="n"
+							class="sl__body-item"></el-checkbox>
+					</el-checkbox-group>
+				</div>
+			</el-col>
+			<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"
+							:key="n"
+							class="sl__body-item"></el-checkbox>
+					</el-checkbox-group>
+				</div>
+			</el-col>
+			<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="selectedPBom" class="sl__body">
+						<el-checkbox
+							v-for="n in 10"
+							:key="n"
+							class="sl__body-item"></el-checkbox>
+					</el-checkbox-group>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'BomSelector',
+	components: {},
+	props: {},
+	data() {
+		return {
+			searchText: '',
+			selectedEquipments: [],
+			selectedMBom: [],
+			selectedPBom: [],
+		};
+	},
+    watch: {
+        selectedEquipments: {
+            handler(val) {
+                console.log(val);
+            },
+            deep: true,
+        },
+    },
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.bom-selector {
+	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__header {
+    border-bottom: 1px solid #ccc;
+}
+</style>

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

@@ -51,65 +51,7 @@ export default {
 				pageNo: 1,
 				pageSize: 100,
 			},
-			candidate: {
-				total: 0,
-				tree: [
-					{
-						id: 1,
-						name: '设备1',
-						paramBomList: [
-							{ name: '参数BOM1', type: 'param', id: 1 },
-							{ name: '参数BOM2', type: 'param', id: 2 },
-							{ name: '参数BOM3', type: 'param', id: 3 },
-							{ name: '参数BOM4', type: 'param', id: 4 },
-							{ name: '参数BOM5', type: 'param', id: 5 },
-						],
-						materialBomList: [
-							{ name: '物料BOM1', type: 'material', id: 1 },
-							{ name: '物料BOM2', type: 'material', id: 2 },
-							{ name: '物料BOM3', type: 'material', id: 3 },
-							{ name: '物料BOM4', type: 'material', id: 4 },
-							{ name: '物料BOM5', type: 'material', id: 5 },
-						],
-					},
-					{
-						id: 2,
-						name: '设备2',
-						paramBomList: [
-							{ name: '参数BOM1', type: 'param', id: 1 },
-							{ name: '参数BOM2', type: 'param', id: 2 },
-							{ name: '参数BOM3', type: 'param', id: 3 },
-							{ name: '参数BOM4', type: 'param', id: 4 },
-							{ name: '参数BOM5', type: 'param', id: 5 },
-						],
-						materialBomList: [
-							{ name: '物料BOM1', type: 'material', id: 1 },
-							{ name: '物料BOM2', type: 'material', id: 2 },
-							{ name: '物料BOM3', type: 'material', id: 3 },
-							{ name: '物料BOM4', type: 'material', id: 4 },
-							{ name: '物料BOM5', type: 'material', id: 5 },
-						],
-					},
-					{
-						id: 3,
-						name: '设备3',
-						paramBomList: [
-							{ name: '参数BOM1', type: 'param', id: 1 },
-							{ name: '参数BOM2', type: 'param', id: 2 },
-							{ name: '参数BOM3', type: 'param', id: 3 },
-							{ name: '参数BOM4', type: 'param', id: 4 },
-							{ name: '参数BOM5', type: 'param', id: 5 },
-						],
-						materialBomList: [
-							{ name: '物料BOM1', type: 'material', id: 1 },
-							{ name: '物料BOM2', type: 'material', id: 2 },
-							{ name: '物料BOM3', type: 'material', id: 3 },
-							{ name: '物料BOM4', type: 'material', id: 4 },
-							{ name: '物料BOM5', type: 'material', id: 5 },
-						],
-					},
-				],
-			},
+			candidate: [],
 			selectedList: [],
 		};
 	},

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

@@ -63,20 +63,23 @@
 		<base-dialog
 			dialogTitle="选择设备"
 			:dialogVisible="open"
+			width="45%"
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<CustomTransfer />
+			<!-- <CustomTransfer /> -->
+			<BomSelector />
 		</base-dialog>
 	</section>
 </template>
 
 <script>
 import CustomTransfer from './CustomTransfer.vue';
+import BomSelector from './BomSelector.vue';
 
 export default {
 	name: 'ProcessBom',
-	components: { CustomTransfer },
+	components: { BomSelector },
 	props: {
 		currentDet: {
 			type: Object,

src/views/extend/processFlowView/components/candidate.js

@@ -26,6 +26,14 @@ export class Candidate {
 	get selected() {
 		return this.children.filter((child) => child.selected).length;
 	}
+
+	get paramBom() {
+		return this.children.filter((child) => child.type === 'param');
+	}
+
+	get materialBom() {
+		return this.children.filter((child) => child.type === 'material');
+	}
 }
 
 export class CandidateList {