330 lines
10 KiB
TypeScript
330 lines
10 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { useParams } from 'react-router-dom';
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||
import {
|
||
Card,
|
||
Button,
|
||
Space,
|
||
Typography,
|
||
Row,
|
||
Col,
|
||
Statistic,
|
||
Table,
|
||
Tag,
|
||
Divider,
|
||
Descriptions,
|
||
Select,
|
||
Checkbox,
|
||
message,
|
||
Steps,
|
||
Result,
|
||
} from 'antd';
|
||
import {
|
||
FileTextOutlined,
|
||
FileExcelOutlined,
|
||
FilePdfOutlined,
|
||
FileWordOutlined,
|
||
DownloadOutlined,
|
||
PrinterOutlined,
|
||
HistoryOutlined,
|
||
CheckCircleOutlined,
|
||
} from '@ant-design/icons';
|
||
import type { ColumnsType } from 'antd/es/table';
|
||
import { fetchCase, fetchAssessments, fetchReports, generateReport, getReportDownloadUrl } from '../../services/api';
|
||
|
||
const Reports: React.FC = () => {
|
||
const { id = '1' } = useParams();
|
||
const qc = useQueryClient();
|
||
const [generated, setGenerated] = useState(false);
|
||
|
||
const { data: currentCase } = useQuery({ queryKey: ['case', id], queryFn: () => fetchCase(id) });
|
||
const { data: assessData } = useQuery({ queryKey: ['assessments', id], queryFn: () => fetchAssessments(id) });
|
||
const { data: reportsData } = useQuery({ queryKey: ['reports', id], queryFn: () => fetchReports(id) });
|
||
|
||
const allAssessments = assessData?.items ?? [];
|
||
const reportsList = reportsData?.items ?? [];
|
||
|
||
const confirmedAssessments = allAssessments.filter(
|
||
(a) => a.reviewStatus === 'confirmed' && a.assessedAmount > 0,
|
||
);
|
||
const totalConfirmed = confirmedAssessments.reduce(
|
||
(s, a) => s + a.assessedAmount,
|
||
0,
|
||
);
|
||
|
||
const genMutation = useMutation({
|
||
mutationFn: (reportType: string) => generateReport(id, { report_type: reportType }),
|
||
onSuccess: () => {
|
||
setGenerated(true);
|
||
qc.invalidateQueries({ queryKey: ['reports', id] });
|
||
message.success('报告生成成功');
|
||
},
|
||
});
|
||
|
||
if (!currentCase) return null;
|
||
|
||
const historyColumns: ColumnsType<(typeof mockReports)[0]> = [
|
||
{
|
||
title: '类型',
|
||
dataIndex: 'type',
|
||
width: 100,
|
||
render: (t: string) => {
|
||
const map: Record<string, { icon: React.ReactNode; label: string; color: string }> = {
|
||
pdf: { icon: <FilePdfOutlined />, label: 'PDF', color: 'red' },
|
||
excel: { icon: <FileExcelOutlined />, label: 'Excel', color: 'green' },
|
||
word: { icon: <FileWordOutlined />, label: 'Word', color: 'blue' },
|
||
};
|
||
const cfg = map[t] || map.pdf;
|
||
return <Tag icon={cfg.icon} color={cfg.color}>{cfg.label}</Tag>;
|
||
},
|
||
},
|
||
{
|
||
title: '版本',
|
||
dataIndex: 'version',
|
||
width: 80,
|
||
render: (v: number) => `v${v}`,
|
||
},
|
||
{
|
||
title: '生成时间',
|
||
dataIndex: 'createdAt',
|
||
width: 180,
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: 120,
|
||
render: () => (
|
||
<Space>
|
||
<Button type="link" size="small" icon={<DownloadOutlined />}>
|
||
下载
|
||
</Button>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div>
|
||
<Row gutter={16} style={{ marginBottom: 24 }}>
|
||
<Col span={8}>
|
||
<Card variant="borderless">
|
||
<Statistic
|
||
title="已确认被骗金额"
|
||
value={totalConfirmed}
|
||
precision={2}
|
||
prefix="¥"
|
||
valueStyle={{ color: '#cf1322', fontSize: 24 }}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Card variant="borderless">
|
||
<Statistic
|
||
title="已确认交易笔数"
|
||
value={confirmedAssessments.length}
|
||
suffix="笔"
|
||
prefix={<CheckCircleOutlined />}
|
||
valueStyle={{ color: '#52c41a' }}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Card variant="borderless">
|
||
<Statistic
|
||
title="历史报告"
|
||
value={reportsList.length}
|
||
suffix="份"
|
||
prefix={<HistoryOutlined />}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={24}>
|
||
<Col span={14}>
|
||
<Card
|
||
title={
|
||
<Space>
|
||
<FileTextOutlined />
|
||
<span>生成报告</span>
|
||
</Space>
|
||
}
|
||
style={{ marginBottom: 24 }}
|
||
>
|
||
<Descriptions column={2} size="small" style={{ marginBottom: 24 }}>
|
||
<Descriptions.Item label="案件编号">
|
||
{currentCase.caseNo}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="案件名称">
|
||
{currentCase.title}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="受害人">
|
||
{currentCase.victimName}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="承办人">
|
||
{currentCase.handler}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="已确认金额">
|
||
<Typography.Text strong style={{ color: '#cf1322' }}>
|
||
¥{totalConfirmed.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</Typography.Text>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="确认笔数">
|
||
{confirmedAssessments.length} 笔
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
|
||
<Divider />
|
||
|
||
<Typography.Text strong>导出格式：</Typography.Text>
|
||
<div style={{ margin: '12px 0 24px' }}>
|
||
<Space size={16}>
|
||
<Card
|
||
hoverable
|
||
style={{ width: 140, textAlign: 'center' }}
|
||
styles={{ body: { padding: 16 } }}
|
||
>
|
||
<FileExcelOutlined style={{ fontSize: 32, color: '#52c41a' }} />
|
||
<div style={{ marginTop: 8 }}>
|
||
<Typography.Text>Excel 汇总表</Typography.Text>
|
||
</div>
|
||
<div>
|
||
<Checkbox defaultChecked>选择</Checkbox>
|
||
</div>
|
||
</Card>
|
||
<Card
|
||
hoverable
|
||
style={{ width: 140, textAlign: 'center' }}
|
||
styles={{ body: { padding: 16 } }}
|
||
>
|
||
<FilePdfOutlined style={{ fontSize: 32, color: '#cf1322' }} />
|
||
<div style={{ marginTop: 8 }}>
|
||
<Typography.Text>PDF 报告</Typography.Text>
|
||
</div>
|
||
<div>
|
||
<Checkbox defaultChecked>选择</Checkbox>
|
||
</div>
|
||
</Card>
|
||
<Card
|
||
hoverable
|
||
style={{ width: 140, textAlign: 'center' }}
|
||
styles={{ body: { padding: 16 } }}
|
||
>
|
||
<FileWordOutlined style={{ fontSize: 32, color: '#1677ff' }} />
|
||
<div style={{ marginTop: 8 }}>
|
||
<Typography.Text>Word 文书</Typography.Text>
|
||
</div>
|
||
<div>
|
||
<Checkbox>选择</Checkbox>
|
||
</div>
|
||
</Card>
|
||
</Space>
|
||
</div>
|
||
|
||
<Typography.Text strong>报告内容：</Typography.Text>
|
||
<div style={{ margin: '12px 0 24px' }}>
|
||
<Space direction="vertical">
|
||
<Checkbox defaultChecked>被骗金额汇总表</Checkbox>
|
||
<Checkbox defaultChecked>交易明细清单（含证据索引）</Checkbox>
|
||
<Checkbox defaultChecked>资金流转路径图</Checkbox>
|
||
<Checkbox defaultChecked>交易时间轴</Checkbox>
|
||
<Checkbox defaultChecked>认定理由与排除说明</Checkbox>
|
||
<Checkbox>笔录辅助问询建议</Checkbox>
|
||
<Checkbox>原始截图附件</Checkbox>
|
||
</Space>
|
||
</div>
|
||
|
||
{!generated ? (
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
icon={<FileTextOutlined />}
|
||
loading={genMutation.isPending}
|
||
onClick={() => genMutation.mutate('excel')}
|
||
block
|
||
>
|
||
{genMutation.isPending ? '正在生成报告...' : '生成报告'}
|
||
</Button>
|
||
) : (
|
||
<Result
|
||
status="success"
|
||
title="报告已生成"
|
||
subTitle="您可以下载或打印以下报告文件"
|
||
extra={[
|
||
<Button
|
||
key="excel"
|
||
icon={<DownloadOutlined />}
|
||
onClick={() => message.info('演示模式：下载 Excel')}
|
||
>
|
||
下载 Excel
|
||
</Button>,
|
||
<Button
|
||
key="pdf"
|
||
type="primary"
|
||
icon={<DownloadOutlined />}
|
||
onClick={() => message.info('演示模式：下载 PDF')}
|
||
>
|
||
下载 PDF
|
||
</Button>,
|
||
<Button
|
||
key="print"
|
||
icon={<PrinterOutlined />}
|
||
onClick={() => message.info('演示模式：打印')}
|
||
>
|
||
打印
|
||
</Button>,
|
||
]}
|
||
/>
|
||
)}
|
||
</Card>
|
||
</Col>
|
||
|
||
<Col span={10}>
|
||
<Card
|
||
title={
|
||
<Space>
|
||
<HistoryOutlined />
|
||
<span>历史报告</span>
|
||
</Space>
|
||
}
|
||
style={{ marginBottom: 24 }}
|
||
>
|
||
<Table
|
||
rowKey="id"
|
||
columns={historyColumns}
|
||
dataSource={reportsList}
|
||
pagination={false}
|
||
size="small"
|
||
/>
|
||
</Card>
|
||
|
||
<Card title="报告预览" style={{ minHeight: 300 }}>
|
||
<div
|
||
style={{
|
||
background: '#fafafa',
|
||
border: '1px dashed #d9d9d9',
|
||
borderRadius: 8,
|
||
padding: 24,
|
||
textAlign: 'center',
|
||
minHeight: 240,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}
|
||
>
|
||
<FileTextOutlined style={{ fontSize: 48, color: '#bfbfbf' }} />
|
||
<Typography.Text type="secondary" style={{ marginTop: 12 }}>
|
||
{generated
|
||
? '点击左侧"下载"查看完整报告'
|
||
: '生成报告后可在此预览'}
|
||
</Typography.Text>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Reports;
|