99 lines
7.7 KiB
TypeScript
99 lines
7.7 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { Check, Eye, Search, X } from 'lucide-react';
|
|
import { adminApi, type FileRef, type SmsDrainageInfo } from '@/api/adminApi';
|
|
import { AuditReviewInfo, Breadcrumb, Button, FileActions, Input, Modal, Select, Table, Tabs, Tag, Textarea, type TableColumn } from '@/components/ui';
|
|
import { formatDateTime } from '@/utils/dateTime';
|
|
import { ReportImportAuditPanel } from './ReportImportAuditPanel';
|
|
|
|
const statusMeta: Record<string, { label: string; tone: 'neutral' | 'info' | 'success' | 'danger' }> = {
|
|
pending: { label: '待审核', tone: 'info' },
|
|
approved: { label: '已通过', tone: 'success' },
|
|
rejected: { label: '已驳回', tone: 'danger' },
|
|
deleted: { label: '已删除', tone: 'neutral' },
|
|
};
|
|
|
|
function fileRef(value: unknown): FileRef | null {
|
|
if (!value || typeof value !== 'object' || Array.isArray(value)) return null;
|
|
const item = value as Record<string, unknown>;
|
|
const fileObjectId = String(item.fileObjectId ?? '');
|
|
const fileName = String(item.fileName ?? '');
|
|
return fileObjectId && fileName ? { fileObjectId, fileName, contentType: item.contentType ? String(item.contentType) : undefined } : null;
|
|
}
|
|
|
|
function DrainageDetail({ item, onClose }: { item: SmsDrainageInfo; onClose: () => void }) {
|
|
const values = item.reportValues && typeof item.reportValues === 'object' ? item.reportValues : {};
|
|
const meta = statusMeta[item.auditStatus] ?? { label: item.auditStatus, tone: 'neutral' as const };
|
|
return <Modal footer={<Button onClick={onClose}>关闭</Button>} onClose={onClose} open size="xl" title="引流信息审核详情">
|
|
<div className="page-stack">
|
|
<div className="detail-grid">
|
|
<div><span>企业</span><strong>{item.tenant?.name ?? item.tenantId}</strong></div>
|
|
<div><span>应用</span><strong>{item.application?.name ?? '-'}</strong></div>
|
|
<div><span>所属签名</span><strong>{item.signature?.name ?? item.signatureId}</strong></div>
|
|
<div><span>审核状态</span><Tag tone={meta.tone}>{meta.label}</Tag></div>
|
|
<div><span>站名称</span><strong>{item.siteName}</strong></div>
|
|
<div><span>引流地址</span><strong>{item.url}</strong></div>
|
|
<div><span>提交时间</span><strong>{formatDateTime(item.submittedAt)}</strong></div>
|
|
<AuditReviewInfo targetId={item.id} targetType="sms_drainage_info" />
|
|
<div className="detail-grid__wide"><span>备注</span><strong>{item.remark || '-'}</strong></div>
|
|
{item.rejectReason ? <div className="detail-grid__wide"><span>驳回原因</span><strong>{item.rejectReason}</strong></div> : null}
|
|
</div>
|
|
<div className="surface" style={{ padding: 16 }}>
|
|
<strong>通道动态报备资料</strong>
|
|
<div className="detail-grid" style={{ marginTop: 12 }}>
|
|
{Object.keys(values).length ? Object.entries(values).map(([key, value]) => {
|
|
const file = fileRef(value);
|
|
return <div key={key}><span>{key}</span><strong>{file ? <FileActions file={file} /> : String(value ?? '-')}</strong></div>;
|
|
}) : <span className="muted">无</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>;
|
|
}
|
|
|
|
export function AdminDrainageAuditPage() {
|
|
const [items, setItems] = useState<SmsDrainageInfo[]>([]);
|
|
const [keyword, setKeyword] = useState('');
|
|
const [status, setStatus] = useState('pending');
|
|
const [detail, setDetail] = useState<SmsDrainageInfo>();
|
|
const [rejectTarget, setRejectTarget] = useState<SmsDrainageInfo>();
|
|
const [reason, setReason] = useState('');
|
|
const [error, setError] = useState('');
|
|
|
|
function loadData() {
|
|
adminApi.listDrainageInfos({ keyword, status: status === 'all' ? undefined : status })
|
|
.then((records) => { setItems(records); setError(''); })
|
|
.catch((failure: Error) => setError(failure.message || '引流信息审核列表加载失败'));
|
|
}
|
|
|
|
useEffect(loadData, [keyword, status]);
|
|
|
|
async function approve(item: SmsDrainageInfo) {
|
|
try { await adminApi.approveDrainageInfo(item.id); loadData(); } catch (failure) { setError(failure instanceof Error ? failure.message : '引流信息审核通过失败'); }
|
|
}
|
|
|
|
async function reject() {
|
|
if (!rejectTarget || !reason.trim()) return;
|
|
try { await adminApi.rejectDrainageInfo(rejectTarget.id, reason.trim()); setRejectTarget(undefined); setReason(''); loadData(); } catch (failure) { setError(failure instanceof Error ? failure.message : '引流信息审核驳回失败'); }
|
|
}
|
|
|
|
const columns = useMemo<Array<TableColumn<SmsDrainageInfo>>>(() => [
|
|
{ key: 'siteName', title: '站名称/引流地址', render: (record) => <div className="admin-task-enterprise"><strong>{record.siteName}</strong><span>{record.url}</span></div> },
|
|
{ key: 'signature', title: '所属签名', render: (record) => record.signature?.name ?? record.signatureId },
|
|
{ key: 'tenant', title: '企业/应用', render: (record) => <div className="admin-task-enterprise"><strong>{record.tenant?.name ?? record.tenantId}</strong><span>{record.application?.name ?? '-'}</span></div> },
|
|
{ key: 'submittedAt', title: '提交时间', render: (record) => formatDateTime(record.submittedAt) },
|
|
{ key: 'status', title: '状态', render: (record) => { const meta = statusMeta[record.auditStatus] ?? { label: record.auditStatus, tone: 'neutral' as const }; return <Tag tone={meta.tone}>{meta.label}</Tag>; } },
|
|
{ key: 'actions', title: '操作', align: 'right', render: (record) => <div className="table-actions"><Button icon={<Eye size={15} />} onClick={() => setDetail(record)} size="sm" variant="ghost">详情</Button><Button disabled={record.auditStatus !== 'pending'} icon={<Check size={15} />} onClick={() => void approve(record)} size="sm" variant="success">通过</Button><Button disabled={record.auditStatus !== 'pending'} icon={<X size={15} />} onClick={() => setRejectTarget(record)} size="sm" variant="danger">驳回</Button></div> },
|
|
], []);
|
|
|
|
return <section className="page-stack admin-template-audit-page">
|
|
<div className="page-heading"><div><Breadcrumb items={['审核中心', '引流信息审核']} /><h1>引流信息审核</h1></div></div>
|
|
{error ? <p className="form-error">{error}</p> : null}
|
|
<Tabs items={[
|
|
{ label: '单条引流信息审核', value: 'single', content: <div className="page-stack"><div className="surface audit-filter-card"><div className="audit-filter-grid audit-filter-grid--template"><Input label="搜索" onChange={(event) => setKeyword(event.target.value)} placeholder="搜索企业、应用、签名、站点或网址" prefix={<Search size={16} />} value={keyword} /><Select label="审核状态" onChange={(event) => setStatus(event.target.value)} options={[{ label: '全部状态', value: 'all' }, { label: '待审核', value: 'pending' }, { label: '已通过', value: 'approved' }, { label: '已驳回', value: 'rejected' }]} value={status} /><div className="audit-filter-actions"><Button icon={<Search size={17} />} onClick={loadData}>查询</Button><Button onClick={() => { setKeyword(''); setStatus('pending'); }} variant="ghost">重置</Button></div></div></div><div className="surface"><Table columns={columns} data={items} emptyText="暂无引流信息审核记录" rowKey="id" /></div></div> },
|
|
{ label: '导入批次审核', value: 'import', content: <ReportImportAuditPanel reportType="drainage" /> },
|
|
]} />
|
|
{detail ? <DrainageDetail item={detail} onClose={() => setDetail(undefined)} /> : null}
|
|
<Modal footer={<><Button onClick={() => setRejectTarget(undefined)} variant="ghost">取消</Button><Button disabled={!reason.trim()} onClick={() => void reject()} variant="danger">确认驳回</Button></>} onClose={() => setRejectTarget(undefined)} open={Boolean(rejectTarget)} title="驳回引流信息"><Textarea label="驳回原因" onChange={(event) => setReason(event.target.value)} rows={4} value={reason} /></Modal>
|
|
</section>;
|
|
}
|