封装树形组件

src/components/QueryTree/index.vue

@@ -2,7 +2,13 @@
 	<div class="head-container">
 		<div class="head-container-header">
 			<div class="head-container-header-input">
-				<el-input v-model="searchName" suffix-icon="search" :placeholder="placeholder" clearable @change="getdeptTree" />
+				<el-input
+					v-model="searchName"
+					suffix-icon="search"
+					:placeholder="placeholder"
+					clearable
+					@change="getdeptTree"
+				/>
 			</div>
 			<div class="head-container-header-dropdown" v-if="showExpand">
 				<el-dropdown :hide-on-click="false">
@@ -19,7 +25,7 @@
 									:icon="isExpand ? 'expand' : 'fold'"
 									@click="toggleRowExpansionAll(isExpand ? false : true)"
 								>
-									{{ isExpand ? '折叠' : '展开' }}
+									{{ isExpand ? "折叠" : "展开" }}
 								</el-button>
 							</el-dropdown-item>
 						</el-dropdown-menu>
@@ -47,8 +53,8 @@
 </template>
 
 <script setup lang="ts" name="query-tree">
-import { useMessage } from '/@/hooks/message';
-const emit = defineEmits(['search', 'nodeClick']);
+import { useMessage } from "/@/hooks/message"
+const emit = defineEmits(["search", "nodeClick"])
 
 const props = defineProps({
 	/**
@@ -60,10 +66,10 @@ const props = defineProps({
 		type: Object,
 		default: () => {
 			return {
-				label: 'name',
-				children: 'children',
-				value: 'id',
-			};
+				label: "name",
+				children: "children",
+				value: "id",
+			}
 		},
 	},
 
@@ -74,7 +80,7 @@ const props = defineProps({
 	 */
 	placeholder: {
 		type: String,
-		default: '',
+		default: "",
 	},
 
 	/**
@@ -102,20 +108,20 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
-});
+})
 
 const state = reactive({
 	List: [], // 树形结构列表数据
 	localLoading: props.loading, // 是否加载中
-});
+})
 
-const deptTreeRef = ref(); // 部门树形结构组件实例引用
-const searchName = ref(); // 查询关键字
-const isExpand = ref(true); // 是否展开所有节点
+const deptTreeRef = ref() // 部门树形结构组件实例引用
+const searchName = ref() // 查询关键字
+const isExpand = ref(true) // 是否展开所有节点
 
 const buttonClass = computed(() => {
-	return ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary'];
-});
+	return ["!h-[20px]", "reset-margin", "!text-gray-500", "dark:!text-white", "dark:hover:!text-primary"]
+})
 
 /**
  * 点击树形结构节点触发的事件。
@@ -123,31 +129,31 @@ const buttonClass = computed(() => {
  * @param item 被点击的节点数据。
  */
 const handleNodeClick = (item: any) => {
-	emit('nodeClick', item);
-};
+	emit("nodeClick", item)
+}
 
 /**
  * 获取部门树形结构数据。
  */
 const getdeptTree = () => {
 	if (props.query instanceof Function) {
-		state.localLoading = true;
+		state.localLoading = true
 
 		// 调用传入的查询函数，并将查询关键字作为参数传入
-		const result = props.query(unref(searchName));
+		const result = props.query(unref(searchName))
 
 		// 如果查询结果为 Promise 类型，则进行后续处理
-		if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
+		if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
 			result
 				.then((r: any) => {
-					state.List = r.data;
+					state.List = r.data
 				})
 				.catch((err) => {
-					useMessage().error(err.msg);
-				});
+					useMessage().error(err.msg)
+				})
 		}
 	}
-};
+}
 
 /**
  * 切换所有节点的展开/收起状态。
@@ -155,21 +161,21 @@ const getdeptTree = () => {
  * @param status 目标状态，true 为展开，false 为收起。
  */
 const toggleRowExpansionAll = (status) => {
-	isExpand.value = status;
-	const nodes = deptTreeRef.value.store._getAllNodes();
+	isExpand.value = status
+	const nodes = deptTreeRef.value.store._getAllNodes()
 	for (let i = 0; i < nodes.length; i++) {
-		nodes[i].expanded = status;
+		nodes[i].expanded = status
 	}
-};
+}
 
 onMounted(() => {
-	getdeptTree();
-});
+	getdeptTree()
+})
 
 // 方便父组件调用刷新树方法
 defineExpose({
 	getdeptTree,
-});
+})
 </script>
 <style lang="scss" scoped>
 .head-container {