Update 优化VbTree组件

UI/VAP_V3.VUE/src/components/tree/OrgTree.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import apis from "@a"
-import appStore from "@s"
-const props = withDefaults(
-	defineProps<{
-		modelValue?: string | number
-		data?: any
-		searchWords?: string
-		treeBoxClass?: string
-		treeBoxStyle?: string
-	}>(),
-	{
-		searchWords: "",
-		treeBoxClass: "h-100",
-		treeBoxStyle: "margin-top:15px;background: var(--bs-app-header-minimize-bg-color);"
-	}
-)
-const emits = defineEmits<{
-	(e: "update:modelValue", v: string): void
-	(e: "nodeClick", v: any): void
-}>()
-
-const { searchWords, data } = toRefs(props)
-const treeRef = ref<any>()
-const treeData = ref<any>([])
-
-const filterNode = (value: string, data: any) => {
-	if (!value) return true
-	return data.label.indexOf(value) !== -1
-}
-function handleNodeClick(data: any) {
-	emits("update:modelValue", data.id)
-	emits("nodeClick", data)
-}
-function loadTreeData() {
-	if (data?.value) {
-		treeData.value = data.value
-		if (treeData.value.length > 0) {
-			initDefaultKey(treeData.value[0].id)
-		}
-	} else {
-		apis.system.userApi.orgTreeSelect().then((res) => {
-			treeData.value = res.data
-			if (treeData.value.length > 0) {
-				initDefaultKey(treeData.value[0].id)
-			}
-		})
-	}
-}
-/** 初始化默认选中 */
-function initDefaultKey(id: any) {
-	emits("update:modelValue", id)
-	setTimeout(() => {
-		treeRef.value.setCurrentKey(id)
-	}, 50)
-}
-function setCurrentKey(id: any) {
-	if (!id) {
-		id = treeData.value[0].id
-	}
-	initDefaultKey(id)
-}
-function init() {
-	loadTreeData()
-}
-
-onMounted(init)
-/** 根据关键字筛选 */
-watch(
-	() => props.searchWords,
-	(val) => {
-		treeRef.value.filter(val)
-	}
-)
-defineExpose({
-	setCurrentKey
-})
-</script>
-<template>
-	<div :class="treeBoxClass" :style="treeBoxStyle">
-		<!-- <el-input v-model="searchWords" placeholder="请输入组织机构名称" clearable prefix-icon="Search" /> -->
-		<el-tree
-			class="pt-3"
-			ref="treeRef"
-			:data="treeData"
-			:props="{ label: 'label', children: 'children' }"
-			:expand-on-click-node="false"
-			:filter-node-method="filterNode"
-			node-key="id"
-			highlight-current
-			default-expand-all
-			@node-click="handleNodeClick" />
-	</div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-tree--highlight-current) {
-	.el-tree-node.is-current > .el-tree-node__content {
-		background-color: var(--bs-primary);
-		color: #fff;
-		border-radius: 0.25rem;
-	}
-}
-</style>

UI/VAP_V3.VUE/src/components/tree/VbTree.vue

@@ -4,7 +4,8 @@ const props = withDefaults(
 		modelValue?: string | number
 		data?: any
 		dataFun?: () => Promise<any>
-		showSearchInput?: boolean
+		initLoad?: boolean
+		search?: boolean
 		searchWords?: string
 		treeBoxClass?: string
 		treeBoxStyle?: string
@@ -14,6 +15,8 @@ const props = withDefaults(
 		searchWords: "",
 		treeBoxClass: "h-100",
 		treeBoxStyle: "margin-top:15px;background: var(--bs-app-header-minimize-bg-color);",
+		search: true,
+		initLoad: true,
 		props: () => {
 			return {
 				children: "children",
@@ -28,7 +31,8 @@ const emits = defineEmits<{
 	(e: "nodeClick", v: any): void
 }>()
 
-const { searchWords, data } = toRefs(props)
+const { data } = toRefs(props)
+const searchWords = ref(props.searchWords)
 const treeRef = ref<any>()
 const treeData = ref<any>([])
 
@@ -40,7 +44,7 @@ function handleNodeClick(data: any) {
 	emits("update:modelValue", data.id)
 	emits("nodeClick", data)
 }
-function loadTreeData() {
+function load() {
 	if (props.dataFun) {
 		props.dataFun().then((res) => {
 			treeData.value = res.data
@@ -53,7 +57,6 @@ function loadTreeData() {
 		if (treeData.value.length > 0) {
 			initDefaultKey(treeData.value[0].id)
 		}
-		console.log("----", data.value)
 	}
 }
 /** 初始化默认选中 */
@@ -70,7 +73,9 @@ function setCurrentKey(id: any) {
 	initDefaultKey(id)
 }
 function init() {
-	loadTreeData()
+	if (props.initLoad) {
+		load()
+	}
 }
 
 onMounted(init)
@@ -84,17 +89,17 @@ watchEffect(
 	}
 )
 defineExpose({
+	load,
 	setCurrentKey
 })
 </script>
 <template>
 	<div :class="treeBoxClass" :style="treeBoxStyle">
-		<el-input
-			v-if="showSearchInput"
-			v-model="searchWords"
-			placeholder="请输入关键字"
-			clearable
-			prefix-icon="Search" />
+		<el-input v-if="search" v-model="searchWords" placeholder="请输入关键字" clearable>
+			<template #prefix>
+				<i class="fs-4 bi bi-search"></i>
+			</template>
+		</el-input>
 		<el-tree
 			class="pt-3"
 			ref="treeRef"