feat: add global loading wrapper

docs/global-loading.md

+增加全局 Loading 遮罩动画
+====
+
+
+
+## 需求
+
+> 为了让操作不被用户中断，或体现一个全局的加载让用户得知当前状态时
+
+
+
+## 实现方案
+
+1. 使用 `spin` 组件实现
+2. 增加一个 `Vue` 原型链属性 方法 `$loading.show()`  `$loading.hide()`，去控制 `vuex` 中的 `app.globalLoading` 属性
+
+具体参考 `src/App.vue`、`src/utils/helper/loadingWrap.js` 已经实现内容
\ No newline at end of file

src/App.vue

 <template>
   <a-locale-provider :locale="locale">
     <div id="app">
-      <router-view/>
+      <a-spin :spinning="globalLoading" wrapperClassName="top-loading">
+        <router-view />
+      </a-spin>
     </div>
   </a-locale-provider>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
 
@@ -16,7 +19,17 @@ export default {
       locale: zhCN
     }
   },
+  computed: {
+    ...mapState({
+      globalLoading: state => state.app.globalLoading
+    })
+  },
   mounted () {
+    console.log(this.globalLoading)
+    this.$loading.show()
+    setTimeout(() => {
+      this.$loading.hide()
+    }, 3000)
     const { $store } = this
     deviceEnquire(deviceType => {
       switch (deviceType) {
@@ -43,4 +56,10 @@ export default {
   #app {
     height: 100%;
   }
+  #app .top-loading {
+    height: 100%;
+  }
+  #app .top-loading .ant-spin-container {
+    height: 100%;
+  }
 </style>

src/core/use.js

-import Vue from 'vue'
-import VueStorage from 'vue-ls'
-import config from '@/config/defaultSettings'
-
-// base library
-import Antd from 'ant-design-vue'
-import Viser from 'viser-vue'
-import 'ant-design-vue/dist/antd.less'
-
-// ext library
-import VueClipboard from 'vue-clipboard2'
-import PermissionHelper from '@/utils/helper/permission'
-// import '@/components/use'
-
-VueClipboard.config.autoSetContainer = true
-
-Vue.use(Antd)
-Vue.use(Viser)
-
-Vue.use(VueStorage, config.storageOptions)
-Vue.use(VueClipboard)
+import Vue from 'vue'
+import VueStorage from 'vue-ls'
+import config from '@/config/defaultSettings'
+
+// base library
+import Antd from 'ant-design-vue'
+import Viser from 'viser-vue'
+import 'ant-design-vue/dist/antd.less'
+
+// ext library
+import VueClipboard from 'vue-clipboard2'
+import PermissionHelper from '@/utils/helper/permission'
+import LoadingWrap from '@/utils/helper/loadingWrap'
+// import '@/components/use'
+
+VueClipboard.config.autoSetContainer = true
+
+Vue.use(Antd)
+Vue.use(Viser)
+
+Vue.use(VueStorage, config.storageOptions)
+Vue.use(VueClipboard)
 Vue.use(PermissionHelper)
+Vue.use(LoadingWrap)

src/store/getters.js

@@ -8,7 +8,8 @@ const getters = {
   welcome: state => state.user.welcome,
   roles: state => state.user.roles,
   userInfo: state => state.user.info,
-  addRouters: state => state.permission.addRouters
+  addRouters: state => state.permission.addRouters,
+  loading: state => state.app.loading
 }
 
 export default getters

src/store/modules/app.js

@@ -22,7 +22,8 @@ const app = {
     fixSiderbar: false,
     autoHideHeader: false,
     color: null,
-    weak: false
+    weak: false,
+    globalLoading: false
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -70,6 +71,9 @@ const app = {
     TOGGLE_WEAK: (state, flag) => {
       Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
       state.weak = flag
+    },
+    TOGGLE_LOADING: (state, loading) => {
+      state.globalLoading = loading
     }
   },
   actions: {
@@ -108,6 +112,9 @@ const app = {
     },
     ToggleWeak ({ commit }, weakFlag) {
       commit('TOGGLE_WEAK', weakFlag)
+    },
+    ToggleLoading ({ commit }, loading) {
+      commit('TOGGLE_LOADING', loading)
     }
   }
 }

src/utils/helper/loadingWrap.js

+function loadingWrap (Vue) {
+  if (loadingWrap.installed) {
+    return
+  }
+
+  !Vue.prototype.$loading && Object.defineProperties(Vue.prototype, {
+    $loading: {
+      get () {
+        const { $store } = this
+        return {
+          show () {
+            console.log('this.$store', $store)
+            $store.commit('TOGGLE_LOADING', true)
+          },
+          hide () {
+            console.log('this.$store', $store)
+            $store.commit('TOGGLE_LOADING', false)
+          }
+        }
+      }
+    }
+  })
+}
+
+export default loadingWrap

src/views/list/TableList.vue

@@ -63,7 +63,7 @@
 
     <div class="table-operator">
       <a-button type="primary" icon="plus" v-action:add>新建</a-button>
-      <a-dropdown v-action:edit && selectedRowKeys.length > 0">
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
           <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
           <!-- lock | unlock -->