ACL加载遮置

ui/src/views/acl/Acl.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="content">
+    <a-spin :spinning="loading">
       <div class="acl">
         <div id="components-form-acl-advanced-search">
           <a-form
@@ -150,6 +151,7 @@
           @addAuthDialog="closeAddAuthDialog"
         ></AddAuth>
       </div>
+    </a-spin>
   </div>
 </template>
 
@@ -193,6 +195,7 @@ export default {
         resourceType: "",
         username: "",
       },
+      loading: false,
     };
   },
   methods: {
@@ -211,7 +214,7 @@ export default {
           queryParam.resourceName = values.groupId;
         }
         Object.assign(this.queryParam, queryParam);
-        getAclList(this.data, queryParam);
+        this.getAclList();
       });
     },
 
@@ -225,7 +228,7 @@ export default {
     closeUpdateUserDialog(data) {
       this.showUpdateUser = data.show;
       if (data.ok) {
-        getAclList(this.data, this.queryParam);
+        this.getAclList();
       }
     },
     onDeleteUser(row) {
@@ -234,7 +237,7 @@ export default {
         method: KafkaAclApi.deleteKafkaUser.method,
         data: { username: row.username },
       }).then((res) => {
-        getAclList(this.data, this.queryParam);
+        this.getAclList();
         if (res.code == 0) {
           this.$message.success(res.msg);
         } else {
@@ -278,40 +281,36 @@ export default {
     },
     closeManageProducerAuthDialog() {
       this.openManageProducerAuthDialog = false;
-      getAclList(this.data, this.queryParam);
+      this.getAclList();
     },
     closeManageConsumerAuthDialog() {
       this.openManageConsumerAuthDialog = false;
-      getAclList(this.data, this.queryParam);
+      this.getAclList();
     },
     closeAddAuthDialog(p) {
       this.openAddAuthDialog = false;
       if (p.refresh) {
-        getAclList(this.data, this.queryParam);
+        this.getAclList();
       }
     },
     closeAclDetailDialog(p) {
       this.openAclDetailDialog = false;
       if (p.refresh) {
-        getAclList(this.data, this.queryParam);
+        this.getAclList();
       }
     },
     closeUserDetailDialog() {
       this.openUserDetailDialog = false;
     },
-  },
+    getAclList() {
-  created() {
+      this.loading = true;
-    getAclList(this.data, this.queryParam);
-  },
-};
-
-function getAclList(data, requestParameters) {
       request({
         url: KafkaAclApi.getAclList.url,
         method: KafkaAclApi.getAclList.method,
-    data: requestParameters,
+        data: this.queryParam,
       }).then((response) => {
-    data.splice(0, data.length);
+        this.loading = false;
+        this.data.splice(0, this.data.length);
         if (response.code != 0) {
           notification.error({
             message: response.msg,
@@ -326,17 +325,55 @@ function getAclList(data, requestParameters) {
           let groupList = Object.keys(v)
             .filter((e) => e.startsWith("GROUP"))
             .map((e) => e.split("#")[1]);
-      data.push({
+          this.data.push({
             key: k,
             username: k,
             topicList: topicList,
             groupList: groupList,
             user: response.data.map[k]["USER"],
           });
-      data.sort((a, b) => a.username.localeCompare(b.username));
+          this.data.sort((a, b) => a.username.localeCompare(b.username));
         }
       });
-}
+    },
+  },
+  created() {
+    this.getAclList();
+  },
+};
+
+// function getAclList(data, requestParameters) {
+//   request({
+//     url: KafkaAclApi.getAclList.url,
+//     method: KafkaAclApi.getAclList.method,
+//     data: requestParameters,
+//   }).then((response) => {
+//     data.splice(0, data.length);
+//     if (response.code != 0) {
+//       notification.error({
+//         message: response.msg,
+//       });
+//       return;
+//     }
+//     for (let k in response.data.map) {
+//       let v = response.data.map[k];
+//       let topicList = Object.keys(v)
+//         .filter((e) => e.startsWith("TOPIC"))
+//         .map((e) => e.split("#")[1]);
+//       let groupList = Object.keys(v)
+//         .filter((e) => e.startsWith("GROUP"))
+//         .map((e) => e.split("#")[1]);
+//       data.push({
+//         key: k,
+//         username: k,
+//         topicList: topicList,
+//         groupList: groupList,
+//         user: response.data.map[k]["USER"],
+//       });
+//       data.sort((a, b) => a.username.localeCompare(b.username));
+//     }
+//   });
+// }
 
 const columns = [
   {

ui/src/views/acl/AclDetail.vue

@@ -10,6 +10,7 @@
     :footer="null"
     :maskClosable="false"
   >
+    <a-spin :spinning="loading">
       <div>
         <a-table
           :columns="columns"
@@ -32,6 +33,7 @@
           </a>
         </a-table>
       </div>
+    </a-spin>
   </a-modal>
 </template>
 
@@ -55,12 +57,14 @@ export default {
       show: this.visible,
       data,
       columns,
+      loading: false,
     };
   },
   watch: {
     visible(v) {
       this.show = v;
       if (this.show) {
+        this.data = [];
         this.getAclDetail();
       }
     },
@@ -70,12 +74,14 @@ export default {
       this.$emit("aclDetailDialog", { refresh: true });
     },
     getAclDetail() {
+      this.loading = true;
       const api = KafkaAclApi.getAclDetailList;
       request({
         url: api.url,
         method: api.method,
         data: this.selectDetail,
       }).then((res) => {
+        this.loading = false;
         if (res.code != 0) {
           this.$message.error(res.msg);
         } else {