tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: 🚧 通知公告临时提交

Browse Source 
通知公告临时提交
This commit is contained in:
胡少翔
2024-09-05 17:10:29 +08:00
parent 59db084bf1
commit 35a419ff8b
4 changed files with 151 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/notice.ts
View File

@@ -89,6 +89,17 @@ class NoticeAPI {
method: "patch",
});
}
/**
* 获取我的通知公告n条
* @returns 消息
*/
static listNotice() {
return request({
url: `${NOTICE_BASE_URL}/notice/5`,
method: "get",
});
}
}
export default NoticeAPI;

138
src/components/Notice/index.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<el-dropdown class="message nav-action-item" trigger="click">
<el-badge is-dot>
<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"
>
<div
class="w-[380px] py-2"
v-for="message in getFilteredMessages(key)"
:key="message.id"
>
<el-link type="primary">
<el-text class="w-350px" size="default" truncated>
{{ message.title }}
</el-text>
</el-link>
</div>
</el-tab-pane>
</el-tabs>
<el-divider />
<div class="flex-x-between">
<el-link type="primary" :underline="false">
<span class="text-xs">查看更多</span>
<el-icon class="text-xs">
<ArrowRight />
</el-icon>
</el-link>
<el-link type="primary" :underline="false">
<span class="text-xs">全部已读</span>
</el-link>
</div>
</div>
</template>
</el-dropdown>
</template>
<script setup lang="ts">
import { Client } from "@stomp/stompjs";
import { TOKEN_KEY } from "@/enums/CacheEnum";
import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
import NoticeAPI from "@/api/notice";
const activeTab = ref(MessageTypeEnum.MESSAGE);
const messages = ref([
{
id: 1,
title: "系统升级通知：服务器将于今晚12点进行升级维护，请提前保存工作内容。",
type: MessageTypeEnum.MESSAGE,
},
{
id: 2,
title: "新功能发布：我们的应用程序现在支持多语言功能。",
type: MessageTypeEnum.MESSAGE,
},
{
id: 3,
title: "重要提醒：请定期更改您的密码以保证账户安全。",
type: MessageTypeEnum.MESSAGE,
},
// {
// id: 4,
// title: "通知：您有一条未读的系统消息，请及时查看。",
// type: MessageTypeEnum.NOTICE,
// },
// {
// id: 5,
// title: "新订单通知：您有一笔新的订单需要处理。",
// type: MessageTypeEnum.NOTICE,
// },
// {
// id: 6,
// title: "审核提醒：您的审核请求已被批准。",
// type: MessageTypeEnum.NOTICE,
// },
// { id: 7, title: "待办事项：完成用户权限设置。", type: MessageTypeEnum.TODO },
// { id: 8, title: "待办事项：更新产品列表。", type: MessageTypeEnum.TODO },
// { id: 9, title: "待办事项：备份数据库。", type: MessageTypeEnum.TODO },
]);
const getFilteredMessages = (type: MessageTypeEnum) => {
return messages.value.filter((message) => message.type === type);
};
const isConnected = ref(false);
const socketEndpoint = ref(import.meta.env.VITE_APP_WS_ENDPOINT);
let stompClient: Client;
function connectWebSocket() {
console.log("连接消息ws的url：" + socketEndpoint.value);
stompClient = new Client({
brokerURL: socketEndpoint.value,
connectHeaders: {
Authorization: localStorage.getItem(TOKEN_KEY) || "",
},
debug: (str) => {
console.log(str);
},
onConnect: () => {
console.log("消息ws连接成功");
isConnected.value = true;
stompClient.subscribe("/user/queue/message", (res) => {
console.log("收到消息：" + res.body);
});
},
onStompError: (frame) => {
console.error("Broker reported error: " + frame.headers["message"]);
console.error("Additional details: " + frame.body);
},
onDisconnect: () => {
isConnected.value = false;
},
});
stompClient.activate();
}
function listNotice() {
NoticeAPI.listNotice().then((res) => {
console.log(res);
});
}
onMounted(() => {
listNotice();
connectWebSocket();
});
</script>

127
src/layout/components/NavBar/components/NavbarAction.vue
View File

