修改

zdxt-web-client/zdxt-admin-plus-ui/src/views/system/dept/index.vue

@@ -38,13 +38,15 @@
       </template>
 
       <el-table
+        :key="tableKey"
         ref="deptTableRef"
         v-loading="loading"
         :data="deptList"
         row-key="deptId"
         border
+        lazy
+        :load="loadChildren"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-        :default-expand-all="isExpandAll"
       >
         <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
         <el-table-column prop="deptCategory" align="center" label="类别编码" width="200"></el-table-column>
@@ -160,8 +162,10 @@ const deptList = ref<DeptVO[]>([]);
 const loading = ref(true);
 const showSearch = ref(true);
 const deptOptions = ref<DeptOptionsType[]>([]);
-const isExpandAll = ref(true);
+const isExpandAll = ref(false);
 const deptUserList = ref<UserVO[]>([]);
+const childrenMap = ref<Map<string, DeptVO[]>>(new Map());
+const tableKey = ref(0);
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -204,17 +208,41 @@ const data = reactive<PageData<DeptForm, DeptQuery>>(initData);
 
 const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data);
 
-/** 查询菜单列表 */
+/** 查询部门列表 */
 const getList = async () => {
   loading.value = true;
   const res = await listDept(queryParams.value);
-  const data = proxy?.handleTree<DeptVO>(res.data, 'deptId');
-  if (data) {
-    deptList.value = data;
-  }
+  tableKey.value++;
+  await nextTick();
+  buildLazyData(res.data);
   loading.value = false;
 };
 
+/** 构建懒加载数据（客户端缓存，按需渲染） */
+const buildLazyData = (data: DeptVO[]) => {
+  const map = new Map<string, DeptVO[]>();
+  const allIds = new Set(data.map((d) => String(d.deptId)));
+
+  for (const item of data) {
+    const pid = String(item.parentId);
+    if (!map.has(pid)) map.set(pid, []);
+    map.get(pid)!.push(item);
+  }
+
+  for (const item of data) {
+    (item as any).hasChildren = map.has(String(item.deptId));
+  }
+
+  childrenMap.value = map;
+  deptList.value = data.filter((d) => !allIds.has(String(d.parentId)));
+};
+
+/** 懒加载子节点 */
+const loadChildren = (row: DeptVO, _treeNode: any, resolve: (data: DeptVO[]) => void) => {
+  const children = childrenMap.value.get(String(row.deptId)) || [];
+  resolve(children);
+};
+
 /** 查询当前部门的所有用户 */
 async function getDeptAllUser(deptId: any) {
   if (deptId !== null && deptId !== '' && deptId !== undefined) {
@@ -244,16 +272,11 @@ const resetQuery = () => {
   handleQuery();
 };
 
-/** 展开/折叠操作 */
+/** 展开/折叠操作（仅切换根节点） */
 const handleToggleExpandAll = () => {
   isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(deptList.value, isExpandAll.value);
-};
-/** 展开/折叠所有 */
-const toggleExpandAll = (data: DeptVO[], status: boolean) => {
-  data.forEach((item) => {
-    deptTableRef.value?.toggleRowExpansion(item, status);
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
+  deptList.value.forEach((item) => {
+    deptTableRef.value?.toggleRowExpansion(item, isExpandAll.value);
   });
 };
 

zdxt-web-client/zdxt-admin-plus-ui/src/views/system/dict/index-manager.vue

@@ -234,7 +234,7 @@ const initTypeForm: DictTypeForm = {
 
 const typeQueryParams = reactive<DictTypeQuery>({
   pageNum: 1,
-  pageSize: 20,
+  pageSize: 18,
   dictName: '',
   dictType: ''
 });
@@ -366,7 +366,7 @@ const initDataForm: DictDataForm = {
 
 const dataQueryParams = reactive<DictDataQuery>({
   pageNum: 1,
-  pageSize: 20,
+  pageSize: 18,
   dictName: '',
   dictType: '',
   dictLabel: ''

zdxt-web-client/zdxt-admin-plus-ui/src/views/system/post/index.vue

@@ -3,8 +3,9 @@
     <el-row :gutter="20">
       <!-- 部门树 -->
       <el-col :lg="4" :xs="24" style="">
-        <el-card shadow="hover">
+        <el-card shadow="hover" style="position: sticky; top: 0;">
           <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
+          <div style="max-height: calc(100vh - 180px); overflow-y: auto; overflow-x: hidden;">
             <el-tree
               ref="deptTreeRef"
               class="mt-2"
@@ -14,9 +15,10 @@
               :expand-on-click-node="false"
               :filter-node-method="filterNode"
               highlight-current
-            default-expand-all
+              :default-expanded-keys="deptExpandedKeys"
               @node-click="handleNodeClick"
             />
+          </div>
         </el-card>
       </el-col>
       <el-col :lg="20" :xs="24">
@@ -170,9 +172,10 @@
 </template>
 
 <script setup name="Post" lang="ts">
-import { listPost, addPost, delPost, getPost, updatePost, deptTreeSelect } from '@/api/system/post';
+import { listPost, addPost, delPost, getPost, updatePost } from '@/api/system/post';
 import { PostForm, PostQuery, PostVO } from '@/api/system/post/types';
 import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
+import { deptTreeSelect } from '@/api/system/user';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));
@@ -189,6 +192,18 @@ const deptOptions = ref<DeptTreeVO[]>([]);
 const deptTreeRef = ref<ElTreeInstance>();
 const postFormRef = ref<ElFormInstance>();
 const queryFormRef = ref<ElFormInstance>();
+const deptExpandedKeys = ref<(string | number)[]>([]);
+
+/** 收集前 N 层节点的 id，用于默认展开 */
+const collectExpandKeys = (nodes: DeptTreeVO[], currentLevel: number, maxLevel: number) => {
+  if (currentLevel > maxLevel) return;
+  for (const node of nodes) {
+    deptExpandedKeys.value.push(node.id);
+    if (node.children?.length) {
+      collectExpandKeys(node.children, currentLevel + 1, maxLevel);
+    }
+  }
+};
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -248,6 +263,8 @@ watchEffect(
 const getTreeSelect = async () => {
   const res = await deptTreeSelect();
   deptOptions.value = res.data;
+  deptExpandedKeys.value = [];
+  collectExpandKeys(res.data, 1, 2);
 };
 
 /** 节点单击事件 */