hrp-ui-base 1.4.7 → 1.4.9

package/src/components/layout/message/message-notification-drawer.vue

@@ -1,533 +1,533 @@
-<template>
-  <div>
-    <transition name="slide-left">
-      <div id="messageDrawer" v-if="dialogVisible" class="message-drawer el-drawer__body " style="width: 860px;max-width: 80%;height: calc(100%);
-         position: fixed;z-index: 1000;right: 0;display: flex;flex-direction: column;
-         bottom: 0;top: 0;border-radius: 5px 0 0 5px;" v-loading="formLoading">
-        <div class="title-wrapper">
-          <span class="msg-tittle">消息通知</span>
-          <el-icon size="20" color="#909399" class="closed-dialog-icon" @click="close">
-            <CloseBold />
-          </el-icon>
-        </div>
-        <div class="menu-wrapper">
-          <el-select style="max-width: 180px;" @focus="focusIcon = false" @visible-change="focusIcon = !focusIcon"
-            @change="messageSelectHandler" v-model="notificationType">
-            <template #label="{ label, value }">
-              <div style="display: flex;align-items: center">
-                <el-icon class="el-icon--right" v-if="value === 'all'" style="margin-right: 5px;">
-                  <img src="./message-icon/全部通知.svg" width="16" height="16" v-if="focusIcon" />
-                  <img src="./message-icon/全部通知-黑.svg" width="16" height="16" v-else />
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="value === 'unread'" style="margin-right: 5px;">
-                  <img src="./message-icon/未读通知.svg" width="16" height="16" v-if="focusIcon" />
-                  <img src="./message-icon/未读通知-黑.svg" width="16" height="16" v-else />
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="value === 'approval-notice'" style="margin-right: 5px;">
-                  <img src="./message-icon/审批通知.svg" width="16" height="16" v-if="focusIcon">
-                  <img src="./message-icon/审批通知-黑.svg" width="16" height="16" v-else />
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="value === 'system-notice'" style="margin-right: 5px;">
-                  <img src="./message-icon/系统通知.svg" width="16" height="16" v-if="focusIcon">
-                  <img src="./message-icon/系统通知-黑.svg" width="16" height="16" v-else>
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="value === 'message-notice'" style="margin-right: 5px;">
-                  <img src="./message-icon/公告通知.svg" width="16" height="16" v-if="focusIcon">
-                  <img src="./message-icon/公告通知-黑.svg" width="16" height="16" v-else>
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="value === 'file-notice'" style="margin-right: 5px;">
-                  <img src="./message-icon/导出通知.svg" width="16" height="16" v-if="focusIcon">
-                  <img src="./message-icon/导出通知-黑.svg" width="16" height="16" v-else>
-                </el-icon>
-                <span>{{ label }} </span>
-              </div>
-            </template>
-            <el-option v-for="(item) in NOTIFICATION_TYPE" :label="item.name" :key="item.id" :value="item.id">
-              <div style="display: flex;align-items: center;" id="selectType">
-                <el-icon class="el-icon--right" v-if="item.id === 'all'">
-                  <img src="./message-icon/全部通知-黑.svg" width="16" height="16" v-if="focusIcon" />
-                  <img src="./message-icon/全部通知-蓝.svg" width="16" height="16" v-else />
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="item.id === 'unread'">
-                  <img src="./message-icon/未读通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType" />
-                  <img src="./message-icon/未读通知-蓝.svg" width="16" height="16" v-else />
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="item.id === 'approval-notice'">
-                  <img src="./message-icon/审批通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType">
-                  <img src="./message-icon/审批通知-蓝.svg" width="16" height="16" v-else>
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="item.id === 'system-notice'">
-                  <img src="./message-icon/系统通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType">
-                  <img src="./message-icon/系统通知-蓝.svg" width="16" height="16" v-else>
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="item.id === 'message-notice'">
-                  <img src="./message-icon/公告通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType">
-                  <img src="./message-icon/公告通知-蓝.svg" width="16" height="16" v-else>
-                </el-icon>
-                <el-icon class="el-icon--right" v-if="item.id === 'file-notice'">
-                  <img src="./message-icon/导出通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType">
-                  <img src="./message-icon/导出通知-蓝.svg" width="16" height="16" v-else>
-                </el-icon>
-                <span style="margin-left: 5px">{{ item.name }}</span>
-              </div>
-            </el-option>
-          </el-select>
-          <el-dropdown class="example-showcase" trigger="click">
-            <span class="el-dropdown-link">
-              <el-button plain>
-                批量操作
-                <el-icon class="el-icon--right"><arrow-down /></el-icon>
-              </el-button>
-            </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item id="dropDownReadMenuItem" @click="readNoticeHandler">标记所有为已读</el-dropdown-item>
-                <el-dropdown-item id="dropDownReadMenuItem" @click="deleteReadNoticeHandler">删除所有已读通知</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-        <div class="list-wrapper" @scroll="handleScroll" v-if="!ifEmpty">
-          <div v-for="(item) in noticeVO" :key="item.noticeId" class="message-item" @click="messageItemHandler(item)">
-            <el-badge is-dot class="item" :hidden="item.ifRead" style="display: inline-block">
-              <div v-if="item.noticeType === 'message-notice'" style="width:20px;height: 20px">
-                <img src="./message-icon/公告通知.svg" width="20" height="20" class="message-icon">
-                <img src="./message-icon/公告通知-蓝.svg" width="20" height="20" class="message-icon-blue">
-              </div>
-              <div v-if="item.noticeType === 'approval-notice'" style="width:20px;height: 20px">
-                <img src="./message-icon/审批通知.svg" width="20" height="20" class="message-icon">
-                <img src="./message-icon/审批通知-蓝.svg" width="20" height="20" class="message-icon-blue">
-              </div>
-              <div v-if="item.noticeType === 'file-notice'" style="width:20px;height: 20px">
-                <img src="./message-icon/导出通知.svg" width="20" height="20" class="message-icon">
-                <img src="./message-icon/导出通知-蓝.svg" width="20" height="20" class="message-icon-blue">
-              </div>
-              <div v-if="item.noticeType === 'system-notice'" style="width:20px;height: 20px">
-                <img src="./message-icon/系统通知.svg" width="20" height="20" class="message-icon">
-                <img src="./message-icon/系统通知-蓝.svg" width="20" height="20" class="message-icon-blue">
-              </div>
-            </el-badge>
-            <div class="message-info ">
-              <div class="flex-between">
-                <span :class="item.ifRead ? 'noticeType-color-read' : 'noticeType-color'" class="message-title">{{
-                  item.noticeTitle
-                }}</span>
-                <el-icon color="#909399 " size="17" class="closed-icon" @click.stop="deleteNoticeInfoByNoticeIds(item)">
-                  <CloseBold />
-                </el-icon>
-              </div>
-              <div class="message-content"
-                :class="item.ifRead ? 'message-content-color-read' : 'message-content-color'">
-                {{ item.noticeContent }}
-              </div>
-              <div style="height: 24px;width: 100%;font-size: var(--font-size-description);" class="flex-between">
-                <div :class="item.ifRead ? 'noticeFoot-color-read' : 'noticeFoot-color'">{{ item.noticeTime ?
-                  getTime(item.noticeTime) : '年月日' }}</div>
-                <el-button plain type="primary" size="small" class="export-btn" v-if="item.noticeType === 'file-notice'"
-                  @click.stop="downloadHandler(item)"><span
-                    style="font-size:var(--font-size-description)">去下载</span></el-button>
-                <el-button plain type="primary" size="small" class="export-btn" v-if="item.noticeType !== 'file-notice'"
-                  @click.stop="messageItemHandler(item)"><span
-                    style="font-size: var(--font-size-description)">查看详情</span></el-button>
-              </div>
-            </div>
-          </div>
-          <div class="foot-text" v-if="ifText" v-loading="moreLoading">
-            <span class="foot-text-more" v-if="ifTextMore" @click="getMore">查看更多</span>
-            <span v-else>已经没有更多消息了</span>
-          </div>
-        </div>
-        <div v-else
-          style="flex-grow: 1;display: flex;justify-content: center;align-items: center;flex-direction: column">
-          <img src="./message-icon/空状态.svg" width="320px" height="320px">
-          <div class="foot-text"><span>已经没有更多消息了</span></div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, inject } from "vue";
-import { ArrowDown, CloseBold } from '@element-plus/icons-vue'
-import { NOTIFICATION_TYPE } from "./message-dictionary";
-import NoticeController from "../../../api/notice/NoticeController";
-import type NoticePageBO from "../../../api/notice/bo/NoticePageBO";
-import type NoticeVO from "../../../api/notice/bo/NoticeVO";
-import moment from "moment";
-import { ElMessage } from "element-plus";
-
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'update-count'): void
-  (e: 'navigate', notice: NoticeVO): void
-  (e: 'download', notice: NoticeVO): void
-}>()
-
-const formLoading = ref<boolean>(false)
-const moreLoading = ref<boolean>(false)
-const dialogVisible = ref<boolean>(false)
-const notificationType = ref<string>('all')
-const ifEmpty = ref<boolean>(false)
-const ifText = ref<boolean>(false)
-const ifTextMore = ref<boolean>(false)
-const focusIcon = ref<boolean>(false)
-
-/** 打开弹窗 */
-const open = async () => {
-  formLoading.value = true
-  dialogVisible.value = true
-  resetForm()
-  await selectNoticePage()
-}
-
-const handleScroll = async (e: any) => {}
-
-/** 点击加载更多 */
-const getMore = async () => {
-  if (total.value > noticePageBO.value.offset + 10) {
-    moreLoading.value = true
-    noticePageBO.value.offset += 10
-    await selectNoticePage()
-  }
-}
-
-/** 查询条件 */
-const noticePageBO = ref<NoticePageBO>({
-  noticeType: '',
-  timeStamp: '',
-  offset: 0,
-  pageSize: 10,
-  pageNum: 1
-})
-
-/** 消息数组 */
-const noticeVO = ref<NoticeVO[]>([])
-const total = ref<number>(0)
-
-/** 获得消息分页数组函数 */
-const selectNoticePage = async () => {
-  noticePageBO.value.noticeType = notificationType.value
-  noticePageBO.value.timeStamp = moment.unix(moment().unix()).format("YYYY-MM-DD HH:mm:ss")
-  await NoticeController.selectNoticePage(noticePageBO.value).then(data => {
-    if (data.code === 200 && data.res) {
-      if (data.res.records) {
-        noticeVO.value.push(...data.res.records)
-      }
-      total.value = data.res.total
-      ifEmpty.value = noticeVO.value.length === 0
-      ifText.value = true
-      ifTextMore.value = total.value > noticePageBO.value.offset + 10
-    } else if (data.code === 200 && data.res === null) {
-      noticeVO.value = []
-      ifEmpty.value = true
-      ifText.value = true
-      ifTextMore.value = total.value > noticePageBO.value.offset + 10
-    }
-  }).finally(() => {
-    formLoading.value = false
-    moreLoading.value = false
-  })
-}
-
-/** 获得时间 */
-const getTime = (dateString: string) => {
-  let date = new Date(dateString)
-  return date.getFullYear() + "年" +
-    ("0" + (date.getMonth() + 1)).slice(-2) + "月" +
-    ("0" + date.getDate()).slice(-2) + "日 " +
-    date.getHours() + ":" +
-    ("0" + date.getMinutes()).slice(-2);
-}
-
-// 给整个文档添加点击事件监听器
-document.addEventListener('mouseup', function (event: any) {
-  let target = event.target;
-  let closeDom = document.querySelectorAll('.el-notification__closeBtn')
-  if (closeDom) {
-    for (let i = 0; i < closeDom.length; i++) {
-      closeDom[i].id = 'el-notification__closeBtn'
-    }
-  }
-  while (target && target.id !== 'tourMessageId' && target.id !== 'selectType'
-    && target.id !== 'el-notification__closeBtn'
-    && target.id !== 'dropDownReadMenuItem' && target.id !== 'messageDrawer') {
-    target = target.parentNode;
-  }
-  if (!target) {
-    close()
-  }
-}, true);
-
-/** 修改消息类型函数*/
-const messageSelectHandler = async () => {
-  noticePageBO.value.pageNum = 1
-  noticeVO.value = []
-  noticePageBO.value.offset = 0
-  ifText.value = false
-  formLoading.value = true
-  await selectNoticePage()
-}
-
-/** 删除单个消息函数*/
-const deleteNoticeInfoByNoticeIds = (e: NoticeVO) => {
-  NoticeController.deleteNoticeInfoByNoticeIds([e.noticeId]).then(data => {
-    if (data.code === 200 && data) {
-      noticeVO.value = noticeVO.value.filter(item => item.noticeId !== e.noticeId)
-      noticePageBO.value.offset = noticePageBO.value.offset - 1
-      ifEmpty.value = noticeVO.value.length === 0 && !ifTextMore.value
-      emit('update-count')
-    }
-  })
-}
-
-/** 标记所有为已读*/
-const readNoticeHandler = async () => {
-  await NoticeController.readNoticeInfoByNoticeType(notificationType.value).then(async (data) => {
-    if (data.code === 200 && data) {
-      noticeVO.value = []
-      noticePageBO.value.pageNum = 1
-      noticePageBO.value.offset = 0
-      await selectNoticePage()
-      emit('update-count')
-    }
-  })
-}
-
-/** 删除所有已读通知*/
-const deleteReadNoticeHandler = async () => {
-  await NoticeController.deleteReadNoticeInfoByNoticeType(notificationType.value).then(async (data) => {
-    if (data.code === 200 && data) {
-      ElMessage({ type: 'success', message: '删除成功' })
-      noticeVO.value = []
-      noticePageBO.value.pageNum = 1
-      noticePageBO.value.offset = 0
-      await selectNoticePage()
-    }
-  })
-}
-
-/** 点击跳转通知详情 - 通过事件通知 scm 处理路由跳转 */
-const messageItemHandler = async (e: NoticeVO) => {
-  await NoticeController.readNoticeInfo(e.noticeId)
-  e.ifRead = true
-  if (e.noticeType === 'file-notice') {
-    emit('update-count')
-    return
-  }
-  emit('navigate', e)
-  emit('update-count')
-  close()
-}
-
-/** 文件下载 - 通过事件通知 scm 处理 */
-const downloadHandler = async (e: NoticeVO) => {
-  if (!e.ifRead) {
-    e.ifRead = true
-    await NoticeController.readNoticeInfo(e.noticeId)
-    emit('update-count')
-  }
-  emit('download', e)
-  close()
-}
-
-/** 表单重置 */
-const resetForm = () => {
-  notificationType.value = 'all'
-  noticePageBO.value.pageNum = 1
-  noticePageBO.value.offset = 0
-  noticePageBO.value.timeStamp = ''
-  noticeVO.value = []
-}
-
-/** 抽屉关闭 */
-const close = () => {
-  dialogVisible.value = false
-  emit('close')
-}
-
-defineExpose({ open, close })
-
-/** 获得messageInfo - 外部注入新通知 */
-let messageInfo = inject('messageInfo', ref<NoticeVO>({
-  noticeId: '',
-  noticeType: '',
-  noticeContent: '',
-  noticeTitle: '',
-  urlRoute: '',
-  ifRead: false,
-  noticeTime: ''
-}))
-
-watch(() => { return messageInfo.value }, (value) => {
-  if (messageInfo.value.noticeType === notificationType.value
-    || notificationType.value === 'all' || notificationType.value === 'unread') {
-    noticeVO.value.unshift(messageInfo.value)
-    ifEmpty.value = noticeVO.value.length === 0
-  }
-}, { immediate: true, deep: true })
-</script>
-
-<style scoped lang="scss">
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: all 0.7s ease;
-}
-.slide-left-enter-from {
-  transform: translateX(100%);
-}
-.slide-left-leave-to {
-  transform: translateX(100%);
-}
-
-.flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.message-drawer {
-  background-color: var(--custom-theme-fill-7);
-  box-shadow: -1px 0px 4px 1px rgba(144, 147, 153, 0.2);
-
-  .title-wrapper {
-    padding: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .msg-tittle {
-      font-size: var(--font-size-h1);
-      font-weight: bold;
-      color: var(--custom-theme-text-2)
-    }
-  }
-
-  .menu-wrapper {
-    padding: 10px;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    border-bottom: var(--custom-theme-border-4) 1px solid;
-    flex-shrink: 0;
-  }
-
-  .list-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow: scroll;
-    box-sizing: border-box;
-
-    .message-item {
-      display: flex;
-      justify-content: flex-start;
-      padding: 10px;
-      border-bottom: var(--custom-theme-border-4) 1px solid;
-
-      .message-icon-blue,
-      .export-btn,
-      .closed-icon {
-        display: none;
-      }
-
-      .message-info {
-        margin-left: 5px;
-        display: inline-block;
-        width: calc(100% - 35px);
-      }
-
-      .message-content {
-        margin: 8px 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-        font-size: var(--font-size-description);
-      }
-
-      .message-title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-        font-size: var(--font-size-body);
-        font-weight: bold;
-      }
-
-      .message-content-color {
-        color: var(--custom-theme-text-1);
-      }
-
-      .message-content-color-read {
-        color: var(--el-color-info);
-      }
-    }
-
-    .message-item:hover {
-      cursor: pointer;
-    }
-    .message-item:hover .message-icon {
-      display: none;
-    }
-    .message-item:hover .message-icon-blue {
-      display: block;
-    }
-    .message-item:hover .export-btn {
-      display: block;
-    }
-    .message-item:hover .closed-icon {
-      display: block;
-    }
-    .message-item:hover {
-      background-color: var(--custom-theme-fill-4);
-    }
-  }
-
-  .closed-dialog-icon:hover {
-    cursor: pointer;
-  }
-
-  .foot-text {
-    font-size: var(--font-size-body);
-    color: var(--custom-theme-info-normal);
-    display: flex;
-    justify-content: center;
-    margin: 10px 0
-  }
-
-  .foot-text-more:hover {
-    cursor: pointer;
-  }
-
-  .noticeType-color {
-    color: var(--custom-theme-text-2);
-  }
-  .noticeType-color-read {
-    color: var(--custom-theme-text-4);
-  }
-  .noticeFoot-color {
-    color: var(--custom-theme-text-3);
-  }
-  .noticeFoot-color-read {
-    color: var(--custom-theme-text-5);
-  }
-}
-</style>
-<style lang="scss">
-.message-drawer {
-  .el-drawer__header {
-    margin-bottom: 0;
-    border-bottom: var(--custom-theme-border-4) 1px solid;
-    padding-bottom: 5px
-  }
-  .el-drawer__body {
-    padding: 10px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-}
-</style>
+<template>
+  <div>
+    <transition name="slide-left">
+      <div id="messageDrawer" v-if="dialogVisible" class="message-drawer el-drawer__body " style="width: 860px;max-width: 80%;height: calc(100%);
+         position: fixed;z-index: 1000;right: 0;display: flex;flex-direction: column;
+         bottom: 0;top: 0;border-radius: 5px 0 0 5px;" v-loading="formLoading">
+        <div class="title-wrapper">
+          <span class="msg-tittle">消息通知</span>
+          <el-icon size="20" color="#909399" class="closed-dialog-icon" @click="close">
+            <CloseBold />
+          </el-icon>
+        </div>
+        <div class="menu-wrapper">
+          <el-select style="max-width: 180px;" @focus="focusIcon = false" @visible-change="focusIcon = !focusIcon"
+            @change="messageSelectHandler" v-model="notificationType">
+            <template #label="{ label, value }">
+              <div style="display: flex;align-items: center">
+                <el-icon class="el-icon--right" v-if="value === 'all'" style="margin-right: 5px;">
+                  <img src="./message-icon/全部通知.svg" width="16" height="16" v-if="focusIcon" />
+                  <img src="./message-icon/全部通知-黑.svg" width="16" height="16" v-else />
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="value === 'unread'" style="margin-right: 5px;">
+                  <img src="./message-icon/未读通知.svg" width="16" height="16" v-if="focusIcon" />
+                  <img src="./message-icon/未读通知-黑.svg" width="16" height="16" v-else />
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="value === 'approval-notice'" style="margin-right: 5px;">
+                  <img src="./message-icon/审批通知.svg" width="16" height="16" v-if="focusIcon">
+                  <img src="./message-icon/审批通知-黑.svg" width="16" height="16" v-else />
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="value === 'system-notice'" style="margin-right: 5px;">
+                  <img src="./message-icon/系统通知.svg" width="16" height="16" v-if="focusIcon">
+                  <img src="./message-icon/系统通知-黑.svg" width="16" height="16" v-else>
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="value === 'message-notice'" style="margin-right: 5px;">
+                  <img src="./message-icon/公告通知.svg" width="16" height="16" v-if="focusIcon">
+                  <img src="./message-icon/公告通知-黑.svg" width="16" height="16" v-else>
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="value === 'file-notice'" style="margin-right: 5px;">
+                  <img src="./message-icon/导出通知.svg" width="16" height="16" v-if="focusIcon">
+                  <img src="./message-icon/导出通知-黑.svg" width="16" height="16" v-else>
+                </el-icon>
+                <span>{{ label }} </span>
+              </div>
+            </template>
+            <el-option v-for="(item) in NOTIFICATION_TYPE" :label="item.name" :key="item.id" :value="item.id">
+              <div style="display: flex;align-items: center;" id="selectType">
+                <el-icon class="el-icon--right" v-if="item.id === 'all'">
+                  <img src="./message-icon/全部通知-黑.svg" width="16" height="16" v-if="focusIcon" />
+                  <img src="./message-icon/全部通知-蓝.svg" width="16" height="16" v-else />
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="item.id === 'unread'">
+                  <img src="./message-icon/未读通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType" />
+                  <img src="./message-icon/未读通知-蓝.svg" width="16" height="16" v-else />
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="item.id === 'approval-notice'">
+                  <img src="./message-icon/审批通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType">
+                  <img src="./message-icon/审批通知-蓝.svg" width="16" height="16" v-else>
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="item.id === 'system-notice'">
+                  <img src="./message-icon/系统通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType">
+                  <img src="./message-icon/系统通知-蓝.svg" width="16" height="16" v-else>
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="item.id === 'message-notice'">
+                  <img src="./message-icon/公告通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType">
+                  <img src="./message-icon/公告通知-蓝.svg" width="16" height="16" v-else>
+                </el-icon>
+                <el-icon class="el-icon--right" v-if="item.id === 'file-notice'">
+                  <img src="./message-icon/导出通知-黑.svg" width="16" height="16" v-if="item.id !== notificationType">
+                  <img src="./message-icon/导出通知-蓝.svg" width="16" height="16" v-else>
+                </el-icon>
+                <span style="margin-left: 5px">{{ item.name }}</span>
+              </div>
+            </el-option>
+          </el-select>
+          <el-dropdown class="example-showcase" trigger="click">
+            <span class="el-dropdown-link">
+              <el-button plain>
+                批量操作
+                <el-icon class="el-icon--right"><arrow-down /></el-icon>
+              </el-button>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item id="dropDownReadMenuItem" @click="readNoticeHandler">标记所有为已读</el-dropdown-item>
+                <el-dropdown-item id="dropDownReadMenuItem" @click="deleteReadNoticeHandler">删除所有已读通知</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <div class="list-wrapper" @scroll="handleScroll" v-if="!ifEmpty">
+          <div v-for="(item) in noticeVO" :key="item.noticeId" class="message-item" @click="messageItemHandler(item)">
+            <el-badge is-dot class="item" :hidden="item.ifRead" style="display: inline-block">
+              <div v-if="item.noticeType === 'message-notice'" style="width:20px;height: 20px">
+                <img src="./message-icon/公告通知.svg" width="20" height="20" class="message-icon">
+                <img src="./message-icon/公告通知-蓝.svg" width="20" height="20" class="message-icon-blue">
+              </div>
+              <div v-if="item.noticeType === 'approval-notice'" style="width:20px;height: 20px">
+                <img src="./message-icon/审批通知.svg" width="20" height="20" class="message-icon">
+                <img src="./message-icon/审批通知-蓝.svg" width="20" height="20" class="message-icon-blue">
+              </div>
+              <div v-if="item.noticeType === 'file-notice'" style="width:20px;height: 20px">
+                <img src="./message-icon/导出通知.svg" width="20" height="20" class="message-icon">
+                <img src="./message-icon/导出通知-蓝.svg" width="20" height="20" class="message-icon-blue">
+              </div>
+              <div v-if="item.noticeType === 'system-notice'" style="width:20px;height: 20px">
+                <img src="./message-icon/系统通知.svg" width="20" height="20" class="message-icon">
+                <img src="./message-icon/系统通知-蓝.svg" width="20" height="20" class="message-icon-blue">
+              </div>
+            </el-badge>
+            <div class="message-info ">
+              <div class="flex-between">
+                <span :class="item.ifRead ? 'noticeType-color-read' : 'noticeType-color'" class="message-title">{{
+                  item.noticeTitle
+                }}</span>
+                <el-icon color="#909399 " size="17" class="closed-icon" @click.stop="deleteNoticeInfoByNoticeIds(item)">
+                  <CloseBold />
+                </el-icon>
+              </div>
+              <div class="message-content"
+                :class="item.ifRead ? 'message-content-color-read' : 'message-content-color'">
+                {{ item.noticeContent }}
+              </div>
+              <div style="height: 24px;width: 100%;font-size: var(--font-size-description);" class="flex-between">
+                <div :class="item.ifRead ? 'noticeFoot-color-read' : 'noticeFoot-color'">{{ item.noticeTime ?
+                  getTime(item.noticeTime) : '年月日' }}</div>
+                <el-button plain type="primary" size="small" class="export-btn" v-if="item.noticeType === 'file-notice'"
+                  @click.stop="downloadHandler(item)"><span
+                    style="font-size:var(--font-size-description)">去下载</span></el-button>
+                <el-button plain type="primary" size="small" class="export-btn" v-if="item.noticeType !== 'file-notice'"
+                  @click.stop="messageItemHandler(item)"><span
+                    style="font-size: var(--font-size-description)">查看详情</span></el-button>
+              </div>
+            </div>
+          </div>
+          <div class="foot-text" v-if="ifText" v-loading="moreLoading">
+            <span class="foot-text-more" v-if="ifTextMore" @click="getMore">查看更多</span>
+            <span v-else>已经没有更多消息了</span>
+          </div>
+        </div>
+        <div v-else
+          style="flex-grow: 1;display: flex;justify-content: center;align-items: center;flex-direction: column">
+          <img src="./message-icon/空状态.svg" width="320px" height="320px">
+          <div class="foot-text"><span>已经没有更多消息了</span></div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject } from "vue";
+import { ArrowDown, CloseBold } from '@element-plus/icons-vue'
+import { NOTIFICATION_TYPE } from "./message-dictionary";
+import NoticeController from "../../../api/notice/NoticeController";
+import type NoticePageBO from "../../../api/notice/bo/NoticePageBO";
+import type NoticeVO from "../../../api/notice/bo/NoticeVO";
+import moment from "moment";
+import { ElMessage } from "element-plus";
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'update-count'): void
+  (e: 'navigate', notice: NoticeVO): void
+  (e: 'download', notice: NoticeVO): void
+}>()
+
+const formLoading = ref<boolean>(false)
+const moreLoading = ref<boolean>(false)
+const dialogVisible = ref<boolean>(false)
+const notificationType = ref<string>('all')
+const ifEmpty = ref<boolean>(false)
+const ifText = ref<boolean>(false)
+const ifTextMore = ref<boolean>(false)
+const focusIcon = ref<boolean>(false)
+
+/** 打开弹窗 */
+const open = async () => {
+  formLoading.value = true
+  dialogVisible.value = true
+  resetForm()
+  await selectNoticePage()
+}
+
+const handleScroll = async (e: any) => {}
+
+/** 点击加载更多 */
+const getMore = async () => {
+  if (total.value > noticePageBO.value.offset + 10) {
+    moreLoading.value = true
+    noticePageBO.value.offset += 10
+    await selectNoticePage()
+  }
+}
+
+/** 查询条件 */
+const noticePageBO = ref<NoticePageBO>({
+  noticeType: '',
+  timeStamp: '',
+  offset: 0,
+  pageSize: 10,
+  pageNum: 1
+})
+
+/** 消息数组 */
+const noticeVO = ref<NoticeVO[]>([])
+const total = ref<number>(0)
+
+/** 获得消息分页数组函数 */
+const selectNoticePage = async () => {
+  noticePageBO.value.noticeType = notificationType.value
+  noticePageBO.value.timeStamp = moment.unix(moment().unix()).format("YYYY-MM-DD HH:mm:ss")
+  await NoticeController.selectNoticePage(noticePageBO.value).then(data => {
+    if (data.code === 200 && data.res) {
+      if (data.res.records) {
+        noticeVO.value.push(...data.res.records)
+      }
+      total.value = data.res.total
+      ifEmpty.value = noticeVO.value.length === 0
+      ifText.value = true
+      ifTextMore.value = total.value > noticePageBO.value.offset + 10
+    } else if (data.code === 200 && data.res === null) {
+      noticeVO.value = []
+      ifEmpty.value = true
+      ifText.value = true
+      ifTextMore.value = total.value > noticePageBO.value.offset + 10
+    }
+  }).finally(() => {
+    formLoading.value = false
+    moreLoading.value = false
+  })
+}
+
+/** 获得时间 */
+const getTime = (dateString: string) => {
+  let date = new Date(dateString)
+  return date.getFullYear() + "年" +
+    ("0" + (date.getMonth() + 1)).slice(-2) + "月" +
+    ("0" + date.getDate()).slice(-2) + "日 " +
+    date.getHours() + ":" +
+    ("0" + date.getMinutes()).slice(-2);
+}
+
+// 给整个文档添加点击事件监听器
+document.addEventListener('mouseup', function (event: any) {
+  let target = event.target;
+  let closeDom = document.querySelectorAll('.el-notification__closeBtn')
+  if (closeDom) {
+    for (let i = 0; i < closeDom.length; i++) {
+      closeDom[i].id = 'el-notification__closeBtn'
+    }
+  }
+  while (target && target.id !== 'tourMessageId' && target.id !== 'selectType'
+    && target.id !== 'el-notification__closeBtn'
+    && target.id !== 'dropDownReadMenuItem' && target.id !== 'messageDrawer') {
+    target = target.parentNode;
+  }
+  if (!target) {
+    close()
+  }
+}, true);
+
+/** 修改消息类型函数*/
+const messageSelectHandler = async () => {
+  noticePageBO.value.pageNum = 1
+  noticeVO.value = []
+  noticePageBO.value.offset = 0
+  ifText.value = false
+  formLoading.value = true
+  await selectNoticePage()
+}
+
+/** 删除单个消息函数*/
+const deleteNoticeInfoByNoticeIds = (e: NoticeVO) => {
+  NoticeController.deleteNoticeInfoByNoticeIds([e.noticeId]).then(data => {
+    if (data.code === 200 && data) {
+      noticeVO.value = noticeVO.value.filter(item => item.noticeId !== e.noticeId)
+      noticePageBO.value.offset = noticePageBO.value.offset - 1
+      ifEmpty.value = noticeVO.value.length === 0 && !ifTextMore.value
+      emit('update-count')
+    }
+  })
+}
+
+/** 标记所有为已读*/
+const readNoticeHandler = async () => {
+  await NoticeController.readNoticeInfoByNoticeType(notificationType.value).then(async (data) => {
+    if (data.code === 200 && data) {
+      noticeVO.value = []
+      noticePageBO.value.pageNum = 1
+      noticePageBO.value.offset = 0
+      await selectNoticePage()
+      emit('update-count')
+    }
+  })
+}
+
+/** 删除所有已读通知*/
+const deleteReadNoticeHandler = async () => {
+  await NoticeController.deleteReadNoticeInfoByNoticeType(notificationType.value).then(async (data) => {
+    if (data.code === 200 && data) {
+      ElMessage({ type: 'success', message: '删除成功' })
+      noticeVO.value = []
+      noticePageBO.value.pageNum = 1
+      noticePageBO.value.offset = 0
+      await selectNoticePage()
+    }
+  })
+}
+
+/** 点击跳转通知详情 - 通过事件通知 scm 处理路由跳转 */
+const messageItemHandler = async (e: NoticeVO) => {
+  await NoticeController.readNoticeInfo(e.noticeId)
+  e.ifRead = true
+  if (e.noticeType === 'file-notice') {
+    emit('update-count')
+    return
+  }
+  emit('navigate', e)
+  emit('update-count')
+  close()
+}
+
+/** 文件下载 - 通过事件通知 scm 处理 */
+const downloadHandler = async (e: NoticeVO) => {
+  if (!e.ifRead) {
+    e.ifRead = true
+    await NoticeController.readNoticeInfo(e.noticeId)
+    emit('update-count')
+  }
+  emit('download', e)
+  close()
+}
+
+/** 表单重置 */
+const resetForm = () => {
+  notificationType.value = 'all'
+  noticePageBO.value.pageNum = 1
+  noticePageBO.value.offset = 0
+  noticePageBO.value.timeStamp = ''
+  noticeVO.value = []
+}
+
+/** 抽屉关闭 */
+const close = () => {
+  dialogVisible.value = false
+  emit('close')
+}
+
+defineExpose({ open, close })
+
+/** 获得messageInfo - 外部注入新通知 */
+let messageInfo = inject('messageInfo', ref<NoticeVO>({
+  noticeId: '',
+  noticeType: '',
+  noticeContent: '',
+  noticeTitle: '',
+  urlRoute: '',
+  ifRead: false,
+  noticeTime: ''
+}))
+
+watch(() => { return messageInfo.value }, (value) => {
+  if (messageInfo.value.noticeType === notificationType.value
+    || notificationType.value === 'all' || notificationType.value === 'unread') {
+    noticeVO.value.unshift(messageInfo.value)
+    ifEmpty.value = noticeVO.value.length === 0
+  }
+}, { immediate: true, deep: true })
+</script>
+
+<style scoped lang="scss">
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.7s ease;
+}
+.slide-left-enter-from {
+  transform: translateX(100%);
+}
+.slide-left-leave-to {
+  transform: translateX(100%);
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.message-drawer {
+  background-color: var(--custom-theme-fill-7);
+  box-shadow: -1px 0px 4px 1px rgba(144, 147, 153, 0.2);
+
+  .title-wrapper {
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .msg-tittle {
+      font-size: var(--font-size-h1);
+      font-weight: bold;
+      color: var(--custom-theme-text-2)
+    }
+  }
+
+  .menu-wrapper {
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    border-bottom: var(--custom-theme-border-4) 1px solid;
+    flex-shrink: 0;
+  }
+
+  .list-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: scroll;
+    box-sizing: border-box;
+
+    .message-item {
+      display: flex;
+      justify-content: flex-start;
+      padding: 10px;
+      border-bottom: var(--custom-theme-border-4) 1px solid;
+
+      .message-icon-blue,
+      .export-btn,
+      .closed-icon {
+        display: none;
+      }
+
+      .message-info {
+        margin-left: 5px;
+        display: inline-block;
+        width: calc(100% - 35px);
+      }
+
+      .message-content {
+        margin: 8px 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+        font-size: var(--font-size-description);
+      }
+
+      .message-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+        font-size: var(--font-size-body);
+        font-weight: bold;
+      }
+
+      .message-content-color {
+        color: var(--custom-theme-text-1);
+      }
+
+      .message-content-color-read {
+        color: var(--el-color-info);
+      }
+    }
+
+    .message-item:hover {
+      cursor: pointer;
+    }
+    .message-item:hover .message-icon {
+      display: none;
+    }
+    .message-item:hover .message-icon-blue {
+      display: block;
+    }
+    .message-item:hover .export-btn {
+      display: block;
+    }
+    .message-item:hover .closed-icon {
+      display: block;
+    }
+    .message-item:hover {
+      background-color: var(--custom-theme-fill-4);
+    }
+  }
+
+  .closed-dialog-icon:hover {
+    cursor: pointer;
+  }
+
+  .foot-text {
+    font-size: var(--font-size-body);
+    color: var(--custom-theme-info-normal);
+    display: flex;
+    justify-content: center;
+    margin: 10px 0
+  }
+
+  .foot-text-more:hover {
+    cursor: pointer;
+  }
+
+  .noticeType-color {
+    color: var(--custom-theme-text-2);
+  }
+  .noticeType-color-read {
+    color: var(--custom-theme-text-4);
+  }
+  .noticeFoot-color {
+    color: var(--custom-theme-text-3);
+  }
+  .noticeFoot-color-read {
+    color: var(--custom-theme-text-5);
+  }
+}
+</style>
+<style lang="scss">
+.message-drawer {
+  .el-drawer__header {
+    margin-bottom: 0;
+    border-bottom: var(--custom-theme-border-4) 1px solid;
+    padding-bottom: 5px
+  }
+  .el-drawer__body {
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+}
+</style>