111 lines
3.7 KiB
Vue
111 lines
3.7 KiB
Vue
<template>
|
||
<BasicModal
|
||
v-bind="$attrs"
|
||
title="IM聊天"
|
||
:width="980"
|
||
:footer="null"
|
||
:canFullscreen="true"
|
||
:destroyOnClose="false"
|
||
wrapClassName="im-chat-modal-wrap"
|
||
@register="registerModal"
|
||
@open-change="handleOpenChange"
|
||
>
|
||
<div class="im-chat-modal-body">
|
||
<ImChat ref="imChatRef" embedded />
|
||
</div>
|
||
</BasicModal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, nextTick, onMounted, onUnmounted } from 'vue';
|
||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||
import ImChat from './ImChat.vue';
|
||
import { setImChatWindowOpen } from './imCache';
|
||
import { canOpenImChatModal, onImChatModalCloseRequest, openImChat, setImPageContext } from './imSession';
|
||
import { refreshImUnread } from './useImUnread';
|
||
|
||
defineOptions({ name: 'ImChatModal' });
|
||
|
||
const imChatRef = ref<InstanceType<typeof ImChat>>();
|
||
const pendingTargetUserId = ref('');
|
||
|
||
function restoreChatSession() {
|
||
nextTick(async () => {
|
||
const targetUserId = pendingTargetUserId.value;
|
||
if (targetUserId) {
|
||
pendingTargetUserId.value = '';
|
||
await imChatRef.value?.openTargetChat?.(targetUserId);
|
||
return;
|
||
}
|
||
imChatRef.value?.restoreSessionIfNeeded?.();
|
||
});
|
||
}
|
||
|
||
const [registerModal, { closeModal }] = useModalInner((data?: { targetUserId?: string }) => {
|
||
//update-begin---author:xsl ---date:20260528 for：【IM聊天-OA】全页 IM 已打开时拒绝弹窗，改由全页承接-----------
|
||
if (!canOpenImChatModal()) {
|
||
closeModal();
|
||
openImChat({ targetUserId: data?.targetUserId });
|
||
return;
|
||
}
|
||
//update-end---author:xsl ---date:20260528 for：【IM聊天-OA】全页 IM 已打开时拒绝弹窗，改由全页承接-----------
|
||
setImChatWindowOpen(true);
|
||
pendingTargetUserId.value = data?.targetUserId || '';
|
||
restoreChatSession();
|
||
});
|
||
|
||
function handleOpenChange(open: boolean) {
|
||
//update-begin---author:xsl ---date:20260528 for：【IM聊天-OA】全页 IM 已打开时不展示弹窗-----------
|
||
if (open && !canOpenImChatModal()) {
|
||
closeModal();
|
||
return;
|
||
}
|
||
//update-end---author:xsl ---date:20260528 for：【IM聊天-OA】全页 IM 已打开时不展示弹窗-----------
|
||
setImChatWindowOpen(open);
|
||
if (open) {
|
||
restoreChatSession();
|
||
} else {
|
||
//update-begin---author:xsl ---date:20260528 for：【IM聊天-OA】弹窗关闭不清空消息，全页 IM 从缓存恢复-----------
|
||
imChatRef.value?.pauseActiveSession?.();
|
||
//update-end---author:xsl ---date:20260528 for：【IM聊天-OA】弹窗关闭不清空消息，全页 IM 从缓存恢复-----------
|
||
//update-begin---author:xsl ---date:20260528 for：【IM聊天-OA】弹窗关闭清除功能页快照-----------
|
||
setImPageContext(null);
|
||
//update-end---author:xsl ---date:20260528 for：【IM聊天-OA】弹窗关闭清除功能页快照-----------
|
||
refreshImUnread(true);
|
||
}
|
||
}
|
||
|
||
//update-begin---author:xsl ---date:20260528 for：【IM聊天-OA】业务明细消息链接跳转时关闭 IM 弹窗-----------
|
||
let unsubscribeCloseModal: (() => void) | null = null;
|
||
|
||
onMounted(() => {
|
||
unsubscribeCloseModal = onImChatModalCloseRequest(() => {
|
||
closeModal();
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
unsubscribeCloseModal?.();
|
||
});
|
||
//update-end---author:xsl ---date:20260528 for：【IM聊天-OA】业务明细消息链接跳转时关闭 IM 弹窗-----------
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.im-chat-modal-wrap {
|
||
.im-chat-modal-body {
|
||
height: 70vh;
|
||
min-height: 480px;
|
||
}
|
||
|
||
.im-chat-page--embedded {
|
||
height: 100% !important;
|
||
padding: 0 !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.im-chat-row {
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
</style>
|