移除成员

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">
+        <div
+            class="chat-member pos-rel"
+            v-for="item in chatMembers"
+            :key="item.id"
+        >
+            <span class="member-name ver-mid">
                 {{ item.name || item.eid }}
-            </div>
+            </span>
+            <span class="member-phone ver-mid">
+                {{ item.phone }}
+            </span>
+            <el-button class="ver-mid get-out" type="text" @click="getout(item)"
+                >踢出</el-button
+            >
         </div>
     </div>
 </template>
@@ -18,6 +27,18 @@ import avatar from "@/customer-service/components/avatar.vue";
 export default class ChatMembers extends Vue {
     @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
     private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
+
+    @chatStore.Action(ChatStore.ACTION_CHAT_REMOVE_MEMBER)
+    private readonly _getout!: ChatStore.ACTION_CHAT_REMOVE_MEMBER;
+
+    private async getout(item: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS[number]) {
+       await this.$confirm(`确定要移除${item.name}？`, "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+        });
+        this._getout([item.uid]);
+    }
 }
 </script>
 <style lang="less" scoped>
@@ -25,16 +46,33 @@ export default class ChatMembers extends Vue {
     padding: 30px;
     padding-bottom: 0;
     background: #fff;
-    white-space: pre-line;
     .chat-member {
-        width:33.33%;
-        text-align: center;
-        display: inline-block;
+        display: flex;
         vertical-align: top;
-        margin-bottom: 30px;
+        align-items: center;
+        margin: 10px 0;
+        padding: 10px 0;
+        &:hover {
+            background-color: #f5f7fa;
+            .get-out {
+                display: unset;
+            }
+        }
     }
     .member-name {
-        margin-top: 10px;
+        display: inline-block;
+        width: 5em;
+        word-break: break-word;
+        white-space: pre-line;
+        margin-right: 10px;
+    }
+    .get-out {
+        display: none;
+        margin-left: auto;
+        padding: 0;
     }
 }
+.ver-mid {
+    vertical-align: middle;
+}
 </style>

store/index.ts

@@ -515,7 +515,6 @@ export default {
             const getChatMembersResult = await xim.fetchChatMembers(chatId);
             if (getChatMembersResult == null) return;
             const chatMembers = getChatMembersResult.args[0] as ChatMember[];
-            console.log("fuck 1", chatMembers);
             const newChatMembers = await Promise.all(
                 chatMembers.map(async (member) => {
                     let result: NonNullable<ChatStore.STATE_CURRENT_CHAT_MEMBERS>[number];
@@ -575,7 +574,6 @@ export default {
             const id = Number(
                 state[ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID]
             );
-            console.log("fuck 0", uids, v, id);
             const action = sdk().model(UniplatChatModelName).action("update");
             action.updateInitialParams({
                 selected_list: [{ v, id }],
@@ -596,6 +594,31 @@ export default {
             await new Promise((resolve) => setTimeout(resolve, 500));
             await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS);
         },
+        async [ChatStore.ACTION_CHAT_REMOVE_MEMBER](
+            { state, dispatch },
+            uids: Parameters<ChatStore.ACTION_CHAT_REMOVE_MEMBER>[0]
+        ) {
+            const v = state[ChatStore.STATE_CHAT_CURRENT_CHAT_VERSION];
+            if (v == null) return;
+            const id = Number(
+                state[ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID]
+            );
+            const action = sdk().model(UniplatChatModelName).action("update");
+            action.updateInitialParams({
+                selected_list: [{ v, id }],
+            });
+            const detailManager = await action.getDetailParametersManagerByName(
+                "UniplatChatMember"
+            );
+            uids.forEach((Uid) => {
+                detailManager.deleteByPropertyValue("Uid", Uid);
+            });
+            detailManager.uniqBy("Uid");
+            detailManager.done();
+            await action.execute();
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS);
+        },
     },
     getters: {
         [ChatStore.STATE_CHAT_MSG_HISTORY](state) {

store/model.ts

@@ -251,6 +251,8 @@ export namespace ChatStore {
     export type ACTION_TERINATE_CHAT = () => Promise<void>
     export const ACTION_CHAT_ADD_MEMBERS = "添加成员";
     export type ACTION_CHAT_ADD_MEMBERS = (uids: string[]) => Promise<void>
+    export const ACTION_CHAT_REMOVE_MEMBER = "移除成员";
+    export type ACTION_CHAT_REMOVE_MEMBER = (uids: string[]) => Promise<void>
 }
 
 export interface ChatStoreState {