TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'shiy' into awen

Browse Source
This commit is contained in:
awen
2025-04-15 23:26:50 +08:00
parent 26635f79e6 9a9ce5fa55
commit 52437e7b91
25 changed files with 1964 additions and 1062 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/_index.tsx
+31 -79
View File
@@ -5,14 +5,14 @@ import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { StatusBadge, links as statusBadgeLinks } from "~/components/ui/StatusBadge";
import { FileTag, links as fileTagLinks } from "~/components/ui/FileTag";
import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
// import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
import { Tag } from "~/components/ui/Tag";
import homeStyles from "~/styles/pages/home.css?url";
import { getDocuments, type DocumentUI } from "~/api/files/documents";
export const links = () => [
{ rel: "stylesheet", href: homeStyles },
...statusBadgeLinks(),
...fileTagLinks(),
...fileTypeTagLinks()
...fileTagLinks()
];
export const meta: MetaFunction = () => {
@@ -30,13 +30,6 @@ interface StatsData {
passRate: number;
}
interface RecentFile {
id: string;
name: string;
type: string;
reviewStatus: string;
updatedAt: string;
}
// interface LoaderData {
// stats: StatsData;
@@ -47,13 +40,22 @@ interface RecentFile {
// 模拟数据，实际项目中应该从API获取
export async function loader() {
try {
// 实际项目中这里应该是 API 调用
// const response = await fetch('/api/dashboard/stats');
// const stats: StatsData = await response.json();
// const filesResponse = await fetch('/api/files/recent');
// const recentFiles: RecentFile[] = await filesResponse.json();
const documentSearchParams = {
page: 1,
pageSize: 10,
order: 'updated_at.desc'
};
// 获取最近文档数据
const responseDocuments = await getDocuments(documentSearchParams);
if (responseDocuments.error) {
console.error('获取最近文档数据失败', responseDocuments.error);
return Response.json({ error: responseDocuments.error }, { status: responseDocuments.status || 500 });
}
const recentFiles = responseDocuments.data?.documents || [];
console.log("recentFiles-------",recentFiles);
// 模拟数据
const stats = {
totalFiles: 156,
@@ -62,43 +64,7 @@ export async function loader() {
passRate: 92.5
} as StatsData;
const recentFiles = [
{
id: "1",
name: "2023年度烟草专卖零售许可证.pdf",
type: "专卖许可证",
reviewStatus: "pass",
updatedAt: "2023-12-24 14:30"
},
{
id: "2",
name: "烟草制品购销合同(2023-12).docx",
type: "合同文档",
reviewStatus: "warning",
updatedAt: "2023-12-23 09:15"
},
{
id: "3",
name: "专卖管理处罚决定书(2023-145).pdf",
type: "行政处罚决定书",
reviewStatus: "fail",
updatedAt: "2023-12-22 16:45"
},
{
id: "4",
name: "2023年第四季度采购合同.docx",
type: "合同文档",
reviewStatus: "pass",
updatedAt: "2023-12-20 11:20"
},
{
id: "5",
name: "广告宣传协议书.pdf",
type: "合同文档",
reviewStatus: "pass",
updatedAt: "2023-12-18 15:30"
}
] as RecentFile[];
return Response.json({ stats, recentFiles });
} catch (error) {
@@ -117,14 +83,6 @@ export default function Index() {
return (
<div className="dashboard-container">
{/* 页面标识 */}
<div className="mb-4 p-3 bg-yellow-100 border border-yellow-300 rounded text-yellow-800">
<h3 className="font-bold text-lg">当前页面: 首页 (_index.tsx)</h3>
<p>如果你看到这个提示，说明你正在浏览首页，而不是评查点列表页面。</p>
<div className="mt-2">
<a href="/debug" className="text-blue-600 hover:underline">查看路由诊断页面</a> |
<a href="/rules" className="ml-2 text-blue-600 hover:underline">通过原生链接访问评查点列表</a>
</div>
</div>
{/* 统计卡片区域 */}
<Card title="统计信息" icon="ri-bar-chart-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
@@ -158,13 +116,13 @@ export default function Index() {
{/* 快捷访问区域 */}
<Card title="快捷访问" icon="ri-speed-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
<div className="shortcut-grid">
<ShortcutItem icon="ri-upload-cloud-line" label="上传文件" to="/files/new" />
<ShortcutItem icon="ri-file-list-3-line" label="文件列表" to="/files" />
<ShortcutItem icon="ri-upload-cloud-line" label="上传文件" to="/files/upload" />
<ShortcutItem icon="ri-file-list-3-line" label="文件列表" to="/documents" />
<ShortcutItem icon="ri-list-check-2" label="评查点管理" to="/rules" />
<ShortcutItem icon="ri-folder-open-line" label="评查点分组" to="/rule-groups" />
<ShortcutItem icon="ri-file-chart-line" label="评查详情" to="/reviews" />
<ShortcutItem icon="ri-file-list-line" label="文档类型" to="/doc-types" />
<ShortcutItem icon="ri-settings-3-line" label="系统设置" to="/settings" />
<ShortcutItem icon="ri-file-list-line" label="文档类型" to="/document-types" />
{/* <ShortcutItem icon="ri-settings-3-line" label="系统设置" to="/settings" /> */}
<ShortcutItem icon="ri-chat-1-line" label="提示词管理" to="/prompts" />
</div>
</Card>
@@ -173,11 +131,11 @@ export default function Index() {
<Card
title="最近文档"
icon="ri-file-list-3-line"
extra={<Button to="/files" size="small">查看全部</Button>}
extra={<Button to="/documents" size="small">查看全部</Button>}
className="mt-6"
>
<div className="doc-list">
{recentFiles.map((file: RecentFile) => (
{recentFiles.map((file: DocumentUI) => (
<div key={file.id} className="doc-item">
<div className="doc-info">
<FileTag
@@ -191,22 +149,16 @@ export default function Index() {
<div>
<div className="doc-name">{file.name}</div>
<div className="doc-meta">
<FileTypeTag
type={file.type === "合同文档" ? "sales-contract" :
file.type === "专卖许可证" ? "license" :
file.type === "行政处罚决定书" ? "punishment" : "agreement"}
text={file.type}
size="sm"
showIcon={false}
className="mr-2"
/>
<Tag size="sm" className="mr-2">
{file.typeName}
</Tag>
<span className="text-gray-500">·</span>
<span className="ml-2 text-gray-500">{file.updatedAt}</span>
</div>
</div>
</div>
<div className="doc-status">
<StatusBadge status={file.reviewStatus} />
<StatusBadge status={file.fileStatus} />
</div>
</div>
))}
app/routes/documents._index.tsx
+171 -76
View File
@@ -5,12 +5,11 @@ import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { Table } from "~/components/ui/Table";
import { Pagination } from "~/components/ui/Pagination";
import { StatusBadge } from "~/components/ui/StatusBadge";
import { FileTypeTag } from "~/components/ui/FileTypeTag";
import { FileTag } from "~/components/ui/FileTag";
import { FilterPanel, FilterSelect, SearchFilter, DateRangeFilter } from "~/components/ui/FilterPanel";
import documentsIndexStyles from "~/styles/pages/documents_index.css?url";
import { getDocuments, deleteDocument, type DocumentUI, getFileDownloadUrl } from "~/api/files/documents";
import { getDocuments, deleteDocument, type DocumentUI } from "~/api/files/documents";
import { getDocumentTypes } from "~/api/document-types/document-types";
// 导入样式
@@ -34,8 +33,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const search = url.searchParams.get("search") || "";
const documentType = url.searchParams.get("documentType") || "";
const status = url.searchParams.get("status") || "";
const auditStatus = url.searchParams.get("auditStatus") || "";
const documentNumber = url.searchParams.get("documentNumber") || "";
const fileStatus = url.searchParams.get("fileStatus") || "";
const dateFrom = url.searchParams.get("dateFrom") || "";
const dateTo = url.searchParams.get("dateTo") || "";
const page = parseInt(url.searchParams.get("page") || "1", 10);
@@ -46,7 +46,8 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
name: search || undefined,
documentNumber: documentNumber || undefined,
documentType: documentType || undefined,
status: status || undefined,
auditStatus: auditStatus || undefined,
fileStatus: fileStatus || undefined,
dateFrom: dateFrom || undefined,
dateTo: dateTo || undefined,
page,
@@ -59,8 +60,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
throw new Error(documentsResponse.error);
}
// 获取文档类型列表，用于筛选条件
const typesResponse = await getDocumentTypes();
// 获取文档类型列表，用于筛选条件，设置较大的pageSize确保获取所有数据
const typesResponse = await getDocumentTypes({ pageSize: 500 });
// console.log('typesResponse-----',typesResponse);
const documentTypes = typesResponse.data?.types || [];
const documentTypeOptions = documentTypes.map(type => ({
value: type.id,
@@ -113,15 +115,44 @@ export const action = async ({ request }: ActionFunctionArgs) => {
return Response.json({ success: false, message: "未知操作" }, { status: 400 });
};
// 文档状态选项
const documentStatusOptions = [
{ value: "waiting", label: "待审核" },
{ value: "processing", label: "审核中" },
{ value: "pass", label: "通过" },
{ value: "warning", label: "警告" },
{ value: "fail", label: "不通过" },
// 审核状态筛选选项
const auditStatusOptions = [
// { value: "", label: "全部" },
{ value: "-1", label: "不通过" },
{ value: "0", label: "待审核" },
{ value: "1", label: "通过" },
{ value: "2", label: "警告" },
{ value: "3", label: "审核中" },
];
// 文件处理状态选项
const fileProcessingStatusOptions = [
{ value: "Waiting", label: "上传中", icon: "ri-loader-line", color: "blue" },
{ value: "Cutting", label: "切分中", icon: "ri-loader-line", color: "purple" },
{ value: "Extractioning", label: "抽取中", icon: "ri-loader-line", color: "cyan" },
{ value: "Evaluationing", label: "评查中", icon: "ri-loader-line", color: "teal" },
{ value: "Processed", label: "已完成", icon: "ri-check-line", color: "green" },
];
// 文件状态筛选选项
const fileStatusOptions = [
// { value: "", label: "全部" },
{ value: "Waiting", label: "上传中" },
{ value: "Cutting", label: "切分中" },
{ value: "Extractioning", label: "抽取中" },
{ value: "Evaluationing", label: "评查中" },
{ value: "Processed", label: "已完成" },
];
// 审核状态选项及样式
const auditStatusMapping: Record<string, { label: string; color: string; icon: string }> = {
"-1": { label: "不通过", color: "red", icon: "ri-close-line" },
"0": { label: "待审核", color: "blue", icon: "ri-time-line" },
"1": { label: "通过", color: "green", icon: "ri-check-line" },
"2": { label: "警告", color: "yellow", icon: "ri-alert-line" },
"3": { label: "审核中", color: "purple", icon: "ri-search-line" },
};
// 格式化文件大小
const formatFileSize = (bytes: number) => {
if (bytes === 0) return "0 Bytes";
@@ -154,8 +185,9 @@ export default function DocumentsIndex() {
// 从URL获取当前筛选条件
const search = searchParams.get("search") || "";
const documentType = searchParams.get("documentType") || "";
const status = searchParams.get("status") || "";
const auditStatus = searchParams.get("auditStatus") || "";
const documentNumber = searchParams.get("documentNumber") || "";
const fileStatus = searchParams.get("fileStatus") || "";
const dateFrom = searchParams.get("dateFrom") || "";
const dateTo = searchParams.get("dateTo") || "";
const currentPage = parseInt(searchParams.get("page") || "1", 10);
@@ -217,9 +249,9 @@ export default function DocumentsIndex() {
const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const params = new URLSearchParams(searchParams);
if (e.target.value) {
params.set("status", e.target.value);
params.set("auditStatus", e.target.value);
} else {
params.delete("status");
params.delete("auditStatus");
}
params.set("page", "1"); // 重置页码
setSearchParams(params);
@@ -315,7 +347,11 @@ export default function DocumentsIndex() {
};
// 删除文档
const handleDelete = (id: string, name: string) => {
const handleDelete = (id: string, name: string, fileStatus: string) => {
if (fileStatus !== 'Processed') {
alert('文档正在处理中，不能删除');
return;
}
if (window.confirm(`确认删除文档 "${name}"？`)) {
// 使用fetcher提交表单
const formData = new FormData();
@@ -336,6 +372,16 @@ export default function DocumentsIndex() {
return;
}
// 检查是否有正在处理中的文件
const hasProcessingFiles = documents.some((doc: DocumentUI) =>
selectedRowKeys.includes(doc.id.toString()) && doc.fileStatus !== 'Processed'
);
if (hasProcessingFiles) {
alert('存在服务器未处理完成的文件，请重新选择需要删除的文件');
return;
}
if (window.confirm(`确认删除选中的 ${selectedRowKeys.length} 个文档？`)) {
// 使用fetcher提交表单
const formData = new FormData();
@@ -353,6 +399,18 @@ export default function DocumentsIndex() {
}
};
// 处理文件状态变更
const handleFileStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const params = new URLSearchParams(searchParams);
if (e.target.value) {
params.set("fileStatus", e.target.value);
} else {
params.delete("fileStatus");
}
params.set("page", "1"); // 重置页码
setSearchParams(params);
};
// 表格列定义
const columns = [
{
@@ -376,6 +434,7 @@ export default function DocumentsIndex() {
{
title: "文档名称",
key: "name",
width:'25%',
render: (_: unknown, record: DocumentUI) => (
<div className="flex items-center m-1">
<FileTag
@@ -384,10 +443,10 @@ export default function DocumentsIndex() {
showText={false}
showBackground={false}
size="lg"
className="mr-2"
className="mr-2 flex-shrink-0"
/>
<div>
<span className="file-name" title={record.name}>{record.name}</span>
<div className="overflow-hidden">
<span className="file-name break-words block" title={record.name}>{record.name}</span>
<div className="mt-2 flex inline-block">
<FileTypeTag
type={record.type}
@@ -407,6 +466,7 @@ export default function DocumentsIndex() {
{
title: "文档编号",
key: "documentNumber",
width:'10%',
render: (_: unknown, record: DocumentUI) => (
<span className="document-number">{record.documentNumber}</span>
)
@@ -414,20 +474,49 @@ export default function DocumentsIndex() {
{
title: "文件大小",
key: "size",
width: "100px",
width: "10%",
render: (_: unknown, record: DocumentUI) => formatFileSize(record.size)
},
{
title: "文件状态",
key: "fileStatus",
width:'10%',
render: (_: unknown, record: DocumentUI) => {
// 处理fileStatus为null或undefined的情况
// console.log('fileStatus',record.fileStatus)
const fileStatus = record.fileStatus || "Processed";
const status = fileProcessingStatusOptions.find(s => s.value === fileStatus) ||
fileProcessingStatusOptions[0];
const isSpinning = fileStatus !== "Processed";
return (
<div className={`inline-flex items-center px-2 py-1 rounded-full text-xs bg-${status.color}-100 text-${status.color}-800`}>
<i className={`${status.icon} ${isSpinning ? "animate-spin" : ""} mr-1`}></i>
<span>{status.label}</span>
</div>
);
}
},
{
title: "审核状态",
key: "status",
render: (_: unknown, record: DocumentUI) => (
<StatusBadge status={record.status} showIcon={false} />
)
key: "auditStatus",
width:"10%",
render: (_: unknown, record: DocumentUI) => {
// 处理auditStatus为null或undefined的情况，默认为0（待审核）
const auditStatus = record.auditStatus != null ? record.auditStatus : 0;
const statusKey = auditStatus.toString();
const statusInfo = auditStatusMapping[statusKey] || auditStatusMapping["0"];
return (
<div className={`inline-flex items-center px-2 py-1 rounded-full text-xs bg-${statusInfo.color}-100 text-${statusInfo.color}-800`}>
<i className={`${statusInfo.icon} mr-1`}></i>
<span>{statusInfo.label}</span>
</div>
);
}
},
{
title: "问题数量",
key: "issues",
width:"60px",
width:"5%",
render: (_: unknown, record: DocumentUI) => (
record.issues === null ? "-" : record.issues
)
@@ -435,23 +524,24 @@ export default function DocumentsIndex() {
{
title: "上传时间",
key: "uploadTime",
width:"10%",
render: (_: unknown, record: DocumentUI) => record.uploadTime
},
{
title: "操作",
key: "actions",
width: "280px",
width: "20%",
render: (_: unknown, record: DocumentUI) => (
<div className="operations-cell">
{record.status === "waiting" ? (
{(record.auditStatus === 0 || record.auditStatus == null) ? (
<Link
to={`/documents/${record.id}/review`}
to={`/reviews?id=${record.id}`}
className="mr-1 hover:underline"
>
<i className="ri-play-circle-line"></i>
开始审核
</Link>
) : record.status === "processing" ? (
) : record.auditStatus === 3 ? (
<Link
to={`/documents/${record.id}/progress`}
className="mr-1 hover:underline"
@@ -486,7 +576,7 @@ export default function DocumentsIndex() {
<button
type="button"
className="text-error hover:underline hover:text-red-700"
onClick={() => handleDelete(record.id.toString(), record.name)}
onClick={() => handleDelete(record.id.toString(), record.name, record.fileStatus)}
>
<i className="ri-delete-bin-line"></i>
删除
@@ -505,7 +595,7 @@ export default function DocumentsIndex() {
<Button
type="primary"
icon="ri-upload-line"
to="/documents/upload"
to="/files/upload"
className="hover:text-white"
>
上传文档
@@ -539,51 +629,56 @@ export default function DocumentsIndex() {
}
noActionDivider={true}
>
<SearchFilter
label="文档名称"
placeholder="请输入文档名称"
value={search}
onSearch={handleNameSearch}
instantSearch={true}
className="mr-2 w-50"
/>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
<SearchFilter
label="文档名称"
placeholder="请输入文档名称"
value={search}
onSearch={handleNameSearch}
instantSearch={true}
/>
<SearchFilter
label="文档编号"
placeholder="请输入文档编号"
value={documentNumber}
onSearch={handleDocumentNumberChange}
instantSearch={true}
className="mr-2 w-50"
/>
<FilterSelect
label="文档类型"
name="documentType"
value={documentType}
options={documentTypeOptions}
onChange={handleDocumentTypeChange}
className="mr-2 w-30"
/>
<FilterSelect
label="审核状态"
name="status"
value={status}
options={documentStatusOptions}
onChange={handleStatusChange}
className="mr-2 w-50"
/>
<DateRangeFilter
label="上传时间"
startDate={dateFrom}
endDate={dateTo}
onStartDateChange={(value) => handleDateChange('dateFrom', value)}
onEndDateChange={(value) => handleDateChange('dateTo', value)}
className="flex-1"
simple={true}
/>
<SearchFilter
label="文档编号"
placeholder="请输入文档编号"
value={documentNumber}
onSearch={handleDocumentNumberChange}
instantSearch={true}
/>
<FilterSelect
label="文档类型"
name="documentType"
value={documentType}
options={documentTypeOptions}
onChange={handleDocumentTypeChange}
/>
<FilterSelect
label="文件状态"
name="fileStatus"
value={fileStatus}
options={fileStatusOptions}
onChange={handleFileStatusChange}
/>
<FilterSelect
label="审核状态"
name="auditStatus"
value={auditStatus}
options={auditStatusOptions}
onChange={handleStatusChange}
/>
<DateRangeFilter
label="上传时间"
startDate={dateFrom}
endDate={dateTo}
onStartDateChange={(value) => handleDateChange('dateFrom', value)}
onEndDateChange={(value) => handleDateChange('dateTo', value)}
simple={true}
/>
</div>
</FilterPanel>
app/routes/documents.edit.tsx
+75 -58
View File
@@ -19,22 +19,31 @@ export const meta: MetaFunction = () => {
];
};
// 文档状态定义
enum DocumentStatus {
WAITING = "waiting",
PROCESSING = "processing",
PASS = "pass",
WARNING = "warning",
FAIL = "fail"
// 文档审核状态定义
enum DocumentAuditStatus {
FAIL = -1,
WAITING = 0,
PASS = 1,
WARNING = 2,
PROCESSING = 3
}
// 文档状态对应的中文标签
const STATUS_LABELS: Record<DocumentStatus, string> = {
[DocumentStatus.WAITING]: "待审核",
[DocumentStatus.PROCESSING]: "审核中",
[DocumentStatus.PASS]: "通过",
[DocumentStatus.WARNING]: "警告",
[DocumentStatus.FAIL]: "不通过"
const STATUS_LABELS: Record<DocumentAuditStatus, string> = {
[DocumentAuditStatus.FAIL]: "不通过",
[DocumentAuditStatus.WAITING]: "待审核",
[DocumentAuditStatus.PASS]: "通过",
[DocumentAuditStatus.WARNING]: "警告",
[DocumentAuditStatus.PROCESSING]: "审核中"
};
// 文档状态样式配置
const STATUS_STYLES: Record<number, { color: string; icon: string }> = {
[-1]: { color: "red", icon: "ri-close-line" },
[0]: { color: "blue", icon: "ri-time-line" },
[1]: { color: "green", icon: "ri-check-line" },
[2]: { color: "yellow", icon: "ri-alert-line" },
[3]: { color: "purple", icon: "ri-search-line" }
};
// 格式化文件大小
@@ -62,7 +71,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
// 并行获取文档详情和文档类型列表
const [documentResponse, documentTypesResponse] = await Promise.all([
getDocument(id),
getDocumentTypes()
getDocumentTypes({ pageSize: 500 })
]);
if (documentResponse.error) {
@@ -99,31 +108,31 @@ export async function action({ request }: ActionFunctionArgs) {
// 从表单数据中提取字段
const type = formData.get("type_id") as string;
const documentNumber = formData.get("document_number") as string;
const status = formData.get("status") as DocumentStatus;
const auditStatus = parseInt(formData.get("audit_status") as string);
const isTest = formData.get("is_test_document") === "on";
const remark = formData.get("remark") as string;
// 验证必填字段
if (!type || !status) {
if (!type || auditStatus === undefined || isNaN(auditStatus)) {
return Response.json(
{
error: "缺少必填字段",
fieldErrors: {
type_id: !type ? "文档类型不能为空" : null,
status: !status ? "状态不能为空" : null
audit_status: (auditStatus === undefined || isNaN(auditStatus)) ? "审核状态不能为空" : null
}
},
{ status: 400 }
);
}
console.log('提交更新:', { type, documentNumber, status, isTest, remark });
console.log('提交更新:', { type, documentNumber, auditStatus, isTest, remark });
// 更新文档
const updateResponse = await updateDocument(id, {
type,
documentNumber,
status,
auditStatus,
isTest,
remark
});
@@ -160,43 +169,40 @@ export default function DocumentEdit() {
}
// 状态
const [localStatus, setLocalStatus] = useState<DocumentStatus>(document.status as DocumentStatus);
const [localStatus, setLocalStatus] = useState<number>(document.auditStatus);
// 处理状态变更
const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setLocalStatus(e.target.value as DocumentStatus);
setLocalStatus(parseInt(e.target.value));
};
// 获取文档类型名称
const getDocumentTypeName = (typeId: string): string => {
const docType = documentTypes.find((type) => (type as any).id.toString() === typeId);
return docType ? (docType as any).name : "未知类型";
const docType = documentTypes.find((type: DocType) => type.id.toString() === typeId);
return docType ? docType.name : "未知类型";
};
// 渲染状态徽章
const renderStatusBadge = (status: string) => {
const statusClasses: Record<string, string> = {
"waiting": "status-badge status-pending",
"processing": "status-badge status-processing",
"pass": "status-badge status-pass",
"warning": "status-badge status-warning",
"fail": "status-badge status-fail"
};
const statusLabel: Record<string, string> = {
"waiting": "待审核",
"processing": "审核中",
"pass": "通过",
"warning": "警告",
"fail": "不通过"
};
const renderStatusBadge = (status: number) => {
const style = STATUS_STYLES[status] || STATUS_STYLES[0];
const label = STATUS_LABELS[status as DocumentAuditStatus] || STATUS_LABELS[DocumentAuditStatus.WAITING];
return (
<span className={statusClasses[status] || "status-badge"}>
{statusLabel[status] || status}
<span className={`status-badge bg-${style.color}-100 text-${style.color}-800`}>
<i className={`${style.icon} mr-1`}></i>
{label}
</span>
);
};
// 在新窗口打开文档预览
const openPreview = () => {
// 假设有一个预览URL的格式，比如 /preview?path=xxx
console.log('documentstest', document);
const previewUrl = `/preview?path=${encodeURIComponent(document.path)}&name=${encodeURIComponent(document.name)}`;
window.open(previewUrl, '_blank');
};
return (
<div className="document-edit-page">
@@ -250,7 +256,7 @@ export default function DocumentEdit() {
<span>{formatFileSize(document.size)}</span>
</div>
<div className="meta-item">
{renderStatusBadge(document.status)}
{renderStatusBadge(document.auditStatus)}
</div>
</div>
</div>
@@ -264,14 +270,15 @@ export default function DocumentEdit() {
<div className="grid grid-cols-2 gap-6">
<div className="form-group">
<label htmlFor="type-id" className="form-label">文档类型 <span className="text-red-500">*</span></label>
<select
<select
id="type-id"
name="type_id"
className="form-select"
defaultValue={document.type}
disabled={document.fileStatus !== 'Processed'}
required
>
{documentTypes.map(type => (
{documentTypes.map((type: DocType) => (
<option key={type.id} value={type.id}>{type.name}</option>
))}
</select>
@@ -295,24 +302,24 @@ export default function DocumentEdit() {
</div>
<div className="form-group">
<label htmlFor="status" className="form-label">状态 <span className="text-red-500">*</span></label>
<label htmlFor="audit-status" className="form-label">审核状态 <span className="text-red-500">*</span></label>
<select
id="status"
name="status"
id="audit-status"
name="audit_status"
className="form-select"
value={localStatus}
onChange={handleStatusChange}
required
>
<option value={DocumentStatus.WAITING}>{STATUS_LABELS[DocumentStatus.WAITING]}</option>
<option value={DocumentStatus.PROCESSING}>{STATUS_LABELS[DocumentStatus.PROCESSING]}</option>
<option value={DocumentStatus.PASS}>{STATUS_LABELS[DocumentStatus.PASS]}</option>
<option value={DocumentStatus.WARNING}>{STATUS_LABELS[DocumentStatus.WARNING]}</option>
<option value={DocumentStatus.FAIL}>{STATUS_LABELS[DocumentStatus.FAIL]}</option>
<option value={DocumentAuditStatus.WAITING}>{STATUS_LABELS[DocumentAuditStatus.WAITING]}</option>
<option value={DocumentAuditStatus.PROCESSING}>{STATUS_LABELS[DocumentAuditStatus.PROCESSING]}</option>
<option value={DocumentAuditStatus.PASS}>{STATUS_LABELS[DocumentAuditStatus.PASS]}</option>
<option value={DocumentAuditStatus.WARNING}>{STATUS_LABELS[DocumentAuditStatus.WARNING]}</option>
<option value={DocumentAuditStatus.FAIL}>{STATUS_LABELS[DocumentAuditStatus.FAIL]}</option>
</select>
<div className="text-sm text-secondary mt-1">更改状态可能会影响此文档在列表中的显示和排序</div>
{actionData?.fieldErrors?.status && (
<div className="text-red-500 text-sm mt-1">{actionData.fieldErrors.status}</div>
{actionData?.fieldErrors?.audit_status && (
<div className="text-red-500 text-sm mt-1">{actionData.fieldErrors.audit_status}</div>
)}
</div>
@@ -356,7 +363,7 @@ export default function DocumentEdit() {
<div className="document-preview">
<div className="preview-toolbar">
<div className="flex items-center">
<i className="ri-file-pdf-line text-red-500 mr-1"></i>
<i className={`ri-file-${document.fileType}-line text-${document.fileType === 'pdf' ? 'red' : 'blue'}-500 mr-1`}></i>
<span>{document.name}</span>
</div>
<div>
@@ -364,21 +371,31 @@ export default function DocumentEdit() {
type="default"
size="small"
icon="ri-download-line"
className="mr-2"
>
下载
</Button>
<Button
type="primary"
size="small"
icon="ri-external-link-line"
onClick={openPreview}
>
在新窗口打开
</Button>
</div>
</div>
<div className="preview-content">
<div className="preview-placeholder">
<i className="ri-file-pdf-line"></i>
<i className={`ri-file-${document.fileType}-line`}></i>
<p>预览功能暂不可用</p>
<p className="text-xs mt-2">PDF文件需要外部查看器支持</p>
<p className="text-xs mt-2">点击&quot;在新窗口打开&quot;查看完整文档</p>
<Button
type="primary"
size="small"
icon="ri-external-link-line"
className="mt-4"
onClick={openPreview}
>
在新窗口打开
</Button>
@@ -388,7 +405,7 @@ export default function DocumentEdit() {
</Card>
{/* 修改历史 */}
<Card title="修改历史">
<Card title="修改历史" className="hidden">
<div className="history-timeline">
{[
{
app/routes/files.upload.tsx
+148 -62
View File
@@ -1,5 +1,5 @@
import { useState, useEffect, useRef } from "react";
import { MetaFunction, ActionFunctionArgs, json } from "@remix-run/node";
import { MetaFunction, ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
import { Form, useActionData, useLoaderData } from "@remix-run/react";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
@@ -8,8 +8,17 @@ import { UploadArea, UploadAreaRef } from "~/components/ui/UploadArea";
import { FileProgress} from "~/components/ui/FileProgress";
import { ProcessingSteps, Step } from "~/components/ui/ProcessingSteps";
import uploadStyles from "~/styles/pages/files_upload.css?url";
import { getTodayDocuments, getDocumentTypes, getDocumentsStatus, type Document, type DocumentType, DocumentStatus } from "~/api/files/files-upload";
import { uploadFileToBinary, uploadDocumentToServer } from "~/api/files";
import {
getTodayDocuments,
getDocumentTypes,
getDocumentsStatus,
uploadFileToBinary,
uploadDocumentToServer,
type Document,
type DocumentType,
type FileUploadResponse,
DocumentStatus
} from "~/api/files/files-upload";
export function links() {
return [
@@ -17,6 +26,13 @@ export function links() {
];
}
// 面包屑导航
export const handle = {
breadcrumb: () => {
return '上传文件'
}
}
export const meta: MetaFunction = () => {
return [
{ title: "待审核文件上传 - 中国烟草AI合同及卷宗审核系统" },
@@ -58,21 +74,21 @@ const PRIORITY_TO_CHINESE: Record<Priority, string> = {
[Priority.URGENT]: "紧急"
};
// 处理状态定义
export enum ProcessingStatus {
WAITING = "waiting",
PROCESSING = "processing",
SUCCESS = "success",
ERROR = "error"
}
// 处理步骤状态定义
export enum StepStatus {
CUTTING = "Cutting",
EXTRACTIONING = "extractioning",
REVIEWING = "reviewing",
COMPLETED = "completed"
}
// 模拟API支持的存储类型
const STORAGE_TYPES = [
{ id: "minio", name: "MinIO对象存储" },
{ id: "local", name: "本地文件系统" },
{ id: "s3", name: "Amazon S3" }
];
// 文件上传完成后的操作选项
const AFTER_UPLOAD_OPTIONS = [
{ id: "list", name: "返回文档列表" },
{ id: "stay", name: "留在当前页面" },
{ id: "audit", name: "立即开始审核" }
];
// 上传的文件信息接口
export interface UploadedFile {
@@ -82,7 +98,7 @@ export interface UploadedFile {
type: string;
fileType: FileType;
priority: Priority;
status: ProcessingStatus;
status: DocumentStatus;
uploadTime: string;
processingInfo?: {
progress: number;
@@ -90,26 +106,6 @@ export interface UploadedFile {
};
}
// 文件上传响应接口
interface FileUploadResponse {
success: boolean;
result?: {
id: number;
file_name: string;
file_size: number;
file_url: string;
type_id: number;
type_description: string;
document_number: string | null;
storage_type: string;
is_test_document: boolean;
remark: string | null;
background_processing: boolean;
evaluation_level: string;
};
error: string | null;
}
// 模拟上传文件到服务器的API
async function uploadFileToServer(
binaryData: ArrayBuffer,
@@ -122,7 +118,7 @@ async function uploadFileToServer(
isTestDocument: boolean
): Promise<FileUploadResponse> {
// 在实际应用中，这里会使用fetch或axios发送请求到后端API
console.log(`[模拟API] 上传文件: ${fileName}, 大小: ${binaryData.byteLength} 字节`);
console.log(`[API] 上传文件: ${fileName}, 大小: ${binaryData.byteLength} 字节`);
try {
// 使用封装的上传函数
@@ -137,9 +133,26 @@ async function uploadFileToServer(
isTestDocument
);
return response;
if (response.error) {
console.error('[API] 上传错误:', response.error);
return {
success: false,
error: response.error
};
}
// 确保返回有效的FileUploadResponse对象
if (response.data) {
return response.data;
}
// 如果没有数据，则返回错误
return {
success: false,
error: '上传失败，未获取到响应数据'
};
} catch (error) {
console.error('[模拟API] 上传错误:', error);
console.error('[API] 上传错误:', error);
return {
success: false,
error: error instanceof Error ? error.message : '上传失败'
@@ -183,7 +196,7 @@ export async function action({ request }: ActionFunctionArgs) {
// 如果有错误，返回错误信息
if (Object.keys(errors).length > 0) {
return json({ errors });
return Response.json({ errors });
}
// 获取文件信息
@@ -195,7 +208,7 @@ export async function action({ request }: ActionFunctionArgs) {
// 这里的代码仅用于模拟。在前端组件中，我们将实现实际的文件处理逻辑。
// 模拟文件上传成功响应
return json({
return Response.json({
success: true,
message: "文件上传请求已接收",
fileId: `file_${Date.now()}`,
@@ -204,7 +217,7 @@ export async function action({ request }: ActionFunctionArgs) {
});
} catch (error) {
console.error("文件上传失败:", error);
return json(
return Response.json(
{ success: false, error: "文件上传失败，请重试" },
{ status: 500 }
);
@@ -215,13 +228,15 @@ export async function action({ request }: ActionFunctionArgs) {
type LoaderData = {
documents: Document[];
documentTypes: DocumentType[];
mode: string;
};
// 添加 loader 函数
export async function loader() {
export async function loader({ request }: LoaderFunctionArgs) {
try {
console.log('loader: 开始加载数据...');
// console.log('loader: 开始加载数据...');
const url = new URL(request.url);
const mode = url.searchParams.get("mode") || "create";
// 并行加载文档和文档类型
const [documentsResponse, typesResponse] = await Promise.all([
getTodayDocuments(),
@@ -236,6 +251,7 @@ export async function loader() {
}
return Response.json({
mode,
documents: documentsResponse.data || [],
documentTypes: typesResponse.data || []
});
@@ -254,6 +270,8 @@ export default function FilesUpload() {
const { documents, documentTypes } = useLoaderData<LoaderData>();
// 状态管理
// 高级上传设置
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
const [isTestDocument, setIsTestDocument] = useState(false);
const [fileType, setFileType] = useState<FileType | "">("");
const [priority, setPriority] = useState<Priority>(Priority.NORMAL);
@@ -262,7 +280,7 @@ export default function FilesUpload() {
const [currentFiles, setCurrentFiles] = useState<File[]>([]);
const [uploadProgress, setUploadProgress] = useState(0);
const [uploadSpeed, setUploadSpeed] = useState("0KB/s");
const [uploadStage, setUploadStage] = useState<"idle" | "uploading" | "processing" | "completed">("idle");
const [uploadStage, setUploadStage] = useState<"idle" | "uploading" | "processing" | "completed" | "hadden">("idle");
const [processingSteps, setProcessingSteps] = useState<Step[]>([
{ title: "文件上传", description: "等待上传文件到服务器...", status: "waiting" },
{ title: "文档转换拆分", description: "转换文档格式，拆分文档内容", status: "waiting" },
@@ -310,7 +328,8 @@ export default function FilesUpload() {
useEffect(() => {
console.log('设置上传队列状态检查定时器');
// 设置定时器检查队列中文件的状态
// 设置定时器检查队列中文件的状态,初始先加载一次查询
checkQueueStatus();
statusCheckIntervalRef.current = setInterval(checkQueueStatus, 10000);
// 只在组件卸载时清除
@@ -330,7 +349,7 @@ export default function FilesUpload() {
// 获取所有未完成的文档ID
const incompleteIds = queueFiles
.filter(file => file.status !== DocumentStatus.COMPLETED && file.id)
.filter(file => file.status !== DocumentStatus.PROCESSED && file.id)
.map(file => file.id);
console.log('未完成的文档ID:', incompleteIds);
@@ -466,7 +485,7 @@ export default function FilesUpload() {
type: file.type,
fileType: fileType as FileType,
priority,
status: ProcessingStatus.PROCESSING,
status: DocumentStatus.WAITING,
uploadTime: getCurrentTime(),
processingInfo: {
progress: 0,
@@ -587,7 +606,7 @@ export default function FilesUpload() {
}
// 检查是否所有文件都已完成处理
const allCompleted = response.data.every(doc => doc.status === DocumentStatus.COMPLETED);
const allCompleted = response.data.every(doc => doc.status === DocumentStatus.PROCESSED);
// 更新步骤状态
if (allCompleted) {
@@ -656,7 +675,7 @@ export default function FilesUpload() {
updatedSteps[2].description = "正在抽取评查点...";
break;
case DocumentStatus.REVIEWING:
case DocumentStatus.EVALUATIONING:
updatedSteps[1].status = "done";
updatedSteps[1].description = "文档格式转换完成，内容已拆分";
updatedSteps[2].status = "done";
@@ -665,7 +684,7 @@ export default function FilesUpload() {
updatedSteps[3].description = "正在评查文档...";
break;
case DocumentStatus.COMPLETED:
case DocumentStatus.PROCESSED:
updatedSteps[1].status = "done";
updatedSteps[1].description = "文档格式转换完成，内容已拆分";
updatedSteps[2].status = "done";
@@ -745,7 +764,6 @@ export default function FilesUpload() {
};
// 格式化文件大小显示
const formatFileSize = (bytes: number) => {
if (bytes === 0) return '0 Bytes';
@@ -805,22 +823,32 @@ export default function FilesUpload() {
let statusText = "";
switch(record.status) {
case DocumentStatus.WAITING:
statusClass = "status-processing";
statusIcon = "ri-loader-4-line";
statusText = "等待中";
break;
case DocumentStatus.CUTTING:
statusClass = "status-processing";
statusIcon = "ri-loader-4-line";
statusText = "转换中";
statusText = "切分中";
break;
case DocumentStatus.EXTRACTIONING:
statusClass = "status-processing";
statusIcon = "ri-loader-4-line";
statusText = "抽取中";
break;
case DocumentStatus.REVIEWING:
case DocumentStatus.EVALUATIONING:
statusClass = "status-processing";
statusIcon = "ri-loader-4-line";
statusText = "审核中";
statusText = "评查中";
break;
case DocumentStatus.COMPLETED:
case DocumentStatus.FAILED:
statusClass = "status-error";
statusIcon = "ri-close-circle-line";
statusText = "抽取异常";
break;
case DocumentStatus.PROCESSED:
statusClass = "status-success";
statusIcon = "ri-checkbox-circle-line";
statusText = "已完成";
@@ -843,7 +871,7 @@ export default function FilesUpload() {
<Button
type="default"
size="small"
disabled={record.status !== DocumentStatus.COMPLETED}
disabled={record.status !== DocumentStatus.PROCESSED}
icon="ri-eye-line"
onClick={() => alert(`查看文件详情: ${record.name}`)}
>
@@ -950,7 +978,9 @@ export default function FilesUpload() {
tipText="支持单个或批量上传，文件格式：PDF、Word、Excel、图片"
shouldPreventFileSelect={!fileType}
/>
<div className="switch-container">
{/* 测试文档标记 */}
<div className="switch-container mb-4">
<label className="switch" aria-label="标记为测试文档">
<input
type="checkbox"
@@ -961,6 +991,61 @@ export default function FilesUpload() {
</label>
<span>标记为测试文档（不计入正式统计）</span>
</div>
{/* 高级上传设置 */}
{ showAdvancedOptions && (
<div className="advanced-options">
<div
className={`advanced-options-toggle ${showAdvancedOptions ? 'open' : ''}`}
onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
>
<span>高级上传设置</span>
<i className="ri-arrow-down-s-line"></i>
</div>
<div
className="advanced-options-content"
style={{ display: showAdvancedOptions ? 'block' : 'none' }}
>
<div className="grid grid-cols-2 gap-4">
<div className="form-group">
<label className="form-label" htmlFor="storageType">存储方式</label>
<select
id="storageType"
name="storageType"
className="form-select w-full"
defaultValue="minio"
>
{STORAGE_TYPES.map(type => (
<option key={type.id} value={type.id}>
{type.name}
</option>
))}
</select>
<div className="form-tip">选择文档的存储位置</div>
</div>
<div className="form-group">
<label className="form-label" htmlFor="afterUpload">上传后操作</label>
<select
id="afterUpload"
name="afterUpload"
className="form-select w-full"
defaultValue="list"
>
{AFTER_UPLOAD_OPTIONS.map(option => (
<option key={option.id} value={option.id}>
{option.name}
</option>
))}
</select>
<div className="form-tip">上传完成后自动执行的操作</div>
</div>
</div>
</div>
</div>
)}
</>
)}
@@ -982,7 +1067,8 @@ export default function FilesUpload() {
)}
{/* 文件信息显示 - 上传完成后显示 */}
{uploadStage !== "idle" && completedFiles.length > 0 && (
{/* {uploadStage !== "idle" && completedFiles.length > 0 && ( */}
{uploadStage === "hadden" && completedFiles.length > 0 && (
<div className="file-info-grid">
<div>
<h4 className="font-medium mb-3">文件信息</h4>
app/routes/prompts._index.tsx
+5 -5
View File
@@ -67,7 +67,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
if (result.error) {
console.error('获取提示词模板失败:', result.error);
return json<LoaderData>(
return Response.json(
{
templates: [],
total: 0,
@@ -81,7 +81,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
console.log(`成功加载${result.data?.templates.length || 0}条提示词模板数据`);
return json<LoaderData>({
return Response.json({
templates: result.data?.templates || [],
total: result.data?.total || 0,
pageSize,
@@ -89,7 +89,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
});
} catch (error) {
console.error("加载提示词模板失败:", error);
return json<LoaderData>(
return Response.json(
{
templates: [],
total: 0,
@@ -262,7 +262,7 @@ export default function PromptsIndex() {
title: "描述",
key: "description",
render: (_: unknown, record: PromptTemplateUI) => (
<div className="text-secondary text-sm truncate max-w-xs" title={record.description}>
<div className="text-secondary text-sm max-w-xs text-wrap" title={record.description}>
{record.description}
</div>
)
@@ -276,7 +276,7 @@ export default function PromptsIndex() {
{
title: "状态",
key: "status",
width: "80px",
width: "100px",
render: (_: unknown, record: PromptTemplateUI) => {
let statusText = '';
let statusClass = '';
app/routes/prompts.new.tsx
+9 -10
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { MetaFunction, LoaderFunctionArgs, ActionFunctionArgs, json, redirect } from "@remix-run/node";
import { MetaFunction, LoaderFunctionArgs, ActionFunctionArgs, redirect } from "@remix-run/node";
import { Link, useLoaderData, useNavigation, useActionData, Form } from "@remix-run/react";
import { Button } from "~/components/ui/Button";
import newStyles from "~/styles/pages/prompts_new.css?url";
@@ -86,17 +86,16 @@ export async function loader({ request }: LoaderFunctionArgs) {
}
}
return json<LoaderData>({
return Response.json({
template,
mode
});
} catch (error) {
console.error("加载提示词模板失败:", error);
return json<LoaderData>(
{
template: null,
mode: "create",
error: error instanceof Error ? error.message : "加载提示词模板失败"
return Response.json({
template: null,
mode: "create",
error: error instanceof Error ? error.message : "加载提示词模板失败"
},
{ status: 500 }
);
@@ -131,7 +130,7 @@ export async function action({ request }: ActionFunctionArgs) {
}
if (Object.keys(errors).length > 0) {
return json({ errors });
return Response.json({ errors });
}
try {
@@ -166,7 +165,7 @@ export async function action({ request }: ActionFunctionArgs) {
}
if (result.error) {
return json({
return Response.json({
errors: { general: result.error },
formData: {
template_name,
@@ -183,7 +182,7 @@ export async function action({ request }: ActionFunctionArgs) {
return redirect("/prompts");
} catch (error) {
console.error("保存提示词模板失败:", error);
return json({
return Response.json({
errors: {
general: error instanceof Error ? error.message : "保存提示词模板失败"
},
app/routes/reviews.tsx
+102 -45
View File
@@ -25,10 +25,12 @@
* @author 中国烟草AI合同及卷宗审核系统开发团队
*/
import { type MetaFunction } from "@remix-run/node";
import { type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { useState, useEffect } from "react";
import { useNavigate } from "@remix-run/react";
import { useNavigate, useLoaderData } from "@remix-run/react";
import {getDocument} from "~/api/files/documents";
import reviewsStyles from "~/styles/reviews.css?url";
import { getReviewPoints } from "~/api/evaluation_points/reviews";
// 导入评查详情页面组件
import {
@@ -40,23 +42,21 @@ import {
FileDetails
} from "~/components/reviews";
// 定义评查点类型
interface ReviewPoint {
id: string;
title: string;
location: string;
status: string;
content: string;
suggestion: string;
needsHumanReview?: boolean;
humanReviewNote?: string;
humanReviewBy?: string;
humanReviewTime?: string;
position?: {
section: string;
index: number;
};
}
// 从ReviewPointsList组件中导入ReviewPoint类型
import { type ReviewPoint } from '~/components/reviews';
/**
* 文件信息组件
* 显示文件名称、状态信息以及操作按钮（下载原文件、导出评查报告、确认评查结果）
*/
// 格式化文件大小
const formatFileSize = (bytes: number) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
// 定义统计数据类型
interface Statistics {
@@ -76,6 +76,7 @@ interface FileInfo {
pageCount: number;
uploadTime: string;
uploadUser: string;
auditStatus: number;
}
// 定义合同信息类型
@@ -166,30 +167,79 @@ export const handle = {
breadcrumb: "评查详情"
};
export async function loader({ request }: LoaderFunctionArgs) {
try {
const url = new URL(request.url);
const id = url.searchParams.get('id') || undefined;
// console.log("id-------",id);
if (!id) {
return Response.json({ error: '评查ID不能为空' }, { status: 400 });
}
const documentData = await getDocument(id);
if (documentData.error) {
console.error("获取文档数据错误:", documentData.error);
return Response.json({ error: documentData.error }, { status: documentData.status || 500 });
}
const reviewData = await getReviewPoints(id);
console.log("reviewData-------",reviewData);
if (reviewData.error) {
console.error("获取评查点数据错误:", reviewData.error);
return Response.json({ error: reviewData.error }, { status: reviewData.status || 500 });
}
return Response.json({
document: documentData.data,
reviewPoints: reviewData.data,
statistics: reviewData.stats
});
} catch (error) {
console.error('获取评查数据失败:', error);
return Response.json({ error: '获取评查数据失败' }, { status: 500 });
}
}
export default function ReviewDetails() {
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(true);
const { document, reviewPoints, statistics } = useLoaderData<typeof loader>();
const [isLoading, setIsLoading] = useState(false); // 已经通过loader加载了数据，不需要再显示加载状态
const [activeTab, setActiveTab] = useState<string>('preview'); // 'preview', 'analysis', 'fileinfo'
const [reviewData, setReviewData] = useState<ReviewData | null>(null);
const [activeReviewPointId, setActiveReviewPointId] = useState<string | null>(null);
// 模拟获取评查数据
useEffect(() => {
// 模拟API请求延迟
const timer = setTimeout(() => {
// 模拟评查数据
const mockData = getMockReviewData();
setReviewData(mockData);
setIsLoading(false);
// 默认选中第一个评查点
if (mockData.reviewPoints.length > 0) {
setActiveReviewPointId(mockData.reviewPoints[0].id);
}
}, 800);
if (!document) return;
return () => clearTimeout(timer);
}, []);
// 构建文件信息对象
const fileInfo = {
fileName: document.name || "未知文件名",
contractNumber: document.documentNumber || "未知编号",
fileSize: document.size ? formatFileSize(document.size) : "未知大小",
fileFormat: document.fileType ? document.fileType.toUpperCase() : "未知格式",
pageCount: document.pageCount || 0,
uploadTime: document.uploadTime || "未知时间",
uploadUser: document.uploadUser || "未知用户",
auditStatus: document.auditStatus || 0,
};
// 创建包含真实文档数据的评查数据对象
const reviewDataObj: ReviewData = {
// 使用真实文件信息
fileInfo: fileInfo,
// 其他字段暂时使用默认值
contractInfo: getMockReviewData().contractInfo,
reviewInfo: getMockReviewData().reviewInfo,
statistics: statistics,
fileContent: getMockReviewData().fileContent,
reviewPoints: reviewPoints,
aiAnalysis: getMockReviewData().aiAnalysis,
};
setReviewData(reviewDataObj);
setIsLoading(false);
}, [document, reviewPoints, statistics]);
const handleTabChange = (tabKey: string) => {
setActiveTab(tabKey);
@@ -317,7 +367,8 @@ function getMockReviewData(): ReviewData {
fileFormat: "DOCX",
pageCount: 5,
uploadTime: "2023-10-25 14:30:45",
uploadUser: "张三"
uploadUser: "张三",
auditStatus: 0
},
contractInfo: {
contractType: "销售合同",
@@ -383,36 +434,40 @@ function getMockReviewData(): ReviewData {
{
id: "1",
title: "付款条件描述不明确",
location: "付款条款清晰性",
groupName: "付款条款清晰性",
// location: "交货与付款条款",
status: "error",
content: "乙方应在收到货物之日起5个工作日内支付合同款项，甲方应在收到乙方全部付款后开具增值税专用发票，乙方应在收到发票后支付剩余款项。",
suggestion: "乙方应在收到货物验收合格之日起5个工作日内支付合同总额的70%，甲方收到该部分款项后3个工作日内向乙方开具等额增值税专用发票；乙方应在收到发票之日起5个工作日内支付剩余30%款项。",
position: { section: "交货与付款", index: 2 }
position: { section: "交货与付款", index: 2 },
result: false
},
{
id: "2",
title: "违约责任条款缺失",
location: "合同权利义务对等性",
groupName: "合同权利义务对等性",
status: "warning",
content: "如合同发生纠纷，双方应协商解决。",
suggestion: "如合同发生纠纷，双方应友好协商解决；协商不成的，任何一方均有权向甲方所在地人民法院提起诉讼。任何一方未能履行本合同约定义务，应向守约方支付合同总金额的10%作为违约金；给对方造成损失的，还应赔偿由此产生的全部损失。",
position: { section: "争议解决", index: 0 }
position: { section: "争议解决", index: 0 },
result: false
},
{
id: "3",
title: "签章不完整",
location: "合同签署规范性",
groupName: "合同签署规范性",
status: "warning",
content: "乙方（盖章）：YY贸易有限公司\n代表人签字：李YY\n日期：2023年10月20日",
suggestion: "需要联系甲方补充公章",
needsHumanReview: true,
humanReviewNote: "需要联系甲方补充公章",
position: { section: "签章", index: 0 }
position: { section: "签章", index: 0 },
result: false
},
{
id: "9",
title: "交货方式描述模糊",
location: "履行条款明确性",
groupName: "履行条款明确性",
status: "success",
content: "3.4 运输方式：陆运，运费由甲方承担。",
suggestion: "建议补充具体的运输方式和时间",
@@ -420,16 +475,18 @@ function getMockReviewData(): ReviewData {
humanReviewNote: "经核实，该交货方式虽然描述不够详细，但符合行业惯例且双方已经多次合作，不会造成实际履行障碍。",
humanReviewBy: "王法务",
humanReviewTime: "2023-11-05 14:30:22",
position: { section: "交货与付款", index: 4 }
position: { section: "交货与付款", index: 4 },
result: true
},
{
id: "10",
title: "法律适用条款缺失",
location: "争议解决条款完整性",
groupName: "争议解决条款完整性",
status: "error",
content: "",
suggestion: "第十三条 法律适用\n本合同的订立、效力、解释、履行及争议的解决均适用中华人民共和国法律。因本合同引起的或与本合同有关的任何争议，双方应友好协商解决。协商不成的，提交甲方所在地人民法院诉讼解决。",
position: { section: "缺失", index: 0 }
position: { section: "缺失", index: 0 },
result: false
}
],
aiAnalysis: {
app/routes/rules-files.tsx
+110 -258
View File
@@ -1,4 +1,4 @@
import { json, type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData, useSearchParams } from "@remix-run/react";
import { Button } from "~/components/ui/Button";
import { Card } from "~/components/ui/Card";
@@ -6,15 +6,20 @@ import { FileIcon } from "~/components/ui/FileIcon";
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
import { Pagination } from "~/components/ui/Pagination";
import { Table } from "~/components/ui/Table";
import { FileTypeTag } from "~/components/ui/FileTypeTag";
import { Tag } from "~/components/ui/Tag";
import { StatusBadge } from "~/components/ui/StatusBadge";
import rulesFilesStyles from "~/styles/pages/rules-files.css?url";
import {
getReviewFiles,
updateReviewStatus,
type ReviewFileUI
} from "~/api/evaluation_points/rules-files";
import { getDocumentTypes } from "~/api/document-types/document-types";
export const links = () => [
{ rel: "stylesheet", href: rulesFilesStyles }
];
export const handle = {
breadcrumb: "评查文件列表"
};
@@ -27,23 +32,6 @@ export const meta: MetaFunction = () => {
];
};
// 评查文件类型枚举
export enum FileType {
CONTRACT = 'contract',
LICENSE = 'license',
PUNISHMENT = 'punishment',
REPORT = 'report',
OTHER = 'other'
}
// 评查状态枚举
export enum ReviewStatus {
PASS = 'pass',
WARNING = 'warning',
FAIL = 'fail',
PENDING = 'pending'
}
// 日期范围枚举
export enum DateRange {
ALL = 'all',
@@ -53,47 +41,14 @@ export enum DateRange {
CUSTOM = 'custom'
}
// 文件类型标签映射
export const FILE_TYPE_LABELS: Record<FileType, string> = {
[FileType.CONTRACT]: '合同文档',
[FileType.LICENSE]: '专卖许可证',
[FileType.PUNISHMENT]: '行政处罚',
[FileType.REPORT]: '报表文档',
[FileType.OTHER]: '其他文档'
};
// 评查状态标签映射
export const REVIEW_STATUS_LABELS: Record<ReviewStatus, string> = {
[ReviewStatus.PASS]: '通过',
[ReviewStatus.WARNING]: '警告',
[ReviewStatus.FAIL]: '不通过',
[ReviewStatus.PENDING]: '待人工确认'
export const REVIEW_STATUS_LABELS: Record<string, string> = {
'pass': '通过',
'warning': '警告',
'fail': '不通过',
'pending': '待人工确认'
};
// 评查文件模型
interface ReviewFile {
id: string;
fileName: string;
fileCode: string; // 文件编号
fileType: FileType;
fileSize: number;
uploadTime: string;
reviewStatus: ReviewStatus;
issueCount: number;
issues: Array<{
severity: 'info' | 'warning' | 'error' | 'critical';
message: string;
}>;
createdBy: string;
}
interface LoaderData {
files: ReviewFile[];
totalCount: number;
currentPage: number;
pageSize: number;
totalPages: number;
}
export async function loader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url);
@@ -106,164 +61,38 @@ export async function loader({ request }: LoaderFunctionArgs) {
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
try {
// 模拟数据，实际项目中应从API获取
const mockFiles: ReviewFile[] = [
{
id: "1",
fileName: "烟草产品销售合同（2023版）.pdf",
fileCode: "XS-2023-1025-001",
fileType: FileType.CONTRACT,
fileSize: 1024 * 1024 * 2.5, // 2.5MB
uploadTime: "2023-10-25 14:30:45",
reviewStatus: ReviewStatus.WARNING,
issueCount: 3,
issues: [
{ severity: "warning", message: "付款条件描述不明确" },
{ severity: "warning", message: "违约责任条款缺失" },
{ severity: "warning", message: "签章不完整" }
],
createdBy: "张三"
},
{
id: "2",
fileName: "2023年度烟草专卖零售许可证.pdf",
fileCode: "LS-2023-0058",
fileType: FileType.LICENSE,
fileSize: 1024 * 1024 * 1.2, // 1.2MB
uploadTime: "2023-10-24 10:15:22",
reviewStatus: ReviewStatus.PASS,
issueCount: 0,
issues: [],
createdBy: "李四"
},
{
id: "3",
fileName: "XX公司违规处罚决定书.pdf",
fileCode: "处罚[2023]42号",
fileType: FileType.PUNISHMENT,
fileSize: 1024 * 1024 * 3.1, // 3.1MB
uploadTime: "2023-10-23 16:45:30",
reviewStatus: ReviewStatus.FAIL,
issueCount: 2,
issues: [
{ severity: "error", message: "处罚依据条款引用错误" },
{ severity: "error", message: "处罚金额超出规定范围" }
],
createdBy: "王五"
},
{
id: "4",
fileName: "烟草设备采购协议.docx",
fileCode: "CG-2023-0089",
fileType: FileType.CONTRACT,
fileSize: 1024 * 1024 * 0.8, // 0.8MB
uploadTime: "2023-10-22 09:22:15",
reviewStatus: ReviewStatus.PENDING,
issueCount: 1,
issues: [
{ severity: "warning", message: "交付日期条款存在歧义，需人工确认" }
],
createdBy: "赵六"
},
{
id: "5",
fileName: "2023年度销售额报表.xlsx",
fileCode: "BB-2023-Q3",
fileType: FileType.REPORT,
fileSize: 1024 * 1024 * 0.5, // 0.5MB
uploadTime: "2023-10-20 14:05:38",
reviewStatus: ReviewStatus.PASS,
issueCount: 0,
issues: [],
createdBy: "钱七"
}
];
// 获取文档类型列表
const typesResponse = await getDocumentTypes({pageSize:500});
const documentTypes = typesResponse.data?.types || [];
// 过滤数据
let filteredFiles = [...mockFiles];
// 获取文件列表
const searchParams = {
fileType,
reviewStatus,
dateRange,
keyword,
sortOrder,
page: currentPage,
pageSize,
};
if (fileType) {
filteredFiles = filteredFiles.filter(file => file.fileType === fileType);
console.log('rules-filessearchParams-----',searchParams);
const filesResponse = await getReviewFiles(searchParams);
if (filesResponse.error) {
console.error('获取评查文件列表失败:', filesResponse.error);
throw new Response('获取评查文件列表失败', { status: filesResponse.status || 500 });
}
if (reviewStatus) {
filteredFiles = filteredFiles.filter(file => file.reviewStatus === reviewStatus);
}
const files = filesResponse.data?.files || [];
const totalCount = filesResponse.data?.total || 0;
if (dateRange) {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
switch (dateRange) {
case DateRange.TODAY:
filteredFiles = filteredFiles.filter(file => {
const fileDate = new Date(file.uploadTime.split(' ')[0]);
return fileDate >= today;
});
break;
case DateRange.WEEK: {
const weekStart = new Date(today);
weekStart.setDate(today.getDate() - today.getDay());
filteredFiles = filteredFiles.filter(file => {
const fileDate = new Date(file.uploadTime.split(' ')[0]);
return fileDate >= weekStart;
});
break;
}
case DateRange.MONTH: {
const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
filteredFiles = filteredFiles.filter(file => {
const fileDate = new Date(file.uploadTime.split(' ')[0]);
return fileDate >= monthStart;
});
break;
}
}
}
if (keyword) {
const lowerKeyword = keyword.toLowerCase();
filteredFiles = filteredFiles.filter(file =>
file.fileName.toLowerCase().includes(lowerKeyword) ||
file.fileCode.toLowerCase().includes(lowerKeyword)
);
}
// 排序
switch (sortOrder) {
case "upload_time_desc":
filteredFiles.sort((a, b) => new Date(b.uploadTime).getTime() - new Date(a.uploadTime).getTime());
break;
case "upload_time_asc":
filteredFiles.sort((a, b) => new Date(a.uploadTime).getTime() - new Date(b.uploadTime).getTime());
break;
case "issue_count_desc":
filteredFiles.sort((a, b) => b.issueCount - a.issueCount);
break;
case "issue_count_asc":
filteredFiles.sort((a, b) => a.issueCount - b.issueCount);
break;
}
// 计算分页信息
const totalCount = filteredFiles.length;
const totalPages = Math.ceil(totalCount / pageSize);
// 分页截取
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedFiles = filteredFiles.slice(startIndex, endIndex);
return json<LoaderData>({
files: paginatedFiles,
return Response.json({
files,
documentTypes,
totalCount,
currentPage,
pageSize,
totalPages
}, {
headers: {
"Cache-Control": "max-age=60, s-maxage=180"
}
});
} catch (error) {
console.error('加载评查文件列表失败:', error);
@@ -284,9 +113,10 @@ export function ErrorBoundary() {
// 在文件中定义一个与路由文件名匹配的命名函数组件
export default function RulesFiles() {
const { files, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const { files, documentTypes, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const [searchParams, setSearchParams] = useSearchParams();
// 处理筛选条件变更
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
const { name, value } = e.target;
const newParams = new URLSearchParams(searchParams);
@@ -303,6 +133,7 @@ export default function RulesFiles() {
setSearchParams(newParams);
};
// 处理搜索操作
const handleSearch = (keyword: string) => {
const newParams = new URLSearchParams(searchParams);
if (keyword) {
@@ -317,13 +148,14 @@ export default function RulesFiles() {
setSearchParams(newParams);
};
// 处理页码变更
const handlePageChange = (page: number) => {
const newParams = new URLSearchParams(searchParams);
newParams.set('page', page.toString());
setSearchParams(newParams);
};
// 添加页码大小变更处理函数
// 处理每页条数变更
const handlePageSizeChange = (size: number) => {
const newParams = new URLSearchParams(searchParams);
newParams.set('pageSize', size.toString());
@@ -331,9 +163,23 @@ export default function RulesFiles() {
setSearchParams(newParams);
};
// 处理确认评查状态
const handleConfirmStatus = async (id: string, status: string) => {
try {
await updateReviewStatus(id, status);
// 刷新页面获取最新数据
const newParams = new URLSearchParams(searchParams);
setSearchParams(newParams);
} catch (error) {
console.error('更新评查状态失败:', error);
// 可以在这里添加错误提示
}
};
// 渲染问题摘要
const renderIssues = (issues: ReviewFile['issues']) => {
if (issues.length === 0) {
const renderIssues = (file: ReviewFileUI) => {
// 如果评查状态为通过，显示"所有评查点均通过"
if (file.reviewStatus === 'pass') {
return (
<div className="text-sm text-success">
<i className="ri-check-double-line mr-1"></i>所有评查点均通过
@@ -341,29 +187,23 @@ export default function RulesFiles() {
);
}
return (
<div className="text-sm">
{issues.slice(0, 3).map((issue, index) => (
<div key={index} className={`mb-1 ${index === issues.length - 1 ? 'last:mb-0' : ''}`}>
<span className={`severity-indicator severity-${issue.severity}`}></span>
{issue.message}
</div>
))}
</div>
);
// 其他状态显示占位符
return <div className="text-sm text-secondary">-</div>;
};
// 文件类型选项
const fileTypeOptions = Object.keys(FILE_TYPE_LABELS).map(type => ({
value: type,
label: FILE_TYPE_LABELS[type as FileType]
const fileTypeOptions = documentTypes.map((type: {id: number, name: string}) => ({
value: type.id.toString(),
label: type.name
}));
// 评查状态选项
const reviewStatusOptions = Object.keys(REVIEW_STATUS_LABELS).map(status => ({
value: status,
label: REVIEW_STATUS_LABELS[status as ReviewStatus]
}));
const reviewStatusOptions = [
{ value: 'pass', label: '通过' },
{ value: 'warning', label: '警告' },
{ value: 'fail', label: '不通过' },
{ value: 'pending', label: '待人工确认' }
];
// 时间范围选项
const dateRangeOptions = [
@@ -379,17 +219,13 @@ export default function RulesFiles() {
title: "文件名称",
key: "fileName",
width: "30%",
render: (_: unknown, file: ReviewFile) => (
render: (_: unknown, file: ReviewFileUI) => (
<div className="flex items-center">
<FileIcon fileName={file.fileName} className="mr-2 text-lg" />
<FileIcon fileName={file.fileName} className="mr-2 text-lg flex-shrink-0 w-10 h-10" />
<div>
<div className="font-normal text-base">{file.fileName}</div>
<div className="font-normal text-base break-words" title={file.fileName}>{file.fileName}</div>
<div className="text-xs text-secondary mt-1">
{file.fileType === FileType.CONTRACT && "合同编号："}
{file.fileType === FileType.LICENSE && "许可证号："}
{file.fileType === FileType.PUNISHMENT && "文号："}
{file.fileType === FileType.REPORT && "报表编号："}
{file.fileCode}
文件编号：{file.fileCode}
</div>
</div>
</div>
@@ -399,34 +235,38 @@ export default function RulesFiles() {
title: "文件类型",
key: "fileType",
width: "12%",
render: (_: unknown, file: ReviewFile) => (
<FileTypeTag
type={file.fileType}
text={FILE_TYPE_LABELS[file.fileType]}
showIcon={true}
/>
render: (_: unknown, file: ReviewFileUI) => (
<Tag
color="blue"
size="sm"
>
{file.fileType}
</Tag>
)
},
{
title: "上传时间",
key: "uploadTime",
width: "12%",
render: (_: unknown, file: ReviewFile) => (
<div>
<span className="text-base">{file.uploadTime.split(' ')[0]}</span>
<br />
<span className="text-xs text-secondary">{file.uploadTime.split(' ')[1]}</span>
</div>
)
render: (_: unknown, file: ReviewFileUI) => {
const [date, time] = file.uploadTime.split(' ');
return (
<div>
<span className="text-base">{date}</span>
<br />
<span className="text-xs text-secondary">{time}</span>
</div>
);
}
},
{
title: "评查状态",
key: "reviewStatus",
width: "12%",
render: (_: unknown, file: ReviewFile) => (
render: (_: unknown, file: ReviewFileUI) => (
<StatusBadge
status={file.reviewStatus}
text={file.issueCount > 0 ? `${REVIEW_STATUS_LABELS[file.reviewStatus]} (${file.issueCount})` : REVIEW_STATUS_LABELS[file.reviewStatus]}
text={REVIEW_STATUS_LABELS[file.reviewStatus]}
showIcon={true}
/>
)
@@ -435,20 +275,32 @@ export default function RulesFiles() {
title: "问题摘要",
key: "issues",
width: "20%",
render: (_: unknown, file: ReviewFile) => renderIssues(file.issues)
render: (_: unknown, file: ReviewFileUI) => renderIssues(file)
},
{
title: "操作",
key: "operation",
width: "14%",
render: (_: unknown, file: ReviewFile) => (
render: (_: unknown, file: ReviewFileUI) => (
<>
{file.reviewStatus === ReviewStatus.PENDING ? (
<Button type="primary" size="small" icon="ri-check-double-line" className="mr-2">
{file.reviewStatus === 'pending' ? (
<Button
type="primary"
size="small"
icon="ri-check-double-line"
className="mr-2"
onClick={() => handleConfirmStatus(file.id, 'pass')}
>
确认
</Button>
) : (
<Button type="default" size="small" icon="ri-eye-line" to={`/files/${file.id}`} className="mr-2">
<Button
type="default"
size="small"
icon="ri-eye-line"
to={`/files/${file.id}`}
className="mr-2"
>
查看
</Button>
)}
@@ -472,7 +324,7 @@ export default function RulesFiles() {
<span className="text-base font-normal text-primary ml-1">{totalCount}</span>
</div>
</div>
<Button type="primary" icon="ri-file-upload-line" to="/files/new">
<Button type="primary" icon="ri-file-upload-line" to="/files/upload">
上传新文件
</Button>
</div>
app/routes/rules._index.tsx
+2 -2
View File
@@ -415,7 +415,7 @@ export default function RulesIndex() {
title: "优先级",
key: "priority",
align: "left" as const,
width: "5%",
width: "8%",
render: (_: unknown, record: Rule) => {
const priorityColor = RULE_PRIORITY_COLORS[record.priority] as TagColor;
return (
@@ -467,7 +467,7 @@ export default function RulesIndex() {
{/* 页面头部 */}
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-medium">评查点管理</h2>
<Button type="primary" icon="ri-add-line" to="/rules/new" className="btn-add-rule">
<Button type="primary" icon="ri-add-line" to="/rules-new" className="btn-add-rule">
新增评查点
</Button>
</div>