From 074386c8b9fdeabf90601a7960f693691cf57a5c Mon Sep 17 00:00:00 2001
From: pixel <303176530@qq.com>
Date: Fri, 27 Dec 2019 16:28:41 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B6=85=E6=97=B6=E9=81=AE=E7=BD=A9=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 QMPlusVuePage/src/utils/request.js            | 30 +++++++++++++++++--
 .../src/view/example/upload/upload.vue        |  9 +++++-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/QMPlusVuePage/src/utils/request.js b/QMPlusVuePage/src/utils/request.js
index 75f59cd8..60a64c7b 100644
--- a/QMPlusVuePage/src/utils/request.js
+++ b/QMPlusVuePage/src/utils/request.js
@@ -1,15 +1,36 @@
 import axios from 'axios'; // 引入axios
-import { Message } from 'element-ui';
+import { Message, Loading } from 'element-ui';
 import { store } from '@/store/index'
-
 const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API,
     timeout: 99999
 })
+let acitveAxios = 0
+let loadingInstance
+let timer
+const showLoading = () => {
+    acitveAxios++
+    if (timer) {
+        clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+        if (acitveAxios > 0) {
+            loadingInstance = Loading.service({ fullscreen: true })
+        }
+    }, 400);
+}
 
-//http request 拦截器
+const closeLoading = () => {
+        acitveAxios--
+        if (acitveAxios <= 0) {
+            clearTimeout(timer)
+            loadingInstance && loadingInstance.close()
+        }
+    }
+    //http request 拦截器
 service.interceptors.request.use(
     config => {
+        showLoading()
         const token = store.getters['user/token']
         config.data = JSON.stringify(config.data);
         config.headers = {
@@ -19,6 +40,7 @@ service.interceptors.request.use(
         return config;
     },
     error => {
+        closeLoading()
         Message({
             showClose: true,
             message: error,
@@ -32,6 +54,7 @@ service.interceptors.request.use(
 //http response 拦截器
 service.interceptors.response.use(
     response => {
+        closeLoading()
         if (response.data.success) {
             return response.data
         } else {
@@ -47,6 +70,7 @@ service.interceptors.response.use(
         }
     },
     error => {
+        closeLoading()
         Message({
             showClose: true,
             message: error,
diff --git a/QMPlusVuePage/src/view/example/upload/upload.vue b/QMPlusVuePage/src/view/example/upload/upload.vue
index e1a85729..dca941c7 100644
--- a/QMPlusVuePage/src/view/example/upload/upload.vue
+++ b/QMPlusVuePage/src/view/example/upload/upload.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-loading.fullscreen.lock="fullscreenLoading">
     <el-upload
       :action="`${path}/fileUploadAndDownload/upload`"
       :before-upload="checkFile"
@@ -64,6 +64,7 @@ export default {
   mixins: [infoList],
   data() {
     return {
+      fullscreenLoading:false,
       listApi: getFileList,
       listKey: 'list',
       path: path,
@@ -121,14 +122,17 @@ export default {
         })
     },
     checkFile(file) {
+      this.fullscreenLoading = true
       const isJPG = file.type === 'image/jpeg'
       const isPng = file.type === 'image/png'
       const isLt2M = file.size / 1024 / 1024 < 2
       if (!isJPG && !isPng) {
         this.$message.error('上传头像图片只能是 JPG或png 格式!')
+        this.fullscreenLoading = false
       }
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.fullscreenLoading = false
       }
       return (isPng || isJPG) && isLt2M
     },
@@ -140,12 +144,15 @@ export default {
       if (res.success) {
         this.getTableData()
       }
+        this.fullscreenLoading = false
     },
     uploadError() {
       this.$message({
         type: 'error',
         message: '上传失败'
       })
+        this.fullscreenLoading = false
+
     },
     downloadFile(row) {
       downloadImage(row.url, row.name)
-- 
GitLab