封装树形组件

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>

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()
 }