消息模块、爬虫
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';
|
||||
Reference in New Issue
Block a user