消息模块、爬虫
This commit is contained in:
@@ -58,7 +58,7 @@ export const aiAgentConfigApi = {
|
||||
* @returns Promise<ResultDomain<AiAgentConfig[]>>
|
||||
*/
|
||||
async listEnabledAgents(): Promise<ResultDomain<AiAgentConfig>> {
|
||||
const response = await api.get<AiAgentConfig>('/ai/agent/enabled', {
|
||||
const response = await api.get<AiAgentConfig>('/ai/agent/enabled',{}, {
|
||||
showLoading: false
|
||||
});
|
||||
return response.data;
|
||||
|
||||
@@ -85,8 +85,8 @@ request.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
const customConfig = config as CustomAxiosRequestConfig;
|
||||
|
||||
// 显示加载动画
|
||||
if (customConfig.showLoading !== false) {
|
||||
// 默认不显示加载动画，只有显式开启时才展示
|
||||
if (customConfig.showLoading) {
|
||||
loadingInstance = ElLoading.service({
|
||||
lock: true,
|
||||
text: "加载中...",
|
||||
|
||||
7
schoolNewsWeb/src/apis/message/index.ts
Normal file
7
schoolNewsWeb/src/apis/message/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* @description 消息通知API导出
|
||||
* @author Claude
|
||||
* @since 2025-11-13
|
||||
*/
|
||||
|
||||
export * from './message';
|
||||
216
schoolNewsWeb/src/apis/message/message.ts
Normal file
216
schoolNewsWeb/src/apis/message/message.ts
Normal file
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* @description 消息通知相关API
|
||||
* @author Claude
|
||||
* @since 2025-11-13
|
||||
*/
|
||||
|
||||
import { api } from '@/apis/index';
|
||||
import type {
|
||||
TbSysMessage,
|
||||
TbSysMessageUser,
|
||||
MessageVO,
|
||||
MessageUserVO,
|
||||
ResultDomain,
|
||||
PageParam,
|
||||
PageRequest
|
||||
} from '@/types';
|
||||
|
||||
/**
|
||||
* 消息API服务
|
||||
*/
|
||||
export const messageApi = {
|
||||
/**
|
||||
* @description 创建消息
|
||||
* @param message 消息对象
|
||||
* @returns Promise<ResultDomain<TbSysMessage>>
|
||||
*/
|
||||
async createMessage(message: TbSysMessage): Promise<ResultDomain<TbSysMessage>> {
|
||||
const response = await api.post<TbSysMessage>('/message', message);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 更新消息
|
||||
* @param messageIDOrMessage 消息ID 或 完整消息对象
|
||||
* @param messageData 消息数据（当第一个参数为ID时使用）
|
||||
* @returns Promise<ResultDomain<TbSysMessage>>
|
||||
*/
|
||||
async updateMessage(message: TbSysMessage): Promise<ResultDomain<TbSysMessage>> {
|
||||
const response = await api.put<TbSysMessage>(`/message`, message);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 删除消息
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<boolean>>
|
||||
*/
|
||||
async deleteMessage(messageID: string): Promise<ResultDomain<boolean>> {
|
||||
const response = await api.delete<boolean>(`/message/${messageID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取消息分页列表（管理端）
|
||||
* @param pageRequest 分页请求对象
|
||||
* @returns Promise<ResultDomain<MessageVO>>
|
||||
*/
|
||||
async getMessagePage(pageRequest: PageRequest<TbSysMessage>): Promise<ResultDomain<MessageVO>> {
|
||||
const response = await api.post<MessageVO>('/message/page', pageRequest);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取消息详情（管理端）
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<MessageVO>>
|
||||
*/
|
||||
async getMessage(messageID: string): Promise<ResultDomain<MessageVO>> {
|
||||
return this.getMessageDetail(messageID);
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取消息详情（管理端）
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<MessageVO>>
|
||||
*/
|
||||
async getMessageDetail(messageID: string): Promise<ResultDomain<MessageVO>> {
|
||||
const response = await api.get<MessageVO>(`/message/detail/${messageID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 立即发送消息
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<TbSysMessage>>
|
||||
*/
|
||||
async sendMessage(messageID: string): Promise<ResultDomain<TbSysMessage>> {
|
||||
const response = await api.post<TbSysMessage>(`/message/send/${messageID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 立即发送（将定时消息改为立即发送）
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<TbSysMessage>>
|
||||
*/
|
||||
async sendNow(messageID: string): Promise<ResultDomain<TbSysMessage>> {
|
||||
const response = await api.post<TbSysMessage>(`/message/sendNow/${messageID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 取消定时消息
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<TbSysMessage>>
|
||||
*/
|
||||
async cancelMessage(messageID: string): Promise<ResultDomain<TbSysMessage>> {
|
||||
const response = await api.post<TbSysMessage>(`/message/cancel/${messageID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 重新安排定时消息时间
|
||||
* @param messageID 消息ID
|
||||
* @param newScheduledTime 新的定时发送时间
|
||||
* @returns Promise<ResultDomain<TbSysMessage>>
|
||||
*/
|
||||
async rescheduleMessage(messageID: string, newScheduledTime: string): Promise<ResultDomain<TbSysMessage>> {
|
||||
const response = await api.put<TbSysMessage>(`/message/reschedule/${messageID}`, {
|
||||
scheduledTime: newScheduledTime
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 重试发送失败的消息
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<TbSysMessage>>
|
||||
*/
|
||||
async retryMessage(messageID: string): Promise<ResultDomain<TbSysMessage>> {
|
||||
const response = await api.post<TbSysMessage>(`/message/retry/${messageID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取当前用户的消息列表（用户端）
|
||||
* @param pageParam 分页参数
|
||||
* @param filter 过滤条件
|
||||
* @returns Promise<ResultDomain<MessageUserVO>>
|
||||
*/
|
||||
async getMyMessages(pageParam: PageParam, filter?: TbSysMessageUser): Promise<ResultDomain<MessageUserVO>> {
|
||||
const response = await api.post<MessageUserVO>('/message/my/page', {
|
||||
pageParam,
|
||||
filter
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取当前用户的消息详情（用户端）
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<MessageUserVO>>
|
||||
*/
|
||||
async getMyMessageDetail(messageID: string): Promise<ResultDomain<MessageUserVO>> {
|
||||
const response = await api.get<MessageUserVO>(`/message/my/detail/${messageID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 标记消息为已读
|
||||
* @param messageID 消息ID
|
||||
* @returns Promise<ResultDomain<boolean>>
|
||||
*/
|
||||
async markAsRead(messageID: string): Promise<ResultDomain<boolean>> {
|
||||
const response = await api.post<boolean>(`/message/my/markRead/${messageID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 批量标记消息为已读
|
||||
* @param messageIDs 消息ID列表
|
||||
* @returns Promise<ResultDomain<boolean>>
|
||||
*/
|
||||
async batchMarkAsRead(messageIDs: string[]): Promise<ResultDomain<boolean>> {
|
||||
const response = await api.post<boolean>('/message/my/batchMarkRead', { messageIDs });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取未读消息数量
|
||||
* @returns Promise<ResultDomain<number>>
|
||||
*/
|
||||
async getUnreadCount(): Promise<ResultDomain<number>> {
|
||||
const response = await api.get<number>('/message/my/unreadCount');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取可选择的部门列表（当前部门及子部门）
|
||||
* @returns Promise<ResultDomain<any>>
|
||||
*/
|
||||
async getTargetDepts(): Promise<ResultDomain<any>> {
|
||||
const response = await api.get<any>('/message/targets/depts');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取可选择的角色列表（指定部门范围内的角色）
|
||||
* @param scopeDeptID 作用域部门ID
|
||||
* @returns Promise<ResultDomain<any>>
|
||||
*/
|
||||
async getTargetRoles(scopeDeptID: string): Promise<ResultDomain<any>> {
|
||||
const response = await api.get<any>(`/message/targets/roles?scopeDeptID=${scopeDeptID}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description 获取可选择的用户列表（指定部门范围内的用户）
|
||||
* @param scopeDeptID 作用域部门ID
|
||||
* @returns Promise<ResultDomain<any>>
|
||||
*/
|
||||
async getTargetUsers(scopeDeptID: string): Promise<ResultDomain<any>> {
|
||||
const response = await api.get<any>(`/message/targets/users?scopeDeptID=${scopeDeptID}`);
|
||||
return response.data;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<span class="message-priority-badge" :class="`priority-${priority}`">
|
||||
{{ priorityText }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface Props {
|
||||
/** 优先级：urgent-紧急/important-重要/normal-普通 */
|
||||
priority: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
/** 优先级文本映射 */
|
||||
const priorityText = computed(() => {
|
||||
const map: Record<string, string> = {
|
||||
urgent: '紧急',
|
||||
important: '重要',
|
||||
normal: '普通'
|
||||
};
|
||||
return map[props.priority] || props.priority;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-priority-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
|
||||
&.priority-urgent {
|
||||
background-color: #fee;
|
||||
color: #c00;
|
||||
border: 1px solid #fcc;
|
||||
}
|
||||
|
||||
&.priority-important {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
border: 1px solid #ffcc80;
|
||||
}
|
||||
|
||||
&.priority-normal {
|
||||
background-color: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
border: 1px solid #a5d6a7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="message-send-method-selector">
|
||||
<div class="method-option">
|
||||
<label class="method-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
value="system"
|
||||
:checked="selectedMethods.includes('system')"
|
||||
@change="toggleMethod('system')"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<span class="method-text">
|
||||
<i class="el-icon-message"></i>
|
||||
系统消息
|
||||
</span>
|
||||
</label>
|
||||
<span class="method-desc">在系统内推送消息通知</span>
|
||||
</div>
|
||||
|
||||
<div class="method-option">
|
||||
<label class="method-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
value="email"
|
||||
:checked="selectedMethods.includes('email')"
|
||||
@change="toggleMethod('email')"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<span class="method-text">
|
||||
<i class="el-icon-message-solid"></i>
|
||||
邮件通知
|
||||
</span>
|
||||
</label>
|
||||
<span class="method-desc">发送到用户邮箱</span>
|
||||
</div>
|
||||
|
||||
<div class="method-option">
|
||||
<label class="method-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
value="sms"
|
||||
:checked="selectedMethods.includes('sms')"
|
||||
@change="toggleMethod('sms')"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<span class="method-text">
|
||||
<i class="el-icon-phone"></i>
|
||||
短信通知
|
||||
</span>
|
||||
</label>
|
||||
<span class="method-desc">发送到用户手机</span>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-tip">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface Props {
|
||||
/** 已选择的发送方式列表 */
|
||||
modelValue: string[];
|
||||
/** 是否禁用 */
|
||||
disabled?: boolean;
|
||||
/** 是否必须至少选择一个 */
|
||||
required?: boolean;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: string[]): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
required: true
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const selectedMethods = computed(() => props.modelValue);
|
||||
|
||||
const error = computed(() => {
|
||||
if (props.required && selectedMethods.value.length === 0) {
|
||||
return '请至少选择一种发送方式';
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
/** 切换发送方式 */
|
||||
function toggleMethod(method: string) {
|
||||
if (props.disabled) return;
|
||||
|
||||
const methods = [...selectedMethods.value];
|
||||
const index = methods.indexOf(method);
|
||||
|
||||
if (index > -1) {
|
||||
// 如果是必选且只剩一个，不允许取消
|
||||
if (props.required && methods.length === 1) {
|
||||
return;
|
||||
}
|
||||
methods.splice(index, 1);
|
||||
} else {
|
||||
methods.push(method);
|
||||
}
|
||||
|
||||
emit('update:modelValue', methods);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-send-method-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
|
||||
.method-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 10px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #c8232c;
|
||||
}
|
||||
|
||||
.method-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.method-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.method-desc {
|
||||
margin-left: 24px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
font-size: 12px;
|
||||
color: #c00;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
schoolNewsWeb/src/components/message/MessageStatusBadge.vue
Normal file
76
schoolNewsWeb/src/components/message/MessageStatusBadge.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<span class="message-status-badge" :class="`status-${status}`">
|
||||
{{ statusText }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface Props {
|
||||
/** 消息状态：draft-草稿/pending-待发送/sending-发送中/sent-已发送/failed-发送失败/cancelled-已取消 */
|
||||
status: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
/** 状态文本映射 */
|
||||
const statusText = computed(() => {
|
||||
const map: Record<string, string> = {
|
||||
draft: '草稿',
|
||||
pending: '待发送',
|
||||
sending: '发送中',
|
||||
sent: '已发送',
|
||||
failed: '发送失败',
|
||||
cancelled: '已取消'
|
||||
};
|
||||
return map[props.status] || props.status;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-status-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
&.status-draft {
|
||||
background-color: #f5f5f5;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
&.status-pending {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
border: 1px solid #ffcc80;
|
||||
}
|
||||
|
||||
&.status-sending {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
border: 1px solid #90caf9;
|
||||
}
|
||||
|
||||
&.status-sent {
|
||||
background-color: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
border: 1px solid #a5d6a7;
|
||||
}
|
||||
|
||||
&.status-failed {
|
||||
background-color: #fee;
|
||||
color: #c00;
|
||||
border: 1px solid #fcc;
|
||||
}
|
||||
|
||||
&.status-cancelled {
|
||||
background-color: #fafafa;
|
||||
color: #999;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
649
schoolNewsWeb/src/components/message/MessageTargetSelector.vue
Normal file
649
schoolNewsWeb/src/components/message/MessageTargetSelector.vue
Normal file
@@ -0,0 +1,649 @@
|
||||
<template>
|
||||
<div class="message-target-selector">
|
||||
<!-- Tab切换 -->
|
||||
<div class="target-tabs">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === tab.key }"
|
||||
@click="switchTab(tab.key)"
|
||||
>
|
||||
<i :class="tab.icon"></i>
|
||||
{{ tab.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab内容 -->
|
||||
<div class="target-content">
|
||||
<!-- 部门选择 -->
|
||||
<div v-if="activeTab === 'dept'" class="target-panel">
|
||||
<div class="panel-header">
|
||||
<span>已选择 {{ selectedDepts.length }} 个部门</span>
|
||||
<button class="btn-select" @click="showDeptSelector">
|
||||
<i class="el-icon-plus"></i> 选择部门
|
||||
</button>
|
||||
</div>
|
||||
<div class="selected-list">
|
||||
<div
|
||||
v-for="item in selectedDepts"
|
||||
:key="item.id"
|
||||
class="selected-item"
|
||||
>
|
||||
<i class="el-icon-office-building"></i>
|
||||
<span>{{ item.name }}</span>
|
||||
<i class="el-icon-close remove-btn" @click="removeDept(item.id)"></i>
|
||||
</div>
|
||||
<div v-if="selectedDepts.length === 0" class="empty-tip">
|
||||
请选择部门
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 角色选择 -->
|
||||
<div v-if="activeTab === 'role'" class="target-panel">
|
||||
<div class="scope-selector">
|
||||
<label>作用域部门：</label>
|
||||
<select v-model="roleScopeDeptID" class="dept-select" @change="onRoleScopeChange">
|
||||
<option value="">请选择部门范围</option>
|
||||
<option v-for="dept in availableDepts" :key="dept.id" :value="dept.id">
|
||||
{{ dept.name }}
|
||||
</option>
|
||||
</select>
|
||||
<span class="tip">（限制该角色只能向此部门及子部门的用户发送）</span>
|
||||
</div>
|
||||
|
||||
<div v-if="roleScopeDeptID" class="panel-header">
|
||||
<span>已选择 {{ selectedRoles.length }} 个角色</span>
|
||||
<button class="btn-select" @click="showRoleSelector">
|
||||
<i class="el-icon-plus"></i> 选择角色
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="roleScopeDeptID" class="selected-list">
|
||||
<div
|
||||
v-for="item in selectedRoles"
|
||||
:key="item.id"
|
||||
class="selected-item"
|
||||
>
|
||||
<i class="el-icon-user"></i>
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="item-sublabel">{{ item.deptName }}</span>
|
||||
<i class="el-icon-close remove-btn" @click="removeRole(item.id)"></i>
|
||||
</div>
|
||||
<div v-if="selectedRoles.length === 0" class="empty-tip">
|
||||
请选择角色
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户选择 -->
|
||||
<div v-if="activeTab === 'user'" class="target-panel">
|
||||
<div class="scope-selector">
|
||||
<label>作用域部门：</label>
|
||||
<select v-model="userScopeDeptID" class="dept-select" @change="onUserScopeChange">
|
||||
<option value="">请选择部门范围</option>
|
||||
<option v-for="dept in availableDepts" :key="dept.id" :value="dept.id">
|
||||
{{ dept.name }}
|
||||
</option>
|
||||
</select>
|
||||
<span class="tip">（只能选择此部门及子部门的用户）</span>
|
||||
</div>
|
||||
|
||||
<div v-if="userScopeDeptID" class="panel-header">
|
||||
<span>已选择 {{ selectedUsers.length }} 个用户</span>
|
||||
<button class="btn-select" @click="showUserSelector">
|
||||
<i class="el-icon-plus"></i> 选择用户
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="userScopeDeptID" class="selected-list">
|
||||
<div
|
||||
v-for="item in selectedUsers"
|
||||
:key="item.id"
|
||||
class="selected-item"
|
||||
>
|
||||
<i class="el-icon-user-solid"></i>
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="item-sublabel">{{ item.deptName }}</span>
|
||||
<i class="el-icon-close remove-btn" @click="removeUser(item.id)"></i>
|
||||
</div>
|
||||
<div v-if="selectedUsers.length === 0" class="empty-tip">
|
||||
请选择用户
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 通用选择器弹窗 -->
|
||||
<GenericSelector
|
||||
v-model:visible="selectorVisible"
|
||||
:title="selectorTitle"
|
||||
:fetch-available-api="fetchAvailableApi"
|
||||
:fetch-selected-api="fetchSelectedApi"
|
||||
:filter-selected="filterSelected"
|
||||
:item-config="itemConfig"
|
||||
:unit-name="unitName"
|
||||
@confirm="handleSelectorConfirm"
|
||||
@cancel="selectorVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { GenericSelector } from '@/components/base';
|
||||
import type { TbSysMessageTarget, ResultDomain } from '@/types';
|
||||
import { deptApi, roleApi, userApi } from '@/apis/system';
|
||||
|
||||
// 本地类型定义
|
||||
interface TargetOption {
|
||||
id: string;
|
||||
name: string;
|
||||
deptID?: string;
|
||||
deptName?: string;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: TbSysMessageTarget[]): void;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
/** 已选择的目标配置列表 */
|
||||
modelValue: TbSysMessageTarget[];
|
||||
/** 发送方式（用于生成TbSysMessageTarget） */
|
||||
sendMethod: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
/** Tab配置 */
|
||||
const tabs = [
|
||||
{ key: 'dept', label: '按部门', icon: 'el-icon-office-building' },
|
||||
{ key: 'role', label: '按角色', icon: 'el-icon-user' },
|
||||
{ key: 'user', label: '按用户', icon: 'el-icon-user-solid' }
|
||||
] as const;
|
||||
|
||||
const activeTab = ref<'dept' | 'role' | 'user'>('dept');
|
||||
|
||||
// 可选的部门列表（当前部门及子部门）
|
||||
const availableDepts = ref<TargetOption[]>([]);
|
||||
|
||||
// 已选择的目标
|
||||
const selectedDepts = ref<TargetOption[]>([]);
|
||||
const selectedRoles = ref<TargetOption[]>([]);
|
||||
const selectedUsers = ref<TargetOption[]>([]);
|
||||
|
||||
// 作用域部门ID
|
||||
const roleScopeDeptID = ref('');
|
||||
const userScopeDeptID = ref('');
|
||||
|
||||
// 选择器状态
|
||||
const selectorVisible = ref(false);
|
||||
const selectorType = ref<'dept' | 'role' | 'user'>('dept');
|
||||
|
||||
/** 选择器标题 */
|
||||
const selectorTitle = computed(() => {
|
||||
const map = {
|
||||
dept: '选择部门',
|
||||
role: '选择角色',
|
||||
user: '选择用户'
|
||||
};
|
||||
return map[selectorType.value];
|
||||
});
|
||||
|
||||
/** 选择器单位名称 */
|
||||
const unitName = computed(() => {
|
||||
const map = {
|
||||
dept: '个部门',
|
||||
role: '个角色',
|
||||
user: '个用户'
|
||||
};
|
||||
return map[selectorType.value];
|
||||
});
|
||||
|
||||
/** 选择器字段配置 */
|
||||
const itemConfig = computed(() => ({
|
||||
id: 'id',
|
||||
label: 'name',
|
||||
sublabel: selectorType.value !== 'dept' ? 'deptName' : undefined
|
||||
}));
|
||||
|
||||
/** 获取可选项API */
|
||||
const fetchAvailableApi = computed(() => {
|
||||
return async () => {
|
||||
if (selectorType.value === 'dept') {
|
||||
// 调用 system 模块的部门 API
|
||||
const result = await deptApi.getAllDepts();
|
||||
// 转换数据格式为 GenericSelector 需要的格式
|
||||
if (result.success && result.dataList) {
|
||||
return {
|
||||
...result,
|
||||
dataList: result.dataList.map((dept: any) => ({
|
||||
id: dept.id,
|
||||
name: dept.name,
|
||||
deptID: dept.id,
|
||||
deptName: dept.name
|
||||
}))
|
||||
};
|
||||
}
|
||||
return result;
|
||||
} else if (selectorType.value === 'role') {
|
||||
// 调用 system 模块的角色 API，根据部门过滤
|
||||
const filter = roleScopeDeptID.value ? { deptID: roleScopeDeptID.value } : {};
|
||||
const result = await roleApi.getRoleList(filter as any);
|
||||
// 转换数据格式
|
||||
if (result.success && result.dataList) {
|
||||
return {
|
||||
...result,
|
||||
dataList: result.dataList.map((role: any) => ({
|
||||
id: role.id,
|
||||
name: role.name,
|
||||
deptID: role.deptID,
|
||||
deptName: role.deptName
|
||||
}))
|
||||
};
|
||||
}
|
||||
return result;
|
||||
} else {
|
||||
// 调用 system 模块的用户 API，根据部门过滤
|
||||
const filter = userScopeDeptID.value ? { deptID: userScopeDeptID.value } : {};
|
||||
const result = await userApi.getUserList(filter as any);
|
||||
// 转换数据格式
|
||||
if (result.success && result.dataList) {
|
||||
return {
|
||||
...result,
|
||||
dataList: result.dataList.map((user: any) => ({
|
||||
id: user.id,
|
||||
name: user.realName || user.username,
|
||||
deptID: user.deptID,
|
||||
deptName: user.deptName
|
||||
}))
|
||||
};
|
||||
}
|
||||
return result;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
/** 获取已选项API（返回当前已选择的项） */
|
||||
const fetchSelectedApi = computed(() => {
|
||||
return async (): Promise<ResultDomain<TargetOption>> => {
|
||||
let dataList: TargetOption[] = [];
|
||||
if (selectorType.value === 'dept') {
|
||||
dataList = selectedDepts.value;
|
||||
} else if (selectorType.value === 'role') {
|
||||
dataList = selectedRoles.value;
|
||||
} else {
|
||||
dataList = selectedUsers.value;
|
||||
}
|
||||
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
success: true,
|
||||
login: true,
|
||||
auth: true,
|
||||
dataList
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
/** 过滤已选项（从可选项中移除已选项） */
|
||||
const filterSelected = (available: Record<string, any>[], selected: Record<string, any>[]): Record<string, any>[] => {
|
||||
const availableOptions = available as TargetOption[];
|
||||
const selectedOptions = selected as TargetOption[];
|
||||
const selectedIds = new Set(selectedOptions.map(item => item.id));
|
||||
return availableOptions.filter(item => !selectedIds.has(item.id));
|
||||
};
|
||||
|
||||
/** 加载可用部门列表 */
|
||||
async function loadAvailableDepts() {
|
||||
try {
|
||||
const result = await deptApi.getAllDepts();
|
||||
if (result.success && result.dataList) {
|
||||
// 转换数据格式
|
||||
availableDepts.value = result.dataList.map((dept: any) => ({
|
||||
id: dept.id,
|
||||
name: dept.name,
|
||||
deptID: dept.id,
|
||||
deptName: dept.name
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载部门列表失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/** 切换Tab */
|
||||
function switchTab(tab: 'dept' | 'role' | 'user') {
|
||||
activeTab.value = tab;
|
||||
}
|
||||
|
||||
/** 显示部门选择器 */
|
||||
function showDeptSelector() {
|
||||
selectorType.value = 'dept';
|
||||
selectorVisible.value = true;
|
||||
}
|
||||
|
||||
/** 显示角色选择器 */
|
||||
function showRoleSelector() {
|
||||
if (!roleScopeDeptID.value) {
|
||||
alert('请先选择作用域部门');
|
||||
return;
|
||||
}
|
||||
selectorType.value = 'role';
|
||||
selectorVisible.value = true;
|
||||
}
|
||||
|
||||
/** 显示用户选择器 */
|
||||
function showUserSelector() {
|
||||
if (!userScopeDeptID.value) {
|
||||
alert('请先选择作用域部门');
|
||||
return;
|
||||
}
|
||||
selectorType.value = 'user';
|
||||
selectorVisible.value = true;
|
||||
}
|
||||
|
||||
/** 选择器确认回调 */
|
||||
function handleSelectorConfirm(items: Record<string, any>[]) {
|
||||
const typedItems = items as TargetOption[];
|
||||
|
||||
if (selectorType.value === 'dept') {
|
||||
selectedDepts.value = typedItems;
|
||||
} else if (selectorType.value === 'role') {
|
||||
selectedRoles.value = typedItems;
|
||||
} else {
|
||||
selectedUsers.value = typedItems;
|
||||
}
|
||||
|
||||
emitTargets();
|
||||
}
|
||||
|
||||
/** 移除部门 */
|
||||
function removeDept(id: string) {
|
||||
selectedDepts.value = selectedDepts.value.filter(item => item.id !== id);
|
||||
emitTargets();
|
||||
}
|
||||
|
||||
/** 移除角色 */
|
||||
function removeRole(id: string) {
|
||||
selectedRoles.value = selectedRoles.value.filter(item => item.id !== id);
|
||||
emitTargets();
|
||||
}
|
||||
|
||||
/** 移除用户 */
|
||||
function removeUser(id: string) {
|
||||
selectedUsers.value = selectedUsers.value.filter(item => item.id !== id);
|
||||
emitTargets();
|
||||
}
|
||||
|
||||
/** 角色作用域变更 */
|
||||
function onRoleScopeChange() {
|
||||
// 清空已选择的角色
|
||||
selectedRoles.value = [];
|
||||
emitTargets();
|
||||
}
|
||||
|
||||
/** 用户作用域变更 */
|
||||
function onUserScopeChange() {
|
||||
// 清空已选择的用户
|
||||
selectedUsers.value = [];
|
||||
emitTargets();
|
||||
}
|
||||
|
||||
/** 发射目标配置 */
|
||||
function emitTargets() {
|
||||
const targets: TbSysMessageTarget[] = [];
|
||||
|
||||
// 添加部门目标
|
||||
selectedDepts.value.forEach(dept => {
|
||||
targets.push({
|
||||
sendMethod: props.sendMethod,
|
||||
targetType: 'dept',
|
||||
targetID: dept.id,
|
||||
targetName: dept.name,
|
||||
scopeDeptID: dept.id // 部门的作用域就是自己
|
||||
});
|
||||
});
|
||||
|
||||
// 添加角色目标
|
||||
selectedRoles.value.forEach(role => {
|
||||
targets.push({
|
||||
sendMethod: props.sendMethod,
|
||||
targetType: 'role',
|
||||
targetID: role.id,
|
||||
targetName: role.name,
|
||||
scopeDeptID: roleScopeDeptID.value
|
||||
});
|
||||
});
|
||||
|
||||
// 添加用户目标
|
||||
selectedUsers.value.forEach(user => {
|
||||
targets.push({
|
||||
sendMethod: props.sendMethod,
|
||||
targetType: 'user',
|
||||
targetID: user.id,
|
||||
targetName: user.name,
|
||||
scopeDeptID: userScopeDeptID.value
|
||||
});
|
||||
});
|
||||
|
||||
emit('update:modelValue', targets);
|
||||
}
|
||||
|
||||
/** 初始化已选项（从modelValue恢复） */
|
||||
function initSelectedTargets() {
|
||||
const targets = props.modelValue || [];
|
||||
|
||||
selectedDepts.value = [];
|
||||
selectedRoles.value = [];
|
||||
selectedUsers.value = [];
|
||||
|
||||
targets.forEach(target => {
|
||||
const option: TargetOption = {
|
||||
id: target.targetID!,
|
||||
name: '', // 名称需要从后端查询，暂时为空
|
||||
deptID: target.scopeDeptID,
|
||||
deptName: ''
|
||||
};
|
||||
|
||||
if (target.targetType === 'dept') {
|
||||
selectedDepts.value.push(option);
|
||||
} else if (target.targetType === 'role') {
|
||||
if (target.scopeDeptID) {
|
||||
roleScopeDeptID.value = target.scopeDeptID;
|
||||
}
|
||||
selectedRoles.value.push(option);
|
||||
} else if (target.targetType === 'user') {
|
||||
if (target.scopeDeptID) {
|
||||
userScopeDeptID.value = target.scopeDeptID;
|
||||
}
|
||||
selectedUsers.value.push(option);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 监听sendMethod变化，更新所有目标的sendMethod */
|
||||
watch(() => props.sendMethod, () => {
|
||||
emitTargets();
|
||||
});
|
||||
|
||||
/** 监听modelValue变化，同步到内部状态 */
|
||||
watch(() => props.modelValue, () => {
|
||||
initSelectedTargets();
|
||||
}, { immediate: true });
|
||||
|
||||
onMounted(() => {
|
||||
loadAvailableDepts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-target-selector {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.target-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #fff;
|
||||
color: #c8232c;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid #c8232c;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.target-content {
|
||||
padding: 16px;
|
||||
min-height: 200px;
|
||||
|
||||
.target-panel {
|
||||
.scope-selector {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dept-select {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
min-width: 200px;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #c8232c;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn-select {
|
||||
padding: 6px 12px;
|
||||
background-color: #c8232c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #a01d24;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-height: 100px;
|
||||
|
||||
.selected-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.item-sublabel {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: #c00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
10
schoolNewsWeb/src/components/message/index.ts
Normal file
10
schoolNewsWeb/src/components/message/index.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* @description 消息通知组件导出
|
||||
* @author Claude
|
||||
* @since 2025-11-13
|
||||
*/
|
||||
|
||||
export { default as MessageTargetSelector } from './MessageTargetSelector.vue';
|
||||
export { default as MessageSendMethodSelector } from './MessageSendMethodSelector.vue';
|
||||
export { default as MessagePriorityBadge } from './MessagePriorityBadge.vue';
|
||||
export { default as MessageStatusBadge } from './MessageStatusBadge.vue';
|
||||
@@ -48,6 +48,9 @@ export * from './usercenter';
|
||||
// 定时任务相关
|
||||
export * from './crontab';
|
||||
|
||||
// 消息通知相关
|
||||
export * from './message';
|
||||
|
||||
// 日志相关
|
||||
export * from './log';
|
||||
|
||||
|
||||
141
schoolNewsWeb/src/types/message/index.ts
Normal file
141
schoolNewsWeb/src/types/message/index.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* @description 消息通知类型定义
|
||||
* @author Claude
|
||||
* @since 2025-11-13
|
||||
*/
|
||||
|
||||
import type { BaseDTO } from '../base';
|
||||
|
||||
/**
|
||||
* 消息主体实体（对应后端 TbSysMessage）
|
||||
*/
|
||||
export interface TbSysMessage extends BaseDTO {
|
||||
/** 消息ID（业务主键） */
|
||||
messageID?: string;
|
||||
/** 消息标题 */
|
||||
title?: string;
|
||||
/** 消息内容 */
|
||||
content?: string;
|
||||
/** 消息类型：notice-通知/announcement-公告/warning-预警/system-系统消息 */
|
||||
messageType?: string;
|
||||
/** 优先级：urgent-紧急/important-重要/normal-普通 */
|
||||
priority?: string;
|
||||
/** 发送人ID */
|
||||
senderID?: string;
|
||||
/** 发送人姓名 */
|
||||
senderName?: string;
|
||||
/** 发送人部门ID */
|
||||
senderDeptID?: string;
|
||||
/** 发送人部门名称 */
|
||||
senderDeptName?: string;
|
||||
/** 发送模式：immediate-立即发送/scheduled-定时发送 */
|
||||
sendMode?: string;
|
||||
/** 定时发送时间 */
|
||||
scheduledTime?: string;
|
||||
/** 实际发送时间 */
|
||||
actualSendTime?: string;
|
||||
/** 消息状态：draft-草稿/pending-待发送/sending-发送中/sent-已发送/failed-发送失败/cancelled-已取消 */
|
||||
status?: string;
|
||||
/** 目标用户数量 */
|
||||
targetUserCount?: number;
|
||||
/** 已发送数量 */
|
||||
sentCount?: number;
|
||||
/** 发送成功数量 */
|
||||
successCount?: number;
|
||||
/** 发送失败数量 */
|
||||
failedCount?: number;
|
||||
/** 已读数量 */
|
||||
readCount?: number;
|
||||
/** 重试次数 */
|
||||
retryCount?: number;
|
||||
/** 最大重试次数 */
|
||||
maxRetryCount?: number;
|
||||
/** 最后错误信息 */
|
||||
lastError?: string;
|
||||
/** 创建人 */
|
||||
creator?: string;
|
||||
/** 更新人 */
|
||||
updater?: string;
|
||||
/** 发送方式列表（前端辅助字段，从targets聚合） */
|
||||
sendMethods?: string[];
|
||||
/** 发送目标配置列表（前端辅助字段） */
|
||||
targets?: TbSysMessageTarget[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 消息接收对象实体（对应后端 TbSysMessageTarget）
|
||||
*/
|
||||
export interface TbSysMessageTarget extends BaseDTO {
|
||||
/** 消息ID */
|
||||
messageID?: string;
|
||||
/** 发送方式：system-系统消息/email-邮件/sms-短信 */
|
||||
sendMethod?: string;
|
||||
/** 接收对象类型：dept-部门/role-角色/user-用户 */
|
||||
targetType?: string;
|
||||
/** 接收对象ID */
|
||||
targetID?: string;
|
||||
/** 接收对象名称 */
|
||||
targetName?: string;
|
||||
/** 作用域部门ID（限制发送范围，防止越权） */
|
||||
scopeDeptID?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户接收消息实体（对应后端 TbSysMessageUser）
|
||||
*/
|
||||
export interface TbSysMessageUser extends BaseDTO {
|
||||
/** 消息ID */
|
||||
messageID?: string;
|
||||
/** 用户ID */
|
||||
userID?: string;
|
||||
/** 发送方式：system-系统消息/email-邮件/sms-短信 */
|
||||
sendMethod?: string;
|
||||
/** 是否已读 */
|
||||
isRead?: boolean;
|
||||
/** 已读时间 */
|
||||
readTime?: string;
|
||||
/** 发送状态：pending-待发送/success-发送成功/failed-发送失败 */
|
||||
sendStatus?: string;
|
||||
/** 失败原因 */
|
||||
failReason?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 消息VO（对应后端 MessageVO）
|
||||
*/
|
||||
export interface MessageVO extends TbSysMessage {
|
||||
/** 发送进度百分比 */
|
||||
sendProgress?: number;
|
||||
/** 发送成功率 */
|
||||
successRate?: number;
|
||||
/** 已读率 */
|
||||
readRate?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户消息VO（对应后端 MessageUserVO）
|
||||
*/
|
||||
export interface MessageUserVO extends TbSysMessageUser {
|
||||
/** 用户名 */
|
||||
username?: string;
|
||||
/** 用户真实姓名 */
|
||||
realName?: string;
|
||||
/** 用户邮箱 */
|
||||
email?: string;
|
||||
/** 用户手机 */
|
||||
phone?: string;
|
||||
/** 消息标题 */
|
||||
title?: string;
|
||||
/** 消息内容 */
|
||||
content?: string;
|
||||
/** 消息类型 */
|
||||
messageType?: string;
|
||||
/** 优先级 */
|
||||
priority?: string;
|
||||
/** 发送人姓名 */
|
||||
senderName?: string;
|
||||
/** 发送人部门名称 */
|
||||
senderDeptName?: string;
|
||||
/** 实际发送时间 */
|
||||
actualSendTime?: string;
|
||||
}
|
||||
@@ -171,6 +171,18 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
|
||||
normalChildren.push(child);
|
||||
}
|
||||
});
|
||||
|
||||
// 当前菜单指定了页面组件时，即使存在子菜单也应当渲染该页面
|
||||
if (menu.component) {
|
||||
route.children!.push({
|
||||
path: '',
|
||||
name: `${menu.menuID}_page`,
|
||||
component: getComponent(menu.component),
|
||||
meta: {
|
||||
...route.meta,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 只将普通子菜单加入 children
|
||||
normalChildren.forEach(child => {
|
||||
|
||||
@@ -0,0 +1,737 @@
|
||||
<template>
|
||||
<div class="message-manage-view">
|
||||
<!-- 搜索栏 -->
|
||||
<el-card class="search-card" shadow="never">
|
||||
<el-form :model="searchForm" inline>
|
||||
<el-form-item label="标题">
|
||||
<el-input
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入标题"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="消息类型">
|
||||
<el-select
|
||||
v-model="searchForm.messageType"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option label="通知" value="notice" />
|
||||
<el-option label="公告" value="announcement" />
|
||||
<el-option label="警告" value="warning" />
|
||||
<el-option label="系统消息" value="system" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态">
|
||||
<el-select
|
||||
v-model="searchForm.status"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option label="草稿" value="draft" />
|
||||
<el-option label="待发送" value="pending" />
|
||||
<el-option label="发送中" value="sending" />
|
||||
<el-option label="已完成" value="completed" />
|
||||
<el-option label="已取消" value="cancelled" />
|
||||
<el-option label="失败" value="failed" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="优先级">
|
||||
<el-select
|
||||
v-model="searchForm.priority"
|
||||
placeholder="全部"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-option label="紧急" value="urgent" />
|
||||
<el-option label="重要" value="important" />
|
||||
<el-option label="普通" value="normal" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleReset">
|
||||
<el-icon><RefreshLeft /></el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<el-card class="operation-card" shadow="never">
|
||||
<el-button type="primary" @click="handleCreate">
|
||||
<el-icon><Plus /></el-icon>
|
||||
创建消息
|
||||
</el-button>
|
||||
<el-button @click="loadMessages">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
刷新
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<el-card class="table-card" shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="messageList"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
|
||||
|
||||
<el-table-column label="类型" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getMessageTypeTag(row.messageType || '')">
|
||||
{{ getMessageTypeLabel(row.messageType || '') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="优先级" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<MessagePriorityBadge :priority="row.priority" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<MessageStatusBadge :status="row.status || ''" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="发送方式" width="150" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
v-for="method in row.sendMethods"
|
||||
:key="method"
|
||||
size="small"
|
||||
style="margin: 2px"
|
||||
>
|
||||
{{ getSendMethodLabel(method) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="发送时间" width="180" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.scheduledTime || '立即发送' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" width="180" align="center" prop="createdAt" />
|
||||
|
||||
<el-table-column label="操作" width="300" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="handleViewDetail(row)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="row.status === 'draft'"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="['pending', 'draft'].includes(row.status || '')"
|
||||
link
|
||||
type="success"
|
||||
@click="handleSend(row)"
|
||||
>
|
||||
立即发送
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="row.status === 'failed'"
|
||||
link
|
||||
type="warning"
|
||||
@click="handleRetry(row)"
|
||||
>
|
||||
重试
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="row.status === 'pending'"
|
||||
link
|
||||
type="warning"
|
||||
@click="handleReschedule(row)"
|
||||
>
|
||||
改期
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="['pending', 'sending'].includes(row.status || '')"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleCancel(row)"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="['draft', 'cancelled', 'failed'].includes(row.status || '')"
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.size"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="loadMessages"
|
||||
@current-change="loadMessages"
|
||||
style="margin-top: 20px; justify-content: flex-end"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 创建/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="createDialogVisible"
|
||||
:title="isEdit ? '编辑消息' : '创建消息'"
|
||||
width="900px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<MessageAdd
|
||||
ref="messageAddRef"
|
||||
:model-value="currentMessage"
|
||||
:is-edit="isEdit"
|
||||
/>
|
||||
<template #footer>
|
||||
<el-button @click="createDialogVisible = false">取消</el-button>
|
||||
<el-button @click="handleSaveDraft">保存草稿</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">
|
||||
{{ isEdit ? '更新' : '创建并发送' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<el-dialog
|
||||
v-model="detailDialogVisible"
|
||||
title="消息详情"
|
||||
width="900px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div v-if="currentDetail" class="detail-content">
|
||||
<!-- 基本信息 -->
|
||||
<el-descriptions title="基本信息" :column="2" border>
|
||||
<el-descriptions-item label="标题">
|
||||
{{ currentDetail.title }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="消息类型">
|
||||
<el-tag :type="getMessageTypeTag(currentDetail.messageType || '')">
|
||||
{{ getMessageTypeLabel(currentDetail.messageType || '') }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="优先级">
|
||||
<MessagePriorityBadge :priority="currentDetail.priority || ''" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<MessageStatusBadge :status="currentDetail.status || ''" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="发送方式" :span="2">
|
||||
<el-tag
|
||||
v-for="method in currentDetail.sendMethods"
|
||||
:key="method"
|
||||
style="margin-right: 8px"
|
||||
>
|
||||
{{ getSendMethodLabel(method) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="内容" :span="2">
|
||||
<div style="white-space: pre-wrap">{{ currentDetail.content }}</div>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="计划发送时间">
|
||||
{{ currentDetail.scheduledTime || '立即发送' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="实际发送时间">
|
||||
{{ currentDetail.actualSendTime || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">
|
||||
{{ currentDetail.createTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">
|
||||
{{ currentDetail.updateTime }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 发送统计 -->
|
||||
<el-divider content-position="left">发送统计</el-divider>
|
||||
<MessageStatistic :statistics="currentDetail" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 改期对话框 -->
|
||||
<el-dialog
|
||||
v-model="rescheduleDialogVisible"
|
||||
title="改期发送"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="新发送时间">
|
||||
<el-date-picker
|
||||
v-model="newScheduledTime"
|
||||
type="datetime"
|
||||
placeholder="选择新的发送时间"
|
||||
:disabled-date="disablePastDate"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="rescheduleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmReschedule">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import {
|
||||
Search,
|
||||
RefreshLeft,
|
||||
Plus,
|
||||
Refresh
|
||||
} from '@element-plus/icons-vue';
|
||||
import { messageApi } from '@/apis/message';
|
||||
import { MessagePriorityBadge, MessageStatusBadge } from '@/components/message';
|
||||
import { MessageAdd, MessageStatistic } from './components';
|
||||
import type { MessageVO, TbSysMessage } from '@/types';
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive<Partial<TbSysMessage> & { page?: number; size?: number }>({
|
||||
title: '',
|
||||
messageType: undefined,
|
||||
status: undefined,
|
||||
priority: undefined
|
||||
});
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
});
|
||||
|
||||
// 列表数据
|
||||
const loading = ref(false);
|
||||
const messageList = ref<MessageVO[]>([]);
|
||||
|
||||
// 创建/编辑对话框
|
||||
const createDialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const messageAddRef = ref();
|
||||
const currentMessage = ref<TbSysMessage>({
|
||||
title: '',
|
||||
content: '',
|
||||
messageType: 'notice',
|
||||
priority: 'normal',
|
||||
sendMode: 'immediate',
|
||||
scheduledTime: '',
|
||||
maxRetryCount: 3,
|
||||
sendMethods: ['system'],
|
||||
targets: []
|
||||
});
|
||||
|
||||
// 详情对话框
|
||||
const detailDialogVisible = ref(false);
|
||||
const currentDetail = ref<MessageVO | null>(null);
|
||||
|
||||
// 改期对话框
|
||||
const rescheduleDialogVisible = ref(false);
|
||||
const currentRescheduleId = ref('');
|
||||
const newScheduledTime = ref('');
|
||||
|
||||
/** 加载消息列表 */
|
||||
async function loadMessages() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await messageApi.getMessagePage({
|
||||
pageParam: {
|
||||
pageNumber: pagination.page,
|
||||
pageSize: pagination.size
|
||||
},
|
||||
filter: searchForm
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
messageList.value = result.dataList || [];
|
||||
pagination.total = result.pageDomain?.pageParam.totalElements || 0;
|
||||
} else {
|
||||
ElMessage.error(result.message || '加载失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载消息列表失败:', error);
|
||||
ElMessage.error('加载失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索 */
|
||||
function handleSearch() {
|
||||
pagination.page = 1;
|
||||
loadMessages();
|
||||
}
|
||||
|
||||
/** 重置搜索 */
|
||||
function handleReset() {
|
||||
Object.assign(searchForm, {
|
||||
title: '',
|
||||
messageType: undefined,
|
||||
status: undefined,
|
||||
priority: undefined
|
||||
});
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
/** 创建消息 */
|
||||
function handleCreate() {
|
||||
isEdit.value = false;
|
||||
currentMessage.value = {
|
||||
title: '',
|
||||
content: '',
|
||||
messageType: 'notice',
|
||||
priority: 'normal',
|
||||
sendMode: 'immediate',
|
||||
scheduledTime: '',
|
||||
maxRetryCount: 3,
|
||||
sendMethods: ['system'],
|
||||
targets: []
|
||||
};
|
||||
createDialogVisible.value = true;
|
||||
}
|
||||
|
||||
/** 编辑消息 */
|
||||
async function handleEdit(row: MessageVO) {
|
||||
try {
|
||||
const result = await messageApi.getMessageDetail(row.messageID!);
|
||||
if (result.success && result.data) {
|
||||
isEdit.value = true;
|
||||
currentMessage.value = {
|
||||
messageID: result.data.messageID,
|
||||
title: result.data.title ?? '',
|
||||
content: result.data.content ?? '',
|
||||
messageType: result.data.messageType ?? 'notice',
|
||||
priority: result.data.priority ?? 'normal',
|
||||
sendMode: result.data.sendMode ?? 'immediate',
|
||||
scheduledTime: result.data.scheduledTime,
|
||||
maxRetryCount: result.data.maxRetryCount,
|
||||
sendMethods: result.data.sendMethods ?? ['system'],
|
||||
targets: result.data.targets || []
|
||||
};
|
||||
createDialogVisible.value = true;
|
||||
} else {
|
||||
ElMessage.error(result.message || '加载失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载消息详情失败:', error);
|
||||
ElMessage.error('加载失败');
|
||||
}
|
||||
}
|
||||
|
||||
/** 保存草稿 */
|
||||
async function handleSaveDraft() {
|
||||
const valid = await messageAddRef.value?.validate();
|
||||
if (!valid) return;
|
||||
|
||||
const formData = messageAddRef.value?.getFormData();
|
||||
if (!formData) return;
|
||||
|
||||
const draftData = { ...formData, status: 'draft' };
|
||||
|
||||
try {
|
||||
// 如果 currentMessage 有 messageID，说明是编辑模式，需要带上 messageID
|
||||
if (isEdit.value && currentMessage.value.messageID) {
|
||||
draftData.messageID = currentMessage.value.messageID;
|
||||
}
|
||||
|
||||
// 根据是否有 messageID 判断是创建还是更新
|
||||
const result = draftData.messageID
|
||||
? await messageApi.updateMessage(draftData)
|
||||
: await messageApi.createMessage(draftData);
|
||||
|
||||
if (result.success) {
|
||||
ElMessage.success('保存成功');
|
||||
createDialogVisible.value = false;
|
||||
loadMessages();
|
||||
} else {
|
||||
ElMessage.error(result.message || '保存失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存草稿失败:', error);
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交（创建并发送或更新） */
|
||||
async function handleSubmit() {
|
||||
const valid = await messageAddRef.value?.validate();
|
||||
if (!valid) return;
|
||||
|
||||
const formData = messageAddRef.value?.getFormData();
|
||||
if (!formData) return;
|
||||
|
||||
try {
|
||||
// 如果 currentMessage 有 messageID，说明是编辑模式，需要带上 messageID
|
||||
if (isEdit.value && currentMessage.value.messageID) {
|
||||
formData.messageID = currentMessage.value.messageID;
|
||||
}
|
||||
|
||||
// 根据是否有 messageID 判断是创建还是更新
|
||||
const result = formData.messageID
|
||||
? await messageApi.updateMessage(formData)
|
||||
: await messageApi.createMessage(formData);
|
||||
|
||||
if (result.success) {
|
||||
ElMessage.success(formData.messageID ? '更新成功' : '创建成功');
|
||||
createDialogVisible.value = false;
|
||||
loadMessages();
|
||||
} else {
|
||||
ElMessage.error(result.message || (formData.messageID ? '更新失败' : '创建失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error);
|
||||
ElMessage.error('操作失败');
|
||||
}
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
async function handleViewDetail(row: MessageVO) {
|
||||
try {
|
||||
const result = await messageApi.getMessage(row.messageID!);
|
||||
if (result.success && result.data) {
|
||||
currentDetail.value = result.data;
|
||||
detailDialogVisible.value = true;
|
||||
} else {
|
||||
ElMessage.error(result.message || '加载失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载消息详情失败:', error);
|
||||
ElMessage.error('加载失败');
|
||||
}
|
||||
}
|
||||
|
||||
/** 立即发送 */
|
||||
async function handleSend(row: MessageVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要立即发送该消息吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const result = await messageApi.sendMessage(row.messageID!);
|
||||
if (result.success) {
|
||||
ElMessage.success('发送成功');
|
||||
loadMessages();
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('发送失败:', error);
|
||||
ElMessage.error('发送失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 重试 */
|
||||
async function handleRetry(row: MessageVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要重试发送该消息吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const result = await messageApi.retryMessage(row.messageID!);
|
||||
if (result.success) {
|
||||
ElMessage.success('已提交重试');
|
||||
loadMessages();
|
||||
} else {
|
||||
ElMessage.error(result.message || '重试失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('重试失败:', error);
|
||||
ElMessage.error('重试失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 改期 */
|
||||
function handleReschedule(row: MessageVO) {
|
||||
currentRescheduleId.value = row.messageID!;
|
||||
newScheduledTime.value = row.scheduledTime || '';
|
||||
rescheduleDialogVisible.value = true;
|
||||
}
|
||||
|
||||
/** 确认改期 */
|
||||
async function confirmReschedule() {
|
||||
if (!newScheduledTime.value) {
|
||||
ElMessage.warning('请选择新的发送时间');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await messageApi.rescheduleMessage(
|
||||
currentRescheduleId.value,
|
||||
newScheduledTime.value
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
ElMessage.success('改期成功');
|
||||
rescheduleDialogVisible.value = false;
|
||||
loadMessages();
|
||||
} else {
|
||||
ElMessage.error(result.message || '改期失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('改期失败:', error);
|
||||
ElMessage.error('改期失败');
|
||||
}
|
||||
}
|
||||
|
||||
/** 取消 */
|
||||
async function handleCancel(row: MessageVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要取消该消息发送吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
const result = await messageApi.cancelMessage(row.messageID!);
|
||||
if (result.success) {
|
||||
ElMessage.success('已取消');
|
||||
loadMessages();
|
||||
} else {
|
||||
ElMessage.error(result.message || '取消失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('取消失败:', error);
|
||||
ElMessage.error('取消失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 删除 */
|
||||
async function handleDelete(row: MessageVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除该消息吗？删除后无法恢复！', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'error'
|
||||
});
|
||||
|
||||
const result = await messageApi.deleteMessage(row.messageID!);
|
||||
if (result.success) {
|
||||
ElMessage.success('删除成功');
|
||||
loadMessages();
|
||||
} else {
|
||||
ElMessage.error(result.message || '删除失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除失败:', error);
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 禁用过去日期 */
|
||||
function disablePastDate(time: Date): boolean {
|
||||
return time.getTime() < Date.now();
|
||||
}
|
||||
|
||||
/** 获取消息类型标签 */
|
||||
function getMessageTypeTag(type: string): string {
|
||||
const map: Record<string, string> = {
|
||||
notice: '',
|
||||
announcement: 'success',
|
||||
warning: 'warning',
|
||||
system: 'info'
|
||||
};
|
||||
return map[type] || '';
|
||||
}
|
||||
|
||||
/** 获取消息类型文本 */
|
||||
function getMessageTypeLabel(type: string): string {
|
||||
const map: Record<string, string> = {
|
||||
notice: '通知',
|
||||
announcement: '公告',
|
||||
warning: '警告',
|
||||
system: '系统消息'
|
||||
};
|
||||
return map[type] || type;
|
||||
}
|
||||
|
||||
/** 获取发送方式文本 */
|
||||
function getSendMethodLabel(method: string): string {
|
||||
const map: Record<string, string> = {
|
||||
system: '系统消息',
|
||||
email: '邮件通知',
|
||||
sms: '短信通知'
|
||||
};
|
||||
return map[method] || method;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMessages();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-manage-view {
|
||||
padding: 20px;
|
||||
|
||||
.search-card,
|
||||
.operation-card,
|
||||
.table-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
|
||||
<!-- 基本信息 -->
|
||||
<el-divider content-position="left">基本信息</el-divider>
|
||||
|
||||
<el-form-item label="消息标题" prop="title">
|
||||
<el-input
|
||||
v-model="formData.title"
|
||||
placeholder="请输入消息标题"
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="消息类型" prop="messageType">
|
||||
<el-radio-group v-model="formData.messageType">
|
||||
<el-radio value="notice">通知</el-radio>
|
||||
<el-radio value="announcement">公告</el-radio>
|
||||
<el-radio value="warning">警告</el-radio>
|
||||
<el-radio value="system">系统消息</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="优先级" prop="priority">
|
||||
<el-radio-group v-model="formData.priority">
|
||||
<el-radio value="urgent">紧急</el-radio>
|
||||
<el-radio value="important">重要</el-radio>
|
||||
<el-radio value="normal">普通</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="消息内容" prop="content">
|
||||
<el-input
|
||||
v-model="formData.content"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="请输入消息内容"
|
||||
maxlength="2000"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 发送设置 -->
|
||||
<el-divider content-position="left">发送设置</el-divider>
|
||||
|
||||
<el-form-item label="发送模式" prop="sendMode">
|
||||
<el-radio-group v-model="formData.sendMode">
|
||||
<el-radio value="immediate">立即发送</el-radio>
|
||||
<el-radio value="scheduled">定时发送</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="formData.sendMode === 'scheduled'"
|
||||
label="发送时间"
|
||||
prop="scheduledTime"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="formData.scheduledTime"
|
||||
type="datetime"
|
||||
placeholder="选择发送时间"
|
||||
:disabled-date="disablePastDate"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="最大重试次数" prop="maxRetryCount">
|
||||
<el-input-number
|
||||
v-model="formData.maxRetryCount"
|
||||
:min="0"
|
||||
:max="5"
|
||||
controls-position="right"
|
||||
/>
|
||||
<span class="form-tip">发送失败后重试次数（0-5次）</span>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 发送方式 -->
|
||||
<el-divider content-position="left">发送方式</el-divider>
|
||||
|
||||
<el-form-item label="发送渠道" prop="sendMethods">
|
||||
<el-checkbox-group v-model="formData.sendMethods">
|
||||
<el-checkbox value="system">系统消息</el-checkbox>
|
||||
<el-checkbox value="email">邮件通知</el-checkbox>
|
||||
<el-checkbox value="sms">短信通知</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 接收对象 -->
|
||||
<el-divider content-position="left">接收对象</el-divider>
|
||||
|
||||
<el-form-item label="选择对象">
|
||||
<el-button type="primary" size="small" @click="deptSelectorVisible = true">
|
||||
<el-icon><Plus /></el-icon>
|
||||
选择部门
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="deptRoleSelectorVisible = true" style="margin-left: 8px">
|
||||
<el-icon><Plus /></el-icon>
|
||||
选择部门角色
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" @click="userSelectorVisible = true" style="margin-left: 8px">
|
||||
<el-icon><Plus /></el-icon>
|
||||
选择用户
|
||||
</el-button>
|
||||
<span class="form-tip">已选择 {{ getTotalTargetCount() }} 个对象</span>
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="formData.targets && formData.targets.length > 0" class="selected-targets">
|
||||
<el-tag
|
||||
v-for="(target, index) in formData.targets"
|
||||
:key="index"
|
||||
closable
|
||||
@close="removeTarget(index)"
|
||||
style="margin: 4px"
|
||||
>
|
||||
{{ getTargetDisplayName(target) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- 部门选择器 -->
|
||||
<GenericSelector
|
||||
v-model:visible="deptSelectorVisible"
|
||||
title="选择部门"
|
||||
:fetch-available-api="fetchAllDepts"
|
||||
:fetch-selected-api="fetchSelectedDepts"
|
||||
:filter-selected="filterDepts"
|
||||
:item-config="{ id: 'id', label: 'name' }"
|
||||
unit-name="个部门"
|
||||
@confirm="handleDeptConfirm"
|
||||
/>
|
||||
|
||||
<!-- 部门角色选择器 -->
|
||||
<GenericSelector
|
||||
v-model:visible="deptRoleSelectorVisible"
|
||||
title="选择部门角色"
|
||||
:fetch-available-api="fetchAllDeptRoles"
|
||||
:fetch-selected-api="fetchSelectedDeptRoles"
|
||||
:filter-selected="filterDeptRoles"
|
||||
:item-config="{ id: 'combinedId', label: 'displayName' }"
|
||||
:use-tree="true"
|
||||
:tree-transform="transformDeptRolesToTree"
|
||||
:tree-props="{ children: 'children', label: 'displayName', id: 'combinedId' }"
|
||||
:only-leaf-selectable="true"
|
||||
unit-name="个部门角色"
|
||||
@confirm="handleDeptRoleConfirm"
|
||||
/>
|
||||
|
||||
<!-- 用户选择器 -->
|
||||
<GenericSelector
|
||||
v-model:visible="userSelectorVisible"
|
||||
title="选择用户"
|
||||
:fetch-available-api="fetchAllUsers"
|
||||
:fetch-selected-api="fetchSelectedUsers"
|
||||
:filter-selected="filterUsers"
|
||||
:item-config="{ id: 'id', label: 'displayName', sublabel: 'deptName' }"
|
||||
unit-name="个用户"
|
||||
@confirm="handleUserConfirm"
|
||||
/>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import type { TbSysMessage, TbSysMessageTarget } from '@/types';
|
||||
import { GenericSelector } from '@/components/base';
|
||||
import { deptApi, roleApi, userApi } from '@/apis/system';
|
||||
|
||||
interface Props {
|
||||
modelValue?: TbSysMessage;
|
||||
isEdit?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isEdit: false
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const formData = ref<TbSysMessage>({
|
||||
title: '',
|
||||
content: '',
|
||||
messageType: 'notice',
|
||||
priority: 'normal',
|
||||
sendMode: 'immediate',
|
||||
scheduledTime: '',
|
||||
maxRetryCount: 3,
|
||||
sendMethods: ['system'],
|
||||
targets: []
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const formRules: FormRules = {
|
||||
title: [{ required: true, message: '请输入消息标题', trigger: 'blur' }],
|
||||
content: [{ required: true, message: '请输入消息内容', trigger: 'blur' }],
|
||||
messageType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
|
||||
priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
|
||||
sendMode: [{ required: true, message: '请选择发送模式', trigger: 'change' }],
|
||||
scheduledTime: [{ required: true, message: '请选择发送时间', trigger: 'change' }],
|
||||
sendMethods: [
|
||||
{
|
||||
required: true,
|
||||
message: '请至少选择一种发送方式',
|
||||
trigger: 'change',
|
||||
validator: (rule: any, value: any) => {
|
||||
return Array.isArray(value) && value.length > 0;
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 目标选择相关
|
||||
interface TargetOption {
|
||||
id: string;
|
||||
name: string;
|
||||
deptName?: string;
|
||||
}
|
||||
|
||||
// 选择器可见性状态
|
||||
const deptSelectorVisible = ref(false);
|
||||
const deptRoleSelectorVisible = ref(false);
|
||||
const userSelectorVisible = ref(false);
|
||||
|
||||
/** 禁用过去日期 */
|
||||
function disablePastDate(time: Date): boolean {
|
||||
return time.getTime() < Date.now();
|
||||
}
|
||||
|
||||
/** 获取总目标数量 */
|
||||
function getTotalTargetCount(): number {
|
||||
return formData.value.targets?.length || 0;
|
||||
}
|
||||
|
||||
/** 获取目标显示名称 */
|
||||
function getTargetDisplayName(target: TbSysMessageTarget): string {
|
||||
if (target.targetType === 'dept') {
|
||||
return `部门: ${target.targetName || target.targetID}`;
|
||||
} else if (target.targetType === 'role') {
|
||||
return `部门角色: ${target.targetName || target.targetID}`;
|
||||
} else if (target.targetType === 'user') {
|
||||
return `用户: ${target.targetName || target.targetID}`;
|
||||
}
|
||||
return target.targetName || target.targetID || '';
|
||||
}
|
||||
|
||||
/** 移除目标 */
|
||||
function removeTarget(index: number) {
|
||||
if (formData.value.targets) {
|
||||
formData.value.targets.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 部门选择相关 ====================
|
||||
|
||||
/** 获取所有可选部门 */
|
||||
async function fetchAllDepts() {
|
||||
const result = await deptApi.getAllDepts();
|
||||
if (result.success && result.dataList) {
|
||||
return {
|
||||
...result,
|
||||
dataList: result.dataList.map((dept: any) => ({
|
||||
id: dept.deptID,
|
||||
name: dept.name
|
||||
}))
|
||||
};
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/** 获取已选择的部门 */
|
||||
async function fetchSelectedDepts() {
|
||||
if (!formData.value.targets) {
|
||||
return { success: true, dataList: [], code: 200, message: '', login: true, auth: true };
|
||||
}
|
||||
|
||||
const selectedDepts = formData.value.targets
|
||||
.filter(t => t.targetType === 'dept')
|
||||
.map(t => ({
|
||||
id: t.targetID,
|
||||
name: t.targetName || t.targetID
|
||||
}));
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataList: selectedDepts,
|
||||
code: 200,
|
||||
message: '',
|
||||
login: true,
|
||||
auth: true
|
||||
};
|
||||
}
|
||||
|
||||
/** 过滤已选择的部门 */
|
||||
function filterDepts(available: any[], selected: any[]) {
|
||||
const selectedIds = new Set(selected.map(item => item.id));
|
||||
return available.filter(item => !selectedIds.has(item.id));
|
||||
}
|
||||
|
||||
/** 部门选择确认 */
|
||||
function handleDeptConfirm(items: any[]) {
|
||||
// 移除旧的部门类型目标
|
||||
if (!formData.value.targets) {
|
||||
formData.value.targets = [];
|
||||
}
|
||||
formData.value.targets = formData.value.targets.filter(t => t.targetType !== 'dept');
|
||||
|
||||
// 添加新选择的部门
|
||||
items.forEach(dept => {
|
||||
formData.value.targets!.push({
|
||||
targetType: 'dept',
|
||||
targetID: dept.id,
|
||||
targetName: dept.name,
|
||||
scopeDeptID: dept.id, // 部门的作用域就是自己
|
||||
sendMethod: formData.value.sendMethods?.[0] || 'system'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== 部门角色选择相关 ====================
|
||||
|
||||
/** 获取所有可选部门角色 */
|
||||
async function fetchAllDeptRoles() {
|
||||
const result = await deptApi.getDeptRoleList({} as any);
|
||||
if (result.success && result.dataList) {
|
||||
const transformed = result.dataList
|
||||
.filter((item: any) => item.deptID && item.roleID)
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
combinedId: `${item.deptID}-${item.roleID}`,
|
||||
displayName: `${item.deptName || ''} - ${item.roleName || ''}`,
|
||||
deptDescription: item.deptDescription || ''
|
||||
}));
|
||||
return { ...result, dataList: transformed };
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/** 获取已选择的部门角色 */
|
||||
async function fetchSelectedDeptRoles() {
|
||||
if (!formData.value.targets) {
|
||||
return { success: true, dataList: [], code: 200, message: '', login: true, auth: true };
|
||||
}
|
||||
|
||||
const selectedRoles = formData.value.targets
|
||||
.filter(t => t.targetType === 'role')
|
||||
.map(t => ({
|
||||
deptID: t.scopeDeptID,
|
||||
roleID: t.targetID,
|
||||
combinedId: `${t.scopeDeptID}-${t.targetID}`,
|
||||
displayName: t.targetName || `${t.scopeDeptID}-${t.targetID}`
|
||||
}));
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataList: selectedRoles,
|
||||
code: 200,
|
||||
message: '',
|
||||
login: true,
|
||||
auth: true
|
||||
};
|
||||
}
|
||||
|
||||
/** 过滤已选择的部门角色 */
|
||||
function filterDeptRoles(available: any[], selected: any[]) {
|
||||
const selectedIds = new Set(selected.map(item => item.combinedId));
|
||||
return available.filter(item => !selectedIds.has(item.combinedId));
|
||||
}
|
||||
|
||||
/** 转换部门角色为树形结构 */
|
||||
function transformDeptRolesToTree(flatData: any[]) {
|
||||
const deptMap = new Map<string, any>();
|
||||
const tree: any[] = [];
|
||||
|
||||
flatData.forEach(item => {
|
||||
const deptID = item.deptID;
|
||||
|
||||
if (!deptMap.has(deptID)) {
|
||||
deptMap.set(deptID, {
|
||||
combinedId: deptID,
|
||||
displayName: item.deptName || deptID,
|
||||
deptDescription: item.deptDescription,
|
||||
children: [],
|
||||
isDept: true
|
||||
});
|
||||
}
|
||||
|
||||
const deptNode = deptMap.get(deptID);
|
||||
if (deptNode) {
|
||||
deptNode.children.push({
|
||||
...item,
|
||||
isDept: false
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
deptMap.forEach(deptNode => {
|
||||
tree.push(deptNode);
|
||||
});
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
/** 部门角色选择确认 */
|
||||
function handleDeptRoleConfirm(items: any[]) {
|
||||
// 移除旧的角色类型目标
|
||||
if (!formData.value.targets) {
|
||||
formData.value.targets = [];
|
||||
}
|
||||
formData.value.targets = formData.value.targets.filter(t => t.targetType !== 'role');
|
||||
|
||||
// 添加新选择的部门角色
|
||||
items.forEach(role => {
|
||||
formData.value.targets!.push({
|
||||
targetType: 'role',
|
||||
targetID: role.roleID,
|
||||
targetName: role.displayName,
|
||||
scopeDeptID: role.deptID,
|
||||
sendMethod: formData.value.sendMethods?.[0] || 'system'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== 用户选择相关 ====================
|
||||
|
||||
/** 获取所有可选用户 */
|
||||
async function fetchAllUsers() {
|
||||
const result = await userApi.getUserList({} as any);
|
||||
if (result.success && result.dataList) {
|
||||
return {
|
||||
...result,
|
||||
dataList: result.dataList.map((user: any) => ({
|
||||
id: user.id || user.userID,
|
||||
displayName: user.realName || user.username,
|
||||
deptID: user.deptID,
|
||||
deptName: user.deptName
|
||||
}))
|
||||
};
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/** 获取已选择的用户 */
|
||||
async function fetchSelectedUsers() {
|
||||
if (!formData.value.targets) {
|
||||
return { success: true, dataList: [], code: 200, message: '', login: true, auth: true };
|
||||
}
|
||||
|
||||
const selectedUsers = formData.value.targets
|
||||
.filter(t => t.targetType === 'user')
|
||||
.map(t => ({
|
||||
id: t.targetID,
|
||||
displayName: t.targetName || t.targetID,
|
||||
deptID: t.scopeDeptID,
|
||||
deptName: ''
|
||||
}));
|
||||
|
||||
return {
|
||||
success: true,
|
||||
dataList: selectedUsers,
|
||||
code: 200,
|
||||
message: '',
|
||||
login: true,
|
||||
auth: true
|
||||
};
|
||||
}
|
||||
|
||||
/** 过滤已选择的用户 */
|
||||
function filterUsers(available: any[], selected: any[]) {
|
||||
const selectedIds = new Set(selected.map(item => item.id));
|
||||
return available.filter(item => !selectedIds.has(item.id));
|
||||
}
|
||||
|
||||
/** 用户选择确认 */
|
||||
function handleUserConfirm(items: any[]) {
|
||||
// 移除旧的用户类型目标
|
||||
if (!formData.value.targets) {
|
||||
formData.value.targets = [];
|
||||
}
|
||||
formData.value.targets = formData.value.targets.filter(t => t.targetType !== 'user');
|
||||
|
||||
// 添加新选择的用户
|
||||
items.forEach(user => {
|
||||
formData.value.targets!.push({
|
||||
targetType: 'user',
|
||||
targetID: user.id,
|
||||
targetName: user.displayName,
|
||||
scopeDeptID: user.deptID,
|
||||
sendMethod: formData.value.sendMethods?.[0] || 'system'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== 表单操作 ====================
|
||||
|
||||
/** 表单验证 */
|
||||
async function validate(): Promise<boolean> {
|
||||
if (!formRef.value) return false;
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
|
||||
// 验证目标
|
||||
if (!formData.value.targets || formData.value.targets.length === 0) {
|
||||
ElMessage.warning('请至少选择一个接收对象');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取表单数据 */
|
||||
function getFormData(): TbSysMessage {
|
||||
return formData.value;
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
function reset() {
|
||||
formData.value = {
|
||||
title: '',
|
||||
content: '',
|
||||
messageType: 'notice',
|
||||
priority: 'normal',
|
||||
sendMode: 'immediate',
|
||||
scheduledTime: '',
|
||||
maxRetryCount: 3,
|
||||
sendMethods: ['system'],
|
||||
targets: []
|
||||
};
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
|
||||
// 监听modelValue变化，同步到formData
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val) {
|
||||
formData.value = { ...val };
|
||||
}
|
||||
});
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
validate,
|
||||
getFormData,
|
||||
reset
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-tip {
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.selected-targets {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.target-list {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
min-height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div class="message-statistic">
|
||||
<!-- 统计卡片 -->
|
||||
<el-row :gutter="16" class="statistic-cards">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-content">
|
||||
<div class="card-icon users">
|
||||
<el-icon><User /></el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-label">目标用户数</div>
|
||||
<div class="card-value">{{ statistics.targetUserCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-content">
|
||||
<div class="card-icon sent">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-label">已发送</div>
|
||||
<div class="card-value">{{ statistics.sentCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-content">
|
||||
<div class="card-icon success">
|
||||
<el-icon><CircleCheck /></el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-label">发送成功</div>
|
||||
<div class="card-value">{{ statistics.successCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="16" class="statistic-cards">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-content">
|
||||
<div class="card-icon failed">
|
||||
<el-icon><CircleClose /></el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-label">发送失败</div>
|
||||
<div class="card-value">{{ statistics.failedCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-content">
|
||||
<div class="card-icon read">
|
||||
<el-icon><View /></el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-label">已读人数</div>
|
||||
<div class="card-value">{{ statistics.readCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-content">
|
||||
<div class="card-icon pending">
|
||||
<el-icon><Clock /></el-icon>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-label">待发送</div>
|
||||
<div class="card-value">{{ pendingCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="progress-section">
|
||||
<div class="progress-item">
|
||||
<div class="progress-label">
|
||||
<span>发送进度</span>
|
||||
<span class="progress-value">{{ sendProgress }}%</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="sendProgress"
|
||||
:color="progressColor"
|
||||
:stroke-width="12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="progress-item">
|
||||
<div class="progress-label">
|
||||
<span>成功率</span>
|
||||
<span class="progress-value">{{ successRate }}%</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="successRate"
|
||||
:color="successRateColor"
|
||||
:stroke-width="12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="progress-item">
|
||||
<div class="progress-label">
|
||||
<span>已读率</span>
|
||||
<span class="progress-value">{{ readRate }}%</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="readRate"
|
||||
color="#409eff"
|
||||
:stroke-width="12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import {
|
||||
User,
|
||||
Promotion,
|
||||
CircleCheck,
|
||||
CircleClose,
|
||||
View,
|
||||
Clock
|
||||
} from '@element-plus/icons-vue';
|
||||
import type { MessageVO } from '@/types';
|
||||
|
||||
interface Props {
|
||||
statistics: MessageVO;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
/** 待发送数量 */
|
||||
const pendingCount = computed(() => {
|
||||
const target = props.statistics.targetUserCount || 0;
|
||||
const sent = props.statistics.sentCount || 0;
|
||||
return Math.max(0, target - sent);
|
||||
});
|
||||
|
||||
/** 发送进度 */
|
||||
const sendProgress = computed(() => {
|
||||
const target = props.statistics.targetUserCount || 0;
|
||||
const sent = props.statistics.sentCount || 0;
|
||||
if (target === 0) return 0;
|
||||
return Math.round((sent / target) * 100);
|
||||
});
|
||||
|
||||
/** 成功率 */
|
||||
const successRate = computed(() => {
|
||||
const sent = props.statistics.sentCount || 0;
|
||||
const success = props.statistics.successCount || 0;
|
||||
if (sent === 0) return 0;
|
||||
return Math.round((success / sent) * 100);
|
||||
});
|
||||
|
||||
/** 已读率 */
|
||||
const readRate = computed(() => {
|
||||
const success = props.statistics.successCount || 0;
|
||||
const read = props.statistics.readCount || 0;
|
||||
if (success === 0) return 0;
|
||||
return Math.round((read / success) * 100);
|
||||
});
|
||||
|
||||
/** 发送进度颜色 */
|
||||
const progressColor = computed(() => {
|
||||
const progress = sendProgress.value;
|
||||
if (progress < 30) return '#f56c6c';
|
||||
if (progress < 70) return '#e6a23c';
|
||||
if (progress < 100) return '#409eff';
|
||||
return '#67c23a';
|
||||
});
|
||||
|
||||
/** 成功率颜色 */
|
||||
const successRateColor = computed(() => {
|
||||
const rate = successRate.value;
|
||||
if (rate < 60) return '#f56c6c';
|
||||
if (rate < 90) return '#e6a23c';
|
||||
return '#67c23a';
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-statistic {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.statistic-cards {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
|
||||
&.users {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
&.sent {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
&.failed {
|
||||
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||||
}
|
||||
|
||||
&.read {
|
||||
background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
|
||||
.progress-value {
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @description 消息管理组件导出
|
||||
* @author Claude
|
||||
* @since 2025-11-13
|
||||
*/
|
||||
|
||||
export { default as MessageAdd } from './MessageAdd.vue';
|
||||
export { default as MessageStatistic } from './MessageStatistic.vue';
|
||||
8
schoolNewsWeb/src/views/admin/manage/message/index.ts
Normal file
8
schoolNewsWeb/src/views/admin/manage/message/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @description 消息管理视图导出
|
||||
* @author Claude
|
||||
* @since 2025-11-13
|
||||
*/
|
||||
|
||||
export { default as MessageManageView } from './MessageManageView.vue';
|
||||
export * from './components';
|
||||
326
schoolNewsWeb/src/views/public/message/MessageDetail.vue
Normal file
326
schoolNewsWeb/src/views/public/message/MessageDetail.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="message-detail">
|
||||
<div v-if="messageData" class="detail-container">
|
||||
<!-- 返回按钮 -->
|
||||
<el-button
|
||||
v-if="showBackButton"
|
||||
type="text"
|
||||
@click="handleBack"
|
||||
class="back-button"
|
||||
>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
{{ backButtonText }}
|
||||
</el-button>
|
||||
|
||||
<!-- 消息头部 -->
|
||||
<div class="message-header">
|
||||
<div class="header-left">
|
||||
<h2 class="message-title">{{ messageData.title }}</h2>
|
||||
<div class="message-meta">
|
||||
<el-tag :type="getMessageTypeTag(messageData.messageType || '')" size="large">
|
||||
{{ getMessageTypeLabel(messageData.messageType || '') }}
|
||||
</el-tag>
|
||||
<MessagePriorityBadge :priority="messageData.priority || ''" size="large" />
|
||||
<MessageStatusBadge :status="messageData.status||''" size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<!-- 消息信息 -->
|
||||
<div class="message-info">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="创建时间">
|
||||
<el-icon><Clock /></el-icon>
|
||||
{{ messageData.createTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">
|
||||
<el-icon><Clock /></el-icon>
|
||||
{{ messageData.updateTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="计划发送时间">
|
||||
<el-icon><Timer /></el-icon>
|
||||
{{ messageData.scheduledTime || '立即发送' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="实际发送时间">
|
||||
<el-icon><Timer /></el-icon>
|
||||
{{ messageData.actualSendTime || '未发送' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="发送方式" :span="2">
|
||||
<el-tag
|
||||
v-for="method in messageData.sendMethods"
|
||||
:key="method"
|
||||
style="margin-right: 8px"
|
||||
>
|
||||
{{ getSendMethodLabel(method) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最大重试次数">
|
||||
{{ messageData.maxRetryCount }} 次
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="当前重试次数">
|
||||
{{ messageData.retryCount || 0 }} 次
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">消息内容</el-divider>
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<div class="message-content">
|
||||
<el-card shadow="never" class="content-card">
|
||||
<div class="content-text">{{ messageData.content }}</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 发送统计（如果有统计数据） -->
|
||||
<template v-if="showStatistics && hasStatistics">
|
||||
<el-divider content-position="left">发送统计</el-divider>
|
||||
<MessageStatistic :statistics="messageData" />
|
||||
</template>
|
||||
|
||||
<!-- 操作按钮（如果提供） -->
|
||||
<div v-if="showActions" class="message-actions">
|
||||
<slot name="actions" :message="messageData" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-empty v-else-if="!loading" description="消息不存在" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ArrowLeft, Clock, Timer } from '@element-plus/icons-vue';
|
||||
import { messageApi } from '@/apis/message';
|
||||
import { MessagePriorityBadge, MessageStatusBadge } from '@/components/message';
|
||||
import { MessageStatistic } from '@/views/admin/manage/message/components';
|
||||
import type { MessageVO } from '@/types';
|
||||
|
||||
interface Props {
|
||||
messageId: string;
|
||||
showBackButton?: boolean;
|
||||
backButtonText?: string;
|
||||
showStatistics?: boolean;
|
||||
showActions?: boolean;
|
||||
autoMarkRead?: boolean;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'back'): void;
|
||||
(e: 'loaded', message: MessageVO): void;
|
||||
(e: 'error', error: any): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showBackButton: false,
|
||||
backButtonText: '返回',
|
||||
showStatistics: false,
|
||||
showActions: false,
|
||||
autoMarkRead: false
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const loading = ref(false);
|
||||
const messageData = ref<MessageVO | null>(null);
|
||||
|
||||
/** 是否有统计数据 */
|
||||
const hasStatistics = computed(() => {
|
||||
if (!messageData.value) return false;
|
||||
return (
|
||||
messageData.value.targetUserCount !== undefined &&
|
||||
messageData.value.targetUserCount > 0
|
||||
);
|
||||
});
|
||||
|
||||
/** 加载消息详情 */
|
||||
async function loadMessage() {
|
||||
if (!props.messageId) {
|
||||
ElMessage.warning('消息ID不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await messageApi.getMessageDetail(props.messageId);
|
||||
if (result.success && result.data) {
|
||||
messageData.value = result.data;
|
||||
emit('loaded', result.data);
|
||||
|
||||
// 自动标记已读（用户端）
|
||||
if (props.autoMarkRead) {
|
||||
markAsRead();
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(result.message || '加载失败');
|
||||
emit('error', new Error(result.message || '加载失败'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载消息详情失败:', error);
|
||||
ElMessage.error('加载失败');
|
||||
emit('error', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 标记已读 */
|
||||
async function markAsRead() {
|
||||
if (!props.messageId) return;
|
||||
|
||||
try {
|
||||
await messageApi.markAsRead(props.messageId);
|
||||
} catch (error) {
|
||||
console.error('标记已读失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/** 返回 */
|
||||
function handleBack() {
|
||||
emit('back');
|
||||
}
|
||||
|
||||
/** 获取消息类型标签 */
|
||||
function getMessageTypeTag(type: string): string {
|
||||
const map: Record<string, string> = {
|
||||
notice: '',
|
||||
announcement: 'success',
|
||||
warning: 'warning',
|
||||
system: 'info'
|
||||
};
|
||||
return map[type] || '';
|
||||
}
|
||||
|
||||
/** 获取消息类型文本 */
|
||||
function getMessageTypeLabel(type: string): string {
|
||||
const map: Record<string, string> = {
|
||||
notice: '通知',
|
||||
announcement: '公告',
|
||||
warning: '警告',
|
||||
system: '系统消息'
|
||||
};
|
||||
return map[type] || type;
|
||||
}
|
||||
|
||||
/** 获取发送方式文本 */
|
||||
function getSendMethodLabel(method: string): string {
|
||||
const map: Record<string, string> = {
|
||||
system: '系统消息',
|
||||
email: '邮件通知',
|
||||
sms: '短信通知'
|
||||
};
|
||||
return map[method] || method;
|
||||
}
|
||||
|
||||
/** 刷新数据 */
|
||||
function refresh() {
|
||||
loadMessage();
|
||||
}
|
||||
|
||||
/** 监听messageId变化 */
|
||||
watch(() => props.messageId, () => {
|
||||
loadMessage();
|
||||
}, { immediate: false });
|
||||
|
||||
onMounted(() => {
|
||||
loadMessage();
|
||||
});
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
refresh,
|
||||
messageData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-detail {
|
||||
.detail-container {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: #409eff;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0 0 12px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.message-info {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:deep(.el-descriptions__label) {
|
||||
width: 140px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.content-card {
|
||||
background: #f9f9f9;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: #606266;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
schoolNewsWeb/src/views/public/message/index.ts
Normal file
7
schoolNewsWeb/src/views/public/message/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* @description 公共消息组件导出
|
||||
* @author Claude
|
||||
* @since 2025-11-13
|
||||
*/
|
||||
|
||||
export { default as MessageDetail } from './MessageDetail.vue';
|
||||
473
schoolNewsWeb/src/views/user/message/MyMessageDetailView.vue
Normal file
473
schoolNewsWeb/src/views/user/message/MyMessageDetailView.vue
Normal file
@@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<div class="my-message-detail" v-loading="loading">
|
||||
<div class="header">
|
||||
<el-button @click="handleBack" text>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回消息列表
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="message" class="detail-container">
|
||||
<!-- 消息卡片 -->
|
||||
<el-card class="message-card" shadow="never">
|
||||
<!-- 标题区域 -->
|
||||
<div class="message-header">
|
||||
<div class="title-area">
|
||||
<h1 class="message-title">{{ message.title }}</h1>
|
||||
<div class="title-badges">
|
||||
<el-tag :type="getMessageTypeTag(message.messageType)">
|
||||
{{ getMessageTypeText(message.messageType) }}
|
||||
</el-tag>
|
||||
<MessagePriorityBadge :priority="message.priority || ''" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message-meta">
|
||||
<div class="meta-item">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>发送人：{{ message.senderName }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<el-icon><OfficeBuilding /></el-icon>
|
||||
<span>部门：{{ message.senderDeptName }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span>发送时间：{{ formatDateTime(message.actualSendTime) }}</span>
|
||||
</div>
|
||||
<div v-if="message.isRead" class="meta-item read-status">
|
||||
<el-icon><Check /></el-icon>
|
||||
<span>已读于：{{ formatDateTime(message.readTime) }}</span>
|
||||
</div>
|
||||
<div v-else class="meta-item unread-status">
|
||||
<el-icon><View /></el-icon>
|
||||
<span>未读</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<el-divider />
|
||||
<div class="message-content">
|
||||
<div class="content-body">
|
||||
{{ message.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 发送方式 -->
|
||||
<el-divider />
|
||||
<div class="send-info">
|
||||
<div class="info-label">
|
||||
<el-icon><Message /></el-icon>
|
||||
<span>发送方式：</span>
|
||||
</div>
|
||||
<div class="send-methods">
|
||||
<el-tag
|
||||
v-if="message.sendMethod === 'system' || !message.sendMethod"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
系统消息
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="message.sendMethod === 'email'"
|
||||
type="success"
|
||||
size="small"
|
||||
>
|
||||
邮件通知
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="message.sendMethod === 'sms'"
|
||||
type="warning"
|
||||
size="small"
|
||||
>
|
||||
短信通知
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 发送状态 -->
|
||||
<div class="send-status">
|
||||
<div class="info-label">
|
||||
<el-icon><CircleCheck /></el-icon>
|
||||
<span>发送状态：</span>
|
||||
</div>
|
||||
<el-tag
|
||||
:type="getSendStatusType(message.sendStatus)"
|
||||
size="small"
|
||||
>
|
||||
{{ getSendStatusText(message.sendStatus) }}
|
||||
</el-tag>
|
||||
<span v-if="message.failReason" class="fail-reason">
|
||||
（{{ message.failReason }}）
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-divider />
|
||||
<div class="message-actions">
|
||||
<el-button
|
||||
v-if="!message.isRead"
|
||||
type="primary"
|
||||
@click="handleMarkAsRead"
|
||||
:loading="marking"
|
||||
>
|
||||
<el-icon><Check /></el-icon>
|
||||
标记为已读
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 相关消息推荐（可选功能） -->
|
||||
<el-card v-if="relatedMessages.length > 0" class="related-messages" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">相关消息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="related-list">
|
||||
<div
|
||||
v-for="relMsg in relatedMessages"
|
||||
:key="relMsg.messageID"
|
||||
class="related-item"
|
||||
@click="handleViewRelated(relMsg.messageID)"
|
||||
>
|
||||
<div class="related-title">
|
||||
<span v-if="!relMsg.isRead" class="unread-dot"></span>
|
||||
{{ relMsg.title }}
|
||||
</div>
|
||||
<div class="related-meta">
|
||||
<span>{{ formatDateTime(relMsg.actualSendTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {
|
||||
ArrowLeft,
|
||||
User,
|
||||
OfficeBuilding,
|
||||
Clock,
|
||||
Check,
|
||||
View,
|
||||
Message,
|
||||
CircleCheck
|
||||
} from '@element-plus/icons-vue';
|
||||
import { messageApi } from '@/apis/message';
|
||||
import type { MessageUserVO } from '@/types';
|
||||
import { MessagePriorityBadge } from '@/components/message';
|
||||
|
||||
defineOptions({
|
||||
name: 'MyMessageDetailView'
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const messageID = route.params.messageID as string;
|
||||
|
||||
const loading = ref(false);
|
||||
const marking = ref(false);
|
||||
|
||||
const message = ref<MessageUserVO | null>(null);
|
||||
const relatedMessages = ref<MessageUserVO[]>([]);
|
||||
|
||||
/** 获取消息类型标签 */
|
||||
function getMessageTypeTag(type?: string): string {
|
||||
const map: Record<string, string> = {
|
||||
notice: 'info',
|
||||
announcement: 'warning',
|
||||
warning: 'danger',
|
||||
system: 'success'
|
||||
};
|
||||
return map[type || ''] || '';
|
||||
}
|
||||
|
||||
/** 获取消息类型文本 */
|
||||
function getMessageTypeText(type?: string): string {
|
||||
const map: Record<string, string> = {
|
||||
notice: '通知',
|
||||
announcement: '公告',
|
||||
warning: '预警',
|
||||
system: '系统消息'
|
||||
};
|
||||
return map[type || ''] || type || '';
|
||||
}
|
||||
|
||||
/** 获取发送状态类型 */
|
||||
function getSendStatusType(status?: string): string {
|
||||
const map: Record<string, string> = {
|
||||
pending: 'info',
|
||||
success: 'success',
|
||||
failed: 'danger'
|
||||
};
|
||||
return map[status || ''] || '';
|
||||
}
|
||||
|
||||
/** 获取发送状态文本 */
|
||||
function getSendStatusText(status?: string): string {
|
||||
const map: Record<string, string> = {
|
||||
pending: '待发送',
|
||||
success: '发送成功',
|
||||
failed: '发送失败'
|
||||
};
|
||||
return map[status || ''] || status || '';
|
||||
}
|
||||
|
||||
/** 格式化日期时间 */
|
||||
function formatDateTime(dateStr?: string): string {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
/** 加载消息详情 */
|
||||
async function loadMessageDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await messageApi.getMyMessageDetail(messageID);
|
||||
if (result.success) {
|
||||
message.value = result.data || null;
|
||||
|
||||
// 如果是未读消息，自动标记为已读
|
||||
if (message.value && !message.value.isRead) {
|
||||
await autoMarkAsRead();
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(result.message || '加载失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载消息详情失败:', error);
|
||||
ElMessage.error('加载失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 自动标记为已读 */
|
||||
async function autoMarkAsRead() {
|
||||
try {
|
||||
await messageApi.markAsRead(messageID);
|
||||
// 不显示成功消息，静默标记
|
||||
} catch (error) {
|
||||
console.error('自动标记已读失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/** 手动标记为已读 */
|
||||
async function handleMarkAsRead() {
|
||||
marking.value = true;
|
||||
try {
|
||||
const result = await messageApi.markAsRead(messageID);
|
||||
if (result.success) {
|
||||
ElMessage.success('已标记为已读');
|
||||
await loadMessageDetail();
|
||||
} else {
|
||||
ElMessage.error(result.message || '操作失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('标记已读失败:', error);
|
||||
ElMessage.error('操作失败');
|
||||
} finally {
|
||||
marking.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 查看相关消息 */
|
||||
function handleViewRelated(relatedMessageID?: string) {
|
||||
if (!relatedMessageID) return;
|
||||
router.push(`/user/message/detail/${relatedMessageID}`);
|
||||
// 重新加载当前页面
|
||||
loadMessageDetail();
|
||||
}
|
||||
|
||||
/** 返回 */
|
||||
function handleBack() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMessageDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-message-detail {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px;
|
||||
|
||||
.header {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
|
||||
.message-card {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.message-header {
|
||||
.title-area {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.message-title {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.title-badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&.read-status {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
&.unread-status {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
.content-body {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
min-height: 200px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.send-info,
|
||||
.send-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.info-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
|
||||
.el-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.send-methods {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fail-reason {
|
||||
font-size: 12px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.related-messages {
|
||||
.card-header {
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.related-list {
|
||||
.related-item {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.related-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.unread-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #f56c6c;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.related-meta {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
507
schoolNewsWeb/src/views/user/message/MyMessageListView.vue
Normal file
507
schoolNewsWeb/src/views/user/message/MyMessageListView.vue
Normal file
@@ -0,0 +1,507 @@
|
||||
<template>
|
||||
<div class="my-message-list">
|
||||
<div class="header">
|
||||
<h2>我的消息</h2>
|
||||
<div class="header-actions">
|
||||
<el-badge :value="unreadCount" :hidden="unreadCount === 0">
|
||||
<el-button @click="loadMessages">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
刷新
|
||||
</el-button>
|
||||
</el-badge>
|
||||
<el-button @click="handleMarkAllRead" :disabled="selectedMessages.length === 0">
|
||||
<el-icon><Check /></el-icon>
|
||||
标记已读
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选条件 -->
|
||||
<el-form :model="filterForm" inline class="filter-form">
|
||||
<el-form-item label="消息类型">
|
||||
<el-select class="w-full" v-model="filterForm.messageType" placeholder="全部" clearable>
|
||||
<el-option label="通知" value="notice" />
|
||||
<el-option label="公告" value="announcement" />
|
||||
<el-option label="预警" value="warning" />
|
||||
<el-option label="系统消息" value="system" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="阅读状态">
|
||||
<el-select class="w-full" v-model="filterForm.isRead" placeholder="全部" clearable>
|
||||
<el-option label="未读" :value="false" />
|
||||
<el-option label="已读" :value="true" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级">
|
||||
<el-select class="w-full" v-model="filterForm.priority" placeholder="全部" clearable>
|
||||
<el-option label="紧急" value="urgent" />
|
||||
<el-option label="重要" value="important" />
|
||||
<el-option label="普通" value="normal" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-actions">
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div class="message-cards" v-loading="loading">
|
||||
<el-checkbox-group v-model="selectedMessages" class="message-group">
|
||||
<div
|
||||
v-for="msg in messageList"
|
||||
:key="msg.messageID"
|
||||
class="message-card"
|
||||
:class="{ unread: !msg.isRead, urgent: msg.priority === 'urgent' }"
|
||||
>
|
||||
<div class="card-header">
|
||||
<el-checkbox :value="msg.messageID" class="message-checkbox" />
|
||||
<div class="card-title-area" @click="handleViewDetail(msg)">
|
||||
<span v-if="!msg.isRead" class="unread-dot"></span>
|
||||
<h3 class="card-title">{{ msg.title }}</h3>
|
||||
<MessagePriorityBadge :priority="msg.priority || ''" />
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<el-button
|
||||
v-if="!msg.isRead"
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click.stop="handleMarkAsRead(msg.messageID)"
|
||||
>
|
||||
标记已读
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click="handleViewDetail(msg)"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body" @click="handleViewDetail(msg)">
|
||||
<div class="message-meta">
|
||||
<el-tag :type="getMessageTypeTag(msg.messageType)" size="small">
|
||||
{{ getMessageTypeText(msg.messageType) }}
|
||||
</el-tag>
|
||||
<span class="sender-info">
|
||||
<el-icon><User /></el-icon>
|
||||
{{ msg.senderName }} · {{ msg.senderDeptName }}
|
||||
</span>
|
||||
<span class="send-time">
|
||||
<el-icon><Clock /></el-icon>
|
||||
{{ formatDateTime(msg.actualSendTime) }}
|
||||
</span>
|
||||
<el-tag
|
||||
v-if="msg.isRead"
|
||||
type="success"
|
||||
size="small"
|
||||
>
|
||||
已读于 {{ formatDateTime(msg.readTime) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="message-preview">
|
||||
{{ getPreviewText(msg.content) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
|
||||
<el-empty
|
||||
v-if="messageList.length === 0 && !loading"
|
||||
description="暂无消息"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="pageParam.pageNumber"
|
||||
v-model:page-size="pageParam.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Refresh, Check, User, Clock } from '@element-plus/icons-vue';
|
||||
import { messageApi } from '@/apis/message';
|
||||
import type { MessageUserVO, PageParam } from '@/types';
|
||||
import { MessagePriorityBadge } from '@/components/message';
|
||||
|
||||
defineOptions({
|
||||
name: 'MyMessageListView'
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const loading = ref(false);
|
||||
|
||||
const messageList = ref<MessageUserVO[]>([]);
|
||||
const selectedMessages = ref<string[]>([]);
|
||||
const unreadCount = ref(0);
|
||||
|
||||
// 分页参数
|
||||
const pageParam = ref<PageParam>({
|
||||
pageNumber: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const total = ref(0);
|
||||
|
||||
// 筛选表单
|
||||
const filterForm = ref<Partial<MessageUserVO>>({
|
||||
messageType: undefined,
|
||||
priority: undefined,
|
||||
isRead: undefined
|
||||
});
|
||||
|
||||
/** 获取消息类型标签 */
|
||||
function getMessageTypeTag(type?: string): string {
|
||||
const map: Record<string, string> = {
|
||||
notice: 'info',
|
||||
announcement: 'warning',
|
||||
warning: 'danger',
|
||||
system: 'success'
|
||||
};
|
||||
return map[type || ''] || '';
|
||||
}
|
||||
|
||||
/** 获取消息类型文本 */
|
||||
function getMessageTypeText(type?: string): string {
|
||||
const map: Record<string, string> = {
|
||||
notice: '通知',
|
||||
announcement: '公告',
|
||||
warning: '预警',
|
||||
system: '系统'
|
||||
};
|
||||
return map[type || ''] || type || '';
|
||||
}
|
||||
|
||||
/** 格式化日期时间 */
|
||||
function formatDateTime(dateStr?: string): string {
|
||||
if (!dateStr) return '-';
|
||||
const date = new Date(dateStr);
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
|
||||
// 1分钟内
|
||||
if (diff < 60000) {
|
||||
return '刚刚';
|
||||
}
|
||||
// 1小时内
|
||||
if (diff < 3600000) {
|
||||
return `${Math.floor(diff / 60000)}分钟前`;
|
||||
}
|
||||
// 24小时内
|
||||
if (diff < 86400000) {
|
||||
return `${Math.floor(diff / 3600000)}小时前`;
|
||||
}
|
||||
// 7天内
|
||||
if (diff < 604800000) {
|
||||
return `${Math.floor(diff / 86400000)}天前`;
|
||||
}
|
||||
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取预览文本 */
|
||||
function getPreviewText(content?: string): string {
|
||||
if (!content) return '';
|
||||
return content.length > 100 ? content.substring(0, 100) + '...' : content;
|
||||
}
|
||||
|
||||
/** 加载消息列表 */
|
||||
async function loadMessages() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await messageApi.getMyMessages(pageParam.value, filterForm.value);
|
||||
if (result.success) {
|
||||
messageList.value = result.dataList || [];
|
||||
total.value = result.pageParam?.totalElements || 0;
|
||||
} else {
|
||||
ElMessage.error(result.message || '加载失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载消息列表失败:', error);
|
||||
ElMessage.error('加载失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 加载未读数量 */
|
||||
async function loadUnreadCount() {
|
||||
try {
|
||||
const result = await messageApi.getUnreadCount();
|
||||
if (result.success) {
|
||||
unreadCount.value = result.data || 0;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载未读数量失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索 */
|
||||
function handleSearch() {
|
||||
pageParam.value.pageNumber = 1;
|
||||
loadMessages();
|
||||
}
|
||||
|
||||
/** 重置 */
|
||||
function handleReset() {
|
||||
filterForm.value = {
|
||||
isRead: undefined
|
||||
};
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
/** 分页大小变更 */
|
||||
function handleSizeChange() {
|
||||
pageParam.value.pageNumber = 1;
|
||||
loadMessages();
|
||||
}
|
||||
|
||||
/** 页码变更 */
|
||||
function handlePageChange() {
|
||||
loadMessages();
|
||||
}
|
||||
|
||||
/** 查看详情 */
|
||||
async function handleViewDetail(msg: MessageUserVO) {
|
||||
// 如果是未读消息，先标记为已读
|
||||
if (!msg.isRead && msg.messageID) {
|
||||
await handleMarkAsRead(msg.messageID, false);
|
||||
}
|
||||
|
||||
router.push(`/user/message/detail/${msg.messageID}`);
|
||||
}
|
||||
|
||||
/** 标记单条消息为已读 */
|
||||
async function handleMarkAsRead(messageID?: string, showMessage = true) {
|
||||
if (!messageID) return;
|
||||
|
||||
try {
|
||||
const result = await messageApi.markAsRead(messageID);
|
||||
if (result.success) {
|
||||
if (showMessage) {
|
||||
ElMessage.success('已标记为已读');
|
||||
}
|
||||
await loadMessages();
|
||||
await loadUnreadCount();
|
||||
} else {
|
||||
ElMessage.error(result.message || '操作失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('标记已读失败:', error);
|
||||
ElMessage.error('操作失败');
|
||||
}
|
||||
}
|
||||
|
||||
/** 批量标记为已读 */
|
||||
async function handleMarkAllRead() {
|
||||
if (selectedMessages.value.length === 0) {
|
||||
ElMessage.warning('请选择要标记的消息');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await messageApi.batchMarkAsRead(selectedMessages.value);
|
||||
if (result.success) {
|
||||
ElMessage.success('已标记为已读');
|
||||
selectedMessages.value = [];
|
||||
await loadMessages();
|
||||
await loadUnreadCount();
|
||||
} else {
|
||||
ElMessage.error(result.message || '操作失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('批量标记已读失败:', error);
|
||||
ElMessage.error('操作失败');
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMessages();
|
||||
loadUnreadCount();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.my-message-list {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px 24px;
|
||||
|
||||
::v-deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep(.el-select) {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.el-button {
|
||||
min-width: 88px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-cards {
|
||||
.message-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-card {
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-color: #c8232c;
|
||||
}
|
||||
|
||||
&.unread {
|
||||
border-left: 4px solid #409eff;
|
||||
background-color: #f0f9ff;
|
||||
}
|
||||
|
||||
&.urgent {
|
||||
border-left: 4px solid #f56c6c;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.message-checkbox {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-title-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
min-height: 32px;
|
||||
padding: 4px 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.unread-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #f56c6c;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1 1 auto;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.message-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
.sender-info,
|
||||
.send-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.message-preview {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
8
schoolNewsWeb/src/views/user/message/index.ts
Normal file
8
schoolNewsWeb/src/views/user/message/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @description 用户消息视图导出
|
||||
* @author Claude
|
||||
* @since 2025-11-13
|
||||
*/
|
||||
|
||||
export { default as MyMessageListView } from './MyMessageListView.vue';
|
||||
export { default as MyMessageDetailView } from './MyMessageDetailView.vue';
|
||||
Reference in New Issue
Block a user