fix

chat.vue

 <template>
-    <div class="chat-con" :class="{ userMode, isSingle: isSingleChat }">
+    <div class="chat-con" :class="{ userMode, isSingle: isSingleChat }" v-if="chatId != null">
         <ChatTitle :close="hide" class="chat-title" />
         <div class="chat-area-con" :class="{isSingle: isSingleChat, needSearch: !modelName}">
             <div v-if="chatId != null" class="h-100 chat-area">

components/chat-container.vue

@@ -13,9 +13,9 @@
       <i v-if="!isInPage" class="close-btn el-icon-close" @click="$emit('close')"></i>
     </div>
     <chat-list v-if="!modelName" :searchKeyword="searchKeyword" ref="chatListComp" />
-    <chat-list-model v-if="modelName" @update-page-info="$emit('update-page-info', $event)"/>
-    <div class="chat-content-wrap">
-      <chat v-if="chatVisible && onShow" :modelName="modelName"/>
+    <chat-list-model v-if="modelName" @update-page-info="$emit('update-page-info', $event)" ref="chatListModel"/>
+    <div class="chat-content-wrap" v-if="chatVisible && onShow" >
+      <chat :modelName="modelName"/>
     </div>
   </div>
 </template>
@@ -52,6 +52,8 @@ export default class ChatContainer extends Vue {
   @Ref("chatListComp") chatListComp: ChatList;
   private searchKeyword = "";
 
+  @Ref("chatListModel") chatListModel: ChatListModel;
+
   @buttonThrottle()
   private search() {
     this.chatListComp.search()
@@ -60,6 +62,7 @@ export default class ChatContainer extends Vue {
   @Watch("$route") routeUpdate() {
     if (this.$route.fullPath !== this.orginPath) {
       this.onShow = false;
+      this.chatListModel.clearActiveId();
     } else {
       this.onShow = true
     }

components/chat-list-model.vue

@@ -7,7 +7,7 @@
                         v-for="item in chatRooms"
                         :key="'room_' + item.id"
                         class="chat-item"
-                        :class="{ selected: isSelected(item) }"
+                        :class="{ selected: item.chat_id == activeId }"
                         @click="goToChatRoom(item)"
                     >
                         <div class="chat-info">
@@ -40,6 +40,9 @@
                         无接待
                     </div>
                 </el-scrollbar>
+                <el-button class="refresh-btn" title="刷新列表" @click="getList">
+                    <i class="el-icon-refresh-right"></i>
+                </el-button>
                 <el-pagination
                     background
                     @size-change="handleSizeChange"
@@ -116,11 +119,8 @@ export default class ModelChatList extends Vue {
         return this.chatList || [];
     }
 
-    private isSelected(item: ChatType) {
-        if (this.chatId) {
-            return item.chat_id === this.chatId;
-        }
-        return this.selected === item.chat_id;
+    public clearActiveId() {
+        this.activeId = "";
     }
 
     private async getList() {
@@ -131,6 +131,7 @@ export default class ModelChatList extends Vue {
         this.chatList = result.pageData.rows.map(it => {
             return {
                 id: it.id.value,
+                chat_id: it.ImChatId.value,
                 business_data: {
                     model_name: it.ModelName.value,
                     obj_id: it.ObjId.value,
@@ -164,13 +165,13 @@ export default class ModelChatList extends Vue {
     }
 
     private async goToChatRoom(data: ChatType) {
-        await this._createChat({
+        const chatInfo = await this._createChat({
             modelName: data.business_data.model_name,
             selectedListId: data.business_data.obj_id,
             uids:[],
             showByPage: true
         });
-        this.activeId = data.id.toString();
+        this.activeId = data.chat_id.toString();
     }
 
     private raiseChatIdChanged() {
@@ -197,6 +198,7 @@ export default class ModelChatList extends Vue {
 <style lang="less" scoped>
 .chat-list-con {
     display: inline-block;
+    position: relative;
     width: 25%;
     box-sizing: border-box;
     height: 100%;
@@ -290,4 +292,14 @@ export default class ModelChatList extends Vue {
 .chat-check-detail {
     margin-left: 10px;
 }
+.refresh-btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-color: #ccc;
+}
 </style>