查看详情布局

chat.vue

@@ -5,11 +5,14 @@
             <div v-if="chatId != null" class="h-100 chat-area">
                 <chat-room />
             </div>
-            <div class="chat-panel h-100" v-if="!userMode">
-                <el-tabs class="chat-panel" v-model="currentTab">
+            <div class="chat-panel h-100 pos-rel" v-if="!userMode">
+                <el-tabs class="chat-panel-tabs h-100" v-model="currentTab">
                     <el-tab-pane label="数据" name="one"
-                        >model的数据，可配置。</el-tab-pane
-                    >
+                        >model的数据，可配置。
+                        <div class="detal-btns">
+                            <el-button @click="goTodetail">查看详情</el-button>
+                        </div>
+                    </el-tab-pane>
                     <el-tab-pane
                         :label="`成员${chatMembers.length}人`"
                         name="two"
@@ -67,9 +70,15 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
     },
 })
 export default class Chat extends Vue {
+    @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
+    private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT;
+
     @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
     private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
 
+    @chatStore.Getter(ChatStore.GETTER_CURRENT_CURRENT_CHAT)
+    private readonly currentChat!: ChatStore.GETTER_CURRENT_CURRENT_CHAT;
+
     @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
     private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
 
@@ -82,7 +91,7 @@ export default class Chat extends Vue {
     @chatStore.Action(ChatStore.ACTION_CHAT_ADD_MEMBERS)
     private readonly _addMember!: ChatStore.ACTION_CHAT_ADD_MEMBERS;
 
-    private userMode = true;
+    private userMode = false;
 
     private currentTab = "one";
 
@@ -110,6 +119,14 @@ export default class Chat extends Vue {
         await this._addMember(users);
         done();
     }
+
+    private goTodetail() {
+        const { model_name, obj_id } = this.currentChat.business_data;
+        this.$router.push(
+            `/${this.$route.params.project}/${this.$route.params.entrance}/detail/${model_name}/key/${obj_id}`
+        );
+        this.hideChat();
+    }
 }
 </script>
 <style lang="less" scoped>
@@ -126,7 +143,7 @@ export default class Chat extends Vue {
         .chat-title {
             /deep/ .title-buttons {
                 .button {
-                    display:none
+                    display: none;
                 }
             }
         }
@@ -158,4 +175,16 @@ export default class Chat extends Vue {
         padding: 0 18px;
     }
 }
+.chat-panel-tabs {
+    /deep/ .el-tabs__content {
+        height:calc(100% - 70px);
+    }
+}
+.detal-btns {
+    position: absolute;
+    bottom:0;
+    right:0;
+    left:0;
+    text-align: center;
+}
 </style>

store/index.ts

@@ -616,5 +616,10 @@ export default {
         [ChatStore.STATE_CHAT_SOURCE](state) {
             return state[ChatStore.STATE_CHAT_SOURCE] || 0;
         },
+        [ChatStore.GETTER_CURRENT_CURRENT_CHAT](state) {
+            const chatId = state[ChatStore.STATE_CHAT_CURRENT_CHAT_ID];
+            const chatList = state[ChatStore.STATE_MY_CHAT_ROOM_LIST].list;
+            return chatList.find(chat => chat.chat_id === chatId);
+        },
     },
 } as Module<ChatStoreState, RootStoreState>;

store/model.ts

@@ -72,6 +72,8 @@ export namespace ChatStore {
     /* getter */
     export const GETTER_CURRENT_CHAT_PRESENT_MEMBERS = "当前会话未退出的参与者";
     export type GETTER_CURRENT_CHAT_PRESENT_MEMBERS = dto.ChatMembers | null
+    export const GETTER_CURRENT_CURRENT_CHAT = "当前打开的会话";
+    export type GETTER_CURRENT_CURRENT_CHAT = ChatType | null
 
     /* mutation */
     export const MUTATION_SHOW_CHAT = "打开会话弹窗";