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

refactor: ♻️ 通知公告、字典重构

Browse Source
This commit is contained in:
ray
2024-10-03 17:42:51 +08:00
parent 476f257bc1
commit 3db4b2a6e5
25 changed files with 931 additions and 669 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -121,5 +121,6 @@
},
"repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",
"author": "有来开源组织",
"license": "MIT"
"license": "MIT",
"packageManager": "pnpm@9.1.3+sha512.7c2ea089e1a6af306409c4fc8c4f0897bdac32b772016196c469d9428f1fe2d5a21daf8ad6512762654ac645b5d9136bb210ec9a00afa8dbc4677843ba362ecd"
}

157
src/api/dict-data.ts Normal file
View File

@@ -0,0 +1,157 @@
import request from "@/utils/request";
const DICT_DATA_BASE_URL = "/api/v1/dict-data";
class DictDataAPI {
/**
* 获取字典分页列表
*
* @param queryParams 查询参数
* @returns 字典分页结果
*/
static getPage(queryParams: DictDataPageQuery) {
return request<any, PageResult<DictDataPageVO[]>>({
url: `${DICT_DATA_BASE_URL}/page`,
method: "get",
params: queryParams,
});
}
/**
* 获取字典数据表单
*
* @param id 字典ID
* @returns 字典数据表单
*/
static getFormData(id: number) {
return request<any, ResponseData<DictDataForm>>({
url: `${DICT_DATA_BASE_URL}/${id}/form`,
method: "get",
});
}
/**
* 新增字典数据
*
* @param data 字典数据
*/
static add(data: DictDataForm) {
return request({
url: `${DICT_DATA_BASE_URL}`,
method: "post",
data: data,
});
}
/**
* 修改字典数据
*
* @param id 字典ID
* @param data 字典数据
*/
static update(id: number, data: DictDataForm) {
return request({
url: `${DICT_DATA_BASE_URL}/${id}`,
method: "put",
data: data,
});
}
/**
* 删除字典
*
* @param ids 字典ID，多个以英文逗号(,)分隔
*/
static deleteByIds(ids: string) {
return request({
url: `${DICT_DATA_BASE_URL}/${ids}`,
method: "delete",
});
}
/**
* 获取字典的数据项
*
* @param dictCode 字典编码
* @returns 字典数据项
*/
static getOptions(dictCode: string) {
return request<any, OptionType[]>({
url: `${DICT_DATA_BASE_URL}/${dictCode}/options`,
method: "get",
});
}
}
export default DictDataAPI;
/**
* 字典查询参数
*/
export interface DictDataPageQuery extends PageQuery {
/** 关键字(字典数据值/标签) */
keywords?: string;
/** 字典编码 */
dictCode?: string;
}
/**
* 字典分页对象
*/
export interface DictDataPageVO {
/**
* 字典ID
*/
id: number;
/**
* 字典编码
*/
dictCode: string;
/**
* 字典数据值
*/
value: string;
/**
* 字典数据标签
*/
label: string;
/**
* 状态（1:启用，0:禁用)
*/
status: number;
/**
* 字典排序
*/
sort?: number;
}
/**
* 字典
*/
export interface DictDataForm {
/**
* 字典ID
*/
id?: number;
/**
* 字典编码
*/
dictCode?: string;
/**
* 字典数据值
*/
value?: string;
/**
* 字典数据标签
*/
label?: string;
/**
* 状态（1:启用，0:禁用)
*/
status?: number;
/**
* 字典排序
*/
sort?: number;
}

60
src/api/dict.ts
View File

