From fb43e548472c7e3dd7dbdeaa27889733a61258db Mon Sep 17 00:00:00 2001
From: zuihou <244387066@qq.com>
Date: Fri, 8 Apr 2022 18:27:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(BasicTree):=20=E6=94=AF=E6=8C=81=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=8A=A0=E8=BD=BD=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tree/src/Tree.vue | 16 +++++++++++-----
 src/components/Tree/src/tree.ts  |  4 ++++
 src/views/demo/tree/index.vue    | 22 +++++++++++++++++++++-
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/Tree/src/Tree.vue b/src/components/Tree/src/Tree.vue
index 041c3f4e..d77af4bd 100644
--- a/src/components/Tree/src/Tree.vue
+++ b/src/components/Tree/src/Tree.vue
@@ -14,7 +14,7 @@
     onMounted,
   } from 'vue';
   import TreeHeader from './TreeHeader.vue';
-  import { Tree, Empty } from 'ant-design-vue';
+  import { Tree, Spin, Empty } from 'ant-design-vue';
   import { TreeIcon } from './TreeIcon';
   import { ScrollContainer } from '/@/components/Container';
   import { omit, get, difference, cloneDeep } from 'lodash-es';
@@ -426,10 +426,16 @@
                 {extendSlots(slots)}
               </TreeHeader>
             )}
-            <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
-              <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
-            </ScrollContainer>
-            <Empty v-show={unref(getNotFound)} image={Empty.PRESENTED_IMAGE_SIMPLE} class="!mt-4" />
+            <Spin spinning={unref(props.loading)} tip="加载中...">
+              <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
+                <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
+              </ScrollContainer>
+              <Empty
+                v-show={unref(getNotFound)}
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                class="!mt-4"
+              />
+            </Spin>
           </div>
         );
       };
diff --git a/src/components/Tree/src/tree.ts b/src/components/Tree/src/tree.ts
index a7d6a26e..420f16a5 100644
--- a/src/components/Tree/src/tree.ts
+++ b/src/components/Tree/src/tree.ts
@@ -130,6 +130,10 @@ export const treeProps = buildProps({
   checkOnSearch: Boolean,
   // 搜索完成自动select所有结果
   selectedOnSearch: Boolean,
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 export type TreeProps = ExtractPropTypes<typeof treeProps>;
diff --git a/src/views/demo/tree/index.vue b/src/views/demo/tree/index.vue
index 89d1313b..d90d2ded 100644
--- a/src/views/demo/tree/index.vue
+++ b/src/views/demo/tree/index.vue
@@ -32,7 +32,7 @@
           :load-data="onLoadData"
         />
       </Col>
-      <Col :span="16">
+      <Col :span="8">
         <Card title="异步数据，默认展开">
           <template #extra>
             <a-button @click="loadTreeData" :loading="treeLoading">加载数据</a-button>
@@ -42,6 +42,14 @@
           </Spin>
         </Card>
       </Col>
+      <Col :span="8">
+        <Card title="BasicTree内置加载">
+          <template #extra>
+            <a-button @click="loadTreeData2" :loading="treeLoading">请求数据</a-button>
+          </template>
+          <BasicTree ref="loadTreeRef" :treeData="tree2" :loading="treeLoading" />
+        </Card>
+      </Col>
     </Row>
   </PageWrapper>
 </template>
@@ -58,6 +66,7 @@
     setup() {
       const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
       const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
+      const loadTreeRef = ref<Nullable<TreeActionType>>(null);
       const tree2 = ref<TreeItem[]>([]);
       const treeLoading = ref(false);
 
@@ -79,6 +88,15 @@
           });
         }, 2000);
       }
+      function loadTreeData2() {
+        treeLoading.value = true;
+        // 以下是模拟异步获取数据
+        setTimeout(() => {
+          // 设置数据源
+          tree2.value = cloneDeep(treeData);
+          treeLoading.value = false;
+        }, 2000);
+      }
 
       const tree = ref([
         {
@@ -119,9 +137,11 @@
         onLoadData,
         asyncTreeRef,
         asyncExpandTreeRef,
+        loadTreeRef,
         tree2,
         loadTreeData,
         treeLoading,
+        loadTreeData2,
       };
     },
   });