Merge branch 'master' of https://gitee.com/youlaiorg/vue3-element-admin
This commit is contained in:
ray
156
src/components/Notice/index.vue
Normal file
156
src/components/Notice/index.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="nav-action-item" style="display: flex; justify-content: center">
|
||||
<el-dropdown trigger="hover">
|
||||
<el-badge :is-dot="messages.length > 0" :offset="offset">
|
||||
<div class="flex-center h100% p10px">
|
||||
<i-ep-bell />
|
||||
</div>
|
||||
</el-badge>
|
||||
<template #dropdown>
|
||||
<div class="px-5 py-2">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane
|
||||
v-for="(label, key) in MessageTypeLabels"
|
||||
:label="label"
|
||||
:name="key"
|
||||
:key="key"
|
||||
>
|
||||
<template v-if="messages.length > 0">
|
||||
<div
|
||||
class="w-[380px] py-2"
|
||||
v-for="(item, index) in messages"
|
||||
:key="index"
|
||||
>
|
||||
<el-link type="primary" @click="readNotice(item.id)">
|
||||
<el-badge is-dot />
|
||||
<el-text class="w-350px" size="default" truncated>
|
||||
{{ item.title }}
|
||||
</el-text>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex-center h-150px w-350px">
|
||||
<el-text class="w-350px" size="default" truncated>
|
||||
<el-empty :image-size="30" description="暂无消息" />
|
||||
</el-text>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-divider />
|
||||
<div class="flex-x-between">
|
||||
<el-link type="primary" :underline="false" @click="more">
|
||||
<span class="text-xs">查看更多</span>
|
||||
<el-icon class="text-xs">
|
||||
<ArrowRight />
|
||||
</el-icon>
|
||||
</el-link>
|
||||
<el-link
|
||||
v-if="messages.length > 0"
|
||||
type="primary"
|
||||
:underline="false"
|
||||
@click="readAllNotice()"
|
||||
>
|
||||
<span class="text-xs">全部已读</span>
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<NoticeModal ref="noticeModalRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
|
||||
import NoticeAPI from "@/api/notice";
|
||||
import socket from "@/api/socket";
|
||||
import NoticeModal from "@/components/NoticeModal/index.vue";
|
||||
import router from "@/router";
|
||||
|
||||
const activeTab = ref(MessageTypeEnum.MESSAGE);
|
||||
const messages = ref<any>([]);
|
||||
const noticeModalRef = ref(NoticeModal);
|
||||
const offset = ref<Number[]>([-15, 15]);
|
||||
|
||||
const getFilteredMessages = (type: MessageTypeEnum) => {
|
||||
return messages.value.filter(
|
||||
(message: { type: MessageTypeEnum }) => message.type === type
|
||||
);
|
||||
};
|
||||
|
||||
/**'
|
||||
* 连接WebSocket
|
||||
*/
|
||||
function connectWebSocket() {
|
||||
socket.getWebSocketClient("/user/queue/message", (message) => {
|
||||
// 这里是不是可以获取到消息之后，直接调用接口获取消息列表呢？？？
|
||||
let parse = JSON.parse(message);
|
||||
// 如果是消息类型
|
||||
if (parse.noticeType === MessageTypeEnum.MESSAGE) {
|
||||
let content = JSON.parse(parse.content);
|
||||
//是发布消息
|
||||
if (content.type === "release") {
|
||||
//获取到id
|
||||
let id = content.id;
|
||||
//确认messages里面是否有这个id
|
||||
let index = messages.value.findIndex((item: any) => item.id === id);
|
||||
if (index < 0) {
|
||||
let messageContent = {
|
||||
id: id,
|
||||
title: content.title,
|
||||
type: MessageTypeEnum.MESSAGE,
|
||||
};
|
||||
messages.value.unshift(messageContent);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取消息列表
|
||||
* @returns
|
||||
*/
|
||||
function listNotice() {
|
||||
NoticeAPI.listUnreadNotice().then((res) => {
|
||||
messages.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 阅读通知公告
|
||||
* @param id
|
||||
*/
|
||||
function readNotice(id: number) {
|
||||
let index = messages.value.findIndex(
|
||||
(item: { id: number }) => item.id === id
|
||||
);
|
||||
if (index >= 0) {
|
||||
messages.value.splice(index, 1);
|
||||
}
|
||||
noticeModalRef.value?.open(id); // 调用 open 方法，传入 ID
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看更多
|
||||
*/
|
||||
function more() {
|
||||
//跳转到我的消息页面
|
||||
router.push({ path: "/notice/notice" });
|
||||
}
|
||||
|
||||
/**
|
||||
* 全部已读
|
||||
*/
|
||||
function readAllNotice() {
|
||||
NoticeAPI.readAllNotice().then(() => {
|
||||
messages.value = [];
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
listNotice();
|
||||
connectWebSocket();
|
||||
});
|
||||
</script>
|
||||
110
src/components/NoticeModal/index.vue
Normal file
110
src/components/NoticeModal/index.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
:show-close="false"
|
||||
append-to-body
|
||||
:fullscreen="fullscreen"
|
||||
style="z-index: revert"
|
||||
>
|
||||
<template #header="{ close }">
|
||||
<div class="my-header">
|
||||
<h3>{{ message.title }}</h3>
|
||||
<div class="icon-content">
|
||||
<el-icon
|
||||
class="icon"
|
||||
@click="
|
||||
() => {
|
||||
fullscreen = !fullscreen;
|
||||
}
|
||||
"
|
||||
>
|
||||
<FullScreen />
|
||||
</el-icon>
|
||||
<el-icon @click="close" class="icon">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div style="width: auto; text-align: left">
|
||||
<span class="header-item">
|
||||
<el-tag v-if="message.noticeType == 2" type="warning">系统通知</el-tag>
|
||||
<el-tag v-if="message.noticeType == 1" type="success">通知消息</el-tag>
|
||||
</span>
|
||||
<span class="header-item">
|
||||
<el-tag v-if="message.priority == 0" type="danger">低</el-tag>
|
||||
<el-tag v-if="message.priority == 1" type="success">中</el-tag>
|
||||
<el-tag v-if="message.priority == 2" type="warning">高</el-tag>
|
||||
</span>
|
||||
<span class="header-item">{{ message.releaseBy }}</span>
|
||||
<span class="header-item">{{ message.releaseTime }}</span>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div
|
||||
v-html="message.content"
|
||||
style="width: auto; min-height: 400px; text-align: left"
|
||||
></div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 这里可能存在一个问题，因为上面展示方式我是用了v-html，所以这里可能会有xss攻击，后续可以考虑使用其他方式
|
||||
* 或者是用 npm install dompurify 来处理
|
||||
* 示例代码
|
||||
* import DOMPurify from 'dompurify';
|
||||
* const rawHtmlContent = '<p>Some HTML content</p>'; // 这可能来自不可信的源
|
||||
* const safeHtmlContent = DOMPurify.sanitize(rawHtmlContent);
|
||||
*/
|
||||
import { ref } from "vue";
|
||||
import { defineExpose } from "vue";
|
||||
import NoticeAPI, { NoticeDetailVO } from "@/api/notice";
|
||||
|
||||
const message = ref<NoticeDetailVO>({});
|
||||
const visible = ref(false);
|
||||
const fullscreen = ref(false);
|
||||
const open = (id: number, read: boolean) => {
|
||||
fullscreen.value = false;
|
||||
getNoticeDetail(id, !read);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取消息详情
|
||||
* @param id 通知id
|
||||
* @param read 是否是阅读，因为存在管理员查看通知管理中的消息，所以这里需要区分
|
||||
*/
|
||||
function getNoticeDetail(id: number, read: boolean) {
|
||||
if (read) {
|
||||
NoticeAPI.readNotice(id).then((res) => {
|
||||
visible.value = true;
|
||||
message.value = res;
|
||||
});
|
||||
} else {
|
||||
NoticeAPI.getDetail(id).then((res) => {
|
||||
visible.value = true;
|
||||
message.value = res;
|
||||
});
|
||||
}
|
||||
}
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
<style scoped>
|
||||
.my-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.my-header .icon-content {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -30,6 +30,10 @@ const props = defineProps({
|
||||
type: [String],
|
||||
default: "",
|
||||
},
|
||||
excludeKeys: {
|
||||
type: Array<string>,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
@@ -37,8 +41,10 @@ const emit = defineEmits(["update:modelValue"]);
|
||||
const modelValue = useVModel(props, "modelValue", emit);
|
||||
|
||||
const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
|
||||
const mode = ref("default"); // 编辑器模式
|
||||
const toolbarConfig = ref({}); // 工具条配置
|
||||
const mode = ref("simple"); // 编辑器模式
|
||||
const toolbarConfig = ref({
|
||||
excludeKeys: props.excludeKeys,
|
||||
}); // 工具条配置
|
||||
// 编辑器配置
|
||||
const editorConfig = ref({
|
||||
placeholder: "请输入内容...",
|
||||
|
||||
Reference in New Issue
Block a user