左侧树在无数据时提示信息：https://gitee.com/ssssssss-team/magic-api/issues/I3ZSTI

左侧树加个Loading提示：https://gitee.com/ssssssss-team/magic-api/issues/I3ZSTE
2026-06-09 18:32:16 +08:00 · 2021-07-12 23:21:31 +08:00
parent 92ad6c3b02
commit 6ba971f3f9
6 changed files with 146 additions and 16 deletions
--- 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);
+    }
 }
--- 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>
--- 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
        })
      })
    },
--- 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>
--- 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
        })
      })
    },
--- 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结构数据