From 6ba971f3f9a5c5b6d2e09c4bdec79656111b4597 Mon Sep 17 00:00:00 2001
From: BillDowney <billdowney@163.com>
Date: Mon, 12 Jul 2021 23:21:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E6=A0=91=E5=9C=A8=E6=97=A0?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=97=B6=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=EF=BC=9Ahttps://gitee.com/ssssssss-team/magic-api/issues/I3ZST?=
 =?UTF-8?q?I=20=E5=B7=A6=E4=BE=A7=E6=A0=91=E5=8A=A0=E4=B8=AALoading?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=EF=BC=9Ahttps://gitee.com/ssssssss-team/magi?=
 =?UTF-8?q?c-api/issues/I3ZSTE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 magic-editor/src/console/src/assets/index.css | 10 +++
 .../src/components/common/magic-tree.vue      | 86 +++++++++++++++++--
 .../components/resources/magic-api-list.vue   |  8 +-
 .../resources/magic-datasource-list.vue       | 42 ++++++++-
 .../resources/magic-function-list.vue         |  8 +-
 .../resources/magic-resource-choose.vue       |  8 +-
 6 files changed, 146 insertions(+), 16 deletions(-)

diff --git a/magic-editor/src/console/src/assets/index.css b/magic-editor/src/console/src/assets/index.css
index 90c320d8..fa56147d 100644
--- a/magic-editor/src/console/src/assets/index.css
+++ b/magic-editor/src/console/src/assets/index.css
@@ -295,4 +295,14 @@
 
 .ma-table-request-row {
     display: flex;
+}
+
+/** 旋转特效 **/
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
\ No newline at end of file
diff --git a/magic-editor/src/console/src/components/common/magic-tree.vue b/magic-editor/src/console/src/components/common/magic-tree.vue
index 7556cd0b..15d984a8 100644
--- a/magic-editor/src/console/src/components/common/magic-tree.vue
+++ b/magic-editor/src/console/src/components/common/magic-tree.vue
@@ -2,13 +2,22 @@
   <div class="ma-tree-container">
     <!-- 解决子组件不强制刷新 -->
     <div v-show="forceUpdate"></div>
-    <template v-for="item in data">
-      <magic-tree-item :key="'tree_' + item.id" :data="item.children" :item="item">
-        <template v-for="(value, key) in $scopedSlots" v-slot:[key]="{ item }">
-          <slot :item="item" :name="key"></slot>
-        </template>
-      </magic-tree-item>
-    </template>
+    <div v-show="!showLoading">
+      <template v-for="item in data">
+        <magic-tree-item :key="'tree_' + item.id" :data="item.children" :item="item">
+          <template v-for="(value, key) in $scopedSlots" v-slot:[key]="{ item }">
+            <slot :item="item" :name="key"></slot>
+          </template>
+        </magic-tree-item>
+      </template>
+    </div>
+    <div class="loading" v-show="showLoading">
+      <div class="icon">
+        <i class="ma-icon ma-icon-refresh "></i>
+      </div>
+      加载中...
+    </div>
+    <div class="no-data" v-show="!showLoading && (!data || data.length === 0)">无数据</div>
   </div>
 </template>
 
@@ -20,11 +29,70 @@ export default {
   props: {
     data: Array,
     // 解决子组件不强制刷新
-    forceUpdate: Boolean
+    forceUpdate: Boolean,
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingTime: {
+      type: Number,
+      default: 500
+    }
   },
   components: {
     MagicTreeItem
+  },
+  data() {
+    return {
+      showLoading: false
+    }
+  },
+  watch: {
+    loading(newVal) {
+      if (newVal) {
+        this.showLoading = newVal
+      } else {
+        setTimeout(() => {
+          this.showLoading = newVal
+        }, this.loadingTime)
+      }
+    }
+  },
+  mounted() {
+    this.showLoading = this.loading
   }
 }
 </script>
