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

2023-06-16 17:51:08 +08:00
parent c86a7cfeae
commit 5e682f81d9
23 changed files with 300 additions and 134 deletions
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/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);
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -85,7 +85,8 @@ export default {
      tools: {
        showCustomTableTitle: false // 自定义列弹框是否显示
      },
-      showLayout: []
+      showLayout: [],
+      loading: true
    }
  },
  methods: {
--- a/src/components/table/administration/ChartTable.vue
+++ b/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,
--- a/src/components/table/administration/GalaxyProxyTable.vue
+++ b/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列
--- a/src/components/table/administration/I18nTable.vue
+++ b/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,
--- a/src/components/table/administration/OperationLogTable.vue
+++ b/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,
--- a/src/components/table/administration/RoleTable.vue
+++ b/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列
--- a/src/components/table/administration/UserTable.vue
+++ b/src/components/table/administration/UserTable.vue
@@ -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 {
--- a/src/components/table/report/ReportTable.vue
+++ b/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 () {
--- a/src/components/table/setting/KnowledgeBaseTableForRow.vue
+++ b/src/components/table/setting/KnowledgeBaseTableForRow.vue
@@ -5,6 +5,7 @@
        :data="tableData"
        :height="height"
        border
+        empty-text=" "
        @header-dragend="dragend"
        @sort-change="tableDataSort"
        @selection-change="selectionChange"
@@ -84,6 +85,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>

@@ -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 {
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/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
    }
--- a/src/mixins/data-list.js
+++ b/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
  }
 }
--- a/src/mixins/table.js
+++ b/src/mixins/table.js
@@ -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)
--- a/src/views/administration/Chart.vue
+++ b/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"
--- a/src/views/administration/GalaxyProxy.vue
+++ b/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"
--- a/src/views/administration/I18n.vue
+++ b/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"
--- a/src/views/administration/OperationLog.vue
+++ b/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"
--- a/src/views/administration/Roles.vue
+++ b/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"
--- a/src/views/administration/User.vue
+++ b/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>
--- a/src/views/report/Report.vue
+++ b/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>
--- a/src/views/setting/KnowledgeBase.vue
+++ b/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,7 +172,7 @@ export default {
  },
  methods: {
    onSearch () {
-      let params = {
+      const params = {
        ...this.filterParams,
        name: this.keyWord
      }
@@ -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
@@ -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(() => {})
    },