添加交互优化

src/views/data/dataCataloguing.vue

@@ -2,11 +2,11 @@
     <a-row :gutter="30">
       <a-col :md="11" :sm="1" >
         <!-- 查询区域 -->
-        <a-form layout="inline" @keyup.enter.native="getTables" style="margin-top: 10px; margin-left: 4px;">
+        <a-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px; margin-left: 4px;">
             <a-row :gutter="24">
             <a-col :md="10" :sm="1">
               <a-form-item label="标签类型">
-                    <a-select  placeholder="选择标签类型" option-filter-prop="children" size="large" v-model="queryRefsParam.tagId" style="width: 200px;">
+                    <a-select  placeholder="选择标签类型" option-filter-prop="children" size="large" @change="gattable" v-model="queryRefsParam.tagId" style="width: 200px;">
                         <a-select-option v-for="d in datatagSources" :key="d.id">
                         {{ d.tagName }}
                         </a-select-option>
@@ -30,6 +30,7 @@
             <a-table
               ref="tagtable"
               size="middle"
+              :loading="tagloading"
               :row-selection="tagrowSelection"
               bordered
               rowKey="id"
@@ -51,7 +52,7 @@
         </div>
       </a-col>
       <a-col :md="11" :sm="3" >
-        <a-form layout="inline" @keyup.enter.native="getTables" style="margin-top: 10px; margin-left: 4px;">
+        <a-form layout="inline" @keyup.enter.native="getalltable" style="margin-top: 10px; margin-left: 4px;">
             <a-row :gutter="24">
             <a-col :md="20" :sm="1">
                 <a-form-item label="关键词">
@@ -72,6 +73,7 @@
               size="middle"
               :row-selection="rowSelection"
               bordered
+              :loading="loading"
               :rowKey="getRowKey"
               :pagination="false"
               :scroll="{ y: 800 }"
@@ -122,6 +124,8 @@ import get from 'lodash.get'
           dataRefsSources:[],
           dataSource:[
           ],
+          tagloading:false,
+          loading:false,
           columns: [
             {
               title: '表名',
@@ -215,13 +219,16 @@ import get from 'lodash.get'
           this.tagselectedRowKeys = selectedRowKeys
           this.tagselectedRowData = row
         },
+        gattable(){
+          this.getalltable();
+          this.gettagTables();
+        },
         getdatatagSources(){
           idcTableTaglist(this.tagqueryParam).then((res) => {
               if (res.success) {
                   this.datatagSources = res.result.records;
                   this.queryRefsParam.tagId = res.result.records[0].id;
-                  this.getalltable();
-                  this.gettagTables();
+                  this.gattable();
               } else {
                   this.$message.warning(res.message);
               }
@@ -234,6 +241,7 @@ import get from 'lodash.get'
               }
           });
         },
+
         addtag(){
           var that = this;
           this.selectedRowData.forEach(item => { 
@@ -243,8 +251,7 @@ import get from 'lodash.get'
               "schemaName": item.schemaName
             }).then((res) => {
               if (res.success) {
-                that.getalltable();
-                that.gettagTables();
+                that.gattable();
               } else {
                 that.$message.warning(res.message);
               }
@@ -256,8 +263,7 @@ import get from 'lodash.get'
           this.tagselectedRowKeys.forEach(item => {
             idcTableTagRefdelete({id: item}).then((res) => {
               if (res.success) {
-                that.getalltable();
-                that.gettagTables();
+                that.gattable();
               } else {
                 that.$message.warning(res.message);
               }
@@ -266,21 +272,25 @@ import get from 'lodash.get'
         },
         getalltable(){
           this.queryParam.tagId  = this.queryRefsParam.tagId 
+          this.loading = true;
           getAllTable(this.queryParam).then((res) => {
               if (res.success) {
                   this.dataSource = res.result;
               } else {
                   this.$message.warning(res.message);
               }
+              this.loading = false;
           });
         },
         gettagTables(){
+          this.tagloading = true;
           getTableTagRefs(this.queryRefsParam).then((res) => {
               if (res.success) {
                   this.dataRefsSources = res.result.records;
               } else {
                   this.$message.warning(res.message);
               }
+              this.tagloading = false;
           });
         },
       }