新增优化websocket重连后刷新项目、对话、仪表盘数据

resources/assets/js/components/AppDown.vue

@@ -211,7 +211,7 @@ export default {
                             }, this.releases.tag_name)
                         ]),
                         h('MarkdownPreview', {
-                            class: 'notification-body overlay-y',
+                            class: 'notification-body',
                             props: {
                                 initialValue: this.releases.body
                             }

resources/assets/js/pages/manage.vue

@@ -231,6 +231,8 @@ export default {
 
             dialogMsgSubscribe: null,
 
+            websocketOpenSubscribe: null,
+
             columns: [],
 
             projectKeyValue: '',
@@ -264,12 +266,9 @@ export default {
         this.notificationInit();
         this.onVisibilityChange();
         //
-        this.addTaskSubscribe = Store.subscribe('addTask', (data) => {
-            this.onAddTask(data)
-        });
-        this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', (data) => {
-            this.addDialogMsg(data)
-        });
+        this.addTaskSubscribe = Store.subscribe('addTask', this.onAddTask);
+        this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', this.addDialogMsg);
+        this.websocketOpenSubscribe = Store.subscribe('websocketOpen', this.refreshBasic);
         //
         document.addEventListener('keydown', this.shortcutEvent);
         window.addEventListener('resize', this.innerHeightListener);
@@ -288,6 +287,10 @@ export default {
             this.dialogMsgSubscribe.unsubscribe();
             this.dialogMsgSubscribe = null;
         }
+        if (this.websocketOpenSubscribe) {
+            this.websocketOpenSubscribe.unsubscribe();
+            this.websocketOpenSubscribe = null;
+        }
         //
         document.removeEventListener('keydown', this.shortcutEvent);
         window.removeEventListener('resize', this.innerHeightListener);
@@ -619,6 +622,12 @@ export default {
             }
         },
 
+        refreshBasic(num) {
+            if (num > 1) {
+                this.$store.dispatch("refreshBasicData")
+            }
+        },
+
         notificationInit() {
             this.notificationClass = new notificationKoro(this.$L("打开通知成功"));
             if (this.notificationClass.support) {

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -126,9 +126,7 @@ export default {
     },
 
     mounted() {
-        this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', (data) => {
-            this.addDialogMsg(data)
-        });
+        this.dialogMsgSubscribe = Store.subscribe('dialogMsgPush', this.addDialogMsg);
     },
 
     beforeDestroy() {

resources/assets/js/store/actions.js

@@ -166,6 +166,16 @@ export default {
         }
     },
 
+    /**
+     * 刷新基本数据（项目、对话、仪表盘任务）
+     * @param dispatch
+     */
+    refreshBasicData({dispatch}) {
+        dispatch("getProjects");
+        dispatch("getDialogs");
+        dispatch("getTaskForDashboard");
+    },
+
     /**
      * 获取/更新会员信息
      * @param dispatch
@@ -202,9 +212,7 @@ export default {
             state.userToken = userInfo.token;
             state.userIsAdmin = $A.inArray('admin', userInfo.identity);
             $A.setStorage("userInfo", state.userInfo);
-            dispatch("getProjects");
-            dispatch("getDialogs");
-            dispatch("getTaskForDashboard");
+            dispatch("refreshBasicData");
             dispatch("websocketConnection");
             resolve()
         });
@@ -1688,7 +1696,7 @@ export default {
         dispatch("call", {
             url: 'dialog/lists',
         }).then(result => {
-            dispatch("saveDialog", result.data.data.reverse());
+            dispatch("saveDialog", result.data.data);
         }).catch(e => {
             console.warn(e);
         });
@@ -1959,6 +1967,7 @@ export default {
         state.ws = new WebSocket(url);
         state.ws.onopen = (e) => {
             // console.log("[WS] Open", e)
+            Store.set('websocketOpen', ++state.wsOpenNum);
         };
         state.ws.onclose = (e) => {
             // console.log("[WS] Close", e);
@@ -1980,7 +1989,7 @@ export default {
         };
         state.ws.onmessage = (e) => {
             // console.log("[WS] Message", e);
-            const msgDetail = $A.jsonParse(event.data);
+            const msgDetail = $A.jsonParse(e.data);
             const {type, msgId} = msgDetail;
             switch (type) {
                 case "open":
@@ -2004,7 +2013,7 @@ export default {
                             try {
                                 call(msgDetail);
                             } catch (err) {
-                                // console.log("[WS] Callerr", err);
+                                console.log("[WS] Callerr", err);
                             }
                         }
                     });

resources/assets/js/store/state.js

@@ -39,6 +39,7 @@ state.ws = null;
 state.wsMsg = {};
 state.wsCall = {};
 state.wsTimeout = null;
+state.wsOpenNum = 0;
 state.wsListener = {};
 state.wsReadTimeout = null;
 state.wsReadWaitList = [];

resources/assets/sass/components/app-down.scss

@@ -14,11 +14,48 @@
 }
 
 .common-app-down-notification {
-    .el-notification__group {
-        width: 100%;
+    .notification-head {
+        display: flex;
+        align-items: center;
+        .notification-title {
+            display: inline-block;
+            vertical-align: middle;
+            font-size: 18px;
+            color: #17233d;
+            font-weight: 500;
+            margin-right: 6px;
+        }
+    }
+    .notification-body {
+        max-height: 210px;
+        overflow: auto;
+        margin: 18px 0;
+        .markdown-preview {
+            margin: -20px -12px;
+            h2 {
+                font-size: 18px !important;
+                padding-top: 2px !important;
+            }
+            ul {
+                li {
+                    padding: 2px 0 2px 2px !important;
+                    &:after {
+                        top: 10px !important;
+                        width: 6px !important;
+                        height: 6px !important;
+                    }
+                }
+            }
+        }
+    }
+    .notification-link {
+        margin-top: 20px;
+        text-align: right;
+        > button + button {
+            margin-left: 6px;
+        }
     }
 }
-
 .common-app-down-link {
     display: inline-block;
     cursor: pointer;
@@ -35,26 +72,3 @@
         opacity: 0.9;
     }
 }
-
-.common-app-down-body {
-    max-height: 175px;
-    overflow: auto;
-    margin: 18px 0;
-    .markdown-preview {
-        margin: -20px -12px;
-        h2 {
-            font-size: 18px !important;
-            padding-top: 2px !important;
-        }
-        ul {
-            li {
-                padding: 2px 0 2px 2px !important;
-                &:after {
-                    top: 10px !important;
-                    width: 6px !important;
-                    height: 6px !important;
-                }
-            }
-        }
-    }
-}