拦截器中增加loading

src/api/article.js

-import request from '@/utils/request'
-
-export function fetchList(query) {
-  return request({
-    url: '/article/list',
-    method: 'get',
-    params: query
-  })
-}
-
-export function fetchArticle(id) {
-  return request({
-    url: '/article/detail',
-    method: 'get',
-    params: { id }
-  })
-}
-
-export function fetchPv(pv) {
-  return request({
-    url: '/article/pv',
-    method: 'get',
-    params: { pv }
-  })
-}
-
-export function createArticle(data) {
-  return request({
-    url: '/article/create',
-    method: 'post',
-    data
-  })
-}
-
-export function updateArticle(data) {
-  return request({
-    url: '/article/update',
-    method: 'post',
-    data
-  })
-}

src/api/remoteSearch.js

-import request from '@/utils/request'
-
-export function userSearch(name) {
-  return request({
-    url: '/search/user',
-    method: 'get',
-    params: { name }
-  })
-}

src/utils/loading.js

+import { Loading } from 'element-ui'
+
+let loadingCount = 0
+let loading
+
+const startLoading = () => {
+  loading = Loading.service({
+    lock: true,
+    text: '加载中...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+}
+
+const endLoading = () => {
+  loading.close()
+}
+
+export const showLoading = () => {
+  if (loadingCount === 0) {
+    startLoading()
+  }
+  loadingCount += 1
+}
+
+export const hideLoading = () => {
+  if (loadingCount <= 0) {
+    return
+  }
+  loadingCount -= 1
+  if (loadingCount === 0) {
+    endLoading()
+  }
+}

src/utils/request.js

@@ -3,6 +3,7 @@ import { Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import { MessageBox } from 'element-ui'
+import { showLoading, hideLoading } from './loading'
 
 // create an axios instance
 const service = axios.create({
@@ -71,4 +72,19 @@ service.interceptors.response.use(
   }
 )
 
+/* 请求拦截器（请求之前的操作） */
+service.interceptors.request.use((req) => {
+  showLoading()
+  return req
+}, err => Promise.reject(err))
+
+/* 请求之后的操作 */
+service.interceptors.response.use((res) => {
+  hideLoading()
+  return res
+}, (err) => {
+  hideLoading()
+  return Promise.reject(err)
+})
+
 export default service

src/views/dbconfig/manager.vue

@@ -5,7 +5,6 @@
     </div>
 
     <el-table
-      v-loading="listLoading"
       :data="configs"
       :header-cell-style="{background:'#F3F4F7',color:'#555'}"
       border
@@ -88,7 +87,6 @@ export default {
   },
   data() {
     return {
-      listLoading: true,
       temp: {
       },
       dialogFormVisible: false,
@@ -114,7 +112,6 @@ export default {
     getConfig() {
       getConfig(this.listQuery).then(res => {
         this.configs = res.data
-        this.listLoading = false
       })
     },
 

src/views/docker/envDetail.vue

@@ -20,7 +20,6 @@
         </div>
       </div>
       <el-table
-        v-loading="listLoading"
         :data="FormatTabledata.base"
         :header-cell-style="{background:'#F3F4F7',color:'#555'}"
         size="medium"
@@ -88,7 +87,6 @@
         </div>
       </div>
       <el-table
-        v-loading="listLoading"
         :data="FormatTabledata[item._id]"
         :header-cell-style="{background:'#F3F4F7',color:'#555'}"
         size="medium"
@@ -301,7 +299,6 @@ export default {
   data() {
     return {
       centerDialogVisible: false,
-      listLoading: true,
       namespace: null,
       tableData: [],
       options: [],
@@ -352,11 +349,9 @@ export default {
         //   message: '服务状态已拉取',
         //   type: 'success'
         // })
-        this.listLoading = false
       })
     },
     refresh() {
-      this.listLoading = true
       this.getServicelist()
     },
     getRepository(label) {

src/views/docker/runingEnv.vue

@@ -6,7 +6,6 @@
         运行环境列表
       </p>
       <el-table
-        v-loading="listLoading"
         :data="tableData"
         :header-cell-style="{background:'#F3F4F7',color:'#555'}"
         size="medium"
@@ -55,7 +54,6 @@ export default {
   data() {
     return {
       name: 'hello',
-      listLoading: true,
       tableData: []
     }
   },
@@ -88,9 +86,6 @@ export default {
           }
         })
       })
-      setTimeout(() => {
-        this.listLoading = false
-      }, 0.5 * 1000)
     },
     indexMethod(index) {
       return index + 1

src/views/proconfig/index.vue

@@ -13,7 +13,6 @@
     </div>
 
     <el-table
-      v-loading="listLoading"
       :data="proconfigs"
       border
       fit
@@ -202,7 +201,6 @@ export default {
   data() {
     return {
       total: 0,
-      listLoading: true,
       listQuery: {
         project_name: undefined,
         type: undefined,
@@ -241,7 +239,6 @@ export default {
       }
       getProjects(this.listQuery).then(res => {
         this.proconfigs = res.data
-        this.listLoading = false
       })
     },
     handleFilter() {

src/views/statistics/index.vue

@@ -9,7 +9,6 @@
     </div>
 
     <el-table
-      v-loading="listLoading"
       :data="logs"
       border
       fit
@@ -84,7 +83,6 @@ export default {
   },
   data() {
     return {
-      listLoading: true,
       page: 1,
       listQuery: {
         query: {
@@ -118,7 +116,6 @@ export default {
       }
       getLog(this.listQuery).then(res => {
         this.logs = res.data
-        this.listLoading = false
       })
     },