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

feat: websocket前端代码部分

Browse Source 
还在完善websocket的前端通知代码部分。以及在思考怎么跟后端的用户状态表关联问题
This commit is contained in:
Kylin
2024-08-28 18:01:35 +08:00
parent 44f0e09f8e
commit 1da5772461
4 changed files with 270 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/notice-status.ts
View File

@@ -64,10 +64,32 @@ class NoticeStatusAPI {
export default NoticeStatusAPI;
/** 用户公告状态分页查询参数 */
export interface NoticeStatusPageQuery extends PageQuery {}
export interface NoticeStatusPageQuery extends PageQuery {
/** id */
id?: bigint;
/** 公共通知id */
noticeId?: bigint;
/** 用户id */
userId?: number;
/** 读取状态，0未读，1已读取 */
readStatus?: bigint;
/** 用户阅读时间 */
readTiem?: [string, string];
}
/** 用户公告状态表单对象 */
export interface NoticeStatusForm {}
/** 用户公告状态分页对象 */
export interface NoticeStatusPageVO {}
export interface NoticeStatusPageVO {
/** id */
id?: bigint;
/** 公共通知id */
noticeId?: bigint;
/** 用户id */
userId?: number;
/** 读取状态，0未读，1已读取 */
readStatus?: bigint;
/** 用户阅读时间 */
readTiem?: Date;
}

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

@@ -150,24 +150,24 @@ const messages = ref([
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 },
// {
// 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) => {
@@ -212,19 +212,30 @@ function connectWebSocket() {
onConnect: () => {
console.log("连接成功");
isConnected.value = true;
messages.value.push({
sender: "Server",
content: "Websocket 已连接",
type: "tip",
});
// messages.value.push({
// sender: "Server",
// content: "Websocket 已连接",
// type: "tip",
// });
// 订阅 /topic/chat 主题
while (messages.value.length > 3) {
messages.value.shift();
}
stompClient.subscribe("/topic/chat", (res) => {
debugger;
console.log("收到消息：" + res.body);
// messages.value.push({
// sender: "Server",
// content: res.body,
// });
const message = JSON.parse(res.body);
console.log("当前有：" + message.id);
console.log("数组已更新，强制重新渲染");
messages.value.push({
id: message.id,
title: message.title,
type: MessageTypeEnum.MESSAGE,
});
while (messages.value.length > 3) {
messages.value.shift();
}
console.log("当前还有：" + messages.value);
nextTick(async () => {});
});
},
onStompError: (frame) => {
@@ -233,11 +244,11 @@ function connectWebSocket() {
},
onDisconnect: () => {
isConnected.value = false;
messages.value.push({
sender: "Server",
content: "Websocket 已断开",
type: "tip",
});
// messages.value.push({
// sender: "Server",
// content: "Websocket 已断开",
// type: "tip",
// });
},
});

69
src/views/system/notice-status/index.vue
View File

@@ -2,6 +2,48 @@
<div class="app-container">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="id" prop="id">
<el-input
v-model="queryParams.id"
placeholder="id"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="公共通知id" prop="noticeId">
<el-input
v-model="queryParams.noticeId"
placeholder="公共通知id"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="用户id" prop="userId">
<el-input
v-model="queryParams.userId"
placeholder="用户id"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="读取状态，0未读，1已读取" prop="readStatus">
<el-input
v-model="queryParams.readStatus"
placeholder="读取状态，0未读，1已读取"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="用户阅读时间" prop="readTiem">
<el-date-picker
v-model="queryParams.readTiem"
type="daterange"
range-separator="~"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery()">
<i-ep-search />
@@ -45,6 +87,31 @@
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column key="id" label="id" prop="id" min-width="100" />
<el-table-column
key="noticeId"
label="公共通知id"
prop="noticeId"
min-width="100"
/>
<el-table-column
key="userId"
label="用户id"
prop="userId"
min-width="100"
/>
<el-table-column
key="readStatus"
label="读取状态，0未读，1已读取"
prop="readStatus"
min-width="100"
/>
<el-table-column
key="readTiem"
label="用户阅读时间"
prop="readTiem"
min-width="100"
/>
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
@@ -113,7 +180,7 @@ import NoticeStatusAPI, {
NoticeStatusPageVO,
NoticeStatusForm,
NoticeStatusPageQuery,
} from "@/api/noticeStatus";
} from "@/api/notice-status";
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);

