移动端消息窗口使用全局模式弹窗

resources/assets/js/app.js

@@ -97,6 +97,14 @@ Vue.prototype.goForward = function(location, isReplace) {
     if (typeof location === 'string') {
         location = {name: location};
     }
+    // 打开聊天窗口（移动端）
+    if (app.$store.state.windowMax768
+        && 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/pages/manage.vue

@@ -322,6 +322,9 @@
             </div>
         </Modal>
 
+        <!--聊天窗口（移动端）-->
+        <DialogModal/>
+
         <!--工作报告-->
         <DrawerOverlay
             v-model="workReportShow"
@@ -385,9 +388,11 @@ import TaskMenu from "./manage/components/TaskMenu";
 import MobileNotification from "../components/Mobile/Notification";
 import MeetingManager from "./manage/components/MeetingManager";
 import longpress from "../directives/longpress";
+import DialogModal from "./manage/components/DialogModal";
 
 export default {
     components: {
+        DialogModal,
         MeetingManager,
         MobileNotification,
         TaskMenu,

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

@@ -0,0 +1,80 @@
+<template>
+    <Modal
+        v-model="show"
+        :mask="false"
+        :mask-closable="false"
+        :footer-hide="true"
+        :transition-names="['mobile-dialog', '']"
+        :beforeClose="onBeforeClose"
+        class-name="dialog-modal"
+        fullscreen>
+        <transition name="mobile-dialog">
+            <DialogWrapper v-if="dialogModalId > 0" :dialogId="dialogModalId" :beforeBack="onBeforeClose"/>
+        </transition>
+    </Modal>
+</template>
+
+<style lang="scss">
+body {
+    .ivu-modal-wrap {
+        &.dialog-modal {
+            overflow: hidden;
+
+            .ivu-modal {
+                margin: 0;
+                padding: 0;
+
+                .ivu-modal-content {
+
+                    .ivu-modal-close {
+                        display: none;
+                    }
+
+                    .ivu-modal-body {
+                        padding: 0;
+                        display: flex;
+                        flex-direction: column;
+                        overflow: hidden;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
+<script>
+
+import {mapState} from "vuex";
+import DialogWrapper from "./DialogWrapper";
+
+export default {
+    name: "DialogModal",
+    components: {DialogWrapper},
+    data() {
+        return {
+            show: false
+        }
+    },
+
+    computed: {
+        ...mapState(['dialogModalId'])
+    },
+
+    watch: {
+        dialogModalId: {
+            handler(id) {
+                this.show = id > 0;
+            },
+            immediate: true
+        }
+    },
+
+    methods: {
+        onBeforeClose() {
+            return new Promise(_ => {
+                this.$store.state.dialogModalId = 0;
+            })
+        },
+    }
+}
+</script>

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

@@ -297,6 +297,7 @@ export default {
             type: Boolean,
             default: false
         },
+        beforeBack: Function
     },
 
     data() {
@@ -853,6 +854,20 @@ export default {
         },
 
         onBack() {
+            if (!this.beforeBack) {
+                return this.handleBack();
+            }
+            const before = this.beforeBack();
+            if (before && before.then) {
+                before.then(() => {
+                    this.handleBack();
+                });
+            } else {
+                this.handleBack();
+            }
+        },
+
+        handleBack() {
             const {name, params} = this.$store.state.routeHistoryLast;
             if (name === this.$route.name && /\d+/.test(params.dialogId)) {
                 this.goForward({name: this.$route.name});

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

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

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

@@ -132,16 +132,13 @@
                 </div>
             </div>
 
-            <transition :name="windowMax768 ? 'mobile-dialog' : ''">
+            <div class="messenger-msg">
-                <div v-if="dialogId || !windowMax768" 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/>
             </div>
-            </transition>
-
         </div>
     </div>
 </template>

resources/assets/js/store/state.js

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

resources/assets/sass/components/mobile.scss

@@ -245,9 +245,6 @@
 
 .mobile-dialog-leave-active {
     transition: all 0.3s ease;
-    .dialog-wrapper {
-        bottom: -60px;
-    }
 }
 
 .mobile-dialog-enter,

resources/assets/sass/pages/page-messenger.scss

@@ -511,12 +511,8 @@
                 }
             }
             .messenger-msg {
-                z-index: 49;
-                background-color: #f8f8f8;
-                .msg-dialog-bg {
                 display: none;
             }
         }
     }
 }
-}