更新会话路由

resources/assets/js/app.js

@@ -98,14 +98,6 @@ Vue.prototype.goForward = function(location, isReplace) {
     if (typeof location === 'string') {
         location = {name: location};
     }
-    // 打开聊天窗口（移动端）
-    if (app.$store.state.windowSmall
-        && location.name === 'manage-messenger'
-        && /\d+/.test(location.params.dialogId)) {
-        app.$store.state.dialogModalId = location.params.dialogId;
-        return
-    }
-    //
     if (app.$store.state.routeHistorys.length === 0) {
         app.$store.state.routeHistorys.push(app.$route)
     }

resources/assets/js/components/Mobile/Tabbar.vue

@@ -122,7 +122,7 @@ export default {
                 return 'project';
             }
             if (this.routeName === 'manage-messenger') {
-                if (this.$route.params.dialogId === 'contacts') {
+                if (this.$route.params.dialogAction === 'contacts') {
                     return 'contacts'
                 } else {
                     return 'dialog'
@@ -167,11 +167,11 @@ export default {
                     break;
 
                 case 'dialog':
-                    location = {name: 'manage-messenger', params: {dialogId: 'dialog'}};
+                    location = {name: 'manage-messenger', params: {dialogAction: 'dialog'}};
                     break;
 
                 case 'contacts':
-                    location = {name: 'manage-messenger', params: {dialogId: 'contacts'}};
+                    location = {name: 'manage-messenger', params: {dialogAction: 'contacts'}};
                     break;
 
                 default:

resources/assets/js/components/UserAvatar.vue

@@ -251,15 +251,13 @@
                 this.userResult(info);
             },
 
+            openDialog() {
+                this.$store.dispatch("openDialogUserid", this.userid);
+            },
+
             onError() {
                 return true
             },
-
-            openDialog() {
-                this.$store.dispatch("openDialogUserid", this.userid).then(({data}) => {
-                    this.goForward({name: 'manage-messenger', params: {dialogId: data.id}});
-                });
-            }
         }
     };
 </script>

resources/assets/js/pages/manage.vue

@@ -516,7 +516,7 @@ export default {
             'clientNewVersion',
             'cacheTaskBrowse',
 
-            'dialogModalId',
+            'dialogIns',
         ]),
 
         ...mapGetters(['taskData', 'dashboardTask']),
@@ -654,10 +654,7 @@ export default {
             if (this.routeName === 'manage-project' && !/^\d+$/.test(this.$route.params.projectId)) {
                 return true;
             }
-            if (this.routeName === 'manage-messenger' && !/^\d+$/.test(this.$route.params.dialogId)) {
+            return ['manage-dashboard', 'manage-calendar', 'manage-messenger', 'manage-file', 'manage-setting'].includes(this.routeName)
-                return true;
-            }
-            return ['manage-dashboard', 'manage-calendar', 'manage-file', 'manage-setting'].includes(this.routeName)
         },
     },
 
@@ -751,9 +748,6 @@ export default {
             if (path === 'file' && $A.getStorageInt("file::folderId") > 0) {
                 location.params.folderId = $A.getStorageInt("file::folderId")
             }
-            if (path === 'messenger' && $A.getStorageInt("messenger::dialogId") > 0) {
-                location.params.dialogId = $A.getStorageInt("messenger::dialogId")
-            }
             this.goForward(location);
         },
 
@@ -927,10 +921,8 @@ export default {
             if (!this.natificationReady && !this.$isEEUiApp) {
                 return; // 通知未准备好
             }
-            if (!this.natificationHidden
+            if ($A.last(this.dialogIns)?.dialog_id === data.dialog_id) {
-                && this.routeName === 'manage-messenger'
+                return; // 最后打开的会话是通知的会话时不通知
-                && (this.$route.params.dialogId == data.dialog_id || this.dialogModalId === data.dialog_id)) {
-                return; // 可见 且 路由匹配时
             }
             //
             const {id, dialog_id, type, msg, userid} = data;
@@ -956,7 +948,8 @@ export default {
                             userid: userid,
                             desc: body,
                             callback: () => {
-                                this.goForward({name: 'manage-messenger', params: {dialogId: dialog_id}});
+                                this.goForward({name: 'manage-messenger'});
+                                this.$store.dispatch('openDialog', dialog_id)
                             }
                         })
                     } else {
@@ -1087,11 +1080,8 @@ export default {
                             if (!$A.isJson(data)) {
                                 return;
                             }
-                            if (data.dialog_id) {
+                            this.goForward({name: 'manage-messenger'});
-                                this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}});
+                            this.$store.dispatch('openDialog', data.dialog_id)
-                            } else {
-                                this.goForward({name: 'manage-messenger'});
-                            }
                         }
                     },
                 });

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

