【fix bug】导入导出加全局遮罩

jero-web/src/App.vue

@@ -1,13 +1,16 @@
 <template>
   <a-config-provider :locale="locale">
     <div id="app">
-      <router-view/>
+      <a-spin :spinning="isImporting || isExporting" :tip="tipText" class="port-spin">
+        <router-view/>
+      </a-spin>
     </div>
   </a-config-provider>
 </template>
 <script>
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import enquireScreen from '@/utils/device'
+import { mapState } from 'vuex'
 
 export default {
   data () {
@@ -15,6 +18,21 @@ export default {
       locale: zhCN
     }
   },
+  computed: {
+    ...mapState({
+      isImporting: state => state.app.isImporting,
+      isExporting: state => state.app.isExporting
+    }),
+    tipText () {
+      if (this.isImporting) {
+        return '正在导入，请稍候...'
+      }
+      if (this.isExporting) {
+        return '正在导出，请稍候...'
+      }
+      return ''
+    }
+  },
   created () {
     const that = this
     enquireScreen(deviceType => {
@@ -37,4 +55,9 @@ export default {
   #app {
     height: 100%;
   }
+
+  .port-spin > div > .ant-spin {
+    height: 100vh!important;
+    max-height: unset!important;
+  }
 </style>

jero-web/src/mixins/JeroListMixin.js

@@ -270,6 +270,8 @@ export const JeroListMixin = {
         param.selections = this.selectedRowKeys.join(',')
       }
       console.log('导出参数', param)
+      // 添加全局遮罩
+      this.$store.commit('SET_IS_EXPORTING', true)
       downFile(this.url.exportXlsUrl, param).then((data) => {
         if (!data) {
           this.$message.warning('文件下载失败')
@@ -288,15 +290,22 @@ export const JeroListMixin = {
           document.body.removeChild(link) // 下载完成移除元素
           window.URL.revokeObjectURL(url) // 释放掉blob对象
         }
+      }).finally(() => {
+        // 去掉全局遮罩
+        this.$store.commit('SET_IS_EXPORTING', false)
       })
     },
     /* 导入 */
     handleImportExcel (info) {
       this.loading = true
+      // 添加全局遮罩
+      this.$store.commit('SET_IS_IMPORTING', true)
       if (info.file.status !== 'uploading') {
         console.log(info.file, info.fileList)
       }
       if (info.file.status === 'done') {
+        // 去掉全局遮罩
+        this.$store.commit('SET_IS_IMPORTING', false)
         this.loading = false
         if (info.file.response.success) {
           // this.$message.success(`${info.file.name} 文件上传成功`);
@@ -319,6 +328,8 @@ export const JeroListMixin = {
           this.$message.error(`${info.file.name} ${info.file.response.message}.`)
         }
       } else if (info.file.status === 'error') {
+        // 去掉全局遮罩
+        this.$store.commit('SET_IS_IMPORTING', false)
         this.loading = false
         if (info.file.response.status === 500) {
           const data = info.file.response

jero-web/src/store/modules/app.js

@@ -27,7 +27,9 @@ const app = {
     autoHideHeader: false,
     color: null,
     weak: false,
-    multipage: true // 默认多页签模式
+    multipage: true, // 默认多页签模式
+    isImporting: false, // 是否正在导入
+    isExporting: false // 是否正在导出
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -78,6 +80,12 @@ const app = {
     SET_MULTI_PAGE (state, multipageFlag) {
       Vue.ls.set(DEFAULT_MULTI_PAGE, multipageFlag)
       state.multipage = multipageFlag
+    },
+    SET_IS_IMPORTING (state, isImporting) {
+      state.isImporting = isImporting
+    },
+    SET_IS_EXPORTING (state, isExporting) {
+      state.isExporting = isExporting
     }
   },
   actions: {