【fix bug】导入导出加载效果

jero-web/src/App.vue

@@ -1,16 +1,13 @@
 <template>
   <a-config-provider :locale="locale">
     <div id="app">
-      <a-spin :spinning="isImporting || isExporting" :tip="tipText" class="port-spin">
+      <router-view/>
-        <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 () {
@@ -18,21 +15,6 @@ 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 => {
@@ -55,17 +37,4 @@ export default {
   #app {
     height: 100%;
   }
-
-  .port-spin {
-    height: 100%;
-
-    /deep/ .ant-spin-container {
-      height: 100%;
-    }
-  }
-
-  .port-spin > div > .ant-spin {
-    height: 100vh!important;
-    max-height: unset!important;
-  }
 </style>

jero-web/src/mixins/JeroListMixin.js

@@ -9,6 +9,9 @@ import Vue from 'vue'
 import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'
 import store from '@/store'
 
+// 导入的加载提示
+let importModalLoading
+
 export const JeroListMixin = {
   data () {
     return {
@@ -270,8 +273,16 @@ export const JeroListMixin = {
         param.selections = this.selectedRowKeys.join(',')
       }
       console.log('导出参数', param)
-      // 添加全局遮罩
+      // 加一个大的提示
-      this.$store.commit('SET_IS_EXPORTING', true)
+      const modalLoading = this.$info({
+        title: '提示',
+        content: <span>正在导出，请稍候 <a-spin size="small"/></span>,
+        keyboard: false
+      })
+      // 把知道了这个按钮去掉
+      this.$nextTick(() => {
+        document.getElementsByClassName('ant-modal-confirm-btns')[0].style = 'display:none'
+      })
       downFile(this.url.exportXlsUrl, param).then((data) => {
         if (!data) {
           this.$message.warning('文件下载失败')
@@ -291,21 +302,31 @@ export const JeroListMixin = {
           window.URL.revokeObjectURL(url) // 释放掉blob对象
         }
       }).finally(() => {
-        // 去掉全局遮罩
+        // 销毁这个提示
-        this.$store.commit('SET_IS_EXPORTING', false)
+        modalLoading.destroy()
       })
     },
     /* 导入 */
     handleImportExcel (info) {
+      // 加一个大的提示
+      if (!this.loading) {
+        importModalLoading = this.$info({
+          title: '提示',
+          content: <span>正在导入，请稍候 <a-spin size="small"/></span>,
+          keyboard: false
+        })
+      }
       this.loading = true
-      // 添加全局遮罩
+      // 把知道了这个按钮去掉
-      this.$store.commit('SET_IS_IMPORTING', true)
+      this.$nextTick(() => {
+        document.getElementsByClassName('ant-modal-confirm-btns')[0].style = 'display:none'
+      })
       if (info.file.status !== 'uploading') {
         console.log(info.file, info.fileList)
       }
       if (info.file.status === 'done') {
-        // 去掉全局遮罩
+        // 销毁这个提示
-        this.$store.commit('SET_IS_IMPORTING', false)
+        importModalLoading && importModalLoading.destroy()
         this.loading = false
         if (info.file.response.success) {
           // this.$message.success(`${info.file.name} 文件上传成功`);
@@ -328,8 +349,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)
+        importModalLoading && importModalLoading.destroy()
         this.loading = false
         if (info.file.response.status === 500) {
           const data = info.file.response

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

@@ -27,9 +27,7 @@ const app = {
     autoHideHeader: false,
     color: null,
     weak: false,
-    multipage: true, // 默认多页签模式
+    multipage: true // 默认多页签模式
-    isImporting: false, // 是否正在导入
-    isExporting: false // 是否正在导出
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -80,12 +78,6 @@ 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: {