fix: tree bugs

This commit is contained in:
xingyu4j
2025-10-09 18:23:35 +08:00
parent f63dc0ecef
commit d2f50c9388
7 changed files with 60 additions and 58 deletions

View File

@@ -8,7 +8,7 @@ import { Tree, useVbenModal } from '@vben/common-ui';
import { SystemDataScopeEnum } from '@vben/constants'; import { SystemDataScopeEnum } from '@vben/constants';
import { handleTree } from '@vben/utils'; 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 { useVbenForm } from '#/adapter/form';
import { getDeptList } from '#/api/system/dept'; import { getDeptList } from '#/api/system/dept';
@@ -134,18 +134,18 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
<Modal title="数据权限" class="w-2/5"> <Modal title="数据权限" class="w-2/5">
<Form class="mx-4"> <Form class="mx-4">
<template #dataScopeDeptIds="slotProps"> <template #dataScopeDeptIds="slotProps">
<Tree <Spin :spinning="deptLoading" wrapper-class-name="w-full">
:tree-data="deptTree" <Tree
multiple :tree-data="deptTree"
bordered multiple
:spinning="deptLoading" bordered
:expanded="expandedKeys" :default-expanded-keys="expandedKeys"
v-bind="slotProps" v-bind="slotProps"
value-field="id" :check-strictly="!isCheckStrictly"
label-field="name" value-field="id"
:auto-check-parent="false" label-field="name"
:check-strictly="!isCheckStrictly" />
/> </Spin>
</template> </template>
</Form> </Form>
<template #prepend-footer> <template #prepend-footer>

View File

@@ -10,7 +10,7 @@ import { Tree, useVbenModal } from '@vben/common-ui';
import { SystemMenuTypeEnum } from '@vben/constants'; import { SystemMenuTypeEnum } from '@vben/constants';
import { handleTree } from '@vben/utils'; 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 { useVbenForm } from '#/adapter/form';
import { getSimpleMenusList } from '#/api/system/menu'; import { getSimpleMenusList } from '#/api/system/menu';
@@ -142,17 +142,18 @@ function getNodeClass(node: Recordable<any>) {
<Modal title="菜单权限" class="w-2/5"> <Modal title="菜单权限" class="w-2/5">
<Form class="mx-4"> <Form class="mx-4">
<template #menuIds="slotProps"> <template #menuIds="slotProps">
<Tree <Spin :spinning="menuLoading" wrapper-class-name="w-full">
:spinning="menuLoading" <Tree
:tree-data="menuTree" :tree-data="menuTree"
multiple multiple
bordered bordered
:expanded="expandedKeys" :default-expanded-keys="expandedKeys"
:get-node-class="getNodeClass" :get-node-class="getNodeClass"
v-bind="slotProps" v-bind="slotProps"
value-field="id" value-field="id"
label-field="name" label-field="name"
/> />
</Spin>
</template> </template>
</Form> </Form>
<template #prepend-footer> <template #prepend-footer>

View File

@@ -7,7 +7,7 @@ import { computed, ref } from 'vue';
import { Tree, useVbenModal } from '@vben/common-ui'; import { Tree, useVbenModal } from '@vben/common-ui';
import { handleTree } from '@vben/utils'; 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 { useVbenForm } from '#/adapter/form';
import { getMenuList } from '#/api/system/menu'; import { getMenuList } from '#/api/system/menu';
@@ -134,17 +134,18 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
<Modal :title="getTitle" class="w-2/5"> <Modal :title="getTitle" class="w-2/5">
<Form class="mx-6"> <Form class="mx-6">
<template #menuIds="slotProps"> <template #menuIds="slotProps">
<Tree <Spin :spinning="menuLoading" wrapper-class-name="w-full">
class="max-h-96 overflow-y-auto" <Tree
:loading="menuLoading" class="max-h-96 overflow-y-auto"
:tree-data="menuTree" :tree-data="menuTree"
multiple multiple
bordered bordered
:expanded="expandedKeys" :default-expanded-keys="expandedKeys"
v-bind="slotProps" v-bind="slotProps"
value-field="id" value-field="id"
label-field="name" label-field="name"
/> />
</Spin>
</template> </template>
</Form> </Form>
<template #prepend-footer> <template #prepend-footer>

View File

@@ -6,7 +6,7 @@ import { onMounted, ref } from 'vue';
import { Search } from '@vben/icons'; import { Search } from '@vben/icons';
import { handleTree } from '@vben/utils'; 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'; import { getSimpleDeptList } from '#/api/system/dept';
@@ -64,17 +64,18 @@ onMounted(async () => {
<Search class="size-4" /> <Search class="size-4" />
</template> </template>
</Input> </Input>
<Tree <Spin :spinning="loading" wrapper-class-name="w-full">
:spinning="loading" <Tree
class="pt-2" @select="handleSelect"
v-if="deptTree.length > 0" v-if="deptTree.length > 0"
:tree-data="deptTree" class="pt-2"
:field-names="{ title: 'name', key: 'id', children: 'children' }" :tree-data="deptTree"
@select="handleSelect" :default-expand-all="true"
: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 v-else-if="!loading" class="py-4 text-center text-gray-500">
暂无数据 暂无数据
</div> </div>
</Spin>
</div> </div>
</template> </template>

View File

@@ -135,16 +135,15 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
<Form class="mx-4"> <Form class="mx-4">
<template #dataScopeDeptIds="slotProps"> <template #dataScopeDeptIds="slotProps">
<Tree <Tree
v-loading="deptLoading"
:tree-data="deptTree" :tree-data="deptTree"
multiple multiple
bordered bordered
:spinning="deptLoading" :default-expanded-keys="expandedKeys"
:expanded="expandedKeys"
v-bind="slotProps" v-bind="slotProps"
:check-strictly="!isCheckStrictly"
value-field="id" value-field="id"
label-field="name" label-field="name"
:auto-check-parent="false"
:check-strictly="!isCheckStrictly"
/> />
</template> </template>
</Form> </Form>

View File

@@ -143,11 +143,11 @@ function getNodeClass(node: Recordable<any>) {
<Form class="mx-4"> <Form class="mx-4">
<template #menuIds="slotProps"> <template #menuIds="slotProps">
<Tree <Tree
:spinning="menuLoading" v-loading="menuLoading"
:tree-data="menuTree" :tree-data="menuTree"
multiple multiple
bordered bordered
:expanded="expandedKeys" :default-expanded-keys="expandedKeys"
:get-node-class="getNodeClass" :get-node-class="getNodeClass"
v-bind="slotProps" v-bind="slotProps"
value-field="id" value-field="id"

View File

@@ -135,12 +135,12 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
<Form class="mx-6"> <Form class="mx-6">
<template #menuIds="slotProps"> <template #menuIds="slotProps">
<Tree <Tree
v-loading="menuLoading"
class="max-h-96 overflow-y-auto" class="max-h-96 overflow-y-auto"
:loading="menuLoading"
:tree-data="menuTree" :tree-data="menuTree"
multiple multiple
bordered bordered
:expanded="expandedKeys" :default-expanded-keys="expandedKeys"
v-bind="slotProps" v-bind="slotProps"
value-field="id" value-field="id"
label-field="name" label-field="name"