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

src/assets/css/components/views/setting/knowledgeBase.scss

@@ -392,6 +392,14 @@
         overflow-y:auto;
         padding-right: 2px;
         margin-bottom:30px;
+        .table-no-data{
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          line-height: 60px;
+          color: #909399;
+        }
         .el-checkbox-group {
           display: grid;
           grid-template-rows: repeat(auto-fill, 218px);

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"
+        id="knowledgeBaseTable"
-      ref="dataTable"
+        ref="dataTable"
-      :data="tableData"
+        :data="tableData"
-      :height="height"
+        :height="height"
-      border
+        border
-      @header-dragend="dragend"
+        empty-text=" "
-      @sort-change="tableDataSort"
+        @header-dragend="dragend"
-      @selection-change="selectionChange"
+        @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"
     >
-      <template #header>
+      <el-table-column
-        <span class="data-column__span">{{item.label}}</span>
+          :resizable="false"
-        <div class="col-resize-area"></div>
+          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">
+    </el-table>
-        <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>
 </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
     }

src/mixins/data-list.js

@@ -5,10 +5,12 @@ import { ref } from 'vue'
 import pagination from '@/components/common/Pagination'
 import axios from 'axios'
 import { api } from '@/utils/api'
+import Loading from '@/components/common/Loading'
 
 export default {
   components: {
-    pagination
+    pagination,
+    Loading
   },
   data () {
     return {
@@ -24,7 +26,7 @@ export default {
       },
       /* 工具参数 */
       tools: {
-        loading: true, // 是否显示table加载动画
+        // loading: true, // 是否显示table加载动画
         customTableTitle: [] // 自定义列工具的数据
       },
       mainTableHeight: position.tableHeight.normal, // 主列表table高度
@@ -39,7 +41,9 @@ export default {
       delFlag: false,
       disableEdit: true, // 编辑按钮是否不可用，当选择多条记录的时候，编辑按钮不可用
       disableDelete: true,
-      operationWidth: '165' // 操作列宽
+      operationWidth: '165', // 操作列宽
+      loading: true,
+      isNoData: false
     }
   },
   methods: {
@@ -74,6 +78,9 @@ export default {
           break
       }
     },
+    toggleLoading (loading) {
+      this.loading = loading
+    },
     selectionChange (objs) {
       this.batchDeleteObjs = []
       objs.forEach(obj => {
@@ -104,25 +111,34 @@ export default {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
       this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.tools.loading = true
+      this.tableData = []
+      this.isNoData = false
+      this.toggleLoading(true)
       delete this.searchLabel.total
       let listUrl = this.url
       if (this.listUrl) {
         listUrl = this.listUrl
       }
       get(listUrl, this.searchLabel).then(response => {
-        this.tools.loading = false
         if (response.code === 200) {
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
         } else {
           console.error(response)
+          this.isNoData = true
           if (response.message) {
             this.$message.error(response.message)
           } else {
             this.$message.error('Something went wrong...')
           }
         }
+      }).finally(() => {
+        this.toggleLoading(false)
+        if (!this.tableData || this.tableData.length === 0) {
+          this.isNoData = true
+        } else {
+          this.isNoData = false
+        }
       })
     },
     del (row) {
@@ -162,7 +178,7 @@ export default {
           cancelButtonText: this.$t('tip.no'),
           type: 'warning'
         }).then(() => {
-          this.tools.loading = true
+          this.toggleLoading(true)
           axios.delete(this.url + '?ids=' + ids).then(response => {
             if (response.data.code === 200) {
               this.delFlag = true
@@ -172,7 +188,7 @@ export default {
               this.$message.error(response.data.message)
             }
           }).finally(() => {
-            this.tools.loading = false
+            this.toggleLoading(false)
           })
         }).catch(() => {})
           .finally(() => {
@@ -409,5 +425,8 @@ export default {
       this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
     }
     // this.getTableData()
+  },
+  unmounted () {
+    this.isNoData = false
   }
 }

src/mixins/table.js

@@ -44,7 +44,7 @@ export default {
     tableData: {
       handler (n) {
         if (this.tableData && this.tableData.length > 0) {
-          //this.isInit = false
+          // this.isInit = false
         }
       }
     }
@@ -52,10 +52,14 @@ export default {
   data () {
     return {
       operationWidth: '165', // 操作列宽
-      show: true
+      show: true,
+      isNoData: false
     }
   },
   methods: {
+    toggleLoading (loading) {
+      this.$emit('toggleLoading', loading)
+    },
     getTableWidth (list) {
       if (list && list.length > 0) {
         const language = localStorage.getItem(storageKey.language)

src/views/administration/Chart.vue

@@ -28,10 +28,11 @@
         </button>
       </template>
       <template #default>
+        <loading :loading="loading"></loading>
         <chart-table
           ref="dataTable"
-          v-loading="tools.loading"
           :api="url"
+          :isNoData="isNoData"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"

src/views/administration/GalaxyProxy.vue

@@ -49,10 +49,11 @@
         </top-tool-more-options>
       </template>
       <template v-slot:default>
+        <loading :loading="loading"></loading>
         <galaxy-proxy-table
             ref="dataTable"
-            v-loading="tools.loading"
             :api="url"
+            :isNoData="isNoData"
             :custom-table-title="tools.customTableTitle"
             :height="mainTableHeight"
             :table-data="tableData"

src/views/administration/I18n.vue

@@ -28,10 +28,11 @@
         </button>
       </template>
       <template #default>
+        <loading :loading="loading"></loading>
         <i18n-table
             ref="dataTable"
-            v-loading="tools.loading"
             :api="url"
+            :isNoData="isNoData"
             :custom-table-title="tools.customTableTitle"
             :height="mainTableHeight"
             :table-data="tableData"

src/views/administration/OperationLog.vue

@@ -9,10 +9,11 @@
       :from="fromRoute.operationLog"
       @search="search">
       <template v-slot:default>
+        <loading :loading="loading"></loading>
         <operation-log-table
           ref="dataTable"
-          v-loading="tools.loading"
           :api="url"
+          :isNoData="isNoData"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"

src/views/administration/Roles.vue

@@ -29,10 +29,11 @@
         <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot:default>
+        <loading :loading="loading"></loading>
         <roles-table
           ref="dataTable"
-          v-loading="tools.loading"
           :api="url"
+          :isNoData="isNoData"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"

src/views/administration/User.vue

@@ -27,10 +27,11 @@
         </button>
       </template>
       <template #default>
+        <loading :loading="loading"></loading>
         <user-table
           ref="dataTable"
-          v-loading="tools.loading"
           :api="url"
+          :isNoData="isNoData"
           :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
           :table-data="tableData"
@@ -102,14 +103,15 @@ export default {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
       this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.tools.loading = true
+      this.isNoData = false
+      this.tableData = []
+      this.toggleLoading(true)
       delete this.searchLabel.total
       let listUrl = this.url
       if (this.listUrl) {
         listUrl = this.listUrl
       }
       get(listUrl, this.searchLabel).then(response => {
-        this.tools.loading = false
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
@@ -118,14 +120,25 @@ export default {
           this.pageObj.total = response.data.total
         } else {
           console.error(response)
+          this.isNoData = true
           if (response.message) {
             this.$message.error(response.message)
           } else {
             this.$message.error('Something went wrong...')
           }
         }
+      }).finally(() => {
+        this.toggleLoading(false)
+        if (!this.tableData || this.tableData.length === 0) {
+          this.isNoData = true
+        } else {
+          this.isNoData = false
+        }
       })
     }
+  },
+  unmounted () {
+    this.isNoData = false
   }
 }
 </script>

src/views/report/Report.vue

@@ -40,10 +40,11 @@
           </button>
         </template>
         <template #default>
-          <loading :loading="builtinRightLoading"></loading>
+          <loading :loading="loading"></loading>
           <report-table
               ref="dataTable"
               :api="url"
+              :isNoData="isNoData"
               :custom-table-title="tools.customTableTitle"
               :category-list="builtinReportLeftMenu"
               :height="mainTableHeight"
@@ -157,7 +158,7 @@ export default {
       ],
       tableId: 'reportTable',
       builtinLeftLoading: false,
-      builtinRightLoading: false,
+      // builtinRightLoading: false,
       isInit: true
     }
   },
@@ -246,7 +247,11 @@ export default {
       }
       this.searchLabel = { ...this.searchLabel, ...this.pageObj }
       // this.tools.loading = true
-      this.builtinRightLoading = true
+      // this.builtinRightLoading = true
+      // this.loading = true
+      this.isNoData = false
+      this.tableData = []
+      this.toggleLoading(true)
       delete this.searchLabel.total
       let listUrl = this.url
       if (this.listUrl) {
@@ -260,13 +265,13 @@ export default {
       if (!this.isInit) {
         get(listUrl, this.searchLabel).then(response => {
           // this.tools.loading = false
-          this.builtinRightLoading = false
+          // this.builtinRightLoading = false
+          // this.loading = false
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
               response.data.list[i].status = response.data.list[i].status + ''
             }
             this.$nextTick(() => {
-              this.tableData = []
               this.tableData = response.data.list.map(item => {
                 return {
                   ...item,
@@ -274,9 +279,18 @@ export default {
                 }
               })
               this.pageObj.total = response.data.total
+              if (!this.tableData || this.tableData.length === 0) {
+                this.isNoData = true
+              } else {
+                this.isNoData = false
+              }
             })
             // TODO 回到顶部
+          } else {
+            this.isNoData = true
           }
+        }).finally(() => {
+          this.toggleLoading(false)
         })
       }
       this.isInit = false
@@ -349,6 +363,9 @@ export default {
         }
       }
     }
+  },
+  unmounted () {
+    this.isNoData = false
   }
 }
 </script>

src/views/setting/KnowledgeBase.vue

@@ -53,12 +53,13 @@
         </div>
         <!-- 列表式 -->
         <template v-if="listMode === 'list'">
-          <div class="list-mode__row" >
+          <div class="list-mode__row" style="position:relative;">
+            <loading :loading="loading"></loading>
             <knowledge-base-table-for-row
                     ref="dataTable"
-                    v-loading="tools.loading"
                     height="100%"
                     :api="url"
+                    :isNoData="isNoData"
                     :custom-table-title="tools.customTableTitle"
                     :table-data="tableData"
                     :is-selected-status="isSelectedStatus"
@@ -68,16 +69,18 @@
                     @edit="edit"
                     @orderBy="tableDataSort"
                     @reload="reloadRowList"
+                    @toggleLoading="toggleLoading"
             ></knowledge-base-table-for-row>
           </div>
         </template>
         <!-- 卡片式 -->
         <template v-else-if="listMode === 'block'">
-          <div class="list-mode__card" >
+          <div class="list-mode__card" style="position:relative;">
+            <loading :loading="loading"></loading>
             <knowledge-base-table-for-card
                     ref="dataTableCard"
-                    v-loading="tools.loading"
                     :api="url"
+                    :isNoData="isNoData"
                     :custom-table-title="tools.customTableTitle"
                     :table-data="tableData"
                     :is-selected-status="isSelectedStatus"
@@ -85,10 +88,10 @@
                     @delete="toDelete"
                     @checkboxStatusChange="checkboxStatusChange"
                     @reload="reloadRowList"
+                    @toggleLoading="toggleLoading"
             ></knowledge-base-table-for-card>
           </div>
         </template>
-
         <div class="knowledge-pagination" style="">
           <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
         </div>
@@ -132,7 +135,6 @@
   </el-dialog>
 </template>
 <script>
-import cnDataList from '@/components/table/CnDataList'
 import dataListMixin from '@/mixins/data-list'
 import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
 import KnowledgeBaseTableForRow from '@/components/table/setting/KnowledgeBaseTableForRow'
@@ -145,7 +147,6 @@ import KnowledgeFilter from '@/views/setting/KnowledgeFilter'
 export default {
   name: 'knowledgeBase',
   components: {
-    cnDataList,
     KnowledgeBaseTableForCard,
     KnowledgeBaseTableForRow,
     KnowledgeFilter
@@ -171,13 +172,13 @@ export default {
   },
   methods: {
     onSearch () {
-      let params = {
+      const params = {
         ...this.filterParams,
         name: this.keyWord
       }
       this.clearList()
       this.search(params)
-      this.$refs.knowledgeFilter.reloadFilter(this.checkedCategoryIds,this.checkedStatusIds)
+      this.$refs.knowledgeFilter.reloadFilter(this.checkedCategoryIds, this.checkedStatusIds)
     },
     reloadRowList () {
       this.getTableData()
@@ -262,7 +263,7 @@ export default {
           type: 'warning'
         }).catch(() => {})
       } else {
-        this.tools.loading = true
+        this.toggleLoading(true)
         axios.delete(this.url + '?knowledgeIds=' + ids).then(response => {
           if (response.data.code === 200) {
             this.delFlag = true
@@ -280,7 +281,7 @@ export default {
             this.$message.error(response.data.message)
           }
         }).finally(() => {
-          this.tools.loading = false
+          this.toggleLoading(false)
           if (this.isSelectedStatus != undefined) {
             this.isSelectedStatus = false
             this.disableDelete = true
@@ -318,7 +319,7 @@ export default {
         }
       })
     },
-    reload (params, isAll, isClearType,checkedCategoryIds,checkedStatusIds) {
+    reload (params, isAll, isClearType, checkedCategoryIds, checkedStatusIds) {
       this.disableDelete = true
       this.isSelectedStatus = false
       this.batchDeleteObjs = []
@@ -385,7 +386,7 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        this.tools.loading = true
+        this.toggleLoading(true)
         axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
           if (response.data.code === 200) {
             this.delFlag = true
@@ -404,7 +405,7 @@ export default {
             this.$message.error('Something went wrong...')
           }
         }).finally(() => {
-          this.tools.loading = false
+          this.toggleLoading(false)
         })
       }).catch(() => {})
     },

src/views/setting/KnowledgeBaseForm.vue

@@ -633,8 +633,8 @@ export default {
       this.typeSelectDisable = true
       this.isClick = false
     },
-    backEditData(){
+    backEditData () {
-      if(this.oldTagItem.isValid){
+      if (this.oldTagItem.isValid) {
         this.showImportedData[this.oldTagItem.index].isValid = this.oldTagItem.isValid
         this.showImportedData[this.oldTagItem.index].msg = this.oldTagItem.msg
       }
@@ -886,7 +886,7 @@ export default {
         msg: this.showImportedData[index].msg,
         tagName: this.showImportedData[index].tagName,
         tagValue: this.showImportedData[index].tagValue,
-        index:index
+        index: index
       }
       this.editIndex = index
       this.backEditFlag = true

src/views/setting/KnowledgeFilter.vue

@@ -196,7 +196,7 @@ export default {
           }
         }
         this.filterParams = params
-        this.$emit('reload', params, true,false,this.defaultCheckedCategory,this.defaultCheckedStatus)
+        this.$emit('reload', params, true, false, this.defaultCheckedCategory, this.defaultCheckedStatus)
       }
     },
     getAllTableData (params) {
@@ -254,7 +254,7 @@ export default {
           category.children.push(source)
         })
       })
-      if(this.defaultCheckedCategory.length === 0){
+      if (this.defaultCheckedCategory.length === 0) {
         this.defaultCheckedCategory = categoryIds
       }
     },
@@ -273,15 +273,15 @@ export default {
         })
         statusIds.push(index)
       })
-      if(this.defaultCheckedStatus.length === 0){
+      if (this.defaultCheckedStatus.length === 0) {
         this.defaultCheckedStatus = statusIds
       }
     },
-    reloadFilter (checkedCategoryIds ,checkedStatusIds) {
+    reloadFilter (checkedCategoryIds, checkedStatusIds) {
-      if(checkedCategoryIds && checkedCategoryIds.length > 0){
+      if (checkedCategoryIds && checkedCategoryIds.length > 0) {
         this.defaultCheckedCategory = checkedCategoryIds
       }
-      if(checkedStatusIds && checkedStatusIds.length > 0){
+      if (checkedStatusIds && checkedStatusIds.length > 0) {
         this.defaultCheckedStatus = checkedStatusIds
       }
       this.getAllTableData()