99 lines
3.7 KiB
TypeScript
99 lines
3.7 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { Search, X } from 'lucide-react';
|
|
import { Breadcrumb, Button, Input, RiskAction, Select, Table, Tag, type TableColumn } from '@/components/ui';
|
|
import { adminApi, type SmsTemplateAudit } from '@/api/adminApi';
|
|
import { formatDateTime } from '@/utils/dateTime';
|
|
|
|
const auditStatusLabelMap: Record<string, string> = {
|
|
pending: '待审核',
|
|
approved: '已通过',
|
|
rejected: '已驳回',
|
|
draft: '草稿',
|
|
};
|
|
|
|
const statusOptions = [
|
|
{ label: '全部状态', value: 'all' },
|
|
{ label: '待审核', value: 'pending' },
|
|
{ label: '已通过', value: 'approved' },
|
|
{ label: '已驳回', value: 'rejected' },
|
|
];
|
|
|
|
export function AdminTemplateAuditPage() {
|
|
const [audits, setAudits] = useState<SmsTemplateAudit[]>([]);
|
|
const [keyword, setKeyword] = useState('');
|
|
const [status, setStatus] = useState('all');
|
|
|
|
useEffect(() => {
|
|
adminApi.listTemplateAudits({ keyword, status })
|
|
.then(setAudits)
|
|
.catch(() => setAudits([]));
|
|
}, [keyword, status]);
|
|
|
|
async function rejectTemplate(id: string) {
|
|
const updated = await adminApi.rejectTemplate(id);
|
|
setAudits((items) => items.map((item) => (item.id === id ? updated : item)));
|
|
}
|
|
|
|
const columns = useMemo<Array<TableColumn<SmsTemplateAudit>>>(
|
|
() => [
|
|
{ key: 'customer', title: '客户', render: (record) => record.tenant?.name ?? record.tenantId },
|
|
{ key: 'application', title: '短信应用', render: (record) => record.application?.name ?? record.applicationId },
|
|
{ key: 'content', title: '短信模板内容', render: (record) => record.content },
|
|
{ key: 'submittedAt', title: '提交时间', render: (record) => formatDateTime(record.createdAt) },
|
|
{
|
|
key: 'status',
|
|
title: '状态',
|
|
render: (record) => (
|
|
<Tag tone={record.auditStatus === 'approved' ? 'success' : record.auditStatus === 'rejected' ? 'danger' : 'info'}>
|
|
{auditStatusLabelMap[record.auditStatus] ?? record.auditStatus}
|
|
</Tag>
|
|
),
|
|
},
|
|
{
|
|
key: 'actions',
|
|
title: '操作',
|
|
align: 'right',
|
|
render: (record) => (
|
|
<div className="table-actions">
|
|
<RiskAction disabled={record.auditStatus !== 'pending'} onCompleted={() => adminApi.listTemplateAudits({ keyword, status }).then(setAudits)} targetId={record.id} targetType="template" />
|
|
<Button
|
|
disabled={record.auditStatus !== 'pending'}
|
|
icon={<X size={15} />}
|
|
onClick={() => void rejectTemplate(record.id)}
|
|
size="sm"
|
|
variant="danger"
|
|
>
|
|
驳回
|
|
</Button>
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
[keyword, status],
|
|
);
|
|
const templateAudits = audits;
|
|
|
|
return (
|
|
<section className="page-stack admin-template-audit-page">
|
|
<div className="page-heading">
|
|
<div>
|
|
<Breadcrumb items={['短信模板审核']} />
|
|
</div>
|
|
</div>
|
|
<div className="surface audit-filter-card">
|
|
<div className="audit-filter-grid audit-filter-grid--template">
|
|
<Input label="搜索" onChange={(event) => setKeyword(event.target.value)} placeholder="搜索客户、应用或模板内容" value={keyword} />
|
|
<Select label="审核状态" onChange={(event) => setStatus(event.target.value)} options={statusOptions} value={status} />
|
|
<div className="audit-filter-actions">
|
|
<Button icon={<Search size={17} />}>查询</Button>
|
|
<Button onClick={() => { setKeyword(''); setStatus('all'); }} variant="ghost">重置</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="surface">
|
|
<Table columns={columns} data={templateAudits} rowKey="id" />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|