二十六、 jeecgboot“通知通告“数据加载过程学习

一，通知消息的图标位置

二，头部布局文件与异步装载图标

在src\layouts\default\header\index.vue中的图标文件：Notify组件

<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />

Notify组件是动态异步装载

 import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components';

从src\layouts\default\header\components\index.ts文件createAsyncComponent()装载进来

export const Notify = createAsyncComponent(() => import('./notify/index.vue'));

三，通知图标文件：

src\layouts\default\header\components\notify\index.vue

<template>
  <div :class="prefixCls">
    <!-- //生成通知图标 -->
<Badge :count="count" :overflowCount="9" :offset="[-4, 10]"
 :numberStyle="numberStyle" @click="clickBadge">

      <BellOutlined />
    </Badge>
    <!-- //动态通知 -->
    <DynamicNotice ref="dynamicNoticeRef" v-bind="dynamicNoticeProps" />
   <DetailModal @register="registerDetail" /> <!--//打开通知详情对话窗口 -->
    <!-- //所有消息通知窗口列表 -->
<sys-message-modal @register="registerMessageModal" @refresh="reloadCount">
</sys-message-modal>
  </div>
</template>

四，点击消息图标，打开消息通知窗口列表

 @click="clickBadge"

      //注册消息详细窗口列表

      const [registerMessageModal, { openModal: openMessageModal }] = useModal();

      //打开消息详细窗口列表

      function clickBadge(){
        //消息列表弹窗前去除角标
        for (let i = 0; i < listData.value.length; i++) {
          listData.value[i].count = 0;
        }
        openMessageModal(true, {})
      }

五，消息列表窗口文件

src\views\system\message\components\SysMessageModal.vue

其中：导入消息列表组件sys-message-list和DetailModal

        <a-tab-pane tab="全部消息" key="all" forceRender>