-<style></style>
+<style>
+.ma-tree-container {
+  position: relative;
+}
+.ma-tree-container .loading i {
+  color: var(--color);
+  font-size: 20px;
+}
+.ma-tree-container .loading .icon .ma-icon {
+  padding: 0;
+}
+.ma-tree-container .loading .icon {
+  width: 20px;
+  margin: 0 auto;
+  line-height: normal;
+  animation: rotate 1s linear infinite;
+}
+.ma-tree-container .loading {
+  color: var(--color);
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  top: 50%;
+  margin-top: -20px;
+}
+.ma-tree-container .no-data {
+  color: var(--color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -20px;
+}
+</style>
diff --git a/magic-editor/src/console/src/components/resources/magic-api-list.vue b/magic-editor/src/console/src/components/resources/magic-api-list.vue
index 60203a62..4dcb3215 100644
--- a/magic-editor/src/console/src/components/resources/magic-api-list.vue
+++ b/magic-editor/src/console/src/components/resources/magic-api-list.vue
@@ -22,7 +22,7 @@
         </div>
       </div>
     </div>
-    <magic-tree :data="tree" :forceUpdate="forceUpdate">
+    <magic-tree :data="tree" :forceUpdate="forceUpdate" :loading="showLoading">
       <template #folder="{ item }">
         <div
             v-if="item._searchShow !== false"
@@ -133,7 +133,9 @@ export default {
       forceUpdate: true,
       // 拖拽的item
       draggableItem: {},
-      draggableTargetItem: {}
+      draggableTargetItem: {},
+      // 是否展示tree-loading
+      showLoading: true
     }
   },
   methods: {
@@ -156,12 +158,14 @@ export default {
     },
     // 初始化数据
     initData() {
+      this.showLoading = true
       this.tree = []
       request.send('group/list?type=1').success(data => {
         this.listGroupData = data
         request.send('list').success(data => {
           this.listChildrenData = data
           this.initTreeData()
+          this.showLoading = false
         })
       })
     },
diff --git a/magic-editor/src/console/src/components/resources/magic-datasource-list.vue b/magic-editor/src/console/src/components/resources/magic-datasource-list.vue
index 834cb213..06f61370 100644
--- a/magic-editor/src/console/src/components/resources/magic-datasource-list.vue
+++ b/magic-editor/src/console/src/components/resources/magic-datasource-list.vue
@@ -15,7 +15,7 @@
           </div>
         </div>
       </div>
-      <ul>
+      <ul v-show="!showLoading">
         <template v-for="(item,index) in datasources" >
         <li v-if="item._searchShow === true || item._searchShow === undefined" :key="index" @click="showDetail(item.id)" @contextmenu.prevent="e => datasourceContextMenu(e, item)">
           <i class="ma-icon ma-icon-datasource"/>
@@ -24,6 +24,13 @@
         </li>
         </template>
       </ul>
+      <div class="loading" v-show="showLoading">
+        <div class="icon">
+          <i class="ma-icon ma-icon-refresh "></i>
+        </div>
+        加载中...
+      </div>
+      <div class="no-data" v-show="!showLoading && (!datasources || datasources.length === 0)">无数据</div>
     </div>
     <magic-dialog width="1000px" height="400px" v-model="showDialog" :title="dsId ? '修改数据源:' + dsName : '创建数据源'" align="right" @onClose="toogleDialog(false)">
       <template #content>
@@ -74,7 +81,9 @@ export default {
         password: "",
         maxRows: "-1"
       },
-      editor: null
+      editor: null,
+      // 是否展示loading
+      showLoading: true
     }
   },
   methods: {
@@ -107,6 +116,8 @@ export default {
     },
     // 初始化数据
     initData() {
+      this.showLoading = true
+      this.datasources = []
       request.send('datasource/list').success(data => {
         this.datasources = data;
         JavaClass.setExtensionAttribute('org.ssssssss.magicapi.modules.SQLModule',this.datasources.filter(it => it.key).map(it => {
@@ -116,6 +127,9 @@ export default {
             comment: it.name
           }
         }))
+        setTimeout(() => {
+          this.showLoading = false
+        }, 500)
       })
     },
     showDetail(id){
@@ -313,4 +327,28 @@ ul li:hover{
   width: 100%;
   height: 100%;
 }
+.ma-tree-wrapper .loading i {
+  color: var(--color);
+  font-size: 20px;
+}
+.ma-tree-wrapper .loading .icon {
+  width: 20px;
+  margin: 0 auto;
+  animation: rotate 1s linear infinite;
+}
+.ma-tree-wrapper .loading {
+  color: var(--color);
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  top: 50%;
+  margin-top: -20px;
+}
+.ma-tree-wrapper .no-data {
+  color: var(--color);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -20px;
+}
 </style>
diff --git a/magic-editor/src/console/src/components/resources/magic-function-list.vue b/magic-editor/src/console/src/components/resources/magic-function-list.vue
index 87372419..e2ebeafa 100644
--- a/magic-editor/src/console/src/components/resources/magic-function-list.vue
+++ b/magic-editor/src/console/src/components/resources/magic-function-list.vue
@@ -22,7 +22,7 @@
         </div>
       </div>
     </div>
-    <magic-tree :data="tree" :forceUpdate="forceUpdate">
+    <magic-tree :data="tree" :forceUpdate="forceUpdate" :loading="showLoading">
       <template #folder="{ item }">
         <div
             v-if="item._searchShow !== false"
@@ -132,7 +132,9 @@ export default {
       forceUpdate: true,
       // 拖拽的item
       draggableItem: {},
-      draggableTargetItem: {}
+      draggableTargetItem: {},
+      // 是否展示tree-loading
+      showLoading: true
     }
   },
   methods: {
@@ -159,12 +161,14 @@ export default {
     },
     // 初始化数据
     initData() {
+      this.showLoading = true
       this.tree = []
       request.send('group/list?type=2').success(data => {
         this.listGroupData = data;
         request.send('function/list').success(data => {
           this.listChildrenData = data
           this.initTreeData()
+          this.showLoading = false
         })
       })
     },
diff --git a/magic-editor/src/console/src/components/resources/magic-resource-choose.vue b/magic-editor/src/console/src/components/resources/magic-resource-choose.vue
index 2199dd5f..e57527f1 100644
--- a/magic-editor/src/console/src/components/resources/magic-resource-choose.vue
+++ b/magic-editor/src/console/src/components/resources/magic-resource-choose.vue
@@ -1,5 +1,5 @@
 <template>
-    <magic-tree :data="tree" :forceUpdate="forceUpdate" :style="{ height, maxHeight}" style="overflow: auto">
+    <magic-tree :data="tree" :forceUpdate="forceUpdate" :style="{ height, maxHeight}" style="overflow: auto" :loading="showLoading > 0">
       <template #folder="{ item }">
         <div
             :style="{ 'padding-left': 17 * item.level + 'px' }"
@@ -69,11 +69,14 @@ export default {
       treeSort: true,
       // 绑定给magic-tree组件，用来触发子组件强制更新
       forceUpdate: true,
+      // 是否展示tree-loading,0表示不展示,大于0表示展示
+      showLoading: 0
     }
   },
   methods: {
     // 初始化数据
     initData() {
+      this.showLoading = 3
       this.tree = []
       this.listChildrenData = []
       this.listGroupData = [
@@ -96,6 +99,7 @@ export default {
             return it;
           }))
           this.initTreeData()
+          this.showLoading--
         })
       })
       request.send('group/list?type=2').success(data => {
@@ -113,6 +117,7 @@ export default {
             return it;
           }))
           this.initTreeData()
+          this.showLoading--
         })
       })
       request.send('datasource/list').success(data => {
@@ -124,6 +129,7 @@ export default {
           return it;
         }))
         this.initTreeData()
+        this.showLoading--
       })
     },
     // 初始化tree结构数据