qhmes/jeecgboot-vue3/src/views/system/im/ImChatModal.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>