@@ -23,49 +23,7 @@
<lang-select class="nav-action-item" />
<!-- 消息通知 -->
<el-dropdown class="message nav-action-item" trigger="click">
<el-badge is-dot>
<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"
>
<div
class="w-[380px] py-2"
v-for="message in getFilteredMessages(key)"
:key="message.id"
>
<el-link type="primary">
<el-text class="w-350px" size="default" truncated>
{{ message.title }}
</el-text>
</el-link>
</div>
</el-tab-pane>
</el-tabs>
<el-divider />
<div class="flex-x-between">
<el-link type="primary" :underline="false">
<span class="text-xs">查看更多</span>
<el-icon class="text-xs">
<ArrowRight />
</el-icon>
</el-link>
<el-link type="primary" :underline="false">
<span class="text-xs">全部已读</span>
</el-link>
</div>
</div>
</template>
</el-dropdown>
<notice />
</template>
<!-- 用户头像 -->
@@ -115,9 +73,6 @@ import {
} from "@/store";
import defaultSettings from "@/settings";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
import { Client } from "@stomp/stompjs";
import { TOKEN_KEY } from "@/enums/CacheEnum";
const appStore = useAppStore();
const tagsViewStore = useTagsViewStore();
@@ -126,54 +81,10 @@ const settingStore = useSettingsStore();
const route = useRoute();
const router = useRouter();
const isConnected = ref(false);
const socketEndpoint = ref(import.meta.env.VITE_APP_WS_ENDPOINT);
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const { isFullscreen, toggle } = useFullscreen();
const activeTab = ref(MessageTypeEnum.MESSAGE);
const messages = ref([
{
id: 1,
title: "系统升级通知：服务器将于今晚12点进行升级维护，请提前保存工作内容。",
type: MessageTypeEnum.MESSAGE,
},
{
id: 2,
title: "新功能发布：我们的应用程序现在支持多语言功能。",
type: MessageTypeEnum.MESSAGE,
},
{
id: 3,
title: "重要提醒：请定期更改您的密码以保证账户安全。",
type: MessageTypeEnum.MESSAGE,
},
// {
// id: 4,
// title: "通知：您有一条未读的系统消息，请及时查看。",
// type: MessageTypeEnum.NOTICE,
// },
// {
// id: 5,
// title: "新订单通知：您有一笔新的订单需要处理。",
// type: MessageTypeEnum.NOTICE,
// },
// {
// id: 6,
// title: "审核提醒：您的审核请求已被批准。",
// type: MessageTypeEnum.NOTICE,
// },
// { id: 7, title: "待办事项：完成用户权限设置。", type: MessageTypeEnum.TODO },
// { id: 8, title: "待办事项：更新产品列表。", type: MessageTypeEnum.TODO },
// { id: 9, title: "待办事项：备份数据库。", type: MessageTypeEnum.TODO },
]);
const getFilteredMessages = (type: MessageTypeEnum) => {
return messages.value.filter((message) => message.type === type);
};
/** 打开个人中心 */
function handleOpenUserProfile() {
router.push({ name: "Profile" });
@@ -197,42 +108,6 @@ function logout() {
});
});
}
let stompClient: Client;
function connectWebSocket() {
console.log("连接消息ws的url：" + socketEndpoint.value);
stompClient = new Client({
brokerURL: socketEndpoint.value,
connectHeaders: {
Authorization: localStorage.getItem(TOKEN_KEY) || "",
},
debug: (str) => {
console.log(str);
},
onConnect: () => {
console.log("消息ws连接成功");
isConnected.value = true;
stompClient.subscribe("/user/queue/message", (res) => {
console.log("收到消息：" + res.body);
});
},
onStompError: (frame) => {
console.error("Broker reported error: " + frame.headers["message"]);
console.error("Additional details: " + frame.body);
},
onDisconnect: () => {
isConnected.value = false;
},
});
stompClient.activate();
}
onMounted(() => {
connectWebSocket();
});
</script>
<style lang="scss" scoped>
.nav-action-item {

1
src/types/components.d.ts vendored
View File

@@ -74,6 +74,7 @@ declare module "vue" {
IEpDownload: (typeof import("~icons/ep/download"))["default"];
LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
MenuSearch: (typeof import("./../components/MenuSearch/index.vue"))["default"];
Notice: (typeof import("./../components/Notice/index.vue"))["default"];
LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
MultiUpload: (typeof import("./../components/Upload/MultiUpload.vue"))["default"];
NavBar: (typeof import("./../layout/components/NavBar/index.vue"))["default"];