<script lang="ts" setup>
|
import { computed, onMounted, reactive, ref, toRefs, unref } from 'vue';
|
|
import { useDrawer } from '@jnpf/ui/drawer';
|
import { useModal } from '@jnpf/ui/modal';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { updatePasswordMessage } from '#/api';
|
import { useWebSocket } from '#/hooks/web/useWebSocket';
|
import { useBaseStore } from '#/store';
|
import { getJnpfAppEnCode, getRealJnpfAppEnCode } from '#/utils/jnpf';
|
import ResetPwdModal from '#/views/_core/profile/components/Account/ResetPwdModal.vue';
|
|
import ChatModal from './chat/chatModal/index.vue';
|
import Chat from './chat/index.vue';
|
import myCollect from './myCollect/index.vue';
|
import Notify from './notify/index.vue';
|
import MessageDrawer from './notify/MessageDrawer.vue';
|
|
interface State {
|
isTwinkle: boolean;
|
messageCount: number;
|
}
|
|
const state = reactive<State>({
|
isTwinkle: false,
|
messageCount: 0,
|
});
|
const { isTwinkle, messageCount: count } = toRefs(state);
|
const chatModalRef = ref();
|
const [registerMessageDrawer, { openDrawer: openMessageDrawer }] = useDrawer();
|
const { onWebSocket } = useWebSocket();
|
const userStore = useUserStore();
|
const baseStore = useBaseStore();
|
const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal();
|
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
const getSysConfig: any = computed(() => baseStore.getSysConfig);
|
const getIsBackend = computed(() => getJnpfAppEnCode() !== getRealJnpfAppEnCode());
|
const getShowCollect = computed(() => !(unref(getIsBackend) || ['teamwork', 'workFlow'].includes(getJnpfAppEnCode())));
|
|
onWebSocket((data: any) => {
|
// 初始化
|
if (data.method == 'initMessage') {
|
state.messageCount = data.unreadTotalCount || 0;
|
state.isTwinkle = !!data.unreadNums.length;
|
}
|
// 消息推送（消息公告用的）
|
if (data.method == 'messagePush') {
|
state.messageCount += data.unreadNoticeCount;
|
}
|
});
|
|
function toggleTwinkle(isTwinkle = false) {
|
state.isTwinkle = isTwinkle;
|
}
|
function readMsg(isAll = false) {
|
if (isAll) {
|
state.messageCount = 0;
|
} else {
|
state.messageCount -= 1;
|
state.messageCount = Math.max(state.messageCount, 0);
|
}
|
}
|
function openChatModal() {
|
chatModalRef.value?.openModal();
|
}
|
function init() {
|
updatePasswordMessage();
|
if (!unref(getUserInfo)?.changePasswordDate && unref(getSysConfig).mandatoryModificationOfInitialPassword) openResetPwdModal(true, {});
|
}
|
onMounted(() => {
|
init();
|
});
|
</script>
|
<template>
|
<myCollect v-if="getShowCollect" />
|
<Chat :is-twinkle @click="openChatModal()" />
|
<Notify :count @click="openMessageDrawer(true, {})" />
|
|
<MessageDrawer @register="registerMessageDrawer" @read-msg="readMsg" />
|
<ResetPwdModal @register="registerResetPwdModal" />
|
<Teleport to="body">
|
<ChatModal ref="chatModalRef" @toggle-twinkle="toggleTwinkle" />
|
</Teleport>
|
</template>
|
