From d2f50c93889cb4614d6638a0e0bd12602493bc2c Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Thu, 9 Oct 2025 18:23:35 +0800
Subject: [PATCH] fix: tree bugs

---
 .../modules/assign-data-permission-form.vue   | 26 +++++++++---------
 .../system/role/modules/assign-menu-form.vue  | 25 ++++++++---------
 .../system/tenantPackage/modules/form.vue     | 25 ++++++++---------
 .../views/system/user/modules/dept-tree.vue   | 27 ++++++++++---------
 .../modules/assign-data-permission-form.vue   |  7 +++--
 .../system/role/modules/assign-menu-form.vue  |  4 +--
 .../system/tenantPackage/modules/form.vue     |  4 +--
 7 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue b/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
index 681f9df4c..c453246b2 100644
--- a/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
+++ b/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
@@ -8,7 +8,7 @@ import { Tree, useVbenModal } from '@vben/common-ui';
 import { SystemDataScopeEnum } from '@vben/constants';
 import { handleTree } from '@vben/utils';
 
-import { Checkbox, message } from 'ant-design-vue';
+import { Checkbox, message, Spin } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { getDeptList } from '#/api/system/dept';
@@ -134,18 +134,18 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
   <Modal title="数据权限" class="w-2/5">
     <Form class="mx-4">
       <template #dataScopeDeptIds="slotProps">
-        <Tree
-          :tree-data="deptTree"
-          multiple
-          bordered
-          :spinning="deptLoading"
-          :expanded="expandedKeys"
-          v-bind="slotProps"
-          value-field="id"
-          label-field="name"
-          :auto-check-parent="false"
-          :check-strictly="!isCheckStrictly"
-        />
+        <Spin :spinning="deptLoading" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="deptTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            v-bind="slotProps"
+            :check-strictly="!isCheckStrictly"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
       </template>
     </Form>
     <template #prepend-footer>
diff --git a/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue b/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
index 35195cca0..de7b51cc7 100644
--- a/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
+++ b/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
@@ -10,7 +10,7 @@ import { Tree, useVbenModal } from '@vben/common-ui';
 import { SystemMenuTypeEnum } from '@vben/constants';
 import { handleTree } from '@vben/utils';
 
