CN-1089 统一各列表页的loading、nodata交互

src/components/table/CnDataList.vue

@@ -85,7 +85,8 @@ export default {
       tools: {
         showCustomTableTitle: false // 自定义列弹框是否显示
       },
-      showLayout: []
+      showLayout: [],
+      loading: true
     }
   },
   methods: {

src/components/table/administration/ChartTable.vue

@@ -5,6 +5,7 @@
           :data="tableData"
           :height="height"
           border
+          empty-text=" "
           @header-dragend="dragend"
           @sort-change="tableDataSort"
           @selection-change="selectionChange"
@@ -81,6 +82,11 @@
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -91,6 +97,12 @@ import { panelTypeAndRouteMapping } from '@/utils/constants'
 export default {
   name: 'chartTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       panelTypeAndRouteMapping: panelTypeAndRouteMapping,

src/components/table/administration/GalaxyProxyTable.vue

@@ -7,6 +7,7 @@
     :height="height"
     tooltip-effect="light"
     border
+    empty-text=" "
     @header-dragend="dragend"
     @sort-change="tableDataSort"
     @selection-change="selectionChange"
@@ -105,6 +106,11 @@
         </div>
       </template>
     </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -115,6 +121,12 @@ import { copyValue } from '@/utils/tools'
 export default {
   name: 'galaxyProxyTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       tableTitle: [ // 原始table列

src/components/table/administration/I18nTable.vue

@@ -5,6 +5,7 @@
       :data="tableData"
       :height="height"
       border
+      empty-text=" "
       @header-dragend="dragend"
       @sort-change="tableDataSort"
       @selection-change="selectionChange"
@@ -34,7 +35,11 @@
       <template #default="scope" :column="item">
         <span>{{scope.row[item.prop]}}</span>
       </template>
-    </el-table-column>
+    </el-table-column><template v-slot:empty >
+    <div class="table-no-data" v-if="isNoData">
+      <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+    </div>
+  </template>
   </el-table>
 </template>
 
@@ -45,6 +50,12 @@ import { api } from '@/utils/api'
 export default {
   name: 'I18nTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       url: api.i18nLang,

src/components/table/administration/OperationLogTable.vue

@@ -6,6 +6,7 @@
     :height="height"
     tooltip-effect="light"
     border
+    empty-text=" "
     class="no-operation"
     @header-dragend="dragend"
     @sort-change="tableDataSort"
@@ -53,6 +54,11 @@
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -63,6 +69,12 @@ import { operationLogStateMapping } from '@/utils/constants'
 export default {
   name: 'roleTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       operationLogStateMapping: operationLogStateMapping,

src/components/table/administration/RoleTable.vue

@@ -5,6 +5,7 @@
     :data="tableData"
     :height="height"
     border
+    empty-text=" "
     @header-dragend="dragend"
     @sort-change="tableDataSort"
     @selection-change="selectionChange"
@@ -49,6 +50,11 @@
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -57,6 +63,12 @@ import table from '@/mixins/table'
 export default {
   name: 'roleTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       tableTitle: [ // 原table列

src/components/table/administration/UserTable.vue

@@ -4,7 +4,7 @@
     ref="dataTable"
     :data="tableData"
     :height="height"
-    empty-text=""
+    empty-text=" "
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
@@ -63,6 +63,11 @@
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -73,6 +78,12 @@ import { storageKey } from '@/utils/constants'
 
 export default {
   name: 'userTable',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   mixins: [table],
   data () {
     return {

src/components/table/report/ReportTable.vue

@@ -6,8 +6,8 @@
         :data="tableData"
         :height="height"
         :expand-row-keys="expandedIds"
-        :empty-text="$t('npm.noData')"
         border
+        empty-text=" "
         tooltip-effect="light"
         :row-key="(row) => { return row.id }"
         :reserve-selection="true"
@@ -188,6 +188,11 @@
           <span v-else>{{ scope.row[item.prop] || '-' }}</span>
         </template>
       </el-table-column>
+      <template v-slot:empty >
+        <div class="table-no-data" v-if="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+        </div>
+      </template>
     </el-table>
 <!--    <div class="table-operation-all">
       <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
@@ -229,7 +234,11 @@ export default {
   props: {
     categoryList: Array,
     toolsLoading: Boolean,
-    categoryId: Number
+    categoryId: Number,
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
   },
   inject: ['reload'],
   data () {

src/components/table/setting/KnowledgeBaseTableForRow.vue

@@ -1,90 +1,96 @@
 <template>
   <el-table
-      id="knowledgeBaseTable"
-      ref="dataTable"
-      :data="tableData"
-      :height="height"
-      border
-      @header-dragend="dragend"
-      @sort-change="tableDataSort"
-      @selection-change="selectionChange"
-  >
-    <el-table-column
-        :resizable="false"
-        align="center"
-        type="selection"
-        :selectable="selectable"
-        width="55">
-    </el-table-column>
-    <el-table-column
-        v-for="(item, index) in customTableTitles"
-        :key="`col-${index}`"
-        :fixed="item.fixed"
-        :label="item.label"
-        :min-width="`${item.minWidth}`"
-        :prop="item.prop"
-        :resizable="true"
-        :sort-orders="['ascending', 'descending']"
-        :sortable="item.sortable"
-        :width="`${item.width}`"
-        class="data-column"
+        id="knowledgeBaseTable"
+        ref="dataTable"
+        :data="tableData"
+        :height="height"
+        border
+        empty-text=" "
+        @header-dragend="dragend"
+        @sort-change="tableDataSort"
+        @selection-change="selectionChange"
     >
-      <template #header>
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
+      <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          :selectable="selectable"
+          width="55">
+      </el-table-column>
+      <el-table-column
+          v-for="(item, index) in customTableTitles"
+          :key="`col-${index}`"
+          :fixed="item.fixed"
+          :label="item.label"
+          :min-width="`${item.minWidth}`"
+          :prop="item.prop"
+          :resizable="true"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="item.sortable"
+          :width="`${item.width}`"
+          class="data-column"
+      >
+        <template #header>
+          <span class="data-column__span">{{item.label}}</span>
+          <div class="col-resize-area"></div>
+        </template>
+        <template  #default="scope" :column="item">
+          <template v-if="item.prop === 'name'" >
+            <template v-if="scope.row.i18n">
+              <span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
+            </template>
+            <template v-else-if="scope.row.name">
+              <span :title="scope.row[item.prop]">{{scope.row.name}}</span>
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'category'">
+            <span >{{tagCategoryText(scope.row[item.prop])}}</span>
+          </template>
+          <template v-else-if="item.prop === 'source'">
+            <span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
+          </template>
+          <template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
+            <template v-if="scope.row[item.prop]">
+              {{dateFormatByAppearance(scope.row[item.prop])}}
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
+            <template v-if="scope.row[item.prop]">
+              {{scope.row[item.prop].username || '-'}}
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'description'">
+            <span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+          </template>
+          <template v-else-if="item.prop === 'status'">
+            <el-switch class="card-enable"
+                       v-model="scope.row.status"
+                       active-color="#38ACD2"
+                       inactive-color="#C0CEDB"
+                       :active-value="1"
+                       :inactive-value="0"
+                       @change="changeStatus($event,scope.row.knowledgeId)"
+            >
+            </el-switch>
+          </template>
+          <span v-else>{{scope.row[item.prop] || '-'}}</span>
+        </template>
+      </el-table-column>
+      <template v-slot:empty >
+        <div class="table-no-data" v-if="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+        </div>
       </template>
-      <template  #default="scope" :column="item">
-        <template v-if="item.prop === 'name'" >
-          <template v-if="scope.row.i18n">
-            <span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
-          </template>
-          <template v-else-if="scope.row.name">
-            <span :title="scope.row[item.prop]">{{scope.row.name}}</span>
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'category'">
-          <span >{{tagCategoryText(scope.row[item.prop])}}</span>
-        </template>
-        <template v-else-if="item.prop === 'source'">
-          <span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
-        </template>
-        <template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
-          <template v-if="scope.row[item.prop]">
-            {{dateFormatByAppearance(scope.row[item.prop])}}
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
-          <template v-if="scope.row[item.prop]">
-            {{scope.row[item.prop].username || '-'}}
-          </template>
-          <template v-else>
-            <span>-</span>
-          </template>
-        </template>
-        <template v-else-if="item.prop === 'description'">
-          <span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-        </template>
-        <template v-else-if="item.prop === 'status'">
-          <el-switch class="card-enable"
-                     v-model="scope.row.status"
-                     active-color="#38ACD2"
-                     inactive-color="#C0CEDB"
-                     :active-value="1"
-                     :inactive-value="0"
-                     @change="changeStatus($event,scope.row.knowledgeId)"
-          >
-          </el-switch>
-        </template>
-        <span v-else>{{scope.row[item.prop] || '-'}}</span>
-      </template>
-    </el-table-column>
-  </el-table>
+    </el-table>
 </template>
 
 <script>
@@ -92,6 +98,12 @@ import table from '@/mixins/table'
 import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
 export default {
   name: 'KnowledgeBaseTableForRow',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   mixins: [table],
   data () {
     return {

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-checkbox-group v-model="checkList">
+  <el-checkbox-group v-model="checkList" v-if="!isNoData">
     <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
       <div class="card-content">
         <div class="card-title">
@@ -34,6 +34,9 @@
       </div>
     </div>
   </el-checkbox-group>
+  <div class="table-no-data" v-else="isNoData">
+    <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+  </div>
 </template>
 
 <script>
@@ -43,6 +46,10 @@ export default {
   name: 'knowledgeBaseTableForCard',
   mixins: [table],
   props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    },
     isSelectedStatus: {
       type: Boolean
     }