update ui

chat-list.vue

@@ -182,6 +182,7 @@ export default class ChatList extends Vue {
 
   private goToChatRoom(data: Chat) {
     if (this.currentChatUniplatId === data.uniplatId) {
+      this.showChat();
       return;
     }
     const wantedChatRoom = this.chatRooms.find(

chat-room.vue

 <template>
   <div class="chat-room-con h-100 pos-rel">
     <div class="room-title d-flex justify-content-between align-items-center">
-      <div class="title" @click="showMembers">
+      <div class="title">
         {{ chatTitle }}
         <template v-if="chatMembers.length">
           <span class="members-count">（成员{{ chatMembers.length }}人）</span>
-          <i
-            v-if="membersPanelVisibility"
-            class="title-right-arrow fast-service-icon-arrow-up"
-          />
-          <i v-else class="title-right-arrow fast-service-icon-arrow-down" />
         </template>
         <template v-if="!notOnlyCheck">
           <div v-if="currentChat.is_finish" class="chat-status chat-done">
@@ -20,14 +15,6 @@
       </div>
       <i v-if="close" @click="close" class="title-close el-icon-close" />
     </div>
-    <div v-if="membersPanelVisibility" class="chat-members">
-      <div class="chat-member" v-for="item in chatMembers" :key="item.id">
-        <avatar shape="circle" :src="item.avatar" :size="40" />
-        <div class="member-name">
-          {{ item.name || item.eid }}
-        </div>
-      </div>
-    </div>
     <div class="chat-panel">
       <div class="chat-area h-100">
         <template v-if="notOnlyCheck">
@@ -48,28 +35,6 @@
           <messages />
         </template>
       </div>
-      <!-- <div class="chat-info h-100 pos-rel">
-                <div class="info-tabs">
-                    <div
-                        @click="activeTab = 'customer'"
-                        :class="{ active: customerInfoTabShow }"
-                        class="info-tab"
-                    >
-                        资料
-                    </div>
-                    <div
-                        @click="activeTab = 'order'"
-                        :class="{ active: orderInfoTabShow }"
-                        class="info-tab"
-                    >
-                        订单
-                    </div>
-                </div> -->
-      <!-- <cusomter-info v-if="customerInfoTabShow" /> -->
-      <!-- <div v-else class="order-info-con">
-                    <order-info />
-                </div> -->
-      <!-- </div> -->
     </div>
   </div>
 </template>
@@ -82,11 +47,8 @@ import {
   Watch,
 } from "vue-property-decorator";
 
-import avatar from "@/customer-service/components/avatar.vue";
 import MessageInput from "@/customer-service/message-input.vue";
 import messages from "@/customer-service/message-list.vue";
-// import CusomterInfo from "./customer-info.vue"
-// import OrderInfo from "./order-info.vue"
 import { ChatStore, chatStore } from "@/customer-service/store/model";
 
 type RoomInfoTab = "customer" | "order";
@@ -95,9 +57,6 @@ type RoomInfoTab = "customer" | "order";
   components: {
     MessageInput,
     messages,
-    avatar
-    // CusomterInfo,
-    // OrderInfo,
   },
 })
 export default class ChatRoom extends Vue {
@@ -129,12 +88,10 @@ export default class ChatRoom extends Vue {
   @Watch("currentChatUniplatId")
   private whenCurrentChatIdChanged(newValue: string, oldValue: string) {
     if (Number(oldValue) === Number(newValue)) return;
-    this.hideMembers();
     this.clearChatMembers();
   }
 
   private activeTab: RoomInfoTab = "customer";
-  private membersPanelVisibility = false;
 
   private get getCurrentInputingPeople() {
     return this.currentInputPeople
@@ -163,14 +120,6 @@ export default class ChatRoom extends Vue {
     return this.activeTab === "order";
   }
 
-  private showMembers() {
-    this.membersPanelVisibility = !this.membersPanelVisibility;
-  }
-
-  private hideMembers() {
-    this.membersPanelVisibility = false;
-  }
-
   private onError(msg: string) {
     // eslint-disable-next-line no-console
     console.error(msg);
@@ -217,27 +166,7 @@ export default class ChatRoom extends Vue {
     background: #c5d4e5;
   }
 }
-.chat-members {
-  position: absolute;
-  // width: calc(100% - 350px);
-  left:0;
-  right:0;
-  padding: 30px;
-  padding-bottom: 0;
-  background: #fff;
-  z-index: 1;
-  border-bottom: 1px solid #f0f0f0;
-  .chat-member {
-    text-align: center;
-    display: inline-block;
-    vertical-align: top;
-    margin-bottom: 30px;
-    margin-right: 30px;
-  }
-  .member-name {
-    margin-top: 10px;
-  }
-}
+
 .chat-panel {
   height: calc(100% - 60px);
   .chat-area,

chat.vue

@@ -4,14 +4,23 @@
             <chat-room :close="hide" />
         </div>
         <div class="chat-panel h-100">
-            <div class="buttons">
+            <!-- <div class="buttons">
                 <el-button class="button" @click="terminate" round
                     >结束会话</el-button
                 >
                 <el-button class="button" @click="showAddMember" round
                     >添加成员</el-button
                 >
-            </div>
+            </div> -->
+        <el-tabs v-model="currentTab">
+            <el-tab-pane label="数据" name="one">model的数据，可配置。</el-tab-pane>
+            <el-tab-pane :label="`成员${chatMembers.length}人`" name="two">
+                <ChatMembers />
+            </el-tab-pane>
+            <el-tab-pane label="工作流" name="three">工作流</el-tab-pane>
+            <el-tab-pane label="备注" name="four">备注</el-tab-pane>
+            <el-tab-pane label="回复" name="five">回复</el-tab-pane>
+        </el-tabs>
         </div>
         <ChatCreator
             v-if="visible"
@@ -25,13 +34,14 @@
 import { Component, Vue } from "vue-property-decorator";
 
 import ChatRoom from "./chat-room.vue";
+import ChatMembers from "./components/chat-members.vue";
 import MessageList from "./message-list.vue";
 import buttonThrottle from "./utils/button-throttle";
 
 import ChatCreator from "@/customer-service/create-chat.vue";
 import { ChatStore, chatStore } from "@/customer-service/store/model";
 
-@Component({ components: { MessageList, ChatRoom, ChatCreator } })
+@Component({ components: { MessageList, ChatRoom, ChatCreator, ChatMembers } })
 export default class Chat extends Vue {
     @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
     private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
@@ -48,6 +58,8 @@ export default class Chat extends Vue {
     @chatStore.Action(ChatStore.ACTION_CHAT_ADD_MEMBERS)
     private readonly _addMember!: ChatStore.ACTION_CHAT_ADD_MEMBERS;
 
+    private currentTab = "one"
+
     private get chatMembersId() {
         return this.chatMembers.map(k => +k.eid);
     }

components/chat-members.vue

+<template>
+    <div class="chat-members">
+        <div class="chat-member" v-for="item in chatMembers" :key="item.id">
+            <avatar shape="circle" :src="item.avatar" :size="40" />
+            <div class="member-name">
+                {{ item.name || item.eid }}
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+import { ChatStore, chatStore } from "../store/model";
+
+import avatar from "@/customer-service/components/avatar.vue";
+@Component({ components: { avatar } })
+export default class ChatMembers extends Vue {
+    @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
+    private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
+}
+</script>
+<style lang="less" scoped>
+.chat-members {
+    padding: 30px;
+    padding-bottom: 0;
+    background: #fff;
+    white-space: pre-line;
+    .chat-member {
+        width:33.33%;
+        text-align: center;
+        display: inline-block;
+        vertical-align: top;
+        margin-bottom: 30px;
+    }
+    .member-name {
+        margin-top: 10px;
+    }
+}
+</style>