局部更新和自动打开文档

Author: pixel

web/openDocument.js

@@ -0,0 +1,23 @@
+/*
+                    商用代码公司自用产品无需授权
+    若作为代码出售的产品（任何涉及代码交付第三方作为后续开发）必须保留此脚本
+                         或标注原作者信息
+                          否则将依法维权
+*/
+
+var child_process = require("child_process");
+
+var url = "https://www.gin-vue-admin.com",
+    cmd = '';
+console.log(process.platform)
+switch (process.platform) {
+    case 'win32':
+        cmd = 'start';
+        child_process.exec(cmd + ' ' + url);
+        break;
+
+    case 'darwin':
+        cmd = 'open';
+        child_process.exec(cmd + ' ' + url);
+        break;
+}

web/package.json

@@ -3,7 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
-        "serve": "vue-cli-service serve",
+        "serve": "node openDocument.js && vue-cli-service serve",
         "build": "vue-cli-service build",
         "lint": "vue-cli-service lint"
     },

web/src/main.js

@@ -54,7 +54,7 @@ auth(Vue)
 import uploader from 'vue-simple-uploader'
 Vue.use(uploader)
 
-new Vue({
+export default new Vue({
     render: h => h(App),
     router,
     store

web/src/utils/request.js

@@ -1,12 +1,12 @@
 import axios from 'axios'; // 引入axios
-import { Message, Loading } from 'element-ui';
+import { Message } from 'element-ui';
 import { store } from '@/store/index'
+import context from '@/main.js'
 const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API,
     timeout: 99999
 })
 let acitveAxios = 0
-let loadingInstance
 let timer
 const showLoading = () => {
     acitveAxios++
@@ -15,7 +15,7 @@ const showLoading = () => {
     }
     timer = setTimeout(() => {
         if (acitveAxios > 0) {
-            loadingInstance = Loading.service({ fullscreen: true })
+            context.$bus.emit("showLoading")
         }
     }, 400);
 }
@@ -24,13 +24,12 @@ const closeLoading = () => {
         acitveAxios--
         if (acitveAxios <= 0) {
             clearTimeout(timer)
-            loadingInstance && loadingInstance.close()
+            context.$bus.emit("closeLoading")
         }
     }
     //http request 拦截器
 service.interceptors.request.use(
     config => {
-        console.log(config)
         if (!config.donNotShowLoading) {
             showLoading()
         }

web/src/view/layout/index.vue

@@ -58,11 +58,11 @@
         </transition>
         <transition mode="out-in" name="el-fade-in-linear">
           <keep-alive>
-            <router-view class="admin-box" v-if="$route.meta.keepAlive"></router-view>
+            <router-view  v-loading="loadingFlag"  element-loading-text="正在加载中" class="admin-box" v-if="$route.meta.keepAlive"></router-view>
           </keep-alive>
         </transition>
         <transition mode="out-in" name="el-fade-in-linear">
-          <router-view class="admin-box" v-if="!$route.meta.keepAlive"></router-view>
+          <router-view  v-loading="loadingFlag"  element-loading-text="正在加载中" class="admin-box" v-if="!$route.meta.keepAlive"></router-view>
         </transition>
        <BottomInfo />
       </el-main>
@@ -106,6 +106,7 @@ export default {
       isMobile: false,
       isShadowBg: false,
       showPassword: false,
+      loadingFlag:false,
       pwdModify: {},
       rules: {
         password: [
@@ -209,6 +210,12 @@ export default {
     }
     this.$bus.emit('collapse', this.isCollapse)
     this.$bus.emit('mobile', this.isMobile)
+    this.$bus.on("showLoading",()=>{
+      this.loadingFlag = true
+    })
+    this.$bus.on("closeLoading",()=>{
+      this.loadingFlag = false
+    })
     window.onresize = () => {
       return (() => {
         let screenWidth = document.body.clientWidth

web/src/view/system/state.vue

@@ -138,6 +138,7 @@ export default {
   name: "State",
   data() {
     return {
+      timer:null,
       state: {},
       colors: [
         { color: "#5cb87a", percentage: 20 },
@@ -148,10 +149,14 @@ export default {
   },
   created() { 
     this.reload();
-    setInterval(() => {
+    this.timer = setInterval(() => {
       this.reload();
     }, 1000*10);
   },
+  beforeDestroy(){
+    clearInterval(this.timer)
+    this.timer = null
+  },
   methods: {
     async reload() {
       const { data } = await getSystemState();