@@ -8,7 +8,7 @@
         :beforeClose="onBeforeClose"
         class-name="dialog-modal"
         fullscreen>
-        <DialogWrapper v-if="dialogModalId > 0" :dialogId="dialogModalId" :beforeBack="onBeforeClose"/>
+        <DialogWrapper v-if="windowSmall && dialogId > 0" :dialogId="dialogId" :beforeBack="onBeforeClose"/>
     </Modal>
 </template>
 
@@ -55,30 +55,25 @@ export default {
     },
 
     computed: {
-        ...mapState(['dialogModalId'])
+        ...mapState(['dialogId'])
     },
 
     watch: {
-        dialogModalId: {
+        dialogId: {
             handler(id) {
-                this.show = id > 0;
+                this.show = id > 0 && this.windowSmall;
-            },
-            immediate: true
-        },
-        windowLarge: {
-            handler(is) {
-                if (is && this.dialogModalId > 0) {
-                    this.$store.state.dialogModalId = 0;
-                }
             },
             immediate: true
         },
+        windowSmall(small) {
+            this.show = this.dialogId > 0 && small;
+        }
     },
 
     methods: {
         onBeforeClose() {
             return new Promise(_ => {
-                this.$store.state.dialogModalId = 0;
+                this.$store.state.dialogId = 0;
             })
         },
     }

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

@@ -294,7 +294,7 @@ export default {
             type: Number,
             default: 0
         },
-        desktopAutoFocus: {
+        autoFocus: {
             type: Boolean,
             default: false
         },
@@ -339,6 +339,26 @@ export default {
         }
     },
 
+    mounted() {
+        if (this.$store.state.dialogMsgTransfer.time > $A.Time()) {
+            this.$store.state.dialogMsgTransfer.time = 0;
+            const {msgFile, msgRecord, msgText} = this.$store.state.dialogMsgTransfer;
+            this.$nextTick(() => {
+                if ($A.isArray(msgFile) && msgFile.length > 0) {
+                    this.sendFileMsg(msgFile);
+                } else if ($A.isJson(msgRecord) && msgRecord.duration > 0) {
+                    this.sendRecord(msgRecord);
+                } else if (msgText) {
+                    this.sendMsg(msgText);
+                }
+            });
+        }
+    },
+
+    beforeDestroy() {
+        this.$store.dispatch('forgetInDialog', this._uid)
+    },
+
     computed: {
         ...mapState([
             'cacheDialogs',
@@ -434,35 +454,12 @@ export default {
     },
 
     watch: {
-        '$route': {
-            handler (route) {
-                if (this.$store.state.dialogMsgTransfer.time > $A.Time()) {
-                    this.$store.state.dialogMsgTransfer.time = 0;
-                    const {msgFile, msgRecord, msgText} = this.$store.state.dialogMsgTransfer;
-                    this.$nextTick(() => {
-                        if ($A.isArray(msgFile) && msgFile.length > 0) {
-                            this.sendFileMsg(msgFile);
-                        } else if ($A.isJson(msgRecord) && msgRecord.duration > 0) {
-                            this.sendRecord(msgRecord);
-                        } else if (msgText) {
-                            this.sendMsg(msgText);
-                        }
-                    });
-                }
-                if (route.query && route.query._) {
-                    let query = $A.cloneJSON(route.query);
-                    delete query._;
-                    this.goForward({query}, true);
-                }
-            },
-            immediate: true
-        },
-
         dialogId: {
             handler(id) {
                 if (id) {
                     this.msgNew = 0;
                     this.topId = -1;
+                    //
                     let cacheTimer = null;
                     if (this.allMsgList.length > 0) {
                         cacheTimer = setTimeout(_ => {
@@ -476,7 +473,12 @@ export default {
                         setTimeout(this.onToBottom, Math.max(0, 100 - (new Date().getTime() - startTime)));
                     }).catch(_ => {});
                     //
-                    if (this.windowLarge && this.desktopAutoFocus) {
+                    this.$store.dispatch('saveInDialog', {
+                        uid: this._uid,
+                        dialog_id: id,
+                    })
+                    //
+                    if (this.autoFocus) {
                         this.$nextTick(_ => {
                             this.$refs.input.focus()
                         })
@@ -741,7 +743,7 @@ export default {
         onToBottom() {
             this.msgNew = 0;
             if (this.isReady) {
-                this.$refs.scroller.scrollToBottom();
+                this.$refs.scroller?.scrollToBottom();
             }
         },
 
@@ -790,7 +792,7 @@ export default {
                 this.createGroupShow = false;
                 this.createGroupData = {};
                 this.$store.dispatch("saveDialog", data);
-                this.goForward({name: 'manage-messenger', params: {dialogId: data.id}});
+                this.$store.dispatch('openDialog', data.id)
             }).catch(({msg}) => {
                 $A.modalError(msg);
             }).finally(_ => {

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

@@ -1,33 +1,30 @@
 <template>
-    <div class="project-dialog">
+    <DialogWrapper v-if="projectData.cacheParameter.chat" :dialog-id="projectData.dialog_id" class="project-dialog">
-        <DialogWrapper :dialog-id="projectData.dialog_id" class="project-dialog-wrapper">
+        <template slot="head">
-            <div slot="head">
+            <div class="dialog-user">
-                <div class="dialog-user">
+                <div class="member-head">
-                    <div class="member-head">
+                    <div class="member-title">{{$L('项目成员')}}<span @click="memberShowAll=!memberShowAll">({{projectData.project_user.length}})</span></div>
-                        <div class="member-title">{{$L('项目成员')}}<span @click="memberShowAll=!memberShowAll">({{projectData.project_user.length}})</span></div>
+                    <div class="member-close" @click="onClose">
-                        <div class="member-close" @click="onClose">
+                        <Icon type="ios-close"/>
-                            <Icon type="ios-close"/>
-                        </div>
                     </div>
-                    <ul :class="['member-list', memberShowAll ? 'member-all' : '']">
-                        <li v-for="item in projectData.project_user">
-                            <UserAvatar :userid="item.userid" :size="36"/>
-                        </li>
-                    </ul>
                 </div>
-                <div class="dialog-nav">
+                <ul :class="['member-list', memberShowAll ? 'member-all' : '']">
-                    <div class="dialog-title">
+                    <li v-for="item in projectData.project_user">
-                        <h2>{{$L('群聊')}}</h2>
+                        <UserAvatar :userid="item.userid" :size="36"/>
-                    </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="dialog-nav">
+                <div class="dialog-title">
+                    <h2>{{$L('群聊')}}</h2>
                 </div>
             </div>
-        </DialogWrapper>
+        </template>
-    </div>
+    </DialogWrapper>
 </template>
 
 <script>
 import {mapGetters} from "vuex";
-import {Store} from 'le5le-store';
 import DialogWrapper from "./DialogWrapper";
 
 export default {

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

@@ -1420,11 +1420,6 @@ export default {
         toggleParameter(data) {
             if (data === 'completedTask') {
                 this.$store.dispatch("forgetTaskCompleteTemp", true);
-            } else if (data === 'chat') {
-                if (this.windowSmall) {
-                    this.goForward({name: 'manage-messenger', params: {dialogId: this.projectData.dialog_id}});
-                    return;
-                }
             }
             this.$store.dispatch('toggleProjectParameter', data);
         },

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

@@ -1111,7 +1111,7 @@ export default {
                                 this.msgRecord = {};
                                 this.msgFile = [];
                                 this.msgText = "";
-                                this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}, query: {_: $A.randomString(6)}});
+                                this.$store.dispatch('openDialog', data.dialog_id)
                             } else {
                                 this.sendDialogMsg();
                             }

resources/assets/js/pages/manage/messenger.vue

@@ -90,7 +90,7 @@
                             <li v-for="items in contactsList">
                                 <div class="label">{{items.az}}</div>
                                 <ul>
-                                    <li v-for="(user, index) in items.list" :key="index" @click="openContacts(user)">
+                                    <li v-for="(user, index) in items.list" :key="index" @click="openContacts(user.userid)">
                                         <div class="avatar"><UserAvatar :userid="user.userid" :size="30"/></div>
                                         <div class="nickname">{{user.nickname}}</div>
                                     </li>
@@ -132,12 +132,12 @@
                 </div>
             </div>
 
-            <div class="messenger-msg">
+            <div v-if="routeName === 'manage-messenger'" class="messenger-msg">
                 <div class="msg-dialog-bg">
                     <div class="msg-dialog-bg-icon"><Icon type="ios-chatbubbles" /></div>
                     <div class="msg-dialog-bg-text">{{$L('选择一个会话开始聊天')}}</div>
                 </div>
-                <DialogWrapper v-if="dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive" desktop-auto-focus/>
+                <DialogWrapper v-if="windowLarge && dialogId > 0" :dialogId="dialogId" @on-active="scrollIntoActive" auto-focus/>
             </div>
         </div>
     </div>
@@ -186,14 +186,10 @@ export default {
     },
 
     computed: {
-        ...mapState(['cacheDialogs', 'loadDialogs']),
+        ...mapState(['cacheDialogs', 'loadDialogs', 'dialogId']),
 
-        dialogId() {
+        routeName() {
-            const {dialogId} = this.$route.params;
+            return this.$route.name
-            if (['dialog', 'contacts'].includes(dialogId)) {
-                this.tabActive = dialogId
-            }
-            return parseInt(/^\d+$/.test(dialogId) ? dialogId : 0);
         },
 
         dialogList() {
@@ -309,6 +305,12 @@ export default {
     },
 
     watch: {
+        '$route' ({params}) {
+            if (['dialog', 'contacts'].includes(params.dialogAction)) {
+                this.tabActive = params.dialogAction
+            }
+        },
+
         dialogKey(val) {
             switch (val) {
                 case 'log.open':
@@ -350,20 +352,11 @@ export default {
         dialogId: {
             handler(id) {
                 if (id > 0) {
-                    $A.setStorage("messenger::dialogId", id);
                     this.scrollIntoActive()
                 }
             },
             immediate: true
         },
-        windowSmall: {
-            handler(is) {
-                if (is && this.dialogId > 0) {
-                    this.goForward({name: 'manage-messenger', params: {dialogId: 'dialog'}}, true);
-                }
-            },
-            immediate: true
-        },
     },
 
     methods: {
@@ -397,20 +390,14 @@ export default {
             if (this.operateVisible) {
                 return
             }
-            if (dialogId > 0) {
+            this.$store.dispatch("openDialog", dialogId)
-                this.goForward({name: 'manage-messenger', params: {dialogId}});
-            } else {
-                this.goForward({name: 'manage-messenger'});
-            }
         },
 
-        openContacts(user) {
+        openContacts(userid) {
             if (this.windowLarge) {
                 this.tabActive = 'dialog';
             }
-            this.$store.dispatch("openDialogUserid", user.userid).then(({data}) => {
+            this.$store.dispatch("openDialogUserid", userid);
-                this.openDialog(data.id)
-            });
         },
 
         filterDialog(dialog) {

resources/assets/js/pages/manage/project.vue

@@ -2,14 +2,14 @@
     <div class="page-project">
         <template v-if="projectId > 0">
             <ProjectPanel/>
-            <ProjectDialog v-if="projectData.cacheParameter.chat"/>
+            <ProjectDialog/>
         </template>
         <ProjectList v-if="windowSmall" v-show="projectId === 0"/>
     </div>
 </template>
 
 <script>
-import {mapState, mapGetters} from "vuex";
+import {mapState} from "vuex";
 import ProjectPanel from "./components/ProjectPanel";
 import ProjectDialog from "./components/ProjectDialog";
 import ProjectList from "./components/ProjectList";
@@ -22,7 +22,6 @@ export default {
 
     computed: {
         ...mapState(['cacheProjects', 'wsOpenNum']),
-        ...mapGetters(['projectData']),
 
         projectId() {
             const {projectId} = this.$route.params;

resources/assets/js/routes.js

@@ -21,7 +21,7 @@ export default [
             },
             {
                 name: 'manage-messenger',
-                path: 'messenger/:dialogId?',
+                path: 'messenger/:dialogAction?',
                 component: () => import('./pages/manage/messenger.vue'),
             },
             {

resources/assets/js/store/actions.js

@@ -2017,6 +2017,16 @@ export default {
         });
     },
 
+    /**
+     * 打开会话
+     * @param state
+     * @param dispatch
+     * @param dialog_id
+     */
+    openDialog({state, dispatch}, dialog_id) {
+        state.dialogId = /\d+/.test(dialog_id) ? dialog_id : 0;
+    },
+
     /**
      * 打开个人会话
      * @param state
@@ -2032,6 +2042,7 @@ export default {
                 },
             }).then(result => {
                 dispatch("saveDialog", result.data);
+                dispatch("openDialog", result.data.id);
                 resolve(result);
             }).catch(e => {
                 console.warn(e);
@@ -2055,8 +2066,8 @@ export default {
                 state.cacheDialogs.splice(index, 1);
             }
         })
-        if (ids.includes($A.getStorageInt("messenger::dialogId"))) {
+        if (ids.includes(state.dialogId)) {
-            $A.setStorage("messenger::dialogId", 0)
+            state.dialogId = 0
         }
         //
         setTimeout(() => {
@@ -2064,6 +2075,38 @@ export default {
         })
     },
 
+    /**
+     * 保存正在会话
+     * @param state
+     * @param dispatch
+     * @param data {uid, dialog_id}
+     */
+    saveInDialog({state, dispatch}, data) {
+        $A.execMainDispatch("saveInDialog", data)
+        //
+        const index = state.dialogIns.findIndex(item => item.uid == data.uid);
+        if (index > -1) {
+            state.dialogIns.splice(index, 1, Object.assign({}, state.dialogIns[index], data));
+        } else {
+            state.dialogIns.push(data);
+        }
+    },
+
+    /**
+     * 忘记正在会话
+     * @param state
+     * @param dispatch
+     * @param uid
+     */
+    forgetInDialog({state, dispatch}, uid) {
+        $A.execMainDispatch("forgetInDialog", uid)
+        //
+        const index = state.dialogIns.findIndex(item => item.uid == uid);
+        if (index > -1) {
+            state.dialogIns.splice(index, 1);
+        }
+    },
+
     /** *****************************************************************************************/
     /** ************************************** 消息 **********************************************/
     /** *****************************************************************************************/

resources/assets/js/store/state.js

@@ -66,10 +66,11 @@ const stateData = {
     userAvatar: {},
 
     // 会话聊天
+    dialogId: 0,
+    dialogIns: [],
     dialogMsgs: [],
     dialogInputCache: $A.getStorageArray("cacheDialogInput"),
     dialogMsgTransfer: {time: 0},
-    dialogModalId: 0,
 
     // 文件
     files: [],

resources/assets/sass/pages/components/project-dialog.scss

@@ -5,82 +5,81 @@
     border-left: 1px solid #f4f5f5;
     z-index: 1;
     position: relative;
-    .project-dialog-wrapper {
+    .dialog-user {
-        .dialog-user {
+        margin-top: 26px;
-            margin-top: 26px;
+        padding: 0 22px;
-            padding: 0 22px;
+        .member-head {
-            .member-head {
+            display: flex;
-                display: flex;
+            align-items: center;
-                align-items: center;
+            .member-title {
-                .member-title {
+                flex: 1;
-                    flex: 1;
+                font-size: 18px;
-                    font-size: 18px;
+                font-weight: 600;
-                    font-weight: 600;
+                > span {
-                    > span {
+                    padding-left: 6px;
-                        padding-left: 6px;
+                    color: $primary-color;
-                        color: $primary-color;
-                        cursor: pointer;
-                    }
-                }
-                .member-close {
                     cursor: pointer;
+                }
+            }
+            .member-close {
+                cursor: pointer;
 
+                .ivu-icon-ios-close {
+                    font-size: 38px;
+                    top: 3px;
+                    right: 2px;
+                    transition: all 0.2s;
+                }
+
+                &:hover {
                     .ivu-icon-ios-close {
-                        font-size: 38px;
+                        transform: rotate(-90deg);
-                        top: 3px;
-                        right: 2px;
-                        transition: all 0.2s;
-                    }
-
-                    &:hover {
-                        .ivu-icon-ios-close {
-                            transform: rotate(-90deg);
-                        }
                     }
                 }
             }
-            .member-list {
+        }
-                display: flex;
+        .member-list {
-                align-items: center;
+            display: flex;
-                margin-top: 12px;
+            align-items: center;
-                overflow: auto;
+            margin-top: 12px;
+            overflow: auto;
 
-                &::-webkit-scrollbar {
+            &::-webkit-scrollbar {
-                    display: none;
+                display: none;
-                }
+            }
 
+            > li {
+                position: relative;
+                list-style: none;
+                margin-right: 10px;
+                margin-bottom: 8px;
+            }
+            &.member-all {
+                display: block;
                 > li {
-                    position: relative;
+                    display: inline-block;
-                    list-style: none;
+                    overflow: hidden;
-                    margin-right: 10px;
-                    margin-bottom: 8px;
-                }
-                &.member-all {
-                    display: block;
-                    > li {
-                        display: inline-block;
-                        overflow: hidden;
-                    }
                 }
             }
         }
-        .dialog-nav {
+    }
-            padding: 0 20px;
+    .dialog-nav {
-        }
+        padding: 0 20px;
     }
 }
 
 @media (max-width: 768px) {
     .project-dialog {
-        .project-dialog-wrapper {
+        .dialog-user {
-            .dialog-user {
+            margin-top: 16px;
-                margin-top: 16px;
+            padding: 0 12px;
-                padding: 0 12px;
+            .member-list {
-            }
+                display: none;
-            .dialog-nav {
-                padding: 0 12px;
-                height: 64px;
             }
         }
+        .dialog-nav {
+            padding: 0 12px;
+            height: 64px;
+        }
     }
 }