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

@@ -18,7 +18,9 @@
 		</div>
 		<div
 			class="ct__bom-list"
-			:class="{ hidden: active && bomListLength > 0 ? false : true }">
+			:class="{
+				hidden: active && bomListLength > 0 ? false : true,
+			}">
 			<ul class="param-bom">
 				<li v-for="bom in equipment.paramBomList" :key="bom.name">
 					{{ bom.name }}
@@ -94,16 +96,16 @@ li {
 }
 
 ul {
-    display: flex;
+	display: flex;
-    flex-direction: column;
+	flex-direction: column;
-    gap: 4px;
+	gap: 4px;
-    margin-top: 4px;
+	margin-top: 4px;
 }
 
 .material-bom > li,
 .param-bom > li {
 	padding: 4px 24px;
-    background: #0001;
+	background: #0001;
-    border-radius: 4px;
+	border-radius: 4px;
 }
 </style>

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

@@ -51,8 +51,66 @@ export default {
 				pageNo: 1,
 				pageSize: 100,
 			},
-            candidateList: [],
+			candidate: {
-            selectedList: [],
+				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 },
+						],
+					},
+				],
+			},
+			selectedList: [],
 		};
 	},
 	computed: {},
@@ -101,8 +159,8 @@ export default {
 			}
 			this.bomLoading = false;
 		},
-        //
+		//
-        handleChange() {}
+		handleChange() {},
 	},
 };
 </script>

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

@@ -26,7 +26,7 @@
 				<i slot="prefix" class="el-input__icon el-icon-search"></i>
 			</el-input>
 
-			<custom-tree />
+			<custom-tree :raw-data="candidateList" />
 		</div>
 		<div class="ctb-footer">
 			<pagination

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

@@ -7,28 +7,11 @@
 
 <template>
 	<div class="custom-tree">
-		<div v-for="n in 5" :key="n">
+		<div v-for="equipment in rawData" :key="eq.id">
 			<CustomBomList
 				@open="closeOthers"
-				:active="activeId == n"
+				:active="activeId == eq.id"
-				:equipment="{
+				:equipment="equipment" />
-					id: n,
-					name: '设备' + n,
-					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 },
-					],
-				}" />
 		</div>
 	</div>
 </template>
@@ -39,7 +22,12 @@ import CustomBomList from './CustomBomList.vue';
 export default {
 	name: 'CustomTree',
 	components: { CustomBomList },
-	props: {},
+	props: {
+		rawData: {
+			type: Array,
+			default: () => [],
+		},
+	},
 	data() {
 		return {
 			showList: false,

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

@@ -0,0 +1,43 @@
+export class Candidate {
+	constructor(id, name, paramBomList, materialBomList) {
+		this.equipmentId = id;
+		this.equipmentName = name;
+		this.children = [];
+		this.totalBom = paramBomList.length + materialBomList.length;
+		this.selected = false;
+		paramBomList.forEach((pb) => {
+			this.children.push({
+				id: pb.id,
+				name: pb.name,
+				type: 'param',
+				selected: false,
+			});
+		});
+		materialBomList.forEach((mb) => {
+			this.children.push({
+				id: mb.id,
+				name: mb.name,
+				type: 'material',
+				selected: false,
+			});
+		});
+	}
+
+	get selected() {
+		return this.children.filter((child) => child.selected).length;
+	}
+}
+
+export class CandidateList {
+	constructor() {
+		this.value = [];
+	}
+
+	addCandidate(candidate) {
+		this.value.push(candidate);
+	}
+
+	get selected() {
+		return this.list.filter((candidate) => candidate.selected).length;
+	}
+}