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/manager/rtc/modules/detail.vue | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/src/views/im/manager/rtc/modules/detail.vue b/src/views/im/manager/rtc/modules/detail.vue
new file mode 100644
index 0000000..35c3a8d
--- /dev/null
+++ b/src/views/im/manager/rtc/modules/detail.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { ImManagerRtcApi } from '#/api/im/manager/rtc';
+
+import { computed, ref } from 'vue';
+
+import { DICT_TYPE } from '#/packages/constants/src';
+
+import { Descriptions, DescriptionsItem, Drawer, Table } from 'ant-design-vue';
+
+import { getManagerRtcCallParticipantList } from '#/api/im/manager/rtc';
+import { DictTag } from '#/components/dict-tag';
+import {
+ formatDateTimeText,
+ formatGroupLabel,
+ formatUserLabel,
+} from '#/views/im/manager/utils/format';
+import { resolveCallDuration } from '#/views/im/utils/time';
+
+const visible = ref(false);
+const detail = ref<ImManagerRtcApi.RtcCall>({} as ImManagerRtcApi.RtcCall);
+const loading = ref(false);
+const participants = ref<ImManagerRtcApi.RtcParticipant[]>([]);
+
+const duration = computed(() =>
+ resolveCallDuration(detail.value.acceptTime, detail.value.endTime),
+);
+
+const columns = [
+ { title: '鐢ㄦ埛缂栧彿', dataIndex: 'userId', width: 120 },
+ { title: '鏄电О', dataIndex: 'userNickname' },
+ { title: '鍙備笌瑙掕壊', dataIndex: 'role', width: 120 },
+ { title: '鍙備笌鐘舵��', dataIndex: 'status', width: 120 },
+ { title: '琚個璇锋椂闂�', dataIndex: 'inviteTime', width: 180 },
+ { title: '鎺ュ惉鏃堕棿', dataIndex: 'acceptTime', width: 180 },
+ { title: '绂诲紑鏃堕棿', dataIndex: 'leaveTime', width: 180 },
+];
+
+/** 鎵撳紑璇︽儏 */
+async function open(row: ImManagerRtcApi.RtcCall) {
+ detail.value = row;
+ visible.value = true;
+ loading.value = true;
+ try {
+ participants.value = await getManagerRtcCallParticipantList(row.id);
+ } finally {
+ loading.value = false;
+ }
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+ <Drawer v-model:open="visible" destroy-on-close title="閫氳瘽璁板綍璇︽儏" width="900">
+ <Descriptions bordered :column="2">
+ <DescriptionsItem label="缂栧彿">{{ detail.id }}</DescriptionsItem>
+ <DescriptionsItem label="涓氬姟閫氳瘽缂栧彿">{{ detail.room }}</DescriptionsItem>
+ <DescriptionsItem label="鍙戣捣浜�">
+ {{ formatUserLabel(detail.inviterNickname, detail.inviterUserId) }}
+ </DescriptionsItem>
+ <DescriptionsItem label="浼氳瘽绫诲瀷">
+ <DictTag :type="DICT_TYPE.IM_RTC_CALL_CONVERSATION_TYPE" :value="detail.conversationType" />
+ </DescriptionsItem>
+ <DescriptionsItem label="缇�">
+ {{ formatGroupLabel(detail.groupName, detail.groupId) }}
+ </DescriptionsItem>
+ <DescriptionsItem label="濯掍綋绫诲瀷">
+ <DictTag :type="DICT_TYPE.IM_RTC_CALL_MEDIA_TYPE" :value="detail.mediaType" />
+ </DescriptionsItem>
+ <DescriptionsItem label="閫氳瘽鐘舵��">
+ <DictTag :type="DICT_TYPE.IM_RTC_CALL_STATUS" :value="detail.status" />
+ </DescriptionsItem>
+ <DescriptionsItem label="缁撴潫鍘熷洜">
+ <DictTag
+ v-if="detail.endReason"
+ :type="DICT_TYPE.IM_RTC_CALL_END_REASON"
+ :value="detail.endReason"
+ />
+ <span v-else>-</span>
+ </DescriptionsItem>
+ <DescriptionsItem label="鍙戣捣鏃堕棿">
+ {{ formatDateTimeText(detail.startTime) }}
+ </DescriptionsItem>
+ <DescriptionsItem label="鎺ラ�氭椂闂�">
+ {{ formatDateTimeText(detail.acceptTime) }}
+ </DescriptionsItem>
+ <DescriptionsItem label="缁撴潫鏃堕棿">
+ {{ formatDateTimeText(detail.endTime) }}
+ </DescriptionsItem>
+ <DescriptionsItem label="閫氳瘽鏃堕暱">{{ duration }}</DescriptionsItem>
+ </Descriptions>
+
+ <div class="mb-4 mt-5 font-bold">鍙備笌鑰呭垪琛�</div>
+ <Table
+ :columns="columns"
+ :data-source="participants"
+ :loading="loading"
+ :pagination="false"
+ bordered
+ row-key="id"
+ size="small"
+ >
+ <template #bodyCell="{ column, record, text }">
+ <template v-if="column.dataIndex === 'role'">
+ <DictTag :type="DICT_TYPE.IM_RTC_PARTICIPANT_ROLE" :value="record.role" />
+ </template>
+ <template v-else-if="column.dataIndex === 'status'">
+ <DictTag :type="DICT_TYPE.IM_RTC_PARTICIPANT_STATUS" :value="record.status" />
+ </template>
+ <template v-else-if="['inviteTime', 'acceptTime', 'leaveTime'].includes(column.dataIndex as string)">
+ {{ formatDateTimeText(text) }}
+ </template>
+ <template v-else>
+ {{ text || '-' }}
+ </template>
+ </template>
+ </Table>
+ </Drawer>
+</template>
--
Gitblit v1.9.3