消息模块、爬虫
This commit is contained in:
@@ -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