update ui

73f1b850 · panjiangyi · e567fc6f · 73f1b850 · 73f1b850 · 73f1b850
Commit 73f1b850 authored Jul 16, 2021 by panjiangyi
Showing with 58 additions and 76 deletions
chat-list.vue
chat-room.vue
chat.vue
components/chat-members.vue
--- a/chat-list.vue
+++ b/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(

--- a/chat-room.vue
+++ b/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,

--- a/chat.vue
+++ b/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);
    }

--- a/components/chat-members.vue
+++ b/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>