✨ feat(im): 增加群邀请电话的 dialog
parent
b455ce4949
commit
8b4351e4f3
|
|
@ -337,7 +337,6 @@ export enum DICT_TYPE {
|
|||
IM_FRIEND_REQUEST_HANDLE_RESULT = 'im_friend_request_handle_result', // IM 好友申请处理结果
|
||||
IM_GROUP_STATUS = 'im_group_status', // IM 群状态
|
||||
IM_GROUP_MEMBER_ROLE = 'im_group_member_role', // IM 群成员角色
|
||||
IM_GROUP_JOIN_TYPE = 'im_group_join_type', // IM 群加群方式
|
||||
IM_GROUP_ADD_SOURCE = 'im_group_add_source', // IM 加群来源
|
||||
IM_GROUP_REQUEST_HANDLE_RESULT = 'im_group_request_handle_result', // IM 加群申请处理结果
|
||||
IM_RTC_CALL_MEDIA_TYPE = 'im_rtc_call_media_type' // IM 通话媒体类型:1=语音 / 2=视频
|
||||
|
|
|
|||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<!--
|
||||
通话成员选择弹窗:发起群通话时选邀请人 / 通话中添加成员;
|
||||
选择 UI 委托 GroupMemberPickerPanel;自己 hide、已在通话内的成员 disabled
|
||||
-->
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:title="title"
|
||||
width="720px"
|
||||
:close-on-click-modal="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>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :disabled="!canSubmit" @click="handleOk">完成</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useGroupStore } from '../../store/groupStore'
|
||||
import { getCurrentUserId } from '@/views/im/utils/storage'
|
||||
import GroupMemberPickerPanel from '../picker/GroupMemberPickerPanel.vue'
|
||||
import type { GroupMemberLite } from '../group/GroupMember.vue'
|
||||
|
||||
defineOptions({ name: 'ImRtcCallMemberPickerDialog' })
|
||||
|
||||
type PickerMode = 'invite' | 'add'
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 选完点完成;携带选中的 userId 列表 */
|
||||
success: [selectedIds: number[]]
|
||||
}>()
|
||||
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
/** 弹窗显隐 */
|
||||
const visible = ref(false)
|
||||
/** 当前群编号;open 时由调用方传入 */
|
||||
const groupId = ref(0)
|
||||
/** 弹窗用途;invite=发起群通话选邀请人 / add=通话中追加成员 */
|
||||
const mode = ref<PickerMode>('invite')
|
||||
/** 置灰的 userId 列表;add 场景把已在通话内的人禁用 */
|
||||
const excludeUserIds = ref<number[]>([])
|
||||
/** 当前选中的 userId 列表;GroupMemberPickerPanel v-model 绑过来 */
|
||||
const selectedIds = ref<number[]>([])
|
||||
|
||||
/** 标题;按用途切换 */
|
||||
const title = computed(() => (mode.value === 'add' ? '添加成员' : '选择成员'))
|
||||
|
||||
/** 群成员列表;从 groupStore 现取,map 成 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)
|
||||
|
||||
/** 打开弹窗;excludeUserIds 用于「添加成员」时把已在通话内的人置灰 */
|
||||
function open(opts: { groupId: number; mode?: PickerMode; excludeUserIds?: number[] }) {
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '../picker/picker-dialog' as picker;
|
||||
|
||||
.im-picker-dialog {
|
||||
@include picker.styles;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue