378 lines
13 KiB
TypeScript
378 lines
13 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Clock3, Eye, Search } from 'lucide-react';
|
|
import { adminApi, type ReportRecord } from '@/api/adminApi';
|
|
import {
|
|
Breadcrumb,
|
|
Button,
|
|
DateRangeInput,
|
|
Input,
|
|
Modal,
|
|
Pagination,
|
|
Select,
|
|
Table,
|
|
Tag,
|
|
type DateRangeValue,
|
|
type TableColumn,
|
|
} from '@/components/ui';
|
|
|
|
const statusTone: Record<string, 'neutral' | 'info' | 'success' | 'warning' | 'danger'> = {
|
|
pending: 'neutral',
|
|
waiting_material: 'warning',
|
|
waiting_review: 'warning',
|
|
reporting: 'warning',
|
|
exporting: 'info',
|
|
partial: 'warning',
|
|
success: 'success',
|
|
completed: 'success',
|
|
failed: 'danger',
|
|
rejected: 'danger',
|
|
};
|
|
|
|
const statusLabel: Record<string, string> = {
|
|
pending: '待报备',
|
|
waiting_material: '待补充资料',
|
|
waiting_review: '待重新审核',
|
|
reporting: '报备中',
|
|
exporting: '导出中',
|
|
partial: '部分通过',
|
|
approved: '已通过',
|
|
success: '成功',
|
|
completed: '已完成',
|
|
failed: '失败',
|
|
rejected: '已驳回',
|
|
abandoned: '已废弃',
|
|
imported: '已导入',
|
|
deleted: '已删除',
|
|
};
|
|
|
|
const actionLabel: Record<string, string> = {
|
|
create: '创建报备任务',
|
|
manual_status_change: '人工修改状态',
|
|
export: '导出报备资料',
|
|
receipt_import: '导入回执',
|
|
audit_approved_create: '引流审核通过后创建',
|
|
audit_approved_reset: '引流审核通过后重置',
|
|
audit_resubmit_freeze: '引流修改后冻结',
|
|
audit_rejected_freeze: '引流审核驳回后冻结',
|
|
drainage_deleted: '引流信息删除',
|
|
};
|
|
|
|
const sourceEntryLabel: Record<string, string> = {
|
|
enterprise_signature: '企业签名修改',
|
|
report_task: '报备任务修改',
|
|
channel_report: '通道信息修改',
|
|
system: '系统自动处理',
|
|
legacy: '历史记录（入口未记录）',
|
|
};
|
|
|
|
function translateStatus(value?: string | null) {
|
|
if (!value) return '-';
|
|
return statusLabel[value] ?? value;
|
|
}
|
|
|
|
function recordSource(record: ReportRecord) {
|
|
if (record.sourceEntry) return sourceEntryLabel[record.sourceEntry] ?? record.sourceEntry;
|
|
return record.action === 'manual_status_change' ? '历史记录（入口未记录）' : '系统自动处理';
|
|
}
|
|
|
|
function RecordDetailModal({ record, onClose }: { record: ReportRecord; onClose: () => void }) {
|
|
const isDrainage = record.task?.reportType === 'drainage';
|
|
const target = isDrainage ? record.task?.drainageInfo?.url : record.task?.signature?.name;
|
|
return (
|
|
<Modal
|
|
footer={<Button onClick={onClose}>关闭</Button>}
|
|
onClose={onClose}
|
|
open
|
|
size="xl"
|
|
title={
|
|
<div className="template-modal-title">
|
|
<h2>报备记录详情</h2>
|
|
<p>{record.id}</p>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="report-record-detail">
|
|
<div className="detail-grid">
|
|
<div>
|
|
<span>报备任务号</span>
|
|
<strong>{record.taskId}</strong>
|
|
</div>
|
|
<div>
|
|
<span>通道</span>
|
|
<strong>{record.channel?.name ?? '-'}</strong>
|
|
</div>
|
|
<div>
|
|
<span>报备类型</span>
|
|
<strong>{isDrainage ? '引流信息' : '签名'}</strong>
|
|
</div>
|
|
<div>
|
|
<span>报备对象</span>
|
|
<strong>{target ?? '-'}</strong>
|
|
</div>
|
|
<div>
|
|
<span>动作</span>
|
|
<strong>{actionLabel[record.action] ?? record.action}</strong>
|
|
</div>
|
|
<div>
|
|
<span>修改入口</span>
|
|
<strong>{recordSource(record)}</strong>
|
|
</div>
|
|
<div>
|
|
<span>状态前</span>
|
|
<strong>{translateStatus(record.statusBefore)}</strong>
|
|
</div>
|
|
<div>
|
|
<span>状态后</span>
|
|
<strong>{translateStatus(record.statusAfter)}</strong>
|
|
</div>
|
|
<div className="detail-grid__wide">
|
|
<span>失败/备注原因</span>
|
|
<strong>{record.reason ?? '-'}</strong>
|
|
</div>
|
|
</div>
|
|
<section className="report-history">
|
|
<h3>
|
|
<Clock3 size={17} />
|
|
状态历史
|
|
</h3>
|
|
<div>
|
|
<span>{record.createdAt ?? '-'}</span>
|
|
<strong>{actionLabel[record.action] ?? record.action}</strong>
|
|
<em>{record.reason ?? `修改入口：${recordSource(record)}`}</em>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export function AdminReportRecordsPage() {
|
|
const [records, setRecords] = useState<ReportRecord[]>([]);
|
|
const [keyword, setKeyword] = useState('');
|
|
const [dateRange, setDateRange] = useState<DateRangeValue>({});
|
|
const [reportType, setReportType] = useState('all');
|
|
const [batchNo, setBatchNo] = useState('');
|
|
const [operatorKeyword, setOperatorKeyword] = useState('');
|
|
const [statusAfter, setStatusAfter] = useState('all');
|
|
const [sourceEntry, setSourceEntry] = useState('all');
|
|
const [detail, setDetail] = useState<ReportRecord | null>(null);
|
|
const [error, setError] = useState('');
|
|
const [page, setPage] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
const [appliedFilters, setAppliedFilters] = useState({ keyword: '', dateRange: {} as DateRangeValue, reportType: 'all', batchNo: '', operatorKeyword: '', statusAfter: 'all', sourceEntry: 'all' });
|
|
const pageSize = 10;
|
|
|
|
function loadData(targetPage = page, filters = appliedFilters) {
|
|
adminApi
|
|
.listReportRecordsPage({
|
|
keyword: filters.keyword || undefined,
|
|
reportType: filters.reportType === 'all' ? undefined : (filters.reportType as 'signature' | 'drainage'),
|
|
batchNo: filters.batchNo || undefined,
|
|
operatorKeyword: filters.operatorKeyword || undefined,
|
|
statusAfter: filters.statusAfter === 'all' ? undefined : filters.statusAfter,
|
|
sourceEntry: filters.sourceEntry === 'all' ? undefined : filters.sourceEntry,
|
|
createdAtFrom: filters.dateRange.start || undefined,
|
|
createdAtTo: filters.dateRange.end || undefined,
|
|
page: targetPage,
|
|
pageSize,
|
|
})
|
|
.then((result) => {
|
|
setRecords(result.items);
|
|
setTotal(result.total);
|
|
setError('');
|
|
})
|
|
.catch((failure: Error) => setError(failure.message || '报备记录加载失败'));
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadData(page);
|
|
}, [page]);
|
|
|
|
const columns: Array<TableColumn<ReportRecord>> = [
|
|
{
|
|
key: 'task',
|
|
title: '报备任务号',
|
|
width: '160px',
|
|
render: (record) => <strong className="admin-task-id admin-report-record-id" title={record.taskId}>{record.taskId}</strong>,
|
|
},
|
|
{ key: 'channel', title: '通道名称', width: '130px', render: (record) => record.channel?.name ?? '-' },
|
|
{
|
|
key: 'target',
|
|
title: '变更对象',
|
|
width: '230px',
|
|
render: (record) =>
|
|
record.task?.reportType === 'drainage' ? (
|
|
<div className="admin-task-enterprise admin-report-record-target">
|
|
<Tag tone="info">引流信息</Tag>
|
|
<strong>{record.task?.signature?.name ?? '-'}</strong>
|
|
<span>{record.task?.drainageInfo?.url ?? '-'}</span>
|
|
</div>
|
|
) : (
|
|
<div className="admin-task-enterprise admin-report-record-target">
|
|
<Tag tone="neutral">签名</Tag>
|
|
<strong>{record.task?.signature?.name ?? '-'}</strong>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'action',
|
|
title: '变更动作',
|
|
width: '180px',
|
|
render: (record) => (
|
|
<div className="admin-report-record-meta">
|
|
<strong>{actionLabel[record.action] ?? record.action}</strong>
|
|
<span>{recordSource(record)}</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'status',
|
|
title: '状态变化',
|
|
width: '150px',
|
|
render: (record) => (
|
|
<Tag
|
|
tone={statusTone[record.statusAfter ?? 'pending'] ?? 'info'}
|
|
>{`${translateStatus(record.statusBefore)} → ${translateStatus(record.statusAfter)}`}</Tag>
|
|
),
|
|
},
|
|
{
|
|
key: 'operatorTime',
|
|
title: '操作人 / 时间',
|
|
width: '175px',
|
|
render: (record) => (
|
|
<div className="admin-report-record-meta">
|
|
<strong>{record.operator?.displayName ?? record.operator?.username ?? '系统'}</strong>
|
|
<span>{record.createdAt ?? '-'}</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'actions',
|
|
title: '操作',
|
|
align: 'right',
|
|
width: '76px',
|
|
render: (record) => (
|
|
<Button icon={<Eye size={14} />} onClick={() => setDetail(record)} size="sm" variant="ghost">
|
|
详情
|
|
</Button>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="page-stack admin-sms-task-page report-record-page">
|
|
<div className="page-heading">
|
|
<div>
|
|
<Breadcrumb items={['报备工作台', '状态记录']} />
|
|
<h1>状态记录</h1>
|
|
</div>
|
|
</div>
|
|
{error ? <p className="form-error">{error}</p> : null}
|
|
|
|
<div className="surface admin-task-filter">
|
|
<Input
|
|
label="报备任务号/通道/动作/备注"
|
|
onChange={(event) => setKeyword(event.target.value)}
|
|
placeholder="请输入报备任务号、通道、动作或备注"
|
|
value={keyword}
|
|
/>
|
|
<Select
|
|
label="报备类型"
|
|
onChange={(event) => setReportType(event.target.value)}
|
|
options={[
|
|
{ label: '全部类型', value: 'all' },
|
|
{ label: '签名报备', value: 'signature' },
|
|
{ label: '引流信息报备', value: 'drainage' },
|
|
]}
|
|
value={reportType}
|
|
/>
|
|
<Input
|
|
label="报备批次号"
|
|
onChange={(event) => setBatchNo(event.target.value)}
|
|
placeholder="输入批次号"
|
|
value={batchNo}
|
|
/>
|
|
<Input
|
|
label="操作人"
|
|
onChange={(event) => setOperatorKeyword(event.target.value)}
|
|
placeholder="姓名或账号"
|
|
value={operatorKeyword}
|
|
/>
|
|
<Select
|
|
label="变更后状态"
|
|
onChange={(event) => setStatusAfter(event.target.value)}
|
|
options={[
|
|
{ label: '全部状态', value: 'all' },
|
|
{ label: '未报备', value: 'pending' },
|
|
{ label: '报备中', value: 'reporting' },
|
|
{ label: '报备通过', value: 'approved' },
|
|
{ label: '报备失败', value: 'failed' },
|
|
{ label: '已放弃', value: 'abandoned' },
|
|
]}
|
|
value={statusAfter}
|
|
/>
|
|
<Select
|
|
label="修改入口"
|
|
onChange={(event) => setSourceEntry(event.target.value)}
|
|
options={[
|
|
{ label: '全部入口', value: 'all' },
|
|
{ label: '企业签名修改', value: 'enterprise_signature' },
|
|
{ label: '通道报备明细', value: 'report_task' },
|
|
{ label: '通道详情', value: 'channel_report' },
|
|
{ label: '系统自动处理', value: 'system' },
|
|
]}
|
|
value={sourceEntry}
|
|
/>
|
|
<DateRangeInput label="提交时间" onChange={setDateRange} value={dateRange} />
|
|
<div className="admin-task-filter__actions">
|
|
<Button
|
|
icon={<Search size={16} />}
|
|
onClick={() => {
|
|
const filters = { keyword: keyword.trim(), dateRange, reportType, batchNo: batchNo.trim(), operatorKeyword: operatorKeyword.trim(), statusAfter, sourceEntry };
|
|
setAppliedFilters(filters);
|
|
if (page !== 1) setPage(1);
|
|
else loadData(1, filters);
|
|
}}
|
|
>
|
|
查询
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
setKeyword('');
|
|
setDateRange({});
|
|
setReportType('all');
|
|
setBatchNo('');
|
|
setOperatorKeyword('');
|
|
setStatusAfter('all');
|
|
setSourceEntry('all');
|
|
const filters = { keyword: '', dateRange: {} as DateRangeValue, reportType: 'all', batchNo: '', operatorKeyword: '', statusAfter: 'all', sourceEntry: 'all' };
|
|
setAppliedFilters(filters);
|
|
if (page !== 1) setPage(1);
|
|
else loadData(1, filters);
|
|
}}
|
|
variant="ghost"
|
|
>
|
|
重置
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="surface admin-task-table-card report-task-table-card">
|
|
<Table columns={columns} data={records} emptyText="暂无报备记录" pagination={false} rowKey="id" />
|
|
</div>
|
|
<Pagination
|
|
nextDisabled={page * pageSize >= total}
|
|
onNext={() => setPage((current) => current + 1)}
|
|
onPageChange={setPage}
|
|
onPrevious={() => setPage((current) => Math.max(1, current - 1))}
|
|
page={page}
|
|
previousDisabled={page <= 1}
|
|
total={total}
|
|
totalPages={Math.max(1, Math.ceil(total / pageSize))}
|
|
/>
|
|
|
|
{detail ? <RecordDetailModal onClose={() => setDetail(null)} record={detail} /> : null}
|
|
</section>
|
|
);
|
|
}
|