From bb4d31b4942d25ed55e131c31972b782da2a61d0 Mon Sep 17 00:00:00 2001
From: ctw <>
Date: Tue, 21 Jan 2025 17:02:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E6=A0=91=E5=BD=A2=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DepTree/index.vue            | 196 ++++++++++++++++++++
 src/components/QueryTree/index.vue          |  70 +++----
 src/components/index.ts                     |   3 +
 src/views/admin/system/user/face-manage.vue |   4 +-
 src/views/admin/system/user/index.vue       |  24 +--
 5 files changed, 249 insertions(+), 48 deletions(-)
 create mode 100644 src/components/DepTree/index.vue

diff --git a/src/components/DepTree/index.vue b/src/components/DepTree/index.vue
new file mode 100644
index 0000000..1eddc3b
--- /dev/null
+++ b/src/components/DepTree/index.vue
@@ -0,0 +1,196 @@
+<template>
+	<div class="container">
+		<!-- 头部区域 -->
+		<div class="container-header">
+			<div class="container-header-input">
+				<el-input
+					v-model="searchName"
+					suffix-icon="search"
+					:placeholder="placeholder"
+					clearable
+					@change="getTreeData"
+				/>
+			</div>
+			<div class="container-header-dropdown" v-if="showExpand">
+				<el-dropdown :hide-on-click="false">
+					<el-icon style="transform: rotate(90deg)">
+						<MoreFilled />
+					</el-icon>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item>
+								<el-button
+									class="!h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
+									link
+									:icon="isExpand ? 'expand' : 'fold'"
+									@click="toggleRowExpansionAll(isExpand ? false : true)"
+								>
+									{{ isExpand ? "折叠" : "展开" }}
+								</el-button>
+							</el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
+			</div>
+		</div>
+
+		<!-- 树形结构 -->
+		<div class="container-tree">
+			<el-tree
+				ref="depTreeRef"
+				:props="props.props"
+				:data="state.treeList"
+				:expand-on-click-node="false"
+				:loading="state.loading"
+				node-key="id"
+				highlight-current
+				default-expand-all
+				@node-click="handleNodeClick"
+			>
+				<template #default="{ node, data }" v-if="$slots.default">
+					<slot :node="node" :data="data" />
+				</template>
+			</el-tree>
+		</div>
+
+		<!-- 底部区域 -->
+		<div class="container-switch">
+			<el-switch
+				v-model="state.isDeep"
+				@change="handleTreeDeepSearch"
+				:inactive-text="switchInactiveText"
+				:active-text="switchActiveText"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="dep-tree">
+import { useMessage } from "/@/hooks/message"
+
+const props = withDefaults(
+	defineProps<{
+		placeholder?: string // 输入框占位符
+		loading?: boolean // 加载中的状态
+		showExpand?: boolean // 折叠控制
+		query?: (searchName?: string) => Promise<any> // 查询函数
+		props?: object
+		switchInactiveText?: string | undefined
+		switchActiveText?: string | undefined
+	}>(),
+	{
+		placeholder: "",
+		loading: false,
+		showExpand: true,
+		query: () => new Promise((resolve) => resolve([])),
+		props: () => {
+			return {
+				label: "name",
+				children: "children",
+				value: "id",
+			}
+		},
+		switchInactiveText: "当前级",
+		switchActiveText: "当前级及子级",
+	},
+)
+const emit = defineEmits(["nodeClick", "treeDeepSearch"])
+
+const state = reactive({
+	treeList: [],
+	loading: props.loading,
+	isDeep: false,
+})
+
+const depTreeRef = ref()
+const searchName = ref() // 查询关键字
+const isExpand = ref(true) // 是否展开所有节点
+
+// 获取部门树形结构数据
+const getTreeData = () => {
+	if (props.query instanceof Function) {
+		state.loading = true
+
+		// 调用传入的查询函数，并将查询关键字作为参数传入
+		const result = props.query(unref(searchName))
+
+		// 如果查询结果为 Promise 类型，则进行后续处理
+		if ((typeof result === "object" || typeof result === "function") && typeof result.then === "function") {
+			result
+				.then((r: any) => {
+					state.treeList = r.data
+				})
+				.catch((err) => {
+					useMessage().error(err.msg)
+				})
+				.finally(() => (state.loading = false))
+		}
+	}
+}
+
+// 点击树形结构节点
+const handleNodeClick = (item: any) => emit("nodeClick", item)
+
+// 节点深度搜索
+const handleTreeDeepSearch = () => emit("treeDeepSearch", state.isDeep)
+
+// 切换所有节点的展开/收起状态。status：true 为展开，false 为收起
+const toggleRowExpansionAll = (status: boolean) => {
+	isExpand.value = status
+	const nodes = depTreeRef.value.store._getAllNodes()
+	for (let i = 0; i < nodes.length; i++) {
+		nodes[i].expanded = status
+	}
+}
+
+onMounted(() => {
+	getTreeData()
+})
+
+defineExpose({
+	getTreeData,
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	&-header {
+		display: flex;
+		align-items: center;
+		padding-bottom: 10px;
+		box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+		z-index: 10;
+
+		&-input {
+			width: 90%;
+		}
+		&-dropdown {
+			flex: 1;
+			margin-left: 5%;
+			line-height: 100%;
+		}
+	}
+
+	&-tree {
+		flex: 1;
+		overflow: hidden;
+
+		&:hover {
+			overflow: auto;
+		}
+	}
+
+	&-switch {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding-top: 10px;
+		box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+		z-index: 10;
+	}
+}
+</style>
diff --git a/src/components/QueryTree/index.vue b/src/components/QueryTree/index.vue
index c51194c..ffda414 100644
--- a/src/components/QueryTree/index.vue
+++ b/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 {
diff --git a/src/components/index.ts b/src/components/index.ts
index cae1a9d..3c2dbe3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -12,6 +12,7 @@ import Tip from "/@/components/Tip/index.vue"
 import TagList from "/@/components/TagList/index.vue"
 import SvgIcon from "/@/components/SvgIcon/index.vue"
 import PreviewImage from "/@/components/PreviewImage/index.vue"
+import DepTree from "/@/components/DepTree/index.vue"
 
 // 业务组件
 import SelectUser from "/@/components/Select/SelectUser.vue"
@@ -56,6 +57,8 @@ export default {
 		app.component("TagList", TagList)
 		app.component("SvgIcon", SvgIcon)
 		app.component("PreviewImage", PreviewImage)
+		app.component("DepTree", DepTree)
+
 		app.component("SelectUser", SelectUser)
 		app.component("SelectWalletType", SelectWalletType)
 		app.component("SelectMch", SelectMch)
diff --git a/src/views/admin/system/user/face-manage.vue b/src/views/admin/system/user/face-manage.vue
index aba601c..c5d0c59 100644
--- a/src/views/admin/system/user/face-manage.vue
+++ b/src/views/admin/system/user/face-manage.vue
@@ -19,8 +19,8 @@
 				</el-table-column>
 				<el-table-column prop="address" align="center" label="操作">
 					<template #default="{ row }">
-						<el-button link type="primary" @click="editFace(row)"> <Icon icon="ep:edit" />修改 </el-button>
-						<el-button link type="danger" @click="delFace(row)"> 删除 </el-button>
+						<el-button link type="primary" @click="editFace(row)">修改</el-button>
+						<el-button link type="danger" @click="delFace(row)">删除</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
diff --git a/src/views/admin/system/user/index.vue b/src/views/admin/system/user/index.vue
index 5f2bada..96590fb 100644
--- a/src/views/admin/system/user/index.vue
+++ b/src/views/admin/system/user/index.vue
@@ -1,15 +1,18 @@
 <template>
 	<div class="layout-padding">
 		<splitpanes>
-			<pane size="15">
+			<pane size="30">
 				<div class="layout-padding-auto layout-padding-view">
 					<el-scrollbar>
-						<query-tree
+						<dep-tree
 							ref="queryTreeRef"
 							:placeholder="$t('common.queryDeptTip')"
 							:query="deptData.queryList"
 							:show-expand="true"
 							@node-click="handleNodeClick"
+							@treeDeepSearch="treeDeepSearch"
+							switch-inactive-text="当前部门"
+							switch-active-text="当前部门及子部门"
 						>
 							<!-- 没有数据权限提示 -->
 							<template #default="{ node, data }">
@@ -20,23 +23,15 @@
 									:content="$t('sysuser.noDataScopeTip')"
 									placement="right-start"
 								>
-									<span
-										>{{ node.label }}
+									<span>
+										{{ node.label }}
 										<SvgIcon name="ele-Lock" />
 									</span>
 								</el-tooltip>
 								<span v-if="!data.isLock">{{ node.label }}</span>
 							</template>
-						</query-tree>
+						</dep-tree>
 					</el-scrollbar>
-					<div class="flex justify-center items-center pt-2">
-						<el-switch
-							v-model="state.queryForm.isDeepDept"
-							@change="isDeepDeptChange"
-							inactive-text="当前部门"
-							active-text="当前部门及子部门"
-						/>
-					</div>
 				</div>
 			</pane>
 			<pane class="ml8">
@@ -269,7 +264,8 @@ const deptData = reactive({
 	},
 })
 
-const isDeepDeptChange = () => {
+const treeDeepSearch = (isDeep: boolean) => {
+	state.queryForm.isDeepDept = isDeep
 	getDataList()
 }