hrp-ui-base 1.0.2 → 1.0.4

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

@@ -0,0 +1,529 @@
+<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
+  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>