wip: 🚧 通知公告临时提交
通知公告临时提交，快结束了，css实在得学一波
This commit is contained in:
Theo
@@ -1,95 +0,0 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const NOTICESTATUS_BASE_URL = "/api/v1/noticeStatuss";
|
||||
|
||||
class NoticeStatusAPI {
|
||||
/** 获取用户公告状态分页数据 */
|
||||
static getPage(queryParams?: NoticeStatusPageQuery) {
|
||||
return request<any, PageResult<NoticeStatusPageVO[]>>({
|
||||
url: `${NOTICESTATUS_BASE_URL}/page`,
|
||||
method: "get",
|
||||
params: queryParams,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户公告状态表单数据
|
||||
*
|
||||
* @param id NoticeStatusID
|
||||
* @returns NoticeStatus表单数据
|
||||
*/
|
||||
static getFormData(id: number) {
|
||||
return request<any, NoticeStatusForm>({
|
||||
url: `${NOTICESTATUS_BASE_URL}/${id}/form`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
/** 添加用户公告状态*/
|
||||
static add(data: NoticeStatusForm) {
|
||||
return request({
|
||||
url: `${NOTICESTATUS_BASE_URL}`,
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新用户公告状态
|
||||
*
|
||||
* @param id NoticeStatusID
|
||||
* @param data NoticeStatus表单数据
|
||||
*/
|
||||
static update(id: number, data: NoticeStatusForm) {
|
||||
return request({
|
||||
url: `${NOTICESTATUS_BASE_URL}/${id}`,
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除用户公告状态，多个以英文逗号(,)分割
|
||||
*
|
||||
* @param ids 用户公告状态ID字符串，多个以英文逗号(,)分割
|
||||
*/
|
||||
static deleteByIds(ids: string) {
|
||||
return request({
|
||||
url: `${NOTICESTATUS_BASE_URL}/${ids}`,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default NoticeStatusAPI;
|
||||
|
||||
/** 用户公告状态分页查询参数 */
|
||||
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 {
|
||||
/** id */
|
||||
id?: bigint;
|
||||
/** 公共通知id */
|
||||
noticeId?: bigint;
|
||||
/** 用户id */
|
||||
userId?: number;
|
||||
/** 读取状态，0未读，1已读取 */
|
||||
readStatus?: bigint;
|
||||
/** 用户阅读时间 */
|
||||
readTiem?: Date;
|
||||
}
|
||||
@@ -83,7 +83,7 @@ class NoticeAPI {
|
||||
* @param id 撤回的通知id
|
||||
* @returns
|
||||
*/
|
||||
static recallNotice(id: number) {
|
||||
static recallNotice(id: number): Promise<[]> {
|
||||
return request({
|
||||
url: `${NOTICE_BASE_URL}/recall/${id}`,
|
||||
method: "patch",
|
||||
@@ -91,15 +91,47 @@ class NoticeAPI {
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取我的通知公告n条
|
||||
* 获取未读消息
|
||||
* @returns 消息
|
||||
*/
|
||||
static listNotice() {
|
||||
static listUnreadNotice() {
|
||||
return request({
|
||||
url: `${NOTICE_BASE_URL}/notice/5`,
|
||||
url: `${NOTICE_BASE_URL}/unread`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看通知
|
||||
* @param id
|
||||
*/
|
||||
static readNotice(id: number): Promise<NoticeDetailVO> {
|
||||
return request({
|
||||
url: `${NOTICE_BASE_URL}/read/${id}`,
|
||||
method: "PATCH",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查看通知详情
|
||||
* @param id
|
||||
*/
|
||||
static getDetail(id: number): Promise<NoticeDetailVO> {
|
||||
return request({
|
||||
url: `${NOTICE_BASE_URL}/detail/${id}`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 全部已读
|
||||
*/
|
||||
static readAllNotice() {
|
||||
return request({
|
||||
url: `${NOTICE_BASE_URL}/readAll`,
|
||||
method: "PATCH",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default NoticeAPI;
|
||||
@@ -151,3 +183,19 @@ export interface NoticePageVO {
|
||||
/** 撤回时间 */
|
||||
recallTime?: Date;
|
||||
}
|
||||
|
||||
export interface NoticeDetailVO {
|
||||
id?: string;
|
||||
/** 通知标题 */
|
||||
title?: string;
|
||||
/** 通知内容 */
|
||||
content?: string;
|
||||
/** 通知类型 */
|
||||
noticeTypeLabel?: number;
|
||||
/** 发布人 */
|
||||
releaseBy?: string;
|
||||
/** 优先级(0-低 1-中 2-高) */
|
||||
priority?: number;
|
||||
/** 发布时间 */
|
||||
releaseTime?: Date;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ const MAX_RETRIES = 3; // 最大重试次数
|
||||
const RETRY_DELAY_MS = 5000; // 重试延迟时间，单位：毫秒
|
||||
const HEARTBEAT_INTERVAL = 30000; // 心跳间隔时间，单位：毫秒
|
||||
|
||||
class WebSocketManager {
|
||||
class Socket {
|
||||
private clients: Map<string, Client> = new Map();
|
||||
private retryCountMap: Map<string, number> = new Map();
|
||||
private subscriptions: Map<string, ((message: string) => void)[]> = new Map();
|
||||
@@ -110,4 +110,4 @@ class WebSocketManager {
|
||||
}
|
||||
}
|
||||
|
||||
export default new WebSocketManager();
|
||||
export default new Socket();
|
||||
@@ -1,107 +1,143 @@
|
||||
<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 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>
|
||||
</div>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</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">
|
||||
<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 { getWebSocketClient, WebSocketService } from "@/api/socket";
|
||||
import WebSocketManager from "@/api/WebSocketManager";
|
||||
import socket from "@/api/socket";
|
||||
import NoticeModal from "@/components/NoticeModal/index.vue";
|
||||
|
||||
const activeTab = ref(MessageTypeEnum.MESSAGE);
|
||||
const messages = ref<any>([]);
|
||||
const noticeModalRef = ref(null);
|
||||
const offset = ref<["number", "number"]>([-15, 15] as ["number", "number"]);
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
/**'
|
||||
* 连接WebSocket
|
||||
*/
|
||||
function connectWebSocket() {
|
||||
WebSocketManager.getWebSocketClient("/user/queue/message", (message) => {
|
||||
console.log("收到消息：", message);
|
||||
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) => item.id === id);
|
||||
if (index < 0) {
|
||||
let messageContent = {
|
||||
id: id,
|
||||
title: content.title,
|
||||
type: MessageTypeEnum.MESSAGE,
|
||||
};
|
||||
messages.value.unshift(messageContent);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取消息列表
|
||||
* @returns
|
||||
*/
|
||||
function listNotice() {
|
||||
NoticeAPI.listNotice().then((res) => {});
|
||||
NoticeAPI.listUnreadNotice().then((res) => {
|
||||
messages.value = res;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 阅读通知公告
|
||||
* @param id
|
||||
*/
|
||||
function readNotice(id: number) {
|
||||
let index = messages.value.findIndex((item) => item.id === id);
|
||||
if (index >= 0) {
|
||||
messages.value.splice(index, 1);
|
||||
}
|
||||
noticeModalRef.value?.open(id); // 调用 open 方法，传入 ID
|
||||
}
|
||||
|
||||
/**
|
||||
* 全部已读
|
||||
*/
|
||||
function readAllNotice() {
|
||||
NoticeAPI.readAllNotice().then(() => {
|
||||
messages.value = [];
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// listNotice();
|
||||
listNotice();
|
||||
connectWebSocket();
|
||||
});
|
||||
</script>
|
||||
|
||||
99
src/components/NoticeModal/index.vue
Normal file
99
src/components/NoticeModal/index.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<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">
|
||||
{{ message.noticeTypeLabel }} 优先级 {{ message.priority }} 发布人：{{
|
||||
message.releaseBy
|
||||
}}
|
||||
发布时间：{{ message.releaseTime }}
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
/* 消息类型枚举 */
|
||||
export const enum MessageTypeEnum {
|
||||
/* 消息 */
|
||||
MESSAGE = "MESSAGE",
|
||||
MESSAGE = "SYSTEM_MESSAGE",
|
||||
/* 通知 */
|
||||
NOTICE = "NOTICE",
|
||||
/* 待办 */
|
||||
|
||||
1
src/types/components.d.ts
vendored
1
src/types/components.d.ts
vendored
@@ -75,6 +75,7 @@ declare module "vue" {
|
||||
LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
|
||||
MenuSearch: (typeof import("./../components/MenuSearch/index.vue"))["default"];
|
||||
Notice: (typeof import("./../components/Notice/index.vue"))["default"];
|
||||
NoticeModal: (typeof import("./../components/NoticeModal/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"];
|
||||
|
||||
@@ -188,7 +188,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WebSocketManager from "@/api/WebSocketManager";
|
||||
import WebSocketManager from "@/api/socket";
|
||||
|
||||
defineOptions({
|
||||
name: "Dashboard",
|
||||
|
||||
@@ -1,316 +0,0 @@
|
||||
<template>
|
||||
<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 />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleResetQuery()">
|
||||
<i-ep-refresh />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" class="table-container">
|
||||
<template #header>
|
||||
<el-button
|
||||
v-hasPerm="['system:noticeStatus:add']"
|
||||
type="success"
|
||||
@click="handleOpenDialog()"
|
||||
>
|
||||
<i-ep-plus />
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['system:noticeStatus:delete']"
|
||||
type="danger"
|
||||
:disabled="ids.length === 0"
|
||||
@click="handleDelete()"
|
||||
>
|
||||
<i-ep-delete />
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
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
|
||||
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
|
||||
v-hasPerm="['system:noticeStatus:edit']"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click="handleOpenDialog(scope.row.id)"
|
||||
>
|
||||
<i-ep-edit />
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPerm="['system:noticeStatus:delete']"
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
<i-ep-delete />
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
v-model:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery()"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 用户公告状态表单弹窗 -->
|
||||
<el-dialog
|
||||
v-model="dialog.visible"
|
||||
:title="dialog.title"
|
||||
width="500px"
|
||||
@close="handleCloseDialog"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
/>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="handleSubmit()">确定</el-button>
|
||||
<el-button @click="handleCloseDialog()">取消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "NoticeStatus",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
|
||||
import NoticeStatusAPI, {
|
||||
NoticeStatusPageVO,
|
||||
NoticeStatusForm,
|
||||
NoticeStatusPageQuery,
|
||||
} from "@/api/notice-status";
|
||||
|
||||
const queryFormRef = ref(ElForm);
|
||||
const dataFormRef = ref(ElForm);
|
||||
|
||||
const loading = ref(false);
|
||||
const ids = ref<number[]>([]);
|
||||
const total = ref(0);
|
||||
|
||||
const queryParams = reactive<NoticeStatusPageQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
// 用户公告状态表格数据
|
||||
const pageData = ref<NoticeStatusPageVO[]>([]);
|
||||
|
||||
// 弹窗
|
||||
const dialog = reactive({
|
||||
title: "",
|
||||
visible: false,
|
||||
});
|
||||
|
||||
// 用户公告状态表单数据
|
||||
const formData = reactive<NoticeStatusForm>({});
|
||||
|
||||
// 用户公告状态表单校验规则
|
||||
const rules = reactive({});
|
||||
|
||||
/** 查询用户公告状态 */
|
||||
function handleQuery() {
|
||||
loading.value = true;
|
||||
NoticeStatusAPI.getPage(queryParams)
|
||||
.then((data) => {
|
||||
pageData.value = data.list;
|
||||
total.value = data.total;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
/** 重置用户公告状态查询 */
|
||||
function handleResetQuery() {
|
||||
queryFormRef.value!.resetFields();
|
||||
queryParams.pageNum = 1;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 行复选框选中记录选中ID集合 */
|
||||
function handleSelectionChange(selection: any) {
|
||||
ids.value = selection.map((item: any) => item.id);
|
||||
}
|
||||
|
||||
/** 打开用户公告状态弹窗 */
|
||||
function handleOpenDialog(id?: number) {
|
||||
dialog.visible = true;
|
||||
if (id) {
|
||||
dialog.title = "修改用户公告状态";
|
||||
NoticeStatusAPI.getFormData(id).then((data) => {
|
||||
Object.assign(formData, data);
|
||||
});
|
||||
} else {
|
||||
dialog.title = "新增用户公告状态";
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交用户公告状态表单 */
|
||||
function handleSubmit() {
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
const id = formData.id;
|
||||
if (id) {
|
||||
NoticeStatusAPI.update(id, formData)
|
||||
.then(() => {
|
||||
ElMessage.success("修改成功");
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
} else {
|
||||
NoticeStatusAPI.add(formData)
|
||||
.then(() => {
|
||||
ElMessage.success("新增成功");
|
||||
handleCloseDialog();
|
||||
handleResetQuery();
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 关闭用户公告状态弹窗 */
|
||||
function handleCloseDialog() {
|
||||
dialog.visible = false;
|
||||
dataFormRef.value.resetFields();
|
||||
dataFormRef.value.clearValidate();
|
||||
formData.id = undefined;
|
||||
}
|
||||
|
||||
/** 删除用户公告状态 */
|
||||
function handleDelete(id?: number) {
|
||||
const ids = [id || ids.value].join(",");
|
||||
if (!ids) {
|
||||
ElMessage.warning("请勾选删除项");
|
||||
return;
|
||||
}
|
||||
|
||||
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(
|
||||
() => {
|
||||
loading.value = true;
|
||||
NoticeStatusAPI.deleteByIds(ids)
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功");
|
||||
handleResetQuery();
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
},
|
||||
() => {
|
||||
ElMessage.info("已取消删除");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user