From 27cd042df9aca0383a49f3514bc21958dd890912 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 29 六月 2026 15:42:23 +0800
Subject: [PATCH] 银川 1.联调产品维护页面 2.添加IM即时通讯模块
---
src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 109 insertions(+), 0 deletions(-)
diff --git a/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue b/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue
new file mode 100644
index 0000000..2844987
--- /dev/null
+++ b/src/views/im/home/components/rtc/rtc-call-member-picker-dialog.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { GroupMemberLite } from '../group'
+
+import { computed, ref } from 'vue'
+
+import { Button, Modal } from 'ant-design-vue'
+
+import { getCurrentUserId } from '#/views/im/utils/auth'
+
+import { useGroupStore } from '../../store/groupStore'
+import { GroupMemberPickerPanel } from '../picker'
+
+defineOptions({ name: 'ImRtcCallMemberPickerDialog' })
+
+const emit = defineEmits<{
+ /** 閫夊畬鐐瑰畬鎴愶紱鎼哄甫閫変腑鐨� userId 鍒楄〃 */
+ success: [selectedIds: number[]]
+}>()
+
+type PickerMode = 'add' | 'invite'
+
+const groupStore = useGroupStore()
+
+const visible = ref(false) // 寮圭獥鏄鹃殣
+const groupId = ref(0) // 褰撳墠缇ょ紪鍙凤紱open 鏃剁敱璋冪敤鏂逛紶鍏�
+const mode = ref<PickerMode>('invite') // 寮圭獥鐢ㄩ�旓紱invite=鍙戣捣缇ら�氳瘽閫夐個璇蜂汉 / add=閫氳瘽涓拷鍔犳垚鍛�
+const excludeUserIds = ref<number[]>([]) // 缃伆鐨� userId 鍒楄〃锛沘dd 鍦烘櫙鎶婂凡鍦ㄩ�氳瘽鍐呯殑浜虹鐢�
+const selectedIds = ref<number[]>([]) // 褰撳墠閫変腑鐨� userId 鍒楄〃锛汫roupMemberPickerPanel v-model 缁戣繃鏉�
+
+/** 鏍囬锛涙寜鐢ㄩ�斿垏鎹� */
+const title = computed(() => (mode.value === 'add' ? '娣诲姞鎴愬憳' : '閫夋嫨鎴愬憳'))
+
+/** 缇ゆ垚鍛樺垪琛紱浠� groupStore 鐜板彇锛宮ap 鎴� GroupMemberLite */
+const members = computed<GroupMemberLite[]>(() => {
+ const group = groupStore.getGroup(groupId.value)
+ return (group?.members || []).map((member) => ({
+ userId: member.userId,
+ nickname: member.nickname,
+ showName: member.displayUserName || member.nickname,
+ avatar: member.avatar,
+ status: member.status,
+ role: member.role
+ }))
+})
+
+/** 鑷繁涓嶅嚭鐜板湪閫夐」閲� */
+const hideIds = computed<number[]>(() => {
+ const myId = getCurrentUserId()
+ return myId ? [myId] : []
+})
+
+/** 宸插湪閫氳瘽鍐呯殑鎴愬憳缃伆 */
+const disabledIds = computed<number[]>(() => excludeUserIds.value)
+
+/** 鏄惁鍙彁浜わ細鑷冲皯閫� 1 涓� */
+const canSubmit = computed(() => selectedIds.value.length > 0)
+
+/** 鎵撳紑寮圭獥锛沞xcludeUserIds 鐢ㄤ簬銆屾坊鍔犳垚鍛樸�嶆椂鎶婂凡鍦ㄩ�氳瘽鍐呯殑浜虹疆鐏� */
+function open(opts: { excludeUserIds?: number[]; groupId: number; mode?: PickerMode; }) {
+ groupId.value = opts.groupId
+ mode.value = opts.mode || 'invite'
+ excludeUserIds.value = opts.excludeUserIds || []
+ selectedIds.value = []
+ visible.value = true
+}
+defineExpose({ open }) // 鎻愪緵 open 鏂规硶锛岀敤浜庢墦寮�寮圭獥
+
+/** 鐐瑰畬鎴愶細emit 閫変腑 ID 鍒楄〃缁欑埗绾� + 鍏抽棴寮圭獥锛涙彁浜ゆ寜閽� disabled 宸蹭繚璇� selectedIds 闈炵┖ */
+function handleOk() {
+ emit('success', [...selectedIds.value])
+ visible.value = false
+}
+</script>
+
+<template>
+ <!--
+ 閫氳瘽鎴愬憳閫夋嫨寮圭獥锛氬彂璧风兢閫氳瘽鏃堕�夐個璇蜂汉 / 閫氳瘽涓坊鍔犳垚鍛橈紱
+ 閫夋嫨 UI 濮旀墭 GroupMemberPickerPanel锛涜嚜宸� hide銆佸凡鍦ㄩ�氳瘽鍐呯殑鎴愬憳 disabled
+ -->
+ <Modal
+ v-model:open="visible"
+ :title="title"
+ width="720px"
+ :mask-closable="false"
+ class="im-picker-dialog"
+ >
+ <div class="h-[480px]">
+ <GroupMemberPickerPanel
+ v-model:selected-ids="selectedIds"
+ :members="members"
+ :disabled-ids="disabledIds"
+ :hide-ids="hideIds"
+ />
+ </div>
+ <template #footer>
+ <Button @click="visible = false">鍙栨秷</Button>
+ <Button type="primary" :disabled="!canSubmit" @click="handleOk">瀹屾垚</Button>
+ </template>
+ </Modal>
+</template>
+
+<style scoped lang="scss">
+@use '../picker/picker-dialog' as picker;
+
+/* :deep 绌块�� el-dialog 鍐呴儴绫伙紱澶嶇敤 picker 鍏叡 mixin */
+.im-picker-dialog {
+ @include picker.styles;
+}
+</style>
--
Gitblit v1.9.3