成员ui

chat-room.vue

 <template>
-  <div class="chat-room-con h-100">
+  <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">
         {{ chatTitle }}
@@ -219,7 +219,9 @@ export default class ChatRoom extends Vue {
 }
 .chat-members {
   position: absolute;
-  width: calc(100% - 350px);
+  // width: calc(100% - 350px);
+  left:0;
+  right:0;
   padding: 30px;
   padding-bottom: 0;
   background: #fff;

chat.vue

@@ -22,7 +22,12 @@
                 >
             </div>
         </div>
-        <ChatCreator v-show="visible" @submit="addMember" @hide="hideAddMember" />
+        <ChatCreator
+            v-if="visible"
+            :selected="chatMembersId"
+            @submit="addMember"
+            @hide="hideAddMember"
+        />
     </div>
     <!-- </el-dialog> -->
 </template>
@@ -39,6 +44,9 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
 
 @Component({ components: { MessageList, ChatRoom, ChatList, ChatCreator } })
 export default class Chat extends Vue {
+    @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
+    private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
+
     @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
     private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
 
@@ -51,6 +59,10 @@ export default class Chat extends Vue {
     @chatStore.Action(ChatStore.ACTION_CHAT_ADD_MEMBERS)
     private readonly _addMember!: ChatStore.ACTION_CHAT_ADD_MEMBERS;
 
+    private get chatMembersId() {
+        return this.chatMembers.map(k => +k.eid);
+    }
+
     private visible = false;
     @buttonThrottle()
     private terminate() {

create-chat.vue

@@ -21,11 +21,14 @@
                 v-for="user in userList"
                 :key="user.id"
                 class="user-con"
-                :class="{ isChoosed: isChoosed(user.id) }"
                 @click="onClickUser(user.id)"
             >
                 <avatar />
-                <span class="user-name">{{ user.name }}</span>
+                <span
+                    class="user-name"
+                    :class="{ isChoosed: isChoosed(user.id) }"
+                    >{{ user.name }}</span
+                >
             </div>
         </div>
         <el-pagination
@@ -37,13 +40,13 @@
         ></el-pagination>
         <span slot="footer" class="dialog-footer">
             <el-button @click="hide">取 消</el-button>
-            <el-button type="primary" @click="createChat">确 定</el-button>
+            <el-button type="primary" @click="createChat">确1 定</el-button>
         </span>
     </el-dialog>
 </template>
 <script lang="ts">
 import { ListEasy, ListTypes } from "uniplat-sdk";
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 
 import buttonThrottle from "./utils/button-throttle";
 
@@ -57,24 +60,20 @@ type User = {
 type ThenArg<T> = T extends PromiseLike<infer U> ? U : T;
 @Component({ components: { avatar } })
 export default class ChatCreator extends Vue {
-    @chatStore.State(ChatStore.STATE_CHAT_CREATOR_VISIBLE)
-    private readonly visible!: ChatStore.STATE_CHAT_CREATOR_VISIBLE;
-
     @chatStore.Action(ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN)
     private readonly _createChat!: ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN;
 
+    @Prop({
+        type: Array,
+        default: () => [],
+    })
+    private selected!: number[];
+
     @Watch("currentPage")
     private pageChange() {
         this.nextPage();
     }
 
-    @Watch("visible")
-    private onvisibleChange() {
-        if (this.visible) {
-            this.selectedUsers = [];
-        }
-    }
-
     private searchText = "";
     private currentPage = 1;
     private total = 0;
@@ -87,8 +86,9 @@ export default class ChatCreator extends Vue {
 
     private getList!: ThenArg<ReturnType<ListEasy["query"]>>["getList"];
 
-    public created() {
-        this.getUserList();
+    public async created() {
+        await this.getUserList();
+        this.selectedUsers = this.selected;
     }
 
     private async getUserList(searchText: string | null = null) {
@@ -183,9 +183,6 @@ export default class ChatCreator extends Vue {
     align-items: center;
     margin-bottom: 40px;
     cursor: pointer;
-    &.isChoosed {
-        outline: 1px solid #3285ff;
-    }
 }
 .user-name {
     height: 15px;
@@ -193,6 +190,9 @@ export default class ChatCreator extends Vue {
     color: #000000;
     line-height: 15px;
     margin-left: 20px;
+    &.isChoosed {
+        color: #3285ff;
+    }
 }
 .search-bar {
     display: flex;

store/index.ts

@@ -621,6 +621,7 @@ export default {
             });
             detailManager.done();
             await action.execute();
+            await new Promise(resolve => setTimeout(resolve, 500));
             await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS);
         },
     },