fix(BasicTree): load-data 无效

src/components/Tree/src/BasicTree.vue

@@ -13,7 +13,7 @@ import { treeEmits, treeProps } from './types/tree'
 import { ScrollContainer } from '@/components/Container'
 import { isArray, isBoolean, isEmpty, isFunction } from '@/utils/is'
 import { extendSlots, getSlot } from '@/utils/helper/tsxHelper'
-import { eachTree, filter, treeToList } from '@/utils/helper/treeHelper'
+import { eachTree, filter, findNode, treeToList } from '@/utils/helper/treeHelper'
 import { useContextMenu } from '@/hooks/web/useContextMenu'
 import type { CreateContextOptions } from '@/components/ContextMenu'
 import { createBEM } from '@/utils/bem'
@@ -395,6 +395,14 @@ export default defineComponent({
       return data
     })
 
+    async function loadData(node: TreeItem) {
+      const parentNode = findNode(treeDataRef.value, item => item.key === node.key)
+      try {
+        parentNode.children = await props.loadData(node)
+      }
+      catch {}
+    }
+
     expose(instance)
 
     return () => {
@@ -422,7 +430,7 @@ export default defineComponent({
           )}
           <Spin wrapperClassName={unref(props.treeWrapperClassName)} spinning={unref(props.loading)} tip="加载中...">
             <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
-              <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value}>
+              <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} loadData={loadData}>
                 {extendSlots(slots, ['title'])}
               </Tree>
             </ScrollContainer>

src/components/Tree/src/types/tree.ts

@@ -31,6 +31,8 @@ export type KeyType = string | number
 
 export type CheckKeys = KeyType[] | { checked: string[] | number[], halfChecked: string[] | number[] }
 
+export type TreeNode = (Omit<TreeDataItem, 'key'> & { key?: string | number })
+
 export const treeProps = buildProps({
   value: {
     type: [Object, Array] as PropType<KeyType[] | CheckKeys>,
@@ -77,7 +79,7 @@ export const treeProps = buildProps({
   },
 
   treeData: {
-    type: Array as PropType<(Omit<TreeDataItem, 'key'> & { key?: string | number })[]>,
+    type: Array as PropType<TreeNode[]>,
   },
 
   actionList: {
@@ -128,6 +130,10 @@ export const treeProps = buildProps({
     default: false,
   },
   treeWrapperClassName: String,
+
+  loadData: {
+    type: Function as PropType<(node: TreeNode) => Promise<TreeNode[]>>,
+  },
 })
 
 export type TreeProps = ExtractPropTypes<typeof treeProps>

src/views/system/user/DeptTree.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import type { EventDataNode } from 'ant-design-vue/es/tree'
-import { BasicTree } from '@/components/Tree'
-import { lazyGetDeptList } from '@/api/system/dept'
-import type { Department, LazyGetDeptListParams } from '@/api/system/dept/types'
-
-defineOptions({ name: 'SystemDeptTree' })
-defineProps<{ dept?: string }>()
-const emit = defineEmits(['update:dept'])
-
-const departmentList = ref<Department[]>([])
-
-async function requestDeptList(params?: LazyGetDeptListParams) {
-  return lazyGetDeptList(params)
-    .then((res) => {
-      return res.map((item) => {
-        return {
-          ...item,
-          isLeaf: !item.hasChildren,
-        }
-      })
-    })
-}
-
-const basicTreeRef = ref<InstanceType<typeof BasicTree>>()
-async function onLoadDeptList(treeNode: EventDataNode) {
-  try {
-    return await requestDeptList({ parentId: treeNode.id })
-  }
-  catch {
-  }
-}
-
-onMounted(() => {
-  requestDeptList()
-    .then((res) => {
-      departmentList.value = res
-    })
-})
-
-function onSelect(value: string[]) {
-  emit('update:dept', value[0] || '')
-}
-</script>
-
-<template>
-  <div class="box-border h-full py-12px pl-12px" v-bind="$attrs">
-    <BasicTree
-      ref="basicTreeRef"
-      title="部门列表"
-      :click-row-to-expand="false"
-      :tree-data="departmentList"
-      :field-names="{ key: 'id', title: 'deptName' }"
-      :load-data="onLoadDeptList"
-      @select="onSelect"
-    >
-      <template #icon>
-        <span class="i-ant-design:deployment-unit-outlined" />
-      </template>
-    </BasicTree>
-  </div>
-</template>