198
src/views/system/notice/index.vue
View File

@@ -34,32 +34,40 @@
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="优先级(0-低 1-中 2-高)" prop="priority">
<el-input
<el-form-item label="优先级" prop="priority">
<el-select
v-model="queryParams.priority"
placeholder="优先级(0-低 1-中 2-高)"
class="!w-[100px]"
clearable
@keyup.enter="handleQuery()"
/>
placeholder="全部"
>
<el-option :value="0" label="低" />
<el-option :value="1" label="中" />
<el-option :value="2" label="高" />
</el-select>
</el-form-item>
<el-form-item label="目标类型(0-全体 1-指定)" prop="tarType">
<el-input
<el-form-item label="目标类型" prop="tarType">
<el-select
v-model="queryParams.tarType"
placeholder="目标类型(0-全体 1-指定)"
class="!w-[100px]"
clearable
@keyup.enter="handleQuery()"
/>
placeholder="全部"
>
<el-option :value="0" label="全体" />
<el-option :value="1" label="指定" />
</el-select>
</el-form-item>
<el-form-item
label="发布状态(0-未发布 1已发布 2已撤回)"
prop="sendStatus"
>
<el-input
<el-form-item label="发布状态" prop="sendStatus">
<el-select
v-model="queryParams.sendStatus"
placeholder="发布状态(0-未发布 1已发布 2已撤回)"
class="!w-[100px]"
clearable
@keyup.enter="handleQuery()"
/>
placeholder="全部"
>
<el-option :value="0" label="未发布" />
<el-option :value="1" label="已发布" />
<el-option :value="2" label="已撤回" />
</el-select>
</el-form-item>
<el-form-item label="发布时间" prop="sendTime">
<el-date-picker
@@ -120,78 +128,117 @@
v-loading="loading"
:data="pageData"
highlight-current-row
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column key="id" label="id" prop="id" min-width="100" />
<el-table-column
align="center"
key="id"
label="id"
prop="id"
min-width="100"
/>
<el-table-column
align="center"
key="title"
label="通知标题"
prop="title"
min-width="100"
min-width="150"
/>
<el-table-column
align="center"
key="content"
label="通知内容"
prop="content"
min-width="100"
min-width="150"
/>
<el-table-column
align="center"
key="noticeType"
label="通知类型"
prop="noticeType"
min-width="100"
min-width="150"
/>
<el-table-column
align="center"
key="releaseBy"
label="发布人"
prop="releaseBy"
min-width="100"
/>
<el-table-column
align="center"
key="priority"
label="优先级(0-低 1-中 2-高)"
label="优先级"
prop="priority"
min-width="100"
/>
>
<template #default="scope">
<el-tag v-if="scope.row.priority == 0" type="danger">低</el-tag>
<el-tag v-if="scope.row.priority == 1" type="success">中</el-tag>
<el-tag v-if="scope.row.priority == 2" type="warning">高</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="tarType"
label="目标类型(0-全体 1-指定)"
label="目标类型"
prop="tarType"
min-width="100"
/>
>
<template #default="scope">
<el-tag v-if="scope.row.tarType == 0" type="warning">全体</el-tag>
<el-tag v-if="scope.row.tarType == 1" type="success">指定</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="sendStatus"
label="发布状态(0-未发布 1已发布 2已撤回)"
label="发布状态"
prop="sendStatus"
min-width="100"
/>
>
<template #default="scope">
<el-tag v-if="scope.row.sendStatus == 0" type="warning">
未发布
</el-tag>
<el-tag v-if="scope.row.sendStatus == 1" type="success">
已发布
</el-tag>
<el-tag v-if="scope.row.sendStatus == 2" type="primary">
已撤回
</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="sendTime"
label="发布时间"
prop="sendTime"
min-width="100"
/>
<el-table-column
align="center"
key="recallTime"
label="撤回时间"
prop="recallTime"
min-width="100"
/>
<el-table-column
align="center"
key="createTime"
label="创建时间"
prop="createTime"
min-width="100"
/>
<el-table-column
align="center"
key="updateTime"
label="更新时间"
prop="updateTime"
min-width="100"
/>
<el-table-column fixed="right" label="操作" width="220">
<el-table-column align="center" fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
v-hasPerm="['system:notice:edit']"
@@ -264,42 +311,57 @@
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="发布人" prop="releaseBy">
<el-input
v-model="formData.releaseBy"
placeholder="发布人"
clearable
@keyup.enter="handleQuery()"
/>
<!-- <el-form-item label="发布人" prop="releaseBy">-->
<!-- <el-input-->
<!-- v-model="formData.releaseBy"-->
<!-- placeholder="发布人"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery()"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="优先级" prop="priority">
<!-- <el-input-->
<!-- v-model="formData.priority"-->
<!-- placeholder="优先级(0-低 1-中 2-高)"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery()"-->
<!-- />-->
<el-radio-group v-model="formData.priority">
<el-radio :value="0">低</el-radio>
<el-radio :value="1">中</el-radio>
<el-radio :value="2">高</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="优先级(0-低 1-中 2-高)" prop="priority">
<el-input
v-model="formData.priority"
placeholder="优先级(0-低 1-中 2-高)"
clearable
@keyup.enter="handleQuery()"
/>
<el-form-item label="目标类型" prop="tarType">
<!-- <el-input-->
<!-- v-model="formData.tarType"-->
<!-- placeholder="目标类型(0-全体 1-指定)"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery()"-->
<!-- />-->
<el-radio-group v-model="formData.tarType">
<el-radio :value="0">全体</el-radio>
<el-radio :value="1">指定</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="目标类型(0-全体 1-指定)" prop="tarType">
<el-input
v-model="formData.tarType"
placeholder="目标类型(0-全体 1-指定)"
clearable
@keyup.enter="handleQuery()"
/>
<el-form-item label="发布状态" prop="sendStatus">
<!-- <el-input-->
<!-- v-model="formData.sendStatus"-->
<!-- placeholder="发布状态(0-未发布 1已发布 2已撤回)"-->
<!-- clearable-->
<!-- @keyup.enter="handleQuery()"-->
<!-- />-->
<el-radio-group v-model="formData.sendStatus">
<el-radio :value="0">未发布</el-radio>
<el-radio :value="1">已发布</el-radio>
<el-radio :value="2">已撤回</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="发布状态(0-未发布 1已发布 2已撤回)"
prop="sendStatus"
v-if="formData.sendStatus === 1"
label="发布时间"
prop="sendTime"
>
<el-input
v-model="formData.sendStatus"
placeholder="发布状态(0-未发布 1已发布 2已撤回)"
clearable
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="发布时间" prop="sendTime">
<el-date-picker
v-model="formData.sendTime"
type="datetime"
@@ -307,7 +369,11 @@
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="撤回时间" prop="recallTime">
<el-form-item
v-if="formData.sendStatus === 2"
label="撤回时间"
prop="recallTime"
>
<el-date-picker
v-model="formData.recallTime"
type="datetime"
@@ -360,13 +426,17 @@ const dialog = reactive({
});
// 通知公告表单数据
const formData = reactive<NoticeForm>({});
const formData = reactive<NoticeForm>({
sendStatus: 0, // 默认状态为未发布
priority: 0, // 默认优先级为低
tarType: 0, // 默认目标类型为全体
});
// 通知公告表单校验规则
const rules = reactive({
title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
content: [{ required: true, message: "请输入通知内容", trigger: "blur" }],
releaseBy: [{ required: true, message: "请输入发布人", trigger: "blur" }],
// releaseBy: [{ required: true, message: "请输入发布人", trigger: "blur" }],
sendTime: [{ required: true, message: "请输入发布时间", trigger: "blur" }],
recallTime: [{ required: true, message: "请输入撤回时间", trigger: "blur" }],
});