378 lines
15 KiB
TypeScript
378 lines
15 KiB
TypeScript
import { Fragment, useEffect, useState } from 'react';
|
||
import { Clock3, Eye, FileText, Search, StopCircle } from 'lucide-react';
|
||
import { useSearchParams } from 'react-router-dom';
|
||
import {
|
||
Button,
|
||
DateRangeInput,
|
||
DetailInfoGrid,
|
||
DetailProgressStats,
|
||
DetailSection,
|
||
DetailTitle,
|
||
InlineTextPreview,
|
||
Input,
|
||
Modal,
|
||
Pagination,
|
||
QueryPanel,
|
||
QueryButtons,
|
||
Select,
|
||
Tag,
|
||
type DateRangeValue,
|
||
type TableColumn,
|
||
} from '@/components/ui';
|
||
import { clientApi, type SmsBatchTask } from '@/api/adminApi';
|
||
import { formatDateTime, recentBeijingDateRange } from '@/utils/dateTime';
|
||
import { batchTaskStatusMeta, canClientCancelBatchTask, normalizeBatchTaskStatus, type BatchTaskDisplayStatus } from '@/utils/batchTaskStatus';
|
||
|
||
type BatchTask = {
|
||
id: string;
|
||
backendId: string;
|
||
applicationName: string;
|
||
submittedAt: string;
|
||
phoneCount: number;
|
||
wordCount: number;
|
||
sendType: 'immediate' | 'scheduled';
|
||
scheduledAt?: string | null;
|
||
sentCount: number;
|
||
deliveredCount: number;
|
||
failedCount: number;
|
||
totalCount: number;
|
||
templateContent: string;
|
||
status: BatchTaskDisplayStatus;
|
||
rawStatus: string;
|
||
reviewReason?: string | null;
|
||
rejectReason?: string | null;
|
||
riskTaskId?: string | null;
|
||
};
|
||
|
||
function splitSignature(content: string) {
|
||
const match = content.match(/^【(.+?)】(.+)$/);
|
||
return {
|
||
signature: match?.[1],
|
||
content: match?.[2] ?? content,
|
||
};
|
||
}
|
||
|
||
function getProgress(task: BatchTask) {
|
||
return task.totalCount > 0 ? Math.round((task.sentCount / task.totalCount) * 100) : 0;
|
||
}
|
||
|
||
function getBillingCount(task: BatchTask) {
|
||
return getDeliveredCount(task);
|
||
}
|
||
|
||
function getDeliveredCount(task: BatchTask) {
|
||
return task.deliveredCount;
|
||
}
|
||
|
||
function mapTask(task: SmsBatchTask): BatchTask {
|
||
const displayStatus = normalizeBatchTaskStatus(task.status);
|
||
return {
|
||
id: task.taskNo || task.id,
|
||
backendId: task.id,
|
||
applicationName: task.application?.name ?? task.applicationId ?? '未绑定应用',
|
||
submittedAt: task.createdAt,
|
||
phoneCount: task.phoneTotal,
|
||
wordCount: [...task.content].length,
|
||
sendType: task.scheduledAt ? 'scheduled' : 'immediate',
|
||
scheduledAt: task.scheduledAt,
|
||
sentCount: displayStatus === 'pending_review' ? 0 : task.progressSent ?? task.submittedTotal ?? 0,
|
||
deliveredCount: task.progressDelivered ?? task.successTotal ?? 0,
|
||
failedCount: task.progressFailed ?? task.failedTotal ?? 0,
|
||
totalCount: task.progressTotal || task.phoneTotal,
|
||
templateContent: task.content,
|
||
status: displayStatus,
|
||
rawStatus: task.status,
|
||
reviewReason: task.reviewReason,
|
||
rejectReason: task.rejectReason,
|
||
riskTaskId: task.riskTaskId,
|
||
};
|
||
}
|
||
|
||
export function ClientBatchTasksPage() {
|
||
const [searchParams] = useSearchParams();
|
||
const [tasks, setTasks] = useState<BatchTask[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState('');
|
||
const [total, setTotal] = useState(0);
|
||
const [applications, setApplications] = useState<Array<{ id: string; name: string }>>([]);
|
||
const [keyword, setKeyword] = useState(() => searchParams.get('taskNo') ?? '');
|
||
const [application, setApplication] = useState('all');
|
||
const [submittedDateRange, setSubmittedDateRange] = useState<DateRangeValue>(() => recentBeijingDateRange(7));
|
||
const [applied, setApplied] = useState(() => ({ keyword, application, submittedDateRange }));
|
||
const [hoveredTaskId, setHoveredTaskId] = useState<string | null>(null);
|
||
const [page, setPage] = useState(1);
|
||
const [selectedTask, setSelectedTask] = useState<BatchTask | null>(null);
|
||
|
||
const pageSize = 10;
|
||
|
||
function loadTasks(targetPage = page) {
|
||
setLoading(true);
|
||
clientApi.listBatchTasksPage({
|
||
keyword: applied.keyword.trim() || undefined,
|
||
applicationKeyword: applied.application === 'all' ? undefined : applied.application,
|
||
createdAtFrom: applied.submittedDateRange.start,
|
||
createdAtTo: applied.submittedDateRange.end,
|
||
page: targetPage,
|
||
pageSize,
|
||
})
|
||
.then((result) => {
|
||
setTasks(result.items.map(mapTask));
|
||
setTotal(result.total);
|
||
setError('');
|
||
})
|
||
.catch((reason: Error) => setError(reason.message || '批量任务加载失败'))
|
||
.finally(() => setLoading(false));
|
||
}
|
||
|
||
useEffect(() => {
|
||
loadTasks(page);
|
||
}, [applied, page]);
|
||
|
||
function query() {
|
||
setPage(1);
|
||
setApplied({ keyword, application, submittedDateRange });
|
||
}
|
||
|
||
function reset() {
|
||
const defaults = { keyword: '', application: 'all', submittedDateRange: recentBeijingDateRange(7) };
|
||
setKeyword('');
|
||
setApplication('all');
|
||
setSubmittedDateRange(defaults.submittedDateRange);
|
||
setPage(1);
|
||
setApplied(defaults);
|
||
}
|
||
|
||
useEffect(() => {
|
||
clientApi.listApplicationOptions()
|
||
.then((items) => setApplications(items.map((item) => ({ id: item.id, name: item.name }))))
|
||
.catch(() => undefined);
|
||
}, []);
|
||
|
||
const applicationOptions = [
|
||
{ label: '全部应用', value: 'all' },
|
||
...applications.map((item) => ({ label: item.name, value: item.name })),
|
||
];
|
||
const totalPages = Math.max(1, Math.ceil(total / pageSize));
|
||
const currentPage = Math.min(page, totalPages);
|
||
const visibleTasks = tasks;
|
||
|
||
function terminateTask(id: string) {
|
||
const source = tasks.find((item) => item.id === id);
|
||
if (!source) return;
|
||
clientApi.cancelBatchTask(source.backendId)
|
||
.then(() => loadTasks(page))
|
||
.catch((reason: Error) => setError(reason.message || '发送批次终止失败'));
|
||
}
|
||
|
||
const columns: Array<TableColumn<BatchTask>> = [
|
||
{
|
||
key: 'id',
|
||
title: '发送批次号',
|
||
width: '140px',
|
||
render: (record) => (
|
||
<div className="batch-task-id">
|
||
<strong>{record.id}</strong>
|
||
<Tag tone={batchTaskStatusMeta[record.status].tone}>{batchTaskStatusMeta[record.status].label}{record.status === 'unknown' ? `（${record.rawStatus}）` : ''}</Tag>
|
||
</div>
|
||
),
|
||
},
|
||
{ key: 'applicationName', title: '应用名称', width: '150px', render: (record) => record.applicationName },
|
||
{ key: 'submittedAt', title: '提交时间', width: '150px', render: (record) => formatDateTime(record.submittedAt) },
|
||
{ key: 'phoneCount', title: '发送号码数', width: '120px', render: (record) => record.phoneCount.toLocaleString('zh-CN') },
|
||
{ key: 'wordCount', title: '单号码字数', width: '120px', render: (record) => <strong>{record.wordCount} 字</strong> },
|
||
{
|
||
key: 'sendType',
|
||
title: '发送时间',
|
||
width: '130px',
|
||
render: (record) => (
|
||
<div className="batch-send-time">
|
||
<span>
|
||
<Clock3 size={14} />
|
||
{record.sendType === 'immediate' ? '立即发送' : '定时发送'}
|
||
</span>
|
||
{record.scheduledAt ? <small>{formatDateTime(record.scheduledAt)}</small> : null}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
key: 'progress',
|
||
title: '发送进度',
|
||
width: '180px',
|
||
render: (record) => {
|
||
const percent = getProgress(record);
|
||
return (
|
||
<div className="batch-progress">
|
||
<div>
|
||
<span>{record.sentCount.toLocaleString('zh-CN')} / {record.totalCount.toLocaleString('zh-CN')}</span>
|
||
<strong>{percent}%</strong>
|
||
</div>
|
||
<div className="batch-progress__track">
|
||
<span className={`batch-progress__bar batch-progress__bar--${record.status}`} style={{ width: `${percent}%` }} />
|
||
</div>
|
||
</div>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
key: 'actions',
|
||
title: '操作',
|
||
align: 'right',
|
||
width: '120px',
|
||
render: (record) => (
|
||
<div className="batch-actions">
|
||
<Button icon={<Eye size={14} />} onClick={() => setSelectedTask(record)} size="sm" variant="ghost">详情</Button>
|
||
{canClientCancelBatchTask(record.rawStatus) ? <Button
|
||
icon={<StopCircle size={14} />}
|
||
onClick={() => terminateTask(record.id)}
|
||
size="sm"
|
||
variant="ghost"
|
||
>
|
||
终止
|
||
</Button> : null}
|
||
</div>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="page-stack">
|
||
<div className="sms-send-title">
|
||
<span className="sms-send-title__icon">
|
||
<FileText size={22} />
|
||
</span>
|
||
<h1>查看批量任务</h1>
|
||
</div>
|
||
|
||
<QueryPanel
|
||
title="查询条件"
|
||
summary={<>共找到 <strong>{total}</strong> 个发送批次</>}
|
||
>
|
||
<Input
|
||
label="发送批次号"
|
||
onChange={(event) => setKeyword(event.target.value)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === 'Enter') {
|
||
query();
|
||
}
|
||
}}
|
||
placeholder="输入发送批次号搜索"
|
||
prefix={<Search size={16} />}
|
||
value={keyword}
|
||
/>
|
||
<Select label="选择应用" onChange={(event) => setApplication(event.target.value)} options={applicationOptions} value={application} />
|
||
<DateRangeInput label="提交时间" onChange={setSubmittedDateRange} value={submittedDateRange} />
|
||
<QueryButtons onQuery={query} onReset={reset} />
|
||
</QueryPanel>
|
||
|
||
<div className="surface batch-table-card">
|
||
{loading ? <p className="muted">正在加载批量任务...</p> : null}
|
||
{error ? <p className="form-error">{error}</p> : null}
|
||
<div className="ui-table-wrap">
|
||
<table className="ui-table batch-table">
|
||
<thead>
|
||
<tr>
|
||
{columns.map((column) => (
|
||
<th key={column.key} style={{ width: column.width, textAlign: column.align ?? 'left' }}>{column.title}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{visibleTasks.map((record, index) => {
|
||
const { signature, content } = splitSignature(record.templateContent);
|
||
|
||
return (
|
||
<Fragment key={record.id}>
|
||
<tr
|
||
className={['batch-main-row', hoveredTaskId === record.id ? 'batch-row--hovered' : ''].filter(Boolean).join(' ')}
|
||
onMouseEnter={() => setHoveredTaskId(record.id)}
|
||
onMouseLeave={() => setHoveredTaskId(null)}
|
||
>
|
||
{columns.map((column) => (
|
||
<td key={column.key} style={{ textAlign: column.align ?? 'left' }}>{column.render(record, index)}</td>
|
||
))}
|
||
</tr>
|
||
<tr
|
||
className={['batch-template-row', hoveredTaskId === record.id ? 'batch-row--hovered' : ''].filter(Boolean).join(' ')}
|
||
onMouseEnter={() => setHoveredTaskId(record.id)}
|
||
onMouseLeave={() => setHoveredTaskId(null)}
|
||
>
|
||
<td colSpan={columns.length}>
|
||
<InlineTextPreview label="模板内容" leading={signature ? <strong>【{signature}】</strong> : null}>
|
||
{content}
|
||
</InlineTextPreview>
|
||
</td>
|
||
</tr>
|
||
</Fragment>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<Pagination
|
||
nextDisabled={currentPage >= totalPages}
|
||
onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
|
||
onPrevious={() => setPage((value) => Math.max(1, value - 1))}
|
||
page={currentPage}
|
||
totalPages={totalPages}
|
||
onPageChange={setPage}
|
||
previousDisabled={currentPage <= 1}
|
||
total={total}
|
||
/>
|
||
</div>
|
||
|
||
<Modal
|
||
footer={<Button onClick={() => setSelectedTask(null)}>关闭</Button>}
|
||
onClose={() => setSelectedTask(null)}
|
||
open={Boolean(selectedTask)}
|
||
size="xl"
|
||
title={<DetailTitle title="发送批次详情" subtitle={selectedTask?.id} />}
|
||
>
|
||
{selectedTask ? (
|
||
<div className="task-detail">
|
||
<DetailSection title="基本信息" extra={<Tag tone={batchTaskStatusMeta[selectedTask.status].tone}>{batchTaskStatusMeta[selectedTask.status].label}{selectedTask.status === 'unknown' ? `（${selectedTask.rawStatus}）` : ''}</Tag>}>
|
||
<DetailInfoGrid
|
||
items={[
|
||
{ label: '发送批次号', value: selectedTask.id },
|
||
{ label: '应用名称', value: selectedTask.applicationName },
|
||
{ label: '提交时间', value: selectedTask.submittedAt },
|
||
{
|
||
label: '发送方式',
|
||
value: (
|
||
<span className="task-send-type">
|
||
<Clock3 size={16} />
|
||
{selectedTask.sendType === 'immediate' ? '立即发送' : '定时发送'}
|
||
</span>
|
||
),
|
||
},
|
||
{ label: '模板字数', value: `${selectedTask.wordCount} 字`, tone: 'primary' },
|
||
{ label: '单个号码计费条数', value: `${Math.max(1, Math.ceil(selectedTask.wordCount / 70))} 条`, tone: 'primary' },
|
||
{ label: '批次总号码数', value: `${selectedTask.totalCount.toLocaleString('zh-CN')} 个`, tone: 'primary' },
|
||
{ label: '总计费条数', value: `${getBillingCount(selectedTask).toLocaleString('zh-CN')} 条`, tone: 'primary' },
|
||
{ label: '模板内容', value: selectedTask.templateContent, full: true },
|
||
...(selectedTask.reviewReason ? [{ label: '审核原因', value: selectedTask.reviewReason, full: true }] : []),
|
||
...(selectedTask.rejectReason ? [{ label: '驳回原因', value: selectedTask.rejectReason, full: true }] : []),
|
||
]}
|
||
/>
|
||
</DetailSection>
|
||
|
||
<DetailSection title="发送统计">
|
||
<DetailProgressStats
|
||
label="发送进度"
|
||
meta={`${selectedTask.sentCount.toLocaleString('zh-CN')} / ${selectedTask.totalCount.toLocaleString('zh-CN')} 已处理`}
|
||
percent={getProgress(selectedTask)}
|
||
status={selectedTask.status === 'completed' ? 'completed' : ['failed', 'rejected', 'canceled'].includes(selectedTask.status) ? 'terminated' : 'sending'}
|
||
stats={[
|
||
{ label: '提交总数量', value: selectedTask.totalCount.toLocaleString('zh-CN') },
|
||
{ label: '提交成功数量', value: selectedTask.totalCount.toLocaleString('zh-CN') },
|
||
{ label: '发送成功数量', value: getDeliveredCount(selectedTask).toLocaleString('zh-CN') },
|
||
{ label: '发送失败数量', value: selectedTask.failedCount.toLocaleString('zh-CN') },
|
||
]}
|
||
/>
|
||
</DetailSection>
|
||
</div>
|
||
) : null}
|
||
</Modal>
|
||
</section>
|
||
);
|
||
}
|