@@ -80,19 +80,6 @@ class DictAPI {
method: "get",
});
}
/**
* 获取字典的数据项
*
* @param typeCode 字典编码
* @returns 字典数据项
*/
static getOptions(code: string) {
return request<any, OptionType[]>({
url: `${DICT_BASE_URL}/${code}/options`,
method: "get",
});
}
}
export default DictAPI;
@@ -105,6 +92,11 @@ export interface DictPageQuery extends PageQuery {
* 关键字(字典名称/编码)
*/
keywords?: string;
/**
* 字典状态（1:启用，0:禁用）
*/
status?: number;
}
/**
@@ -122,45 +114,13 @@ export interface DictPageVO {
/**
* 字典编码
*/
code: string;
dictCode: string;
/**
* 字典状态（1-启用，0-禁用）
* 字典状态（1:启用，0:禁用）
*/
status: number;
/**
* 字典项列表
*/
dictItems: DictItem[];
}
/**
* 字典项
*/
export interface DictItem {
/**
* 字典项ID
*/
id?: number;
/**
* 字典项名称
*/
name?: string;
/**
* 字典项值
*/
value?: string;
/**
* 排序
*/
sort?: number;
/**
* 状态（1-启用，0-禁用）
*/
status?: number;
}
// TypeScript 类型声明
/**
* 字典
*/
@@ -176,7 +136,7 @@ export interface DictForm {
/**
* 字典编码
*/
code?: string;
dictCode?: string;
/**
* 字典状态（1-启用，0-禁用）
*/
@@ -185,8 +145,4 @@ export interface DictForm {
* 备注
*/
remark?: string;
/**
* 字典数据项列表
*/
dictItems?: DictItem[];
}

29
src/api/notice.ts
View File

@@ -73,7 +73,7 @@ class NoticeAPI {
*/
static publish(id: number) {
return request({
url: `${NOTICE_BASE_URL}/release/${id}`,
url: `${NOTICE_BASE_URL}/${id}/publish`,
method: "patch",
});
}
@@ -84,32 +84,21 @@ class NoticeAPI {
* @param id 撤回的通知id
* @returns
*/
static revoke(id: number): Promise<[]> {
static revoke(id: number) {
return request({
url: `${NOTICE_BASE_URL}/${id}/revoke`,
method: "patch",
});
}
/**
* 获取未读消息
*/
static getUnreadList() {
return request<any, UserNoticePageVO[]>({
url: `${NOTICE_BASE_URL}/unread`,
method: "get",
});
}
/**
* 查看通知
*
* @param id
*/
static getDetail(id: number): Promise<NoticeDetailVO> {
return request({
static getDetail(id: string) {
return request<any, NoticeDetailVO>({
url: `${NOTICE_BASE_URL}/${id}/detail`,
method: "PATCH",
method: "get",
});
}
@@ -117,7 +106,7 @@ class NoticeAPI {
static readAll() {
return request({
url: `${NOTICE_BASE_URL}/read-all`,
method: "PATCH",
method: "put",
});
}
@@ -139,6 +128,8 @@ export interface NoticePageQuery extends PageQuery {
title?: string;
/** 发布状态(0：未发布，1：已发布，-1：已撤回) */
publishStatus?: number;
isRead?: number;
}
/** 通知公告表单对象 */
@@ -151,7 +142,7 @@ export interface NoticeForm {
/** 通知类型 */
type?: number;
/** 优先级(L：低，M：中，H：高) */
level?: number;
level?: string;
/** 目标类型(1-全体 2-指定) */
targetType?: number;
/** 目标ID合集，以,分割 */
@@ -160,7 +151,7 @@ export interface NoticeForm {
/** 通知公告分页对象 */
export interface NoticePageVO {
id?: string;
id: string;
/** 通知标题 */
title?: string;
/** 通知内容 */

4
src/api/user.ts
View File

@@ -199,8 +199,8 @@ class UserAPI {
/**
* 获取用户下拉列表
*/
static getOptions(): AxiosPromise<OptionType[]> {
return request({
static getOptions() {
return request<any, OptionType[]>({
url: `${USER_BASE_URL}/options`,
method: "get",
});

64
src/components/Dictionary/index.vue
View File

@@ -16,18 +16,16 @@
</template>
<script setup lang="ts">
import DictAPI from "@/api/dict";
import DictDataAPI from "@/api/dict-data";
const props = defineProps({
/**
* 字典编码(eg: 性别-gender)
*/
code: {
type: String,
required: true,
},
modelValue: {
type: [String, Number],
required: true,
},
placeholder: {
type: String,
@@ -39,38 +37,42 @@ const props = defineProps({
},
});
const emits = defineEmits(["update:modelValue"]);
// 使用 defineEmits 声明 emits
const emit = defineEmits(["update:modelValue"]);
const options: Ref<OptionType[]> = ref([]);
// 下拉框选项
const options = ref<Array<{ label: string; value: string | number }>>([]);
const selectedValue = ref<string | number | undefined>(props.modelValue);
const selectedValue = ref<string | number | undefined>();
watch([options, () => props.modelValue], ([newOptions, newModelValue]) => {
if (newOptions.length === 0) {
// 下拉数据源加载未完成不回显
return;
// 监听 modelValue 变化
watch(
() => props.modelValue,
(newValue) => {
// 类型转换确保 selectedValue 和 option.value 类型一致
if (typeof options.value[0]?.value === "number") {
selectedValue.value = Number(newValue);
} else {
selectedValue.value = String(newValue);
}
}
if (newModelValue == undefined) {
selectedValue.value = undefined;
return;
}
if (typeof newOptions[0].value === "number") {
selectedValue.value = Number(newModelValue);
} else if (typeof newOptions[0].value === "string") {
selectedValue.value = String(newModelValue);
} else {
selectedValue.value = newModelValue;
}
});
);
function handleChange(val?: string | number | undefined) {
emits("update:modelValue", val);
// 监听 selectedValue 的变化并触发 update:modelValue
function handleChange(val?: string | number) {
emit("update:modelValue", val);
}
onBeforeMount(() => {
// 根据字典编码获取字典项
DictAPI.getOptions(props.code).then((data) => {
options.value = data;
});
// 获取字典数据
onBeforeMount(async () => {
const data = await DictDataAPI.getOptions(props.code);
options.value = data;
// 初次加载时处理类型一致性
if (props.modelValue !== undefined) {
if (typeof options.value[0]?.value === "number") {
selectedValue.value = Number(props.modelValue);
} else {
selectedValue.value = String(props.modelValue);
}
}
});
</script>

167
src/components/Notice/index.vue
View File

@@ -1,43 +1,41 @@
<template>
<div>
<el-dropdown trigger="hover">
<el-badge :is-dot="messages.length > 0" :offset="offset">
<div class="flex-center h100% p10px">
<i-ep-bell />
</div>
<el-dropdown class="flex-center h-full align-middle">
<el-badge v-if="messages.length > 0" :value="messages.length" :max="99">
<div><i-ep-bell /></div>
</el-badge>
<el-badge v-else>
<i-ep-bell />
</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="p-5">
<template v-if="messages.length > 0">
<div
class="w400px flex-x-between py-2"
v-for="(item, index) in messages"
:key="index"
>
<template v-if="messages.length > 0">
<div
class="w-[380px] py-2"
v-for="(item, index) in messages"
:key="index"
<div>
<el-tag type="success" size="small">系统通知</el-tag>
<el-link
type="primary"
@click="readNotice(item.id)"
class="ml-1"
>
<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>
{{ item.title }}
</el-link>
</div>
<div>
{{ item.publishTime }}
</div>
</div>
</template>
<template v-else>
<div class="flex-center h150px w350px">
<el-empty :image-size="30" description="暂无消息" />
</div>
</template>
<el-divider />
<div class="flex-x-between">
<el-link type="primary" :underline="false" @click="viewMore">
@@ -59,101 +57,58 @@
</template>
</el-dropdown>
<!-- 弹窗部分 -->
<el-dialog
v-model="modalVisible"
:show-close="false"
append-to-body
:fullscreen="fullscreen"
style="z-index: revert"
>
<template #header="{ close }">
<div class="flex-x-between">
<h3>{{ currentMessage.title }}</h3>
<div class="flex-center">
<el-icon
class="ml10px"
@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="currentMessage.type === 2" type="warning">
系统通知
</el-tag>
<el-tag v-if="currentMessage.type === 1" type="success">
通知消息
</el-tag>
</span>
<div v-html="currentMessage.content"></div>
</div>
</el-dialog>
<NoticeDetail ref="noticeDetailRef" />
</div>
</template>
<script setup lang="ts">
import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
import NoticeAPI from "@/api/notice";
import NoticeAPI, { NoticePageQuery, NoticePageVO } from "@/api/notice";
import WebSocketManager from "@/utils/socket";
import router from "@/router";
// 状态和引用
const activeTab = ref(MessageTypeEnum.MESSAGE);
const messages = ref<any[]>([]);
const offset = ref<[number, number]>([-15, 15]);
const currentMessage = ref<any>({});
const modalVisible = ref(false);
const fullscreen = ref(false);
const messages = ref<NoticePageVO[]>([]);
const noticeDetailRef = ref();
// 获取未读消息列表并连接 WebSocket
onMounted(() => {
NoticeAPI.getUnreadList().then((data) => {
messages.value = data;
});
NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5, isRead: 0 }).then(
(data) => {
messages.value = data.list;
}
);
WebSocketManager.getOrCreateClient("/user/queue/message", (message) => {
const parsedMessage = JSON.parse(message);
if (parsedMessage.noticeType === MessageTypeEnum.MESSAGE) {
const content = JSON.parse(parsedMessage.content);
if (content.type === "release") {
const id = content.id;
if (!messages.value.some((msg) => msg.id === id)) {
messages.value.unshift({
id,
title: content.title,
type: MessageTypeEnum.MESSAGE,
});
}
}
WebSocketManager.subscribeToTopic("/user/queue/message", (message) => {
console.log("收到消息：", message);
const data = JSON.parse(message);
const id = data.id;
if (!messages.value.some((msg) => msg.id === id)) {
messages.value.unshift({
id,
title: data.title,
});
ElNotification({
title: "您收到一条新的通知消息！",
message: data.title,
type: "success",
position: "bottom-right",
});
}
});
});
// 阅读通知公告
function readNotice(id: number) {
function readNotice(id: string) {
noticeDetailRef.value.openNotice(id);
const index = messages.value.findIndex((msg) => msg.id === id);
if (index >= 0) {
currentMessage.value = messages.value[index];
modalVisible.value = true;
messages.value.splice(index, 1); // 从消息列表中移除已读消息
}
}
// 查看更多
function viewMore() {
router.push({ path: "/notice/notice" });
router.push({ path: "/myNotice" });
}
// 全部已读
@@ -164,4 +119,4 @@ function markAllAsRead() {
}
</script>
<style scoped></style>
<style lang="scss" scoped></style>

15
src/enums/MessageTypeEnum.ts
View File

@@ -1,15 +0,0 @@
/* 消息类型枚举 */
export const enum MessageTypeEnum {
/* 消息 */
MESSAGE = "SYSTEM_MESSAGE",
/* 通知 */
NOTICE = "NOTICE",
/* 待办 */
TODO = "TODO",
}
export const MessageTypeLabels = {
[MessageTypeEnum.MESSAGE]: "消息",
// [MessageTypeEnum.NOTICE]: "通知",
// [MessageTypeEnum.TODO]: "待办",
};

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

@@ -124,11 +124,6 @@ function logout() {
}
}
:deep(.message .el-badge__content.is-fixed.is-dot) {
top: 5px;
right: 10px;
}
:deep(.el-divider--horizontal) {
margin: 10px 0;
}

58
src/router/index.ts
View File

@@ -58,60 +58,14 @@ export const constantRoutes: RouteRecordRaw[] = [
component: () => import("@/views/profile/index.vue"),
meta: { title: "个人中心", icon: "user", hidden: true },
},
{
path: "myNotice",
name: "MyNotice",
component: () => import("@/views/system/notice/my-notice.vue"),
meta: { title: "我的通知", icon: "user", hidden: true },
},
],
},
// 外部链接
// {
// path: "/external-link",
// component: Layout,
// children: [ {
// component: () => import("@/views/external-link/index.vue"),
// path: "https://www.cnblogs.com/haoxianrui/",
// meta: { title: "外部链接", icon: "link" },
// },
// ],
// },
// 多级嵌套路由
/* {
path: '/nested',
component: Layout,
redirect: '/nested/level1/level2',
name: 'Nested',
meta: {title: '多级菜单', icon: 'nested'},
children: [
{
path: 'level1',
component: () => import('@/views/nested/level1/index.vue'),
name: 'Level1',
meta: {title: '菜单一级'},
redirect: '/nested/level1/level2',
children: [
{
path: 'level2',
component: () => import('@/views/nested/level1/level2/index.vue'),
name: 'Level2',
meta: {title: '菜单二级'},
redirect: '/nested/level1/level2/level3',
children: [
{
path: 'level3-1',
component: () => import('@/views/nested/level1/level2/level3/index1.vue'),
name: 'Level3-1',
meta: {title: '菜单三级-1'}
},
{
path: 'level3-2',
component: () => import('@/views/nested/level1/level2/level3/index2.vue'),
name: 'Level3-2',
meta: {title: '菜单三级-2'}
}
]
}
]
},
]
}*/
];
/**

2
src/store/modules/user.ts
View File

@@ -69,7 +69,7 @@ export const useUserStore = defineStore("user", () => {
// remove token
function resetToken() {
return new Promise<void>((resolve) => {
localStorage.setItem(TOKEN_KEY, "");
removeToken();
resetRouter();
resolve();
});

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

@@ -13,10 +13,7 @@ declare module "vue" {
Breadcrumb: (typeof import("./../components/Breadcrumb/index.vue"))["default"];
CopyButton: (typeof import("./../components/CopyButton/index.vue"))["default"];
CURD: (typeof import("./../components/CURD/index.vue"))["default"];
DeptTree: (typeof import("./../views/system/user/components/dept-tree.vue"))["default"];
UserImport: (typeof import("./../views/system/user/components/user-import.vue"))["default"];
Dictionary: (typeof import("./../components/Dictionary/index.vue"))["default"];
DictItem: (typeof import("./../views/system/dict/components/dict-item.vue"))["default"];
ElBacktop: (typeof import("element-plus/es"))["ElBacktop"];
ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"];
ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"];
@@ -75,7 +72,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"];
NoticeDetail: (typeof import("../views/system/notice/notice-detail.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"];

159
src/utils/socket.ts
View File

@@ -1,79 +1,38 @@
import { Client } from "@stomp/stompjs";
import { getToken } from "@/utils/auth";
const MAX_RECONNECT_ATTEMPTS = 3; // 最大重连尝试次数
const RECONNECT_DELAY_MS = 5000; // 重连延迟时间（毫秒）
const HEARTBEAT_INTERVAL_MS = 30000; // 心跳间隔时间（毫秒）
const MAX_RECONNECT_ATTEMPTS = 3;
const RECONNECT_DELAY_MS = 5000;
const HEARTBEAT_INTERVAL_MS = 30000;
class WebSocketManager {
private clients: Map<string, Client> = new Map(); // 保存所有 WebSocket 客户端
private reconnectAttempts: Map<string, number> = new Map(); // 记录各地址的重连次数
private client: Client | null = null;
private reconnectAttempts: number = 0;
private messageHandlers: Map<string, ((message: string) => void)[]> =
new Map(); // 保存订阅的消息回调
new Map();
constructor() {}
/**
* 获取已有的 WebSocket 客户端
*
* @param endpoint WebSocket 连接地址
* @returns WebSocket Client 实例或 undefined
*/
public getClient(endpoint: string): Client | undefined {
return this.clients.get(endpoint);
}
private getOrCreateClient(onError?: (error: any) => void): Client {
const endpoint = import.meta.env.VITE_APP_WS_ENDPOINT;
/**
* 获取 WebSocket 客户端，如果已存在则返回已有客户端，否则创建新的客户端
*
* @param endpoint WebSocket 连接地址
* @param onMessage 收到消息时的回调
* @param onError 出现错误时的回调
* @returns WebSocket Client 实例
*/
public getOrCreateClient(
endpoint: string,
onMessage: (message: string) => void,
onError?: (error: any) => void
): Client {
let client = this.getClient(endpoint);
if (client) {
// 如果该地址已有连接，直接添加消息回调
this.messageHandlers.get(endpoint)?.push(onMessage);
} else {
// 否则创建新客户端
client = this.createClient(endpoint, onMessage, onError);
this.clients.set(endpoint, client);
this.messageHandlers.set(endpoint, [onMessage]);
if (this.client) {
return this.client;
}
return client;
}
/**
* 创建 WebSocket 客户端
*
* @param endpoint WebSocket 连接地址
* @param onMessage 收到消息时的回调
* @param onError 出现错误时的回调
* @returns WebSocket Client 实例
* @private
*/
private createClient(
endpoint: string,
onMessage: (message: string) => void,
onError?: (error: any) => void
): Client {
const client = new Client({
brokerURL: endpoint, // 使用传入的 endpoint 动态设置连接地址
this.client = new Client({
brokerURL: endpoint,
connectHeaders: {
Authorization: getToken(),
},
heartbeatIncoming: HEARTBEAT_INTERVAL_MS,
heartbeatOutgoing: HEARTBEAT_INTERVAL_MS,
onConnect: () => {
console.log(`已连接到 ${endpoint}`);
client.subscribe(endpoint, (message) => {
onMessage(message.body); // 收到消息时调用回调
console.log(`已连接到 WebSocket 服务器: ${endpoint}`);
this.messageHandlers.forEach((handlers, topic) => {
handlers.forEach((handler) => {
this.subscribeToTopic(topic, handler);
});
});
},
onStompError: (frame) => {
@@ -84,66 +43,66 @@ class WebSocketManager {
if (onError) {
onError(frame);
}
this.handleReconnect(endpoint); // 出现错误时处理重连
this.handleReconnect();
},
onDisconnect: () => {
console.log(`已断开连接: ${endpoint}`);
this.handleReconnect(endpoint); // 断开时处理重连
this.handleReconnect();
},
});
client.activate();
return client;
this.client.activate();
return this.client;
}
/**
* 处理 WebSocket 重连
*
* @param endpoint WebSocket 连接地址
* @private
*/
private handleReconnect(endpoint: string) {
const attemptCount = this.reconnectAttempts.get(endpoint) || 0;
if (this.clients.has(endpoint)) {
const client = this.clients.get(endpoint);
if (client && client.connected) {
client.deactivate(); // 主动断开已有连接
}
public subscribeToTopic(
topic: string,
onMessage: (message: string) => void,
onError?: (error: any) => void
) {
if (!this.client || !this.client.connected) {
console.log("WebSocket 尚未连接，正在连接...");
this.getOrCreateClient(onError);
}
// 重连次数未达到最大次数时继续重连
if (attemptCount < MAX_RECONNECT_ATTEMPTS) {
this.reconnectAttempts.set(endpoint, attemptCount + 1);
if (this.messageHandlers.has(topic)) {
this.messageHandlers.get(topic)?.push(onMessage);
} else {
this.messageHandlers.set(topic, [onMessage]);
}
if (this.client?.connected) {
console.log(`正在订阅主题: ${topic}`);
this.client.subscribe(topic, (message) => {
const handlers = this.messageHandlers.get(topic);
handlers?.forEach((handler) => handler(message.body));
});
}
}
private handleReconnect() {
if (this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
this.reconnectAttempts++;
console.log(
`尝试重连 (${attemptCount + 1}/${MAX_RECONNECT_ATTEMPTS}): ${endpoint}`
`重连尝试 (${this.reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`
);
setTimeout(() => {
const originalOnMessage = this.messageHandlers.get(endpoint) || [];
this.getOrCreateClient(
endpoint,
(message) => originalOnMessage.forEach((handler) => handler(message)),
() => {}
);
this.client?.deactivate();
this.client = null;
this.getOrCreateClient();
}, RECONNECT_DELAY_MS);
} else {
console.error(`达到最大重连次数: ${endpoint}`);
this.reconnectAttempts.delete(endpoint); // 超过最大重连次数后清除重连记录
console.error("达到最大重连次数，停止重连");
}
}
/**
* 断开所有 WebSocket 连接
*
* @param delay 延迟断开时间（毫秒），默认为 0
*/
public disconnectAll(delay: number = 0) {
this.clients.forEach((client, endpoint) => {
console.log(`断开 WebSocket 连接: ${endpoint}`);
setTimeout(() => client.deactivate(), delay); // 延迟断开连接
});
this.clients.clear();
this.reconnectAttempts.clear();
public disconnect() {
if (this.client) {
console.log("断开 WebSocket 连接");
this.client.deactivate();
this.client = null;
}
}
}

6
src/views/dashboard/index.vue
View File

@@ -188,15 +188,13 @@
</template>
<script setup lang="ts">
import WebSocketManager from "@/api/socket";
import WebSocketManager from "@/utils/socket";
defineOptions({
name: "Dashboard",
inheritAttrs: false,
});
import { Client } from "@stomp/stompjs";
import { useUserStore } from "@/store/modules/user";
import { NoticeTypeEnum, getNoticeLabel } from "@/enums/NoticeTypeEnum";
import StatsAPI, { VisitStatsVO } from "@/api/log";
@@ -390,7 +388,7 @@ const getNoticeLevelTag = (type: number) => {
};
function connectWebSocket() {
WebSocketManager.getWebSocketClient("/topic/onlineUserCount", (message) => {
WebSocketManager.getOrCreateClient("/topic/onlineUserCount", (message) => {
onlineUserCount.value = JSON.parse(message);
});
}

26
src/views/system/dept/index.vue
View File

@@ -27,7 +27,8 @@
搜索
</el-button>
<el-button @click="handleResetQuery">
<i-ep-refresh />重置
<i-ep-refresh />
重置
</el-button>
</el-form-item>
</el-form>
@@ -39,14 +40,18 @@
v-hasPerm="['sys:dept:add']"
type="success"
@click="handleOpenDialog(0, undefined)"
><i-ep-plus />新增</el-button
>
<i-ep-plus />
新增
</el-button>
<el-button
v-hasPerm="['sys:dept:delete']"
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
><i-ep-delete />删除
>
<i-ep-delete />
删除
</el-button>
</template>
@@ -78,7 +83,9 @@
link
size="small"
@click.stop="handleOpenDialog(scope.row.id, undefined)"
><i-ep-plus />新增
>
<i-ep-plus />
新增
</el-button>
<el-button
v-hasPerm="['sys:dept:edit']"
@@ -86,7 +93,9 @@
link
size="small"
@click.stop="handleOpenDialog(scope.row.parentId, scope.row.id)"
><i-ep-edit />编辑
>
<i-ep-edit />
编辑
</el-button>
<el-button
v-hasPerm="['sys:dept:delete']"
@@ -95,7 +104,8 @@
size="small"
@click.stop="handleDelete(scope.row.id)"
>
<i-ep-delete />删除
<i-ep-delete />
删除
</el-button>
</template>
</el-table-column>
@@ -148,8 +158,8 @@
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
<el-button @click="handleCloseDialog"> 取 消 </el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleCloseDialog">取 消</el-button>
</div>
</template>
</el-dialog>

310
src/views/system/dict/data.vue Normal file
View File

@@ -0,0 +1,310 @@
<!-- 字典数据 -->
<template>
<div class="app-container">
<el-alert
:title="`字典：${dictName}【${dictCode}】`"
type="success"
:closable="false"
/>
<div class="search-container mt-5">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="字典标签/字典值"
clearable
@keyup.enter="handleQuery"
/>
</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">
<div class="mb-[10px]">
<el-button type="success" @click="handleOpenDialog()">
<i-ep-plus />
新增
</el-button>
<el-button
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
>
<i-ep-delete />
删除
</el-button>
</div>
<el-table
v-loading="loading"
highlight-current-row
:data="tableData"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="字典标签" prop="label" />
<el-table-column label="字典值" prop="value" />
<el-table-column label="排序" prop="sort" />
<el-table-column label="状态">
<template #default="scope">
<el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
{{ scope.row.status === 1 ? "启用" : "禁用" }}
</el-tag>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="220">
<template #default="scope">
<el-button
type="primary"
link
size="small"
@click.stop="handleOpenDialog(scope.row)"
>
<i-ep-edit />
编辑
</el-button>
<el-button
type="danger"
link
size="small"
@click.stop="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="computedRules"
label-width="100px"
>
<el-card shadow="never">
<el-form-item label="字典标签" prop="label">
<el-input v-model="formData.label" placeholder="请输入字典标签" />
</el-form-item>
<el-form-item label="字典值" prop="value">
<el-input v-model="formData.value" placeholder="请输入字典值" />
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="formData.status">
<el-radio :value="1">启用</el-radio>
<el-radio :value="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序">
<el-input-number
v-model="formData.sort"
controls-position="right"
/>
</el-form-item>
</el-card>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handleSubmitClick">确 定</el-button>
<el-button @click="handleCloseDialog">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
defineOptions({
name: "DictData",
inherititems: false,
});
import DictDataAPI, {
DictDataPageQuery,
DictDataPageVO,
DictDataForm,
} from "@/api/dict-data";
const route = useRoute();
const dictCode = route.query.dictCode as string;
const dictName = route.query.dictName as string;
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const queryParams = reactive<DictDataPageQuery>({
pageNum: 1,
pageSize: 10,
dictCode,
});
const tableData = ref<DictDataPageVO[]>();
const dialog = reactive({
title: "",
visible: false,
});
const formData = reactive<DictDataForm>({});
// 监听路由参数变化，更新字典数据
watch(
() => route.query.dictCode,
(newDictCode) => {
if (newDictCode !== queryParams.dictCode) {
queryParams.dictCode = newDictCode as string;
handleQuery();
}
}
);
const computedRules = computed(() => {
const rules: Partial<Record<string, any>> = {
value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
};
return rules;
});
// 查询
function handleQuery() {
loading.value = true;
DictDataAPI.getPage(queryParams)
.then((data) => {
tableData.value = data.list;
total.value = data.total;
})
.finally(() => {
loading.value = false;
});
}
// 重置查询
function handleResetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
handleQuery();
}
// 行选择
function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
// 打开弹窗
function handleOpenDialog(row?: DictDataPageVO) {
dialog.visible = true;
dialog.title = row ? "编辑字典数据" : "新增字典数据";
if (row?.id) {
DictDataAPI.getFormData(row.id).then((data) => {
Object.assign(formData, data);
});
}
}
// 提交表单
function handleSubmitClick() {
dataFormRef.value.validate((isValid: boolean) => {
if (isValid) {
loading.value = true;
const id = formData.id;
formData.dictCode = dictCode;
if (id) {
DictDataAPI.update(id, formData)
.then(() => {
ElMessage.success("修改成功");
handleCloseDialog();
handleQuery();
})
.finally(() => (loading.value = false));
} else {
DictDataAPI.add(formData)
.then(() => {
ElMessage.success("新增成功");
handleCloseDialog();
handleQuery();
})
.finally(() => (loading.value = false));
}
}
});
}
// 关闭弹窗
function handleCloseDialog() {
dialog.visible = false;
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
formData.id = undefined;
}
/**
* 删除字典
*
* @param id 字典ID
*/
function handleDelete(id?: number) {
const attrGroupIds = [id || ids.value].join(",");
if (!attrGroupIds) {
ElMessage.warning("请勾选删除项");
return;
}
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(
() => {
DictDataAPI.deleteByIds(attrGroupIds).then(() => {
ElMessage.success("删除成功");
handleResetQuery();
});
},
() => {
ElMessage.info("已取消删除");
}
);
}
onMounted(() => {
handleQuery();
});
</script>

163
src/views/system/dict/index.vue
View File

@@ -1,12 +1,12 @@
<!-- 分类字典 -->
<!-- 字典 -->
<template>
<div class="app-container">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="name">
<el-form-item label="关键字" prop="keywords">
<el-input
v-model="queryParams.keywords"
placeholder="字典名称"
placeholder="字典名称/编码"
clearable
@keyup.enter="handleQuery"
/>
@@ -16,7 +16,7 @@
<i-ep-search />
搜索
</el-button>
<el-button @click="handleResetClick()">
<el-button @click="handleResetQuery()">
<i-ep-refresh />
重置
</el-button>
@@ -48,18 +48,8 @@
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="expand" label="字典项列表" width="100">
<template #default="props">
<el-table :data="props.row.dictItems">
<el-table-column label="字典项键" prop="name" width="200" />
<el-table-column label="字典项值" prop="value" align="center" />
<el-table-column label="排序" prop="sort" align="center" />
</el-table>
</template>
</el-table-column>
<el-table-column label="字典名称" prop="name" />
<el-table-column label="字典编码" prop="code" />
<el-table-column label="字典编码" prop="dictCode" />
<el-table-column label="状态" prop="status">
<template #default="scope">
<el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
@@ -69,6 +59,16 @@
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="220">
<template #default="scope">
<el-button
type="primary"
link
size="small"
@click.stop="handleOpenDictData(scope.row)"
>
<i-ep-Collection />
字典数据
</el-button>
<el-button
type="primary"
link
@@ -101,10 +101,10 @@
</el-card>
<!--字典弹窗-->
<el-drawer
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
size="70%"
width="500px"
@close="handleCloseDialog"
>
<el-form
@@ -112,14 +112,17 @@
:model="formData"
:rules="computedRules"
label-width="100px"
:inline="true"
>
<el-card shadow="never">
<el-form-item label="字典名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入字典名称" />
</el-form-item>
<el-form-item label="字典编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入字典编码" />
<el-form-item label="字典编码" prop="dictCode">
<el-input
v-model="formData.dictCode"
placeholder="请输入字典编码"
/>
</el-form-item>
<el-form-item label="状态">
@@ -128,80 +131,14 @@
<el-radio :value="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-card>
<el-card shadow="never" class="mt-5">
<template #header>
<div class="flex-x-between">
<span>字典项</span>
<el-button
type="primary"
size="small"
@click.stop="handleAddAttrClick"
>
<i-ep-plus />
新增字典
</el-button>
</div>
</template>
<el-table
v-loading="loading"
highlight--currentrow
:data="formData.dictItems"
@selection-change="handleSelectionChange"
>
<el-table-column label="字典项名称" width="200">
<template #default="scope">
<el-form-item :prop="'dictItems.' + scope.$index + '.name'">
<el-input v-model="scope.row.name" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="字典项值" width="200">
<template #default="scope">
<el-form-item :prop="'dictItems.' + scope.$index + '.value'">
<el-input v-model="scope.row.value" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="排序">
<template #default="scope">
<el-form-item :prop="'dictItems.' + scope.$index + '.sort'">
<el-input v-model="scope.row.sort" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="状态" prop="status">
<template #default="scope">
<el-form-item :prop="'dictItems.' + scope.$index + '.status'">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="0"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
width="120"
>
<template #default="scope">
<el-button
type="danger"
link
size="small"
@click.stop="handleDeleteAttrClick(scope.$index)"
>
<i-ep-delete />
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-form-item label="备注">
<el-input
type="textarea"
v-model="formData.remark"
placeholder="请输入备注"
/>
</el-form-item>
</el-card>
</el-form>
@@ -211,7 +148,7 @@
<el-button @click="handleCloseDialog">取 消</el-button>
</div>
</template>
</el-drawer>
</el-dialog>
</div>
</template>
@@ -223,6 +160,8 @@ defineOptions({
import DictAPI, { DictPageQuery, DictPageVO, DictForm } from "@/api/dict";
import router from "@/router";
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
@@ -237,7 +176,6 @@ const queryParams = reactive<DictPageQuery>({
const tableData = ref<DictPageVO[]>();
// 字典弹窗
const dialog = reactive({
title: "",
visible: false,
@@ -248,15 +186,8 @@ const formData = reactive<DictForm>({});
const computedRules = computed(() => {
const rules: Partial<Record<string, any>> = {
name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
code: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
dictCode: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
};
if (formData.dictItems) {
formData.dictItems.forEach((attr, index) => {
rules[`dictItems.${index}.name`] = [
{ required: true, message: "请输入字典项名称", trigger: "blur" },
];
});
}
return rules;
});
@@ -274,7 +205,7 @@ function handleQuery() {
}
// 重置查询
function handleResetClick() {
function handleResetQuery() {
queryFormRef.value.resetFields();
queryParams.pageNum = 1;
handleQuery();
@@ -298,7 +229,7 @@ function handleAddClick() {
*/
function handleEditClick(id: number, name: string) {
dialog.visible = true;
dialog.title = "【" + name + "】字典修改";
dialog.title = "修改字典";
DictAPI.getFormData(id).then((data) => {
Object.assign(formData, data);
});
@@ -331,7 +262,7 @@ function handleSubmitClick() {
});
}
/** 关闭字典弹窗 */
// 关闭字典弹窗
function handleCloseDialog() {
dialog.visible = false;
@@ -339,7 +270,6 @@ function handleCloseDialog() {
dataFormRef.value.clearValidate();
formData.id = undefined;
formData.dictItems = [];
}
/**
* 删除字典
@@ -360,7 +290,7 @@ function handleDelete(id?: number) {
() => {
DictAPI.deleteByIds(attrGroupIds).then(() => {
ElMessage.success("删除成功");
handleResetClick();
handleResetQuery();
});
},
() => {
@@ -369,17 +299,12 @@ function handleDelete(id?: number) {
);
}
/** 新增字典项 */
function handleAddAttrClick() {
formData.dictItems = formData.dictItems ?? [];
formData.dictItems.push({ sort: 1, status: 1 });
}
/** 删除字典项 */
function handleDeleteAttrClick(index: number) {
if (formData.dictItems && formData.dictItems.length > 0) {
formData.dictItems.splice(index, 1);
}
// 打开字典数据
function handleOpenDictData(row: DictPageVO) {
router.push({
name: "DictData",
query: { dictCode: row.dictCode, dictName: row.name },
});
}
onMounted(() => {

87
src/views/system/notice/components/NoticeDetail.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<el-dialog
v-model="visible"
:show-close="false"
:fullscreen="isFullscreen"
width="50%"
append-to-body
@close="handleClose"
>
<template #header>
<div class="flex-x-between">
<span>通知公告详情</span>
<div class="dialog-toolbar">
<!-- 全屏/退出全屏按钮 -->
<el-button @click="toggleFullscreen" circle>
<SvgIcon v-if="isFullscreen" icon-class="fullscreen-exit" />
<SvgIcon v-else icon-class="fullscreen" />
</el-button>
<!-- 关闭按钮 -->
<el-button @click="handleClose" circle>
<i-ep-Close />
</el-button>
</div>
</div>
</template>
<el-descriptions :column="1">
<el-descriptions-item label="标题：">
{{ notice.title }}
</el-descriptions-item>
<el-descriptions-item label="发布状态：">
<el-tag v-if="notice.publishStatus == 0" type="info">未发布</el-tag>
<el-tag v-else-if="notice.publishStatus == 1" type="success">
已发布
</el-tag>
<el-tag v-else-if="notice.publishStatus == -1" type="warning">
已撤回
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="发布人：">
{{ notice.publisherName }}
</el-descriptions-item>
<el-descriptions-item label="发布时间：">
{{ notice.publishTime }}
</el-descriptions-item>
<el-descriptions-item label="内容：">
<el-input
v-model="notice.content"
type="textarea"
style="max-height: 400px"
:readonly="true"
/>
</el-descriptions-item>
</el-descriptions>
</el-dialog>
</template>
<script setup lang="ts">
import NoticeAPI, { NoticeDetailVO } from "@/api/notice";
const visible = ref(false);
const notice = ref<NoticeDetailVO>({});
const isFullscreen = ref(false); // 控制全屏状态
// 切换全屏
const toggleFullscreen = () => {
isFullscreen.value = !isFullscreen.value;
};
// 关闭弹窗
const handleClose = () => {
visible.value = false;
};
// 接收公告详情
const openNotice = async (id: string) => {
visible.value = true;
const noticeDetail = await NoticeAPI.getDetail(id);
notice.value = noticeDetail;
};
defineExpose({
openNotice,
});
</script>
<style scoped></style>

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

@@ -15,16 +15,16 @@
@keyup.enter="handleQuery()"
/>
</el-form-item>
<el-form-item label="发布状态" prop="releaseStatus">
<el-form-item label="发布状态" prop="publishStatus">
<el-select
v-model="queryParams.releaseStatus"
v-model="queryParams.publishStatus"
class="!w-[100px]"
clearable
placeholder="全部"
>
<el-option :value="0" label="未发布" />
<el-option :value="1" label="已发布" />
<el-option :value="2" label="已撤回" />
<el-option :value="-1" label="已撤回" />
</el-select>
</el-form-item>
<el-form-item>
@@ -43,7 +43,7 @@
<el-card shadow="never" class="table-container">
<template #header>
<el-button
v-hasPerm="['system:notice:add']"
v-hasPerm="['sys:notice:add']"
type="success"
@click="handleOpenDialog()"
>
@@ -51,7 +51,7 @@
新增通知
</el-button>
<el-button
v-hasPerm="['system:notice:delete']"
v-hasPerm="['sys:notice:delete']"
type="danger"
:disabled="ids.length === 0"
@click="handleDelete()"
@@ -79,108 +79,105 @@
/>
<el-table-column
align="center"
key="noticeType"
label="通知类型"
prop="noticeTypeLabel"
prop="typeLabel"
min-width="150"
>
<template #default="scope">
<el-tag v-if="scope.row.noticeType == 2" type="warning">
系统通知
</el-tag>
<el-tag v-if="scope.row.noticeType == 1" type="success">
通知消息
</el-tag>
<el-tag v-if="scope.row.type == 2" type="warning">系统通知</el-tag>
<el-tag v-if="scope.row.type == 1" type="success">通知消息</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="releaseBy"
label="发布人"
prop="releaseBy"
prop="publisherName"
min-width="100"
/>
<el-table-column
align="center"
key="priority"
label="优先级"
prop="priority"
key="level"
label="通知等级"
prop="level"
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>
<el-tag v-if="scope.row.level == 'L'" type="danger">低</el-tag>
<el-tag v-if="scope.row.level == 'M'" type="success">中</el-tag>
<el-tag v-if="scope.row.level == 'H'" type="warning">高</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="tarType"
label="通告对象"
prop="tarType"
label="通告目标类型"
prop="targetType"
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>
<el-tag v-if="scope.row.targetType == 1" type="warning">
全体
</el-tag>
<el-tag v-if="scope.row.targetType == 2" type="success">
指定
</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="releaseStatus"
label="发布状态"
prop="releaseStatus"
min-width="100"
>
<el-table-column align="center" label="发布状态" min-width="100">
<template #default="scope">
<el-tag v-if="scope.row.releaseStatus == 0" type="warning">
<el-tag v-if="scope.row.publishStatus == 0" type="info">
未发布
</el-tag>
<el-tag v-if="scope.row.releaseStatus == 1" type="success">
<el-tag v-if="scope.row.publishStatus == 1" type="success">
已发布
</el-tag>
<el-tag v-if="scope.row.releaseStatus == 2" type="primary">
<el-tag v-if="scope.row.publishStatus == -1" type="warning">
已撤回
</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="releaseTime"
label="发布时间"
prop="releaseTime"
min-width="100"
/>
<el-table-column
align="center"
key="recallTime"
label="撤回时间"
prop="recallTime"
min-width="100"
/>
<el-table-column align="center" label="操作时间" min-width="220">
<template #default="scope">
<div class="flex-x-start">
<span>创建时间：</span>
<span>{{ scope.row.createTime || "-" }}</span>
</div>
<div v-if="scope.row.publishStatus === 1" class="flex-x-start">
<span>发布时间：</span>
<span>{{ scope.row.publishTime || "-" }}</span>
</div>
<div
v-else-if="scope.row.publishStatus === -1"
class="flex-x-start"
>
<span>撤回时间：</span>
<span>{{ scope.row.revokeTime || "-" }}</span>
</div>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
type="primary"
size="small"
@click="openNoticeDetailDialog(scope.row.id)"
link
@click="examine(scope.row.id)"
>
查看
</el-button>
<el-button
v-if="scope.row.releaseStatus != 1"
v-hasPerm="['system:notice:release']"
v-if="scope.row.publishStatus != 1"
v-hasPerm="['sys:notice:publish']"
type="primary"
size="small"
link
@click="releaseNotice(scope.row.id)"
@click="handlePublishNotice(scope.row.id)"
>
发布
</el-button>
<el-button
v-if="scope.row.releaseStatus == 1"
v-hasPerm="['system:notice:recall']"
v-if="scope.row.publishStatus == 1"
v-hasPerm="['sys:notice:revoke']"
type="primary"
size="small"
link
@@ -189,8 +186,8 @@
撤回
</el-button>
<el-button
v-if="scope.row.releaseStatus != 1"
v-hasPerm="['system:notice:edit']"
v-if="scope.row.publishStatus != 1"
v-hasPerm="['sys:notice:edit']"
type="primary"
size="small"
link
@@ -199,8 +196,8 @@
编辑
</el-button>
<el-button
v-if="scope.row.releaseStatus != 1"
v-hasPerm="['system:notice:delete']"
v-if="scope.row.publishStatus != 1"
v-hasPerm="['sys:notice:delete']"
type="danger"
size="small"
link
@@ -239,38 +236,38 @@
<el-input v-model="formData.title" placeholder="通知标题" clearable />
</el-form-item>
<el-form-item label="通知内容" prop="content">
<editor
<WangEditor
v-model="formData.content"
style="min-height: 480px; max-height: 500px"
/>
</el-form-item>
<el-form-item label="通知类型" prop="noticeType">
<el-form-item label="通知类型" prop="type">
<dictionary
type="button"
v-model="formData.noticeType"
v-model="formData.type"
code="notice_type"
/>
</el-form-item>
<el-form-item label="优先级" prop="priority">
<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-form-item label="优先级" prop="level">
<el-radio-group v-model="formData.level">
<el-radio value="L">低</el-radio>
<el-radio value="M">中</el-radio>
<el-radio value="H">高</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="目标类型" prop="tarType">
<el-radio-group v-model="formData.tarType">
<el-radio :value="0">全体</el-radio>
<el-radio :value="1">指定</el-radio>
<el-form-item label="目标类型" prop="targetType">
<el-radio-group v-model="formData.targetType">
<el-radio :value="1">全体</el-radio>
<el-radio :value="2">指定</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="指定用户"
prop="tarType"
v-if="formData.tarType == 1"
prop="targetUserIds"
v-if="formData.targetType == 2"
>
<el-select
v-model="formData.tarIds"
v-model="formData.targetUserIds"
multiple
search
placeholder="请选择指定用户"
@@ -291,19 +288,16 @@
</div>
</template>
</el-dialog>
<NoticeModal ref="noticeModalRef" />
<!-- 通知公告详情 -->
<NoticeDetail ref="noticeDetailRef" />
</div>
</template>
<script setup lang="ts">
import NoticeModal from "@/components/NoticeModal/index.vue";
defineOptions({
name: "Notice",
inheritAttrs: false,
});
import Editor from "@/components/WangEditor/index.vue";
import NoticeAPI, {
NoticePageVO,
@@ -314,6 +308,7 @@ import UserAPI from "@/api/user";
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const noticeDetailRef = ref();
const loading = ref(false);
const ids = ref<number[]>([]);
@@ -336,12 +331,10 @@ const dialog = reactive({
// 通知公告表单数据
const formData = reactive<NoticeForm>({
priority: 0, // 默认优先级为低
tarType: 0, // 默认目标类型为全体
level: "L", // 默认优先级为低
targetType: 1, // 默认目标类型为全体
});
const noticeModalRef = ref(NoticeModal);
// 通知公告表单校验规则
const rules = reactive({
title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
@@ -359,9 +352,7 @@ const rules = reactive({
},
},
],
noticeType: [
{ required: true, message: "请选择通知类型", trigger: "change" },
],
type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
});
/** 查询通知公告 */
@@ -389,34 +380,33 @@ function handleSelectionChange(selection: any) {
ids.value = selection.map((item: any) => item.id);
}
function examine(id: number) {
noticeModalRef.value?.open(id, true);
}
/** 打开通知公告弹窗 */
function handleOpenDialog(id?: number) {
getUserOptions();
UserAPI.getOptions().then((data) => {
userOptions.value = data;
});
dialog.visible = true;
if (id) {
dialog.title = "修改通知公告";
dialog.title = "修改公告";
NoticeAPI.getFormData(id).then((data) => {
Object.assign(formData, data);
});
} else {
Object.assign(formData, { priority: 0, tarType: 0 });
dialog.title = "新增通知公告";
Object.assign(formData, { level: 0, targetType: 0 });
dialog.title = "新增公告";
}
}
function releaseNotice(id: number) {
NoticeAPI.releaseNotice(id).then((res) => {
function handlePublishNotice(id: number) {
NoticeAPI.publish(id).then(() => {
ElMessage.success("发布成功");
handleQuery();
});
}
function revokeNotice(id: number) {
NoticeAPI.revokeNotice(id).then((res) => {
NoticeAPI.revoke(id).then(() => {
ElMessage.success("撤回成功");
handleQuery();
});
@@ -485,12 +475,9 @@ function handleDelete(id?: number) {
);
}
function getUserOptions() {
if (userOptions.value.length == 0) {
UserAPI.getOptions().then((res) => {
userOptions.value = res;
});
}
/** 打开通知公告详情弹窗 */
function openNoticeDetailDialog(id: number) {
noticeDetailRef.value.openNotice(id);
}
onMounted(() => {

65
src/views/notice/index.vue → src/views/system/notice/my-notice.vue
View File

@@ -40,61 +40,42 @@
/>
<el-table-column
align="center"
key="noticeType"
label="通知类型"
prop="noticeType"
prop="typeLabel"
min-width="150"
>
<template #default="scope">
<el-tag v-if="scope.row.noticeType == 2" type="warning">
系统通知
</el-tag>
<el-tag v-if="scope.row.noticeType == 1" type="success">
通知消息
</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="releaseBy"
label="发布人"
prop="releaseBy"
min-width="100"
/>
<el-table-column
align="center"
key="priority"
label="优先级"
prop="priority"
label="发布人"
prop="publisherName"
min-width="100"
>
/>
<el-table-column align="center" label="通知等级" 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>
<!-- 翻译字典 字典code 为level，显示不同的tag和label -->
<el-tag v-if="scope.row.level == 'L'" type="danger">低</el-tag>
<el-tag v-if="scope.row.level == 'M'" type="success">中</el-tag>
<el-tag v-if="scope.row.level == 'H'" type="warning">高</el-tag>
</template>
</el-table-column>
<el-table-column
align="center"
key="releaseTime"
label="发布时间"
prop="releaseTime"
prop="publishTime"
min-width="100"
/>
<el-table-column
align="center"
key="readStatus"
label="状态"
prop="readStatus"
label="发布人"
prop="publisherName"
min-width="100"
>
/>
<el-table-column align="center" label="状态" min-width="100">
<template #default="scope">
<el-tag v-if="scope.row.readStatus == 1" type="success">
已读
</el-tag>
<el-tag v-if="scope.row.readStatus == 0" type="warning">
未读
</el-tag>
<el-tag v-if="scope.row.isRead == 1" type="success">已读</el-tag>
<el-tag v-if="scope.row.isRead == 0" type="warning">未读</el-tag>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="80">
@@ -103,7 +84,7 @@
type="primary"
size="small"
link
@click="handleOpenDialog(scope.row.id)"
@click="viewNoticeDetail(scope.row.id)"
>
查看
</el-button>
@@ -119,6 +100,8 @@
@pagination="handleQuery()"
/>
</el-card>
<NoticeDetail ref="noticeDetailRef" />
</div>
</template>
@@ -131,12 +114,12 @@ defineOptions({
import NoticeAPI, { NoticePageVO, NoticePageQuery } from "@/api/notice";
const queryFormRef = ref(ElForm);
const noticeDetailRef = ref();
const pageData = ref<NoticePageVO[]>([]);
const loading = ref(false);
const ids = ref<number[]>([]);
const total = ref(0);
const noticeModalRef = ref(null);
const queryParams = reactive<NoticePageQuery>({
pageNum: 1,
@@ -163,8 +146,8 @@ function handleResetQuery() {
handleQuery();
}
function handleOpenDialog(id: number) {
noticeModalRef.value?.open(id);
function viewNoticeDetail(id: string) {
noticeDetailRef.value.openNotice(id);
}
onMounted(() => {

0
src/views/system/user/components/dept-tree.vue → src/views/system/user/dept-tree.vue
View File

0
src/views/system/user/components/user-import.vue → src/views/system/user/import.vue
View File

11
src/views/system/user/index.vue
View File

@@ -4,7 +4,7 @@
<el-row :gutter="20">
<!-- 部门树 -->
<el-col :lg="4" :xs="24" class="mb-[12px]">
<dept-tree v-model="queryParams.deptId" @node-click="handleQuery" />
<DeptTree v-model="queryParams.deptId" @node-click="handleQuery" />
</el-col>
<!-- 用户列表 -->
@@ -289,9 +289,9 @@
</el-drawer>
<!-- 用户导入弹窗 -->
<user-import
<UserImport
v-model:visible="importDialogVisible"
@import-success="handleOpenImportDialogSuccess"
@import-success="handleUserImportSuccess"
/>
</div>
</template>
@@ -306,6 +306,9 @@ import UserAPI, { UserForm, UserPageQuery, UserPageVO } from "@/api/user";
import DeptAPI from "@/api/dept";
import RoleAPI from "@/api/role";
import DeptTree from "./dept-tree.vue";
import UserImport from "./import.vue";
const queryFormRef = ref(ElForm);
const userFormRef = ref(ElForm);
@@ -504,7 +507,7 @@ function handleOpenImportDialog() {
}
/** 导入用户成功 */
function handleOpenImportDialogSuccess() {
function handleUserImportSuccess() {
handleQuery();
}

8
tsconfig.json
View File

@@ -23,6 +23,12 @@
},
"types": ["vite/client", "unplugin-icons/types/vue", "element-plus/global"]
},
"include": ["mock/**/*.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts"],
"include": [
"mock/**/*.ts",
"src/**/*.ts",
"src/**/*.vue",
"vite.config.ts",
"src/views/system/notice/components/myvue"
],
"exclude": ["node_modules", "dist", "**/*.js"]
}

1
uno.config.ts
View File

@@ -16,6 +16,7 @@ export default defineConfig({
"flex-x-center": "flex justify-center",
"flex-y-center": "flex items-center",
"wh-full": "w-full h-full",
"flex-x-start": "flex items-center justify-start",
"flex-x-between": "flex items-center justify-between",
"flex-x-end": "flex items-center justify-end",
"absolute-lt": "absolute left-0 top-0",