优化全局加载器

resources/assets/js/App.vue

@@ -7,8 +7,8 @@
         <!--任务操作-->
         <TaskOperation/>
 
-        <!--右下角加载提示-->
+        <!--全局浮窗加载器-->
-        <Spinner/>
+        <FloatSpinner/>
 
         <!--右下角客户端-->
         <RightBottom/>
@@ -37,7 +37,7 @@
 }
 </style>
 <script>
-import Spinner from "./components/Spinner";
+import FloatSpinner from "./components/FloatSpinner";
 import RightBottom from "./components/RightBottom";
 import PreviewImageState from "./components/PreviewImage/state";
 import NetworkException from "./components/NetworkException";
@@ -46,7 +46,7 @@ import TaskOperation from "./pages/manage/components/TaskOperation";
 import {mapState} from "vuex";
 
 export default {
-    components: {TaskOperation, AudioManager, NetworkException, PreviewImageState, RightBottom, Spinner},
+    components: {TaskOperation, AudioManager, NetworkException, PreviewImageState, RightBottom, FloatSpinner},
 
     data() {
         return {

resources/assets/js/components/FloatSpinner.vue

@@ -0,0 +1,18 @@
+<template>
+    <transition name="fade">
+        <div v-if="floatSpinnerLoad > 0" class="common-float-spinner">
+            <Loading class="common-float-circular"></Loading>
+        </div>
+    </transition>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+    name: 'FloatSpinner',
+    computed: {
+        ...mapState(['floatSpinnerLoad'])
+    }
+}
+</script>

resources/assets/js/components/Spinner.vue

@@ -1,11 +0,0 @@
-<template>
-    <div id="common-spinner" class="common-spinner">
-        <Loading class="common-circular"></Loading>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: 'Spinner',
-    }
-</script>

resources/assets/js/functions/web.js

@@ -412,28 +412,6 @@
      * =============================================================================
      */
     $.extend({
-        // 加载器
-        spinnerShow() {
-            $A.spinnerLoadNum++
-            if ($A.spinnerLoadNum > 0) {
-                const spinner = document.getElementById("common-spinner");
-                if (spinner) {
-                    spinner.style.display = "block"
-                }
-            }
-        },
-
-        spinnerHide() {
-            $A.spinnerLoadNum--
-            if ($A.spinnerLoadNum <= 0) {
-                const spinner = document.getElementById("common-spinner");
-                if (spinner) {
-                    spinner.style.display = "none"
-                }
-            }
-        },
-        spinnerLoadNum: 0,
-
         // 弹窗
         modalConfig(config) {
             if (typeof config === "undefined") {

resources/assets/js/store/actions.js

@@ -29,12 +29,15 @@ export default {
         const cloneParams = $A.cloneJSON(params);
         return new Promise(function (resolve, reject) {
             if (params.spinner === true) {
+                const {before, complete, spinnerDelay} = params;
                 params.before = () => {
-                    $A.spinnerShow();
+                    dispatch("showSpinner", spinnerDelay)
+                    typeof before === "function" && before()
                 };
                 //
                 params.complete = () => {
-                    $A.spinnerHide();
+                    dispatch("hiddenSpinner")
+                    typeof complete === "function" && complete()
                 };
             }
             //
@@ -2317,6 +2320,23 @@ export default {
         }
     },
 
+    /**
+     * 显示全局浮窗加载器
+     * @param state
+     * @param delay
+     */
+    showSpinner({state}, delay) {
+        setTimeout(_ => state.floatSpinnerLoad++, typeof delay === "number" ? delay : 0)
+    },
+
+    /**
+     * 隐藏全局浮窗加载器
+     * @param state
+     */
+    hiddenSpinner({state}) {
+        state.floatSpinnerLoad--
+    },
+
     /** *****************************************************************************************/
     /** *********************************** websocket *******************************************/
     /** *****************************************************************************************/

resources/assets/js/store/state.js

@@ -24,6 +24,7 @@ const stateData = {
     loadUserBasic: false,
     loadProjects: 0,
     loadDialogs: 0,
+    floatSpinnerLoad: 0,
     touchBackInProgress: false,
 
     // User

resources/assets/sass/components/_.scss

@@ -1,12 +1,12 @@
 @import "auto-tip";
 @import "circle";
 @import "drawer-overlay";
+@import "float-spinner";
 @import "gantt-view";
 @import "img-update";
 @import "loading";
 @import "mobile";
 @import "scroller-y";
-@import "spinner";
 @import "t-editor";
 @import "quick-edit";
 @import "tag-input";

resources/assets/sass/components/float-spinner.scss

@@ -0,0 +1,17 @@
+.common-float-spinner {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.6);
+
+    .common-float-circular {
+        width: 30px;
+        height: 30px;
+    }
+}

resources/assets/sass/components/spinner.scss

@@ -1,20 +0,0 @@
-.common-spinner {
-    display: none;
-    position: fixed;
-    z-index: 9999;
-    bottom: 20px;
-    right: 20px;
-    margin: 0 auto;
-    width: 30px;
-    height: 30px;
-
-    .common-circular {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-    }
-}