feat: 对内置报告单个列表下载和预览功能增加，loading效果，防止用户重复点击下载

src/assets/css/components/views/report/builtinReport.scss

@@ -36,7 +36,7 @@
     .list-page .main-container {
       padding: 0;
       .cn-table {
-        height: calc(100% - 61px) !important;
+        height: calc(100% - 62px) !important;
         .el-table--fit.el-table--border {
           height: calc(100% - 55px) !important;
         }
@@ -116,6 +116,14 @@
         display: flex;
         justify-content: center;
         flex-direction: column;
+        position: relative;
+        .chart__loading {
+          .el-icon-loading {
+            font-size: 12px;
+            left: calc(50% - 6px);
+            top: calc(50% - 6px);
+          }
+        }
         .icon {
           height: 25px;
           width: 25px;

src/components/table/report/builtinReportTable.vue

@@ -53,13 +53,15 @@
       </template>
       <template #default="scope">
         <div class="table-operation-items">
-          <div class="table-operation-item--down" @click="tableOperation(['download', scope.row])">
+          <div class="table-operation-item--down" @click="tableOperation(['download', scope.row, 1])">
-            <svg class="icon" aria-hidden="true">
+            <loading :loading="loadingTableId === scope.row.id"></loading>
+            <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
               <use xlink:href="#cn-icon-download2"></use>
             </svg>
           </div>
           <div class="table-operation-item--preview" @click="tableOperation(['preview', scope.row])">
-            <svg class="icon" aria-hidden="true">
+            <loading :loading="loadingPreviewId === scope.row.id"></loading>
+            <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
               <use xlink:href="#cn-icon-preview"></use>
             </svg>
           </div>
@@ -71,7 +73,7 @@
     <el-checkbox v-model="checkboxAll" @change="selectAll(tableData)"></el-checkbox>
     <div class="table-operation-all-span">
       <span>{{ $t('overall.all') }}</span>
-      <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="tableOperation(['download', this.checkboxIds, 'builtin'])">
+      <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="tableOperation(['download', this.checkboxIds, 2])">
         <loading :loading="loading"></loading>
         <span>{{$t('report.batchDow')}}</span>
       </div>
@@ -117,7 +119,10 @@ export default {
       batchDow: false,
       builtinId: '',
       indeterminate: false,
-      loading: false
+      loading: false,
+      loadingTableId: '',
+      loadingPreviewId: ''
+
     }
   },
   methods: {

src/mixins/data-list.js

@@ -150,25 +150,37 @@ export default {
       this.rightBox.show = true
     },
     download (u, n) {
-      if (this.$refs.dataTable.loading && n === 'builtin') return
+      if (this.$refs.dataTable.loading && n === 2) { // 批量下载
+        return
+      } else if (this.$refs.dataTable.loadingTableId === u.id && n === 1) { // 列表单个下载
+        return
+      }
       let fileName = ''
       let url = ''
       let params = {}
-      if (n === 'builtin') {
+      if (n === 2) { // 批量下载
         fileName = 'builtinReport' + '-' + this.getTimeString() + '.zip' // 文件名称
         url = api.reportBatchDownloadPdf // 批量 zip 下载
         params = {
           ids: u
         }
-      } else {
+      } else if (n === 1) {
         fileName = u.name + '.pdf' // 文件名称
         url = api.reportDownloadPdf // 单个 pdf 下载
         params = {
           id: u.id
         }
       }
-      if (n === 'builtin') this.$refs.dataTable.loading = true
+      if (n === 2) { // 批量下载
-      if (!u) return this.$refs.dataTable.loading = false
+        this.$refs.dataTable.loading = true
+      } else if (n === 1) { // 列表单个下载
+        this.$refs.dataTable.loadingTableId = u.id // 列表单个下载
+      }
+      if (!u && n === 2) { // 批量下载
+        return this.$refs.dataTable.loading = false
+      } else if (!u && n === 1) { // 列表单个下载
+        return this.$refs.dataTable.loadingTableId = u.id
+      }
       axios.get(url, { responseType: 'blob', params: params }).then(res => {
         if (window.navigator.msSaveOrOpenBlob) {
           // 兼容ie11
@@ -184,7 +196,11 @@ export default {
           a.click()
           a.remove() // 将a标签移除
         }
-        if (n === 'builtin') this.$refs.dataTable.loading = false
+        if (n === 2) { // 批量下载
+          this.$refs.dataTable.loading = false
+        } else if (n === 1) { // 列表单个下载
+          this.$refs.dataTable.loadingTableId = !u.id
+        }
       }, error => {
         const $self = this
         const reader = new FileReader()
@@ -198,17 +214,34 @@ export default {
           }
         }
         reader.readAsText(error.response.data)
-        if (n === 'builtin') this.$refs.dataTable.loading = false
+        if (n === 2) { // 批量下载
+          this.$refs.dataTable.loading = false
+        } else if (n === 1) { // 列表单个下载
+          this.$refs.dataTable.loadingTableId = !u.id
+        }
+      }).catch(() => {
+        if (n === 2) { // 批量下载
+          this.$refs.dataTable.loading = false
+        } else if (n === 1) { // 列表单个下载
+          this.$refs.dataTable.loadingTableId = !u.id
+        }
       })
     },
     preview (u) {
+      if (this.$refs.dataTable.loadingPreviewId === u.id) { // 列表单个下载
+        return
+      }
       const params = {
         id: u.id
       }
+      this.$refs.dataTable.loadingPreviewId = u.id
       axios.get(api.reportView, { params: params }).then(res => {
         const prevWindow = window.open('', '')
         prevWindow.document.write(res.data)
         prevWindow.focus()
+        this.$refs.dataTable.loadingPreviewId = !u.id
+      }).catch(() => {
+        this.$refs.dataTable.loadingPreviewId = !u.id
       })
     },
     esc () {