-import { Checkbox, message } from 'ant-design-vue';
+import { Checkbox, message, Spin } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { getSimpleMenusList } from '#/api/system/menu';
@@ -142,17 +142,18 @@ function getNodeClass(node: Recordable<any>) {
   <Modal title="菜单权限" class="w-2/5">
     <Form class="mx-4">
       <template #menuIds="slotProps">
-        <Tree
-          :spinning="menuLoading"
-          :tree-data="menuTree"
-          multiple
-          bordered
-          :expanded="expandedKeys"
-          :get-node-class="getNodeClass"
-          v-bind="slotProps"
-          value-field="id"
-          label-field="name"
-        />
+        <Spin :spinning="menuLoading" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="menuTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
       </template>
     </Form>
     <template #prepend-footer>
diff --git a/apps/web-antd/src/views/system/tenantPackage/modules/form.vue b/apps/web-antd/src/views/system/tenantPackage/modules/form.vue
index 716da1942..19702165b 100644
--- a/apps/web-antd/src/views/system/tenantPackage/modules/form.vue
+++ b/apps/web-antd/src/views/system/tenantPackage/modules/form.vue
@@ -7,7 +7,7 @@ import { computed, ref } from 'vue';
 import { Tree, useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
-import { Checkbox, message } from 'ant-design-vue';
+import { Checkbox, message, Spin } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { getMenuList } from '#/api/system/menu';
@@ -134,17 +134,18 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
   <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-6">
       <template #menuIds="slotProps">
-        <Tree
-          class="max-h-96 overflow-y-auto"
-          :loading="menuLoading"
-          :tree-data="menuTree"
-          multiple
-          bordered
-          :expanded="expandedKeys"
-          v-bind="slotProps"
-          value-field="id"
-          label-field="name"
-        />
+        <Spin :spinning="menuLoading" wrapper-class-name="w-full">
+          <Tree
+            class="max-h-96 overflow-y-auto"
+            :tree-data="menuTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
       </template>
     </Form>
     <template #prepend-footer>
diff --git a/apps/web-antd/src/views/system/user/modules/dept-tree.vue b/apps/web-antd/src/views/system/user/modules/dept-tree.vue
index 9b86c0820..a65624c75 100644
--- a/apps/web-antd/src/views/system/user/modules/dept-tree.vue
+++ b/apps/web-antd/src/views/system/user/modules/dept-tree.vue
@@ -6,7 +6,7 @@ import { onMounted, ref } from 'vue';
 import { Search } from '@vben/icons';
 import { handleTree } from '@vben/utils';
 
-import { Input, Tree } from 'ant-design-vue';
+import { Input, Spin, Tree } from 'ant-design-vue';
 
 import { getSimpleDeptList } from '#/api/system/dept';
 
@@ -64,17 +64,18 @@ onMounted(async () => {
         <Search class="size-4" />
       </template>
     </Input>
-    <Tree
-      :spinning="loading"
-      class="pt-2"
-      v-if="deptTree.length > 0"
-      :tree-data="deptTree"
-      :field-names="{ title: 'name', key: 'id', children: 'children' }"
-      @select="handleSelect"
-      :default-expand-all="true"
-    />
-    <div v-else-if="!loading" class="py-4 text-center text-gray-500">
-      暂无数据
-    </div>
+    <Spin :spinning="loading" wrapper-class-name="w-full">
+      <Tree
+        @select="handleSelect"
+        v-if="deptTree.length > 0"
+        class="pt-2"
+        :tree-data="deptTree"
+        :default-expand-all="true"
+        :field-names="{ title: 'name', key: 'id', children: 'children' }"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </Spin>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue b/apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue
index eff05d32e..c78f904b0 100644
--- a/apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue
+++ b/apps/web-ele/src/views/system/role/modules/assign-data-permission-form.vue
@@ -135,16 +135,15 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
     <Form class="mx-4">
       <template #dataScopeDeptIds="slotProps">
         <Tree
+          v-loading="deptLoading"
           :tree-data="deptTree"
           multiple
           bordered
-          :spinning="deptLoading"
-          :expanded="expandedKeys"
+          :default-expanded-keys="expandedKeys"
           v-bind="slotProps"
+          :check-strictly="!isCheckStrictly"
           value-field="id"
           label-field="name"
-          :auto-check-parent="false"
-          :check-strictly="!isCheckStrictly"
         />
       </template>
     </Form>
diff --git a/apps/web-ele/src/views/system/role/modules/assign-menu-form.vue b/apps/web-ele/src/views/system/role/modules/assign-menu-form.vue
index dedd853ec..463a16a30 100644
--- a/apps/web-ele/src/views/system/role/modules/assign-menu-form.vue
+++ b/apps/web-ele/src/views/system/role/modules/assign-menu-form.vue
@@ -143,11 +143,11 @@ function getNodeClass(node: Recordable<any>) {
     <Form class="mx-4">
       <template #menuIds="slotProps">
         <Tree
-          :spinning="menuLoading"
+          v-loading="menuLoading"
           :tree-data="menuTree"
           multiple
           bordered
-          :expanded="expandedKeys"
+          :default-expanded-keys="expandedKeys"
           :get-node-class="getNodeClass"
           v-bind="slotProps"
           value-field="id"
diff --git a/apps/web-ele/src/views/system/tenantPackage/modules/form.vue b/apps/web-ele/src/views/system/tenantPackage/modules/form.vue
index b54d0a210..c789d6417 100644
--- a/apps/web-ele/src/views/system/tenantPackage/modules/form.vue
+++ b/apps/web-ele/src/views/system/tenantPackage/modules/form.vue
@@ -135,12 +135,12 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
     <Form class="mx-6">
       <template #menuIds="slotProps">
         <Tree
+          v-loading="menuLoading"
           class="max-h-96 overflow-y-auto"
-          :loading="menuLoading"
           :tree-data="menuTree"
           multiple
           bordered
-          :expanded="expandedKeys"
+          :default-expanded-keys="expandedKeys"
           v-bind="slotProps"
           value-field="id"
           label-field="name"