add custom tree

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

@@ -0,0 +1,109 @@
+<!-- 
+    filename: CustomBomList.vue
+    author: liubin
+    date: 2023-11-17 14:06:04
+    description: 
+-->
+
+<template>
+	<div class="custom-bom-list—wrapper">
+		<div
+			class="ct__equipment-name"
+			@click.prevent="
+				() => {
+					$emit('open', equipment.id);
+				}
+			">
+			{{ equipment.name }}
+		</div>
+		<div
+			class="ct__bom-list"
+			:class="{ hidden: active && bomListLength > 0 ? false : true }">
+			<ul class="param-bom">
+				<li v-for="bom in equipment.paramBomList" :key="bom.name">
+					{{ bom.name }}
+				</li>
+			</ul>
+			<ul class="material-bom">
+				<li v-for="bom in equipment.materialBomList" :key="bom.name">
+					{{ bom.name }}
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CustomBomList',
+	components: {},
+	props: {
+		equipment: {
+			type: Object,
+			default: () => ({}),
+		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		bomListLength() {
+			return (
+				(this.equipment.paramBomList?.length || 0) +
+				(this.equipment.materialBomList?.length || 0)
+			);
+		},
+	},
+	data() {
+		return {
+			showList: false,
+		};
+	},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+// .custom-bom-list—wrapper {
+//     height: auto;
+//     transition: height .2s ease-in-out;
+// }
+
+.ct__equipment-name {
+	background: #0001;
+	padding: 8px;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: all 0.3s;
+
+	&:hover {
+		background: #0002;
+	}
+}
+
+.hidden {
+	display: none;
+}
+
+ul,
+li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+ul {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 4px;
+}
+
+.material-bom > li,
+.param-bom > li {
+	padding: 4px 24px;
+    background: #0001;
+    border-radius: 4px;
+}
+</style>

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

@@ -11,8 +11,8 @@
 			key="left"
 			class="left-ctb"
 			title="设备列表"
-			:candidate-list="[]"
+			:candidate-list="candidateList"
-			:selected-list="[]"
+			:selected-list="selectedList"
 			@selected-list-change="handleChange" />
 		<div
 			class="btns"
@@ -51,6 +51,8 @@ export default {
 				pageNo: 1,
 				pageSize: 100,
 			},
+            candidateList: [],
+            selectedList: [],
 		};
 	},
 	computed: {},
@@ -112,7 +114,6 @@ export default {
 }
 
 .btns {
-	border: 1px solid #ccc;
 	padding: 10px;
 }
 

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

@@ -18,15 +18,34 @@
 				项
 			</span>
 		</div>
-		<div class="ctb-main"></div>
+		<div class="ctb-main">
-		<div class="ctb-footer"></div>
+			<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>
+
+			<custom-tree />
+		</div>
+		<div class="ctb-footer">
+			<pagination
+				v-show="1"
+				style="padding: 0"
+				:total="total"
+				:page.sync="queryParams.pageNo"
+				:limit.sync="queryParams.pageSize"
+				@pagination="getList" />
+		</div>
 	</div>
 </template>
 
 <script>
+import CustomTree from './CustomTree.vue';
+
 export default {
 	name: 'CustomTransferBox',
-	components: {},
+	components: { CustomTree },
 	props: {
 		title: {
 			type: String,
@@ -42,10 +61,21 @@ export default {
 		},
 	},
 	data() {
-		return {};
+		return {
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			total: 0,
+			searchText: '',
+		};
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		getList() {
+			this.$emit('get-list', this.queryParams);
+		},
+	},
 };
 </script>
 
@@ -70,7 +100,9 @@ export default {
 	flex: 1;
 	padding: 12px;
 }
+
 .ctb-footer {
+	user-select: none;
 	min-height: 12px;
 	padding: 12px;
 	border-top: 1px solid #ccc;

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

@@ -0,0 +1,65 @@
+<!-- 
+    filename: CustomTree.vue
+    author: liubin
+    date: 2023-11-17 13:53:16
+    description: 
+-->
+
+<template>
+	<div class="custom-tree">
+		<div v-for="n in 5" :key="n">
+			<CustomBomList
+				@open="closeOthers"
+				:active="activeId == n"
+				: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>
+
+<script>
+import CustomBomList from './CustomBomList.vue';
+
+export default {
+	name: 'CustomTree',
+	components: { CustomBomList },
+	props: {},
+	data() {
+		return {
+			showList: false,
+			activeId: null,
+		};
+	},
+	computed: {},
+	methods: {
+		closeOthers(id) {
+			this.activeId = id;
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.custom-tree {
+	// background: #0001;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+</style>