完成文档列表页面ui，封装部分上传文件的公共组件，封装请求接口
This commit is contained in:
+26
-42
@@ -3,10 +3,16 @@ import { type MetaFunction } from "@remix-run/node";
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
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 homeStyles from "~/styles/pages/home.css?url";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: homeStyles }
|
||||
{ rel: "stylesheet", href: homeStyles },
|
||||
...statusBadgeLinks(),
|
||||
...fileTagLinks(),
|
||||
...fileTypeTagLinks()
|
||||
];
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
@@ -174,11 +180,28 @@ export default function Index() {
|
||||
{recentFiles.map((file: RecentFile) => (
|
||||
<div key={file.id} className="doc-item">
|
||||
<div className="doc-info">
|
||||
<i className={`doc-icon ${file.name.endsWith('.pdf') ? 'ri-file-pdf-line' : 'ri-file-word-line'}`}></i>
|
||||
<FileTag
|
||||
extension={file.name.endsWith('.pdf') ? 'pdf' : 'docx'}
|
||||
showIcon={true}
|
||||
showText={false}
|
||||
showBackground={false}
|
||||
size="lg"
|
||||
className="mr-2"
|
||||
/>
|
||||
<div>
|
||||
<div className="doc-name">{file.name}</div>
|
||||
<div className="doc-meta">
|
||||
{file.type} · {file.updatedAt}
|
||||
<FileTypeTag
|
||||
type={file.type === "合同文档" ? "sales-contract" :
|
||||
file.type === "专卖许可证" ? "license" :
|
||||
file.type === "行政处罚决定书" ? "punishment" : "agreement"}
|
||||
text={file.type}
|
||||
size="sm"
|
||||
showIcon={false}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span className="text-gray-500">·</span>
|
||||
<span className="ml-2 text-gray-500">{file.updatedAt}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -240,42 +263,3 @@ function ShortcutItem({ icon, label, to }: ShortcutItemProps) {
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
// 状态标签组件
|
||||
interface StatusBadgeProps {
|
||||
status: string;
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: StatusBadgeProps) {
|
||||
const statusMap: Record<string, { label: string, className: string, icon: string }> = {
|
||||
pass: {
|
||||
label: '通过',
|
||||
className: 'status-badge status-success',
|
||||
icon: 'ri-checkbox-circle-line'
|
||||
},
|
||||
warning: {
|
||||
label: '警告',
|
||||
className: 'status-badge status-warning',
|
||||
icon: 'ri-alert-line'
|
||||
},
|
||||
fail: {
|
||||
label: '不通过',
|
||||
className: 'status-badge status-error',
|
||||
icon: 'ri-close-circle-line'
|
||||
},
|
||||
pending: {
|
||||
label: '待确认',
|
||||
className: 'status-badge status-processing',
|
||||
icon: 'ri-time-line'
|
||||
}
|
||||
};
|
||||
|
||||
const { label, className, icon } = statusMap[status] || statusMap.pending;
|
||||
|
||||
return (
|
||||
<span className={className}>
|
||||
<i className={`${icon} mr-1`}></i>
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,700 @@
|
||||
import { useState } from "react";
|
||||
import { useSearchParams, Link } from "@remix-run/react";
|
||||
import { type MetaFunction, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/node";
|
||||
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";
|
||||
|
||||
// 导入样式
|
||||
export function links() {
|
||||
return [
|
||||
{ rel: "stylesheet", href: documentsIndexStyles }
|
||||
];
|
||||
}
|
||||
|
||||
// 元数据
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "文档列表 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "查看和管理系统中的所有文档，包括合同、许可证和行政处罚决定书等" },
|
||||
];
|
||||
};
|
||||
|
||||
interface DocumentItem {
|
||||
id: string;
|
||||
name: string;
|
||||
documentNumber: string;
|
||||
type: string;
|
||||
typeName: string;
|
||||
size: number;
|
||||
status: string;
|
||||
issues: number | null;
|
||||
uploadTime: string;
|
||||
fileType: string;
|
||||
tags?: string[];
|
||||
}
|
||||
|
||||
// 数据加载器
|
||||
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
||||
// 获取URL查询参数
|
||||
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 documentNumber = url.searchParams.get("documentNumber") || "";
|
||||
const dateFrom = url.searchParams.get("dateFrom") || "";
|
||||
const dateTo = url.searchParams.get("dateTo") || "";
|
||||
const page = parseInt(url.searchParams.get("page") || "1", 10);
|
||||
const pageSize = parseInt(url.searchParams.get("pageSize") || "20", 10);
|
||||
|
||||
// 在实际应用中，这里会调用API获取数据
|
||||
// const response = await fetch(`/api/documents?search=${search}&...`);
|
||||
// const data = await response.json();
|
||||
|
||||
// 使用模拟数据
|
||||
const mockData = {
|
||||
documents: [
|
||||
{
|
||||
id: "1",
|
||||
name: "2023年度烟草销售框架合同.pdf",
|
||||
documentNumber: "XS20230001",
|
||||
type: "sales-contract",
|
||||
typeName: "销售合同",
|
||||
size: 2.5 * 1024 * 1024, // 2.5MB
|
||||
status: "pass",
|
||||
issues: 0,
|
||||
uploadTime: "2023-10-15 15:30",
|
||||
fileType: "pdf"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "设备采购合同-打印机.docx",
|
||||
documentNumber: "CG20230052",
|
||||
type: "purchase-contract",
|
||||
typeName: "采购合同",
|
||||
size: 1.2 * 1024 * 1024, // 1.2MB
|
||||
status: "warning",
|
||||
issues: 3,
|
||||
uploadTime: "2023-10-14 09:15",
|
||||
fileType: "docx"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "烟草零售许可证.pdf",
|
||||
documentNumber: "ZM2023100345",
|
||||
type: "license",
|
||||
typeName: "专卖许可证",
|
||||
size: 0.8 * 1024 * 1024, // 0.8MB
|
||||
status: "pending",
|
||||
issues: null,
|
||||
uploadTime: "2023-10-13 14:20",
|
||||
fileType: "pdf"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "非法售烟行政处罚决定书.docx",
|
||||
documentNumber: "CF20230087",
|
||||
type: "punishment",
|
||||
typeName: "行政处罚决定书",
|
||||
size: 1.5 * 1024 * 1024, // 1.5MB
|
||||
status: "processing",
|
||||
issues: null,
|
||||
uploadTime: "2023-10-10 16:45",
|
||||
fileType: "docx"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "烟草种植承包协议-2023.pdf",
|
||||
documentNumber: "CB20230024",
|
||||
type: "agreement",
|
||||
typeName: "承包协议",
|
||||
size: 3.2 * 1024 * 1024, // 3.2MB
|
||||
status: "fail",
|
||||
issues: 8,
|
||||
uploadTime: "2023-10-09 10:30",
|
||||
fileType: "pdf",
|
||||
tags: ["测试"]
|
||||
},
|
||||
],
|
||||
total: 156,
|
||||
page,
|
||||
pageSize
|
||||
};
|
||||
|
||||
// 返回数据
|
||||
return Response.json(mockData);
|
||||
};
|
||||
|
||||
// 处理表单提交和删除等操作
|
||||
export const action = async ({ request }: ActionFunctionArgs) => {
|
||||
const formData = await request.formData();
|
||||
const action = formData.get("_action");
|
||||
|
||||
// 在实际应用中，这里会根据action类型调用相应的API
|
||||
// 例如删除文档，批量删除，等等
|
||||
|
||||
if (action === "delete") {
|
||||
const id = formData.get("id");
|
||||
// await fetch(`/api/documents/${id}`, { method: "DELETE" });
|
||||
return Response.json({ success: true, message: "文档已成功删除" });
|
||||
}
|
||||
|
||||
if (action === "batchDelete") {
|
||||
const ids = formData.getAll("ids");
|
||||
// await fetch(`/api/documents/batch-delete`, {
|
||||
// method: "POST",
|
||||
// body: JSON.stringify({ ids }),
|
||||
// headers: { "Content-Type": "application/json" }
|
||||
// });
|
||||
return Response.json({ success: true, message: `已成功删除${ids.length}个文档` });
|
||||
}
|
||||
|
||||
// 未知操作
|
||||
return Response.json({ success: false, message: "未知操作" }, { status: 400 });
|
||||
};
|
||||
|
||||
// 文档类型选项
|
||||
const documentTypeOptions = [
|
||||
{ value: "sales-contract", label: "销售合同" },
|
||||
{ value: "purchase-contract", label: "采购合同" },
|
||||
{ value: "license", label: "专卖许可证" },
|
||||
{ value: "punishment", label: "行政处罚决定书" },
|
||||
{ value: "agreement", label: "承包协议" },
|
||||
];
|
||||
|
||||
// 文档状态选项
|
||||
const documentStatusOptions = [
|
||||
{ value: "pending", label: "待审核" },
|
||||
{ value: "processing", label: "审核中" },
|
||||
{ value: "pass", label: "通过" },
|
||||
{ value: "warning", label: "警告" },
|
||||
{ value: "fail", label: "不通过" },
|
||||
];
|
||||
|
||||
// 格式化文件大小
|
||||
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];
|
||||
};
|
||||
|
||||
// 获取文档类型标签背景颜色
|
||||
// 此函数已不再需要，改用 FileTypeTag 组件
|
||||
// const getDocumentTypeTagColor = (type: string): string => {
|
||||
// const colorMap: Record<string, string> = {
|
||||
// "sales-contract": "blue",
|
||||
// "purchase-contract": "green",
|
||||
// "license": "purple",
|
||||
// "punishment": "yellow",
|
||||
// "agreement": "orange",
|
||||
// "default": "gray"
|
||||
// };
|
||||
// return colorMap[type] || colorMap.default;
|
||||
// };
|
||||
|
||||
export default function DocumentsIndex() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
|
||||
|
||||
// 从URL获取当前筛选条件
|
||||
const search = searchParams.get("search") || "";
|
||||
const documentType = searchParams.get("documentType") || "";
|
||||
const status = searchParams.get("status") || "";
|
||||
const documentNumber = searchParams.get("documentNumber") || "";
|
||||
const dateFrom = searchParams.get("dateFrom") || "";
|
||||
const dateTo = searchParams.get("dateTo") || "";
|
||||
const currentPage = parseInt(searchParams.get("page") || "1", 10);
|
||||
const pageSize = parseInt(searchParams.get("pageSize") || "20", 10);
|
||||
|
||||
// API 返回的模拟数据
|
||||
const mockData = {
|
||||
documents: [
|
||||
{
|
||||
id: "1",
|
||||
name: "2023年度烟草销售框架合同.pdf",
|
||||
documentNumber: "XS20230001",
|
||||
type: "sales-contract",
|
||||
typeName: "销售合同",
|
||||
size: 2.5 * 1024 * 1024, // 2.5MB
|
||||
status: "pass",
|
||||
issues: 0,
|
||||
uploadTime: "2023-10-15 15:30",
|
||||
fileType: "pdf"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "设备采购合同-打印机.docx",
|
||||
documentNumber: "CG20230052",
|
||||
type: "purchase-contract",
|
||||
typeName: "采购合同",
|
||||
size: 1.2 * 1024 * 1024, // 1.2MB
|
||||
status: "warning",
|
||||
issues: 3,
|
||||
uploadTime: "2023-10-14 09:15",
|
||||
fileType: "docx"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "烟草零售许可证.pdf",
|
||||
documentNumber: "ZM2023100345",
|
||||
type: "license",
|
||||
typeName: "专卖许可证",
|
||||
size: 0.8 * 1024 * 1024, // 0.8MB
|
||||
status: "pending",
|
||||
issues: null,
|
||||
uploadTime: "2023-10-13 14:20",
|
||||
fileType: "pdf"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "非法售烟行政处罚决定书.docx",
|
||||
documentNumber: "CF20230087",
|
||||
type: "punishment",
|
||||
typeName: "行政处罚决定书",
|
||||
size: 1.5 * 1024 * 1024, // 1.5MB
|
||||
status: "processing",
|
||||
issues: null,
|
||||
uploadTime: "2023-10-10 16:45",
|
||||
fileType: "docx"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "烟草种植承包协议-2023.pdf",
|
||||
documentNumber: "CB20230024",
|
||||
type: "agreement",
|
||||
typeName: "承包协议",
|
||||
size: 3.2 * 1024 * 1024, // 3.2MB
|
||||
status: "fail",
|
||||
issues: 8,
|
||||
uploadTime: "2023-10-09 10:30",
|
||||
fileType: "pdf",
|
||||
tags: ["测试"]
|
||||
},
|
||||
],
|
||||
total: 156,
|
||||
page: currentPage,
|
||||
pageSize
|
||||
};
|
||||
|
||||
// 分页处理函数
|
||||
const handlePageChange = (page: number) => {
|
||||
searchParams.set("page", page.toString());
|
||||
setSearchParams(searchParams);
|
||||
};
|
||||
|
||||
// 每页条数变更处理函数
|
||||
const handlePageSizeChange = (size: number) => {
|
||||
searchParams.set("pageSize", size.toString());
|
||||
searchParams.set("page", "1"); // 重置到第一页
|
||||
setSearchParams(searchParams);
|
||||
};
|
||||
|
||||
// 处理文档名称搜索
|
||||
const handleNameSearch = (value: string) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (value) {
|
||||
params.set("search", value);
|
||||
} else {
|
||||
params.delete("search");
|
||||
}
|
||||
params.set("page", "1"); // 重置页码
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
// 处理文档编号变更
|
||||
const handleDocumentNumberChange = (value: string) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (value) {
|
||||
params.set("documentNumber", value);
|
||||
} else {
|
||||
params.delete("documentNumber");
|
||||
}
|
||||
params.set("page", "1"); // 重置页码
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
// 处理文档类型变更
|
||||
const handleDocumentTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (e.target.value) {
|
||||
params.set("documentType", e.target.value);
|
||||
} else {
|
||||
params.delete("documentType");
|
||||
}
|
||||
params.set("page", "1"); // 重置页码
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
// 处理状态变更
|
||||
const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (e.target.value) {
|
||||
params.set("status", e.target.value);
|
||||
} else {
|
||||
params.delete("status");
|
||||
}
|
||||
params.set("page", "1"); // 重置页码
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
// 处理日期范围变更
|
||||
const handleDateChange = (field: 'dateFrom' | 'dateTo', value: string) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
if (value) {
|
||||
params.set(field, value);
|
||||
} else {
|
||||
params.delete(field);
|
||||
}
|
||||
params.set("page", "1"); // 重置页码
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
// 重置搜索条件
|
||||
const handleReset = () => {
|
||||
setSearchParams(new URLSearchParams({
|
||||
page: "1",
|
||||
pageSize: pageSize.toString()
|
||||
}));
|
||||
};
|
||||
|
||||
// 行选择变更处理
|
||||
const handleRowSelectionChange = (id: string) => {
|
||||
if (selectedRowKeys.includes(id)) {
|
||||
setSelectedRowKeys(selectedRowKeys.filter(key => key !== id));
|
||||
} else {
|
||||
setSelectedRowKeys([...selectedRowKeys, id]);
|
||||
}
|
||||
};
|
||||
|
||||
// 全选处理
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedRowKeys(mockData.documents.map(doc => doc.id));
|
||||
} else {
|
||||
setSelectedRowKeys([]);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除确认
|
||||
const confirmDelete = (id: string, name: string) => {
|
||||
if (window.confirm(`确认删除文档 "${name}"？`)) {
|
||||
// 在实际应用中这里会提交表单到action处理
|
||||
console.log('删除文档:', id, name);
|
||||
|
||||
// 更新选中行
|
||||
setSelectedRowKeys(selectedRowKeys.filter(key => key !== id));
|
||||
}
|
||||
};
|
||||
|
||||
// 批量删除确认
|
||||
const confirmBatchDelete = () => {
|
||||
if (selectedRowKeys.length === 0) {
|
||||
alert('请至少选择一个文档');
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.confirm(`确认删除选中的 ${selectedRowKeys.length} 个文档？`)) {
|
||||
// 在实际应用中这里会提交表单到action处理
|
||||
console.log('批量删除文档IDs:', selectedRowKeys);
|
||||
|
||||
// 清空选中行
|
||||
setSelectedRowKeys([]);
|
||||
}
|
||||
};
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedRowKeys.length === mockData.documents.length}
|
||||
onChange={(e) => handleSelectAll(e.target.checked)}
|
||||
/>
|
||||
),
|
||||
key: "selection",
|
||||
width: "50px",
|
||||
render: (_: unknown, record: DocumentItem) => (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedRowKeys.includes(record.id)}
|
||||
onChange={() => handleRowSelectionChange(record.id)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "文档名称",
|
||||
key: "name",
|
||||
render: (_: unknown, record: DocumentItem) => (
|
||||
<div className="flex items-center m-1">
|
||||
<FileTag
|
||||
extension={record.fileType}
|
||||
showIcon={true}
|
||||
showText={false}
|
||||
showBackground={false}
|
||||
size="lg"
|
||||
className="mr-2"
|
||||
/>
|
||||
<div>
|
||||
<span className="file-name" title={record.name}>{record.name}</span>
|
||||
<div className="mt-2 flex inline-block">
|
||||
<FileTypeTag
|
||||
type={record.type}
|
||||
text={record.typeName}
|
||||
size="sm"
|
||||
showIcon={false}
|
||||
/>
|
||||
{record.tags && record.tags.map((tag: string) => (
|
||||
<span key={tag} className="ml-2 text-xs bg-gray-100 text-gray-500 px-1 rounded">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "文档编号",
|
||||
key: "documentNumber",
|
||||
render: (_: unknown, record: DocumentItem) => (
|
||||
<span className="document-number">{record.documentNumber}</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "文件大小",
|
||||
key: "size",
|
||||
render: (_: unknown, record: DocumentItem) => formatFileSize(record.size)
|
||||
},
|
||||
{
|
||||
title: "审核状态",
|
||||
key: "status",
|
||||
render: (_: unknown, record: DocumentItem) => (
|
||||
<StatusBadge status={record.status} showIcon={false} />
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "问题数量",
|
||||
key: "issues",
|
||||
render: (_: unknown, record: DocumentItem) => (
|
||||
record.issues === null ? "-" : record.issues
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "上传时间",
|
||||
key: "uploadTime",
|
||||
render: (_: unknown, record: DocumentItem) => record.uploadTime
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "actions",
|
||||
width: "280px",
|
||||
render: (_: unknown, record: DocumentItem) => (
|
||||
<div className="operations-cell">
|
||||
{record.status === "pending" ? (
|
||||
<Link
|
||||
to={`/documents/${record.id}/review`}
|
||||
className="mr-1 hover:underline"
|
||||
>
|
||||
<i className="ri-play-circle-line"></i>
|
||||
开始审核
|
||||
</Link>
|
||||
) : record.status === "processing" ? (
|
||||
<Link
|
||||
to={`/documents/${record.id}/progress`}
|
||||
className="mr-1 hover:underline"
|
||||
>
|
||||
<i className="ri-eye-line"></i>
|
||||
查看进度
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
to={`/documents/${record.id}`}
|
||||
className="mr-1 hover:underline"
|
||||
>
|
||||
<i className="ri-eye-line"></i>
|
||||
查看
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
to={`/documents/${record.id}/edit`}
|
||||
className="mr-1 text-gray-500 hover:underline hover:text-gray-700"
|
||||
>
|
||||
<i className="ri-edit-line"></i>
|
||||
修改
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="mr-1 text-gray-500 hover:underline hover:text-gray-700"
|
||||
onClick={() => alert(`下载文档: ${record.name}`)}
|
||||
>
|
||||
<i className="ri-download-line"></i>
|
||||
下载
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-error hover:underline hover:text-red-700"
|
||||
onClick={() => confirmDelete(record.id, record.name)}
|
||||
>
|
||||
<i className="ri-delete-bin-line"></i>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="documents-page">
|
||||
{/* 页面头部 */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-medium">文档列表</h2>
|
||||
<div>
|
||||
<Button
|
||||
type="primary"
|
||||
icon="ri-upload-line"
|
||||
to="/documents/upload"
|
||||
className="hover:text-white"
|
||||
>
|
||||
上传文档
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 搜索筛选区 */}
|
||||
<FilterPanel
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
type="default"
|
||||
icon="ri-refresh-line"
|
||||
onClick={handleReset}
|
||||
className="mr-2"
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon="ri-search-line"
|
||||
onClick={() => {
|
||||
// 保持当前筛选条件，刷新数据
|
||||
// 在实际应用中，这里可能需要触发某些操作
|
||||
}}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
noActionDivider={true}
|
||||
>
|
||||
<SearchFilter
|
||||
label="文档名称"
|
||||
placeholder="请输入文档名称"
|
||||
value={search}
|
||||
onSearch={handleNameSearch}
|
||||
instantSearch={true}
|
||||
className="mr-2 w-50"
|
||||
/>
|
||||
|
||||
<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}
|
||||
/>
|
||||
</FilterPanel>
|
||||
|
||||
|
||||
{/* 数据表格 */}
|
||||
<Card>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div>
|
||||
<Button
|
||||
type="default"
|
||||
icon="ri-delete-bin-line"
|
||||
onClick={confirmBatchDelete}
|
||||
className="mr-2"
|
||||
disabled={selectedRowKeys.length === 0}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button
|
||||
type="default"
|
||||
icon="ri-download-line"
|
||||
>
|
||||
导出列表
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-sm text-secondary">
|
||||
共 <span className="font-medium text-primary">{mockData.total}</span> 条记录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={mockData.documents}
|
||||
rowKey="id"
|
||||
emptyText="暂无数据"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
total={mockData.total}
|
||||
pageSize={pageSize}
|
||||
onChange={handlePageChange}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 错误边界处理
|
||||
export function ErrorBoundary() {
|
||||
return (
|
||||
<div className="error-container">
|
||||
<h1 className="text-xl font-bold text-red-500">出错了</h1>
|
||||
<p>加载文档列表时出现错误。请刷新页面或联系系统管理员。</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
import {type MetaFunction} from "@remix-run/node";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{title: "文档列表 - 中国烟草AI合同及卷宗审核系统"},
|
||||
{name: "documents", content: "文档列表,新增,修改"}
|
||||
]
|
||||
}
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "文档列表"
|
||||
}
|
||||
|
||||
/**
|
||||
* 文档列表路由布局
|
||||
*/
|
||||
export default function DocumentsLayout() {
|
||||
return (
|
||||
<Outlet />
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,632 @@
|
||||
import { useState, useRef, useCallback } from "react";
|
||||
import { type ActionFunctionArgs, type MetaFunction, json } from "@remix-run/node";
|
||||
import { Form, useActionData, useNavigation, useSubmit } from "@remix-run/react";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { Alert } from "~/components/ui/Alert";
|
||||
import { UploadArea, type UploadAreaRef } from "~/components/ui/UploadArea";
|
||||
import { FileProgress } from "~/components/ui/FileProgress";
|
||||
import { FileTag } from "~/components/ui/FileTag";
|
||||
import documentUploadStyles from "~/styles/pages/document-upload.css?url";
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: documentUploadStyles }
|
||||
];
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "上传文档 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "上传文档进行AI审核" }
|
||||
];
|
||||
};
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: "上传文档"
|
||||
};
|
||||
|
||||
// 模拟API支持的文件类型
|
||||
const SUPPORTED_FILE_TYPES = [
|
||||
{ id: "1", name: "销售合同" },
|
||||
{ id: "2", name: "采购合同" },
|
||||
{ id: "3", name: "专卖许可证" },
|
||||
{ id: "4", name: "行政处罚决定书" },
|
||||
{ id: "5", name: "承包协议" }
|
||||
];
|
||||
|
||||
// 模拟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: "立即开始审核" }
|
||||
];
|
||||
|
||||
// 定义接口
|
||||
interface UploadedFile {
|
||||
id: string;
|
||||
name: string;
|
||||
size: number;
|
||||
status: "waiting" | "uploading" | "success" | "error";
|
||||
progress: number;
|
||||
error?: string;
|
||||
newName?: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface ActionData {
|
||||
success?: boolean;
|
||||
error?: string;
|
||||
files?: UploadedFile[];
|
||||
}
|
||||
|
||||
// Action函数处理表单提交
|
||||
export const action = async ({ request }: ActionFunctionArgs) => {
|
||||
// 在实际应用中，这里应该处理文件上传逻辑
|
||||
// 例如使用FormData API获取文件并调用后端API
|
||||
|
||||
try {
|
||||
const formData = await request.formData();
|
||||
const docType = formData.get("docType") as string;
|
||||
const docNumber = formData.get("docNumber") as string;
|
||||
const docRemark = formData.get("docRemark") as string;
|
||||
const isTestDocument = formData.get("isTestDocument") === "true";
|
||||
const storageType = formData.get("storageType") as string;
|
||||
const afterUpload = formData.get("afterUpload") as string;
|
||||
|
||||
// 在真实情况下，这里将处理文件上传
|
||||
// 由于Remix在服务器端不直接处理文件，我们将在客户端处理文件上传
|
||||
// 然后将文件信息发送给服务器
|
||||
|
||||
// 模拟处理过程
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
return json<ActionData>({
|
||||
success: true,
|
||||
files: [] // 服务器处理的文件列表将返回这里
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Upload error:", error);
|
||||
return json<ActionData>(
|
||||
{
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : "文件上传过程中发生错误"
|
||||
},
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化文件大小
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes === 0) return "0 Bytes";
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ["Bytes", "KB", "MB", "GB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
}
|
||||
|
||||
// 获取文件扩展名
|
||||
function getFileExtension(filename: string): string {
|
||||
return filename.split('.').pop()?.toLowerCase() || "";
|
||||
}
|
||||
|
||||
// 检查文件类型是否支持
|
||||
function isFileTypeSupported(filename: string): boolean {
|
||||
const ext = getFileExtension(filename);
|
||||
return ["pdf", "doc", "docx", "txt"].includes(ext);
|
||||
}
|
||||
|
||||
export default function DocumentUpload() {
|
||||
const actionData = useActionData<typeof action>();
|
||||
const navigation = useNavigation();
|
||||
const submit = useSubmit();
|
||||
const uploading = navigation.state === "submitting";
|
||||
|
||||
const [files, setFiles] = useState<UploadedFile[]>([]);
|
||||
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
|
||||
const [isTestDocument, setIsTestDocument] = useState(false);
|
||||
const [uploadComplete, setUploadComplete] = useState(false);
|
||||
const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
|
||||
|
||||
const uploadAreaRef = useRef<UploadAreaRef>(null);
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
|
||||
// 处理文件选择
|
||||
const handleFilesSelected = useCallback((fileList: FileList) => {
|
||||
const newFiles: UploadedFile[] = [];
|
||||
|
||||
Array.from(fileList).forEach(file => {
|
||||
// 检查文件类型
|
||||
if (!isFileTypeSupported(file.name)) {
|
||||
alert(`不支持的文件类型: ${file.name}\n请上传PDF、DOC、DOCX或TXT格式文件`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查文件大小
|
||||
if (file.size > 50 * 1024 * 1024) { // 50MB
|
||||
alert(`文件过大: ${file.name}\n文件大小不能超过50MB`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否已添加
|
||||
const isDuplicate = files.some(f => f.name === file.name && f.size === file.size);
|
||||
if (isDuplicate) {
|
||||
alert(`文件已添加: ${file.name}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加新文件
|
||||
newFiles.push({
|
||||
id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
status: "waiting",
|
||||
progress: 0,
|
||||
type: getFileExtension(file.name)
|
||||
});
|
||||
});
|
||||
|
||||
setFiles(prev => [...prev, ...newFiles]);
|
||||
// 重置文件输入，允许再次选择相同文件
|
||||
uploadAreaRef.current?.resetFileInput();
|
||||
}, [files]);
|
||||
|
||||
// 移除文件
|
||||
const removeFile = useCallback((fileId: string) => {
|
||||
setFiles(prev => prev.filter(file => file.id !== fileId));
|
||||
setSelectedFileIds(prev => prev.filter(id => id !== fileId));
|
||||
}, []);
|
||||
|
||||
// 批量删除文件
|
||||
const removeSelectedFiles = useCallback(() => {
|
||||
if (selectedFileIds.length === 0) return;
|
||||
|
||||
if (confirm(`确定要删除选中的 ${selectedFileIds.length} 个文件吗？`)) {
|
||||
setFiles(prev => prev.filter(file => !selectedFileIds.includes(file.id)));
|
||||
setSelectedFileIds([]);
|
||||
}
|
||||
}, [selectedFileIds]);
|
||||
|
||||
// 清空文件列表
|
||||
const clearAllFiles = useCallback(() => {
|
||||
if (files.length === 0) return;
|
||||
|
||||
if (confirm('确定要清空文件列表吗？')) {
|
||||
setFiles([]);
|
||||
setSelectedFileIds([]);
|
||||
}
|
||||
}, [files.length]);
|
||||
|
||||
// 切换文件选择
|
||||
const toggleFileSelection = useCallback((fileId: string, selected: boolean) => {
|
||||
if (selected) {
|
||||
setSelectedFileIds(prev => [...prev, fileId]);
|
||||
} else {
|
||||
setSelectedFileIds(prev => prev.filter(id => id !== fileId));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 更新文件名
|
||||
const updateFileName = useCallback((fileId: string, newName: string) => {
|
||||
setFiles(prev =>
|
||||
prev.map(file =>
|
||||
file.id === fileId
|
||||
? { ...file, newName: newName + '.' + getFileExtension(file.name) }
|
||||
: file
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
const form = event.currentTarget;
|
||||
const docType = form.docType.value;
|
||||
|
||||
// 表单验证
|
||||
if (!docType) {
|
||||
alert('请选择文档类型');
|
||||
return;
|
||||
}
|
||||
|
||||
if (files.length === 0) {
|
||||
alert('请至少上传一个文档');
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建FormData对象
|
||||
const formData = new FormData(form);
|
||||
formData.append("isTestDocument", isTestDocument.toString());
|
||||
|
||||
// 在实际应用中，这里应该处理文件上传
|
||||
// 如果Remix不能直接处理文件上传，可以考虑使用预签名URL或其他方法
|
||||
// 这里我们模拟文件上传进度
|
||||
simulateUpload();
|
||||
|
||||
// 提交表单
|
||||
submit(formData, { method: "post", encType: "multipart/form-data" });
|
||||
}, [files.length, isTestDocument, submit]);
|
||||
|
||||
// 模拟文件上传进度
|
||||
const simulateUpload = useCallback(() => {
|
||||
const updatedFiles = [...files];
|
||||
|
||||
// 设置所有文件为上传中状态
|
||||
updatedFiles.forEach(file => {
|
||||
file.status = "uploading";
|
||||
file.progress = 0;
|
||||
});
|
||||
|
||||
setFiles(updatedFiles);
|
||||
|
||||
// 模拟进度更新
|
||||
const interval = setInterval(() => {
|
||||
setFiles(prevFiles => {
|
||||
const newFiles = [...prevFiles];
|
||||
let allComplete = true;
|
||||
|
||||
newFiles.forEach(file => {
|
||||
if (file.status === "uploading") {
|
||||
// 增加进度
|
||||
file.progress += Math.random() * 10;
|
||||
|
||||
if (file.progress >= 100) {
|
||||
file.progress = 100;
|
||||
|
||||
// 模拟有10%概率上传失败
|
||||
if (Math.random() > 0.9) {
|
||||
file.status = "error";
|
||||
file.error = "上传失败，请重试";
|
||||
} else {
|
||||
file.status = "success";
|
||||
}
|
||||
} else {
|
||||
allComplete = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 如果所有文件都完成了，停止定时器
|
||||
if (allComplete) {
|
||||
clearInterval(interval);
|
||||
setTimeout(() => {
|
||||
// 检查是否有文件上传错误
|
||||
const hasErrors = newFiles.some(file => file.status === "error");
|
||||
if (!hasErrors) {
|
||||
setUploadComplete(true);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return newFiles;
|
||||
});
|
||||
}, 200);
|
||||
}, [files]);
|
||||
|
||||
// 重新上传文件
|
||||
const retryUpload = useCallback((fileId: string) => {
|
||||
setFiles(prev =>
|
||||
prev.map(file =>
|
||||
file.id === fileId
|
||||
? { ...file, status: "uploading", progress: 0, error: undefined }
|
||||
: file
|
||||
)
|
||||
);
|
||||
|
||||
// 模拟重新上传
|
||||
setTimeout(() => {
|
||||
setFiles(prev =>
|
||||
prev.map(file => {
|
||||
if (file.id === fileId) {
|
||||
const success = Math.random() > 0.1;
|
||||
return {
|
||||
...file,
|
||||
status: success ? "success" : "error",
|
||||
progress: 100,
|
||||
error: success ? undefined : "上传失败，请重试"
|
||||
};
|
||||
}
|
||||
return file;
|
||||
})
|
||||
);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
// 重置表单，继续上传
|
||||
const resetForm = useCallback(() => {
|
||||
setFiles([]);
|
||||
setUploadComplete(false);
|
||||
setSelectedFileIds([]);
|
||||
formRef.current?.reset();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="document-upload-page">
|
||||
<div className="page-header">
|
||||
<h2 className="page-title">上传文档</h2>
|
||||
<div>
|
||||
<Button to="/documents" type="default" className="mr-2">
|
||||
<i className="ri-arrow-left-line"></i> 返回
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
disabled={files.length === 0 || uploading}
|
||||
onClick={() => formRef.current?.requestSubmit()}
|
||||
>
|
||||
<i className="ri-upload-2-line"></i> 开始上传
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
{!uploadComplete ? (
|
||||
<Form ref={formRef} method="post" onSubmit={handleSubmit} encType="multipart/form-data">
|
||||
<div className="form-grid">
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="docType">
|
||||
文档类型 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="docType"
|
||||
name="docType"
|
||||
className="form-select w-full"
|
||||
required
|
||||
>
|
||||
<option value="">请选择文档类型</option>
|
||||
{SUPPORTED_FILE_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="docNumber">
|
||||
文档编号
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="docNumber"
|
||||
name="docNumber"
|
||||
className="form-input w-full"
|
||||
placeholder="请输入合同编号、许可证号等"
|
||||
/>
|
||||
<div className="form-tip">如无编号可留空，系统将自动识别</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label" htmlFor="docRemark">
|
||||
备注信息
|
||||
</label>
|
||||
<textarea
|
||||
id="docRemark"
|
||||
name="docRemark"
|
||||
className="form-textarea w-full"
|
||||
placeholder="可输入文档的相关描述或备注信息"
|
||||
rows={2}
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
上传文档 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<UploadArea
|
||||
ref={uploadAreaRef}
|
||||
onFilesSelected={handleFilesSelected}
|
||||
accept=".pdf,.doc,.docx,.txt"
|
||||
multiple={true}
|
||||
icon="ri-upload-cloud-line"
|
||||
mainText="拖拽文件到此处或点击上传"
|
||||
tipText="支持 PDF、DOC、DOCX、TXT 格式文档，单个文件大小不超过50MB"
|
||||
disabled={uploading}
|
||||
/>
|
||||
|
||||
<div className="switch-container">
|
||||
<label className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isTestDocument}
|
||||
onChange={e => setIsTestDocument(e.target.checked)}
|
||||
/>
|
||||
<span className="slider"></span>
|
||||
</label>
|
||||
<span>标记为测试文档（不计入正式统计）</span>
|
||||
</div>
|
||||
|
||||
{files.length > 0 && (
|
||||
<div className="batch-actions">
|
||||
<div>
|
||||
<span className="text-sm">已选择 {selectedFileIds.length} 个文件</span>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
className="mr-2"
|
||||
onClick={removeSelectedFiles}
|
||||
disabled={selectedFileIds.length === 0 || uploading}
|
||||
>
|
||||
<i className="ri-delete-bin-line"></i> 删除选中
|
||||
</Button>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
onClick={clearAllFiles}
|
||||
disabled={files.length === 0 || uploading}
|
||||
>
|
||||
<i className="ri-close-circle-line"></i> 清空列表
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="file-list">
|
||||
{files.map(file => (
|
||||
<div key={file.id} className="file-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedFileIds.includes(file.id)}
|
||||
onChange={e => toggleFileSelection(file.id, e.target.checked)}
|
||||
disabled={uploading || file.status === "uploading"}
|
||||
className="mr-3"
|
||||
/>
|
||||
|
||||
<FileTag
|
||||
extension={getFileExtension(file.name)}
|
||||
size="lg"
|
||||
className="mr-3"
|
||||
/>
|
||||
|
||||
<div className="file-info">
|
||||
<div className="file-name flex items-center">
|
||||
<span>{file.newName || file.name}</span>
|
||||
{file.status !== "uploading" && (
|
||||
<button
|
||||
type="button"
|
||||
className="ml-2 text-primary text-sm"
|
||||
onClick={() => {
|
||||
const fileName = file.name;
|
||||
const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.'));
|
||||
const newName = prompt('编辑文件名', nameWithoutExt);
|
||||
if (newName) {
|
||||
updateFileName(file.id, newName);
|
||||
}
|
||||
}}
|
||||
disabled={uploading}
|
||||
>
|
||||
<i className="ri-edit-line"></i>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="file-meta">
|
||||
<span className="file-size">{formatFileSize(file.size)}</span>
|
||||
<span className={`file-status ${file.status === "error" ? "text-red-500" : ""}`}>
|
||||
{file.status === "waiting" && "等待上传"}
|
||||
{file.status === "uploading" && "上传中..."}
|
||||
{file.status === "success" && "上传成功"}
|
||||
{file.status === "error" && (
|
||||
<>
|
||||
{file.error}
|
||||
<button
|
||||
type="button"
|
||||
className="ml-2 text-primary text-xs"
|
||||
onClick={() => retryUpload(file.id)}
|
||||
>
|
||||
<i className="ri-refresh-line"></i> 重试
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="progress-bar">
|
||||
<div className="progress-bar-inner" style={{ width: `${file.progress}%` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="file-actions">
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
className="text-red-500"
|
||||
onClick={() => removeFile(file.id)}
|
||||
disabled={uploading || file.status === "uploading"}
|
||||
title="删除文件"
|
||||
>
|
||||
<i className="ri-delete-bin-line"></i>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</Form>
|
||||
) : (
|
||||
<div className="upload-complete-actions" style={{ display: "block" }}>
|
||||
<Alert type="success" className="mb-4">
|
||||
所有文件上传成功！
|
||||
</Alert>
|
||||
|
||||
<div>
|
||||
<Button type="default" className="mr-2" onClick={resetForm}>
|
||||
<i className="ri-add-line"></i> 继续上传
|
||||
</Button>
|
||||
<Button to="/documents" type="default" className="mr-2">
|
||||
<i className="ri-list-check-line"></i> 查看文档列表
|
||||
</Button>
|
||||
<Button to="/documents/1?action=audit" type="primary">
|
||||
<i className="ri-play-circle-line"></i> 开始审核
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -213,7 +213,6 @@ export default function FilesUpload() {
|
||||
}
|
||||
|
||||
setCurrentFile(selectedFiles[0]);
|
||||
console.log("currentFile", currentFile);
|
||||
startUpload(selectedFiles[0]);
|
||||
}, [fileType, currentFile]);
|
||||
|
||||
@@ -246,7 +245,7 @@ export default function FilesUpload() {
|
||||
setUploadSpeed("完成");
|
||||
|
||||
// 完成上传后开始处理流程
|
||||
startProcessing();
|
||||
startProcessing(file);
|
||||
}
|
||||
return 100;
|
||||
}
|
||||
@@ -257,7 +256,7 @@ export default function FilesUpload() {
|
||||
};
|
||||
|
||||
// 开始处理文件
|
||||
const startProcessing = () => {
|
||||
const startProcessing = (file: File) => {
|
||||
setUploadStage("processing");
|
||||
|
||||
// 更新步骤状态 - 将第一步标记为完成
|
||||
@@ -276,7 +275,7 @@ export default function FilesUpload() {
|
||||
if (currentStepIndex >= processingSteps.length) {
|
||||
if (processingIntervalRef.current) {
|
||||
clearInterval(processingIntervalRef.current);
|
||||
completeProcessing();
|
||||
completeProcessing(file);
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -322,18 +321,18 @@ export default function FilesUpload() {
|
||||
};
|
||||
|
||||
// 完成处理流程
|
||||
const completeProcessing = () => {
|
||||
const completeProcessing = (file: File) => {
|
||||
// 设置当前状态为已完成
|
||||
setUploadStage("completed");
|
||||
|
||||
// 创建完成的文件对象
|
||||
if (currentFile) {
|
||||
if (file) {
|
||||
console.log("创建完成的文件对象...");
|
||||
const newFile: UploadedFile = {
|
||||
id: `file_${Date.now()}`,
|
||||
name: currentFile.name,
|
||||
size: currentFile.size,
|
||||
type: currentFile.type,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
fileType: fileType as FileType,
|
||||
priority,
|
||||
status: ProcessingStatus.SUCCESS,
|
||||
@@ -495,6 +494,7 @@ export default function FilesUpload() {
|
||||
width: "15%",
|
||||
render: (_: unknown, record: UploadedFile) => (
|
||||
<Button
|
||||
className={record.status !== ProcessingStatus.SUCCESS ? "" : "hover:border-green-700 hover:text-green-700"}
|
||||
type="default"
|
||||
size="small"
|
||||
disabled={record.status !== ProcessingStatus.SUCCESS}
|
||||
|
||||
@@ -1,306 +0,0 @@
|
||||
import React from 'react';
|
||||
import { json, type MetaFunction } from '@remix-run/node';
|
||||
import { useLoaderData, useSearchParams, Form } from '@remix-run/react';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { Card } from '~/components/ui/Card';
|
||||
import { Table } from '~/components/ui/Table';
|
||||
import { Breadcrumb } from '~/components/layout/Breadcrumb';
|
||||
import type { File } from '~/models/file';
|
||||
import { REVIEW_STATUS_LABELS, REVIEW_STATUS_COLORS } from '~/models/file';
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 文件列表" },
|
||||
{ name: "description", content: "评查文件列表" }
|
||||
];
|
||||
};
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: '文件列表'
|
||||
};
|
||||
|
||||
interface LoaderData {
|
||||
files: File[];
|
||||
documentTypes: {
|
||||
id: string;
|
||||
name: string;
|
||||
}[];
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
export async function loader({ request }) {
|
||||
const url = new URL(request.url);
|
||||
const documentTypeId = url.searchParams.get("documentTypeId") || "";
|
||||
const reviewStatus = url.searchParams.get("reviewStatus") || "";
|
||||
const keyword = url.searchParams.get("keyword") || "";
|
||||
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const files: File[] = [
|
||||
{
|
||||
id: "1",
|
||||
fileName: "2023年度烟草专卖零售许可证.pdf",
|
||||
fileType: "application/pdf",
|
||||
documentTypeId: "2",
|
||||
documentTypeName: "专卖许可证",
|
||||
fileSize: 1024 * 1024 * 2.5, // 2.5MB
|
||||
uploaderId: "1",
|
||||
uploaderName: "张三",
|
||||
status: "completed",
|
||||
reviewStatus: "pass",
|
||||
createdAt: "2023-12-24 14:30",
|
||||
updatedAt: "2023-12-24 16:45"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
fileName: "烟草制品购销合同(2023-12).docx",
|
||||
fileType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
documentTypeId: "1",
|
||||
documentTypeName: "合同文档",
|
||||
fileSize: 1024 * 1024 * 1.2, // 1.2MB
|
||||
uploaderId: "1",
|
||||
uploaderName: "张三",
|
||||
status: "completed",
|
||||
reviewStatus: "warning",
|
||||
createdAt: "2023-12-23 09:15",
|
||||
updatedAt: "2023-12-23 10:30"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
fileName: "专卖管理处罚决定书(2023-145).pdf",
|
||||
fileType: "application/pdf",
|
||||
documentTypeId: "3",
|
||||
documentTypeName: "行政处罚决定书",
|
||||
fileSize: 1024 * 1024 * 3.1, // 3.1MB
|
||||
uploaderId: "2",
|
||||
uploaderName: "李四",
|
||||
status: "completed",
|
||||
reviewStatus: "fail",
|
||||
createdAt: "2023-12-22 16:45",
|
||||
updatedAt: "2023-12-22 18:20"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
fileName: "2023年第四季度采购合同.docx",
|
||||
fileType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
documentTypeId: "1",
|
||||
documentTypeName: "合同文档",
|
||||
fileSize: 1024 * 1024 * 1.8, // 1.8MB
|
||||
uploaderId: "3",
|
||||
uploaderName: "王五",
|
||||
status: "completed",
|
||||
reviewStatus: "pass",
|
||||
createdAt: "2023-12-20 11:20",
|
||||
updatedAt: "2023-12-20 14:35"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
fileName: "广告宣传协议书.pdf",
|
||||
fileType: "application/pdf",
|
||||
documentTypeId: "1",
|
||||
documentTypeName: "合同文档",
|
||||
fileSize: 1024 * 1024 * 0.9, // 0.9MB
|
||||
uploaderId: "2",
|
||||
uploaderName: "李四",
|
||||
status: "pending",
|
||||
reviewStatus: "pending",
|
||||
createdAt: "2023-12-18 15:30",
|
||||
updatedAt: "2023-12-18 15:30"
|
||||
}
|
||||
];
|
||||
|
||||
const documentTypes = [
|
||||
{ id: "1", name: "合同文档" },
|
||||
{ id: "2", name: "专卖许可证" },
|
||||
{ id: "3", name: "行政处罚决定书" },
|
||||
{ id: "4", name: "其他文档" }
|
||||
];
|
||||
|
||||
// 过滤数据
|
||||
let filteredFiles = [...files];
|
||||
|
||||
if (documentTypeId) {
|
||||
filteredFiles = filteredFiles.filter(file => file.documentTypeId === documentTypeId);
|
||||
}
|
||||
|
||||
if (reviewStatus) {
|
||||
filteredFiles = filteredFiles.filter(file => file.reviewStatus === reviewStatus);
|
||||
}
|
||||
|
||||
if (keyword) {
|
||||
const lowerKeyword = keyword.toLowerCase();
|
||||
filteredFiles = filteredFiles.filter(file =>
|
||||
file.fileName.toLowerCase().includes(lowerKeyword)
|
||||
);
|
||||
}
|
||||
|
||||
return json<LoaderData>({
|
||||
files: filteredFiles,
|
||||
documentTypes,
|
||||
totalCount: files.length
|
||||
});
|
||||
}
|
||||
|
||||
export default function FilesList() {
|
||||
const { files, documentTypes } = useLoaderData<typeof loader>();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
// 文件大小格式化
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
};
|
||||
|
||||
// 获取文件图标
|
||||
const getFileIcon = (fileType: string): string => {
|
||||
if (fileType.includes('pdf')) return 'ri-file-pdf-line';
|
||||
if (fileType.includes('word')) return 'ri-file-word-line';
|
||||
if (fileType.includes('excel') || fileType.includes('spreadsheet')) return 'ri-file-excel-line';
|
||||
if (fileType.includes('image')) return 'ri-file-image-line';
|
||||
return 'ri-file-text-line';
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ title: '文件管理', to: '/files' },
|
||||
{ title: '文件列表', to: '/files' }
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-xl font-medium">评查文件列表</h2>
|
||||
<div className="flex items-center ml-4 bg-white px-3 py-1 rounded-md">
|
||||
<i className="ri-file-list-3-line text-primary text-lg mr-1"></i>
|
||||
<span className="text-sm text-secondary">总文件数：</span>
|
||||
<span className="text-base font-bold text-primary ml-1">{files.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="primary" icon="ri-file-upload-line" to="/files/new">
|
||||
上传新文件
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="mb-5">
|
||||
<Form method="get" className="flex flex-wrap items-end gap-3">
|
||||
<div className="w-48">
|
||||
<label className="form-label">文件类型</label>
|
||||
<select
|
||||
name="documentTypeId"
|
||||
className="form-select w-full"
|
||||
defaultValue={searchParams.get('documentTypeId') || ''}
|
||||
>
|
||||
<option value="">全部</option>
|
||||
{documentTypes.map(type => (
|
||||
<option key={type.id} value={type.id}>{type.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="w-48">
|
||||
<label className="form-label">评查状态</label>
|
||||
<select
|
||||
name="reviewStatus"
|
||||
className="form-select w-full"
|
||||
defaultValue={searchParams.get('reviewStatus') || ''}
|
||||
>
|
||||
<option value="">全部</option>
|
||||
{Object.entries(REVIEW_STATUS_LABELS).map(([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="w-64">
|
||||
<label className="form-label">文件名称</label>
|
||||
<div className="search-box">
|
||||
<input
|
||||
type="text"
|
||||
name="keyword"
|
||||
className="form-input"
|
||||
placeholder="搜索文件名称"
|
||||
defaultValue={searchParams.get('keyword') || ''}
|
||||
/>
|
||||
<button type="submit" className="ant-btn ant-btn-primary">
|
||||
<i className="ri-search-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="default" className="ml-2">重置</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
title: "文件名称",
|
||||
render: (_, record: File) => (
|
||||
<div className="flex items-center">
|
||||
<i className={`${getFileIcon(record.fileType)} text-lg text-gray-500 mr-2`}></i>
|
||||
<div>
|
||||
<div className="font-medium">{record.fileName}</div>
|
||||
<div className="text-xs text-gray-500">{formatFileSize(record.fileSize)}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{ title: "文档类型", dataIndex: "documentTypeName" },
|
||||
{
|
||||
title: "评查状态",
|
||||
dataIndex: "reviewStatus",
|
||||
render: (value) => (
|
||||
<span className={`status-badge status-${REVIEW_STATUS_COLORS[value]}`}>
|
||||
<i className={`ri-${value === 'pass' ? 'checkbox-circle' : value === 'warning' ? 'error-warning' : value === 'fail' ? 'close-circle' : 'time'}-line mr-1`}></i>
|
||||
{REVIEW_STATUS_LABELS[value]}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "上传人",
|
||||
dataIndex: "uploaderName"
|
||||
},
|
||||
{
|
||||
title: "上传时间",
|
||||
dataIndex: "createdAt"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
render: (_, record: File) => (
|
||||
<div className="space-x-2">
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
icon="ri-file-search-line"
|
||||
to={`/reviews/${record.id}`}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
{record.status === 'pending' && (
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="ri-play-circle-line"
|
||||
>
|
||||
开始评查
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="ri-delete-bin-line"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]}
|
||||
dataSource={files}
|
||||
rowKey="id"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { MetaFunction } from '@remix-run/node';
|
||||
import { Card } from '~/components/ui/Card';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "文件上传 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "上传文件进行智能评查" }
|
||||
];
|
||||
};
|
||||
|
||||
export default function FilesNew() {
|
||||
return (
|
||||
<div className="p-6">
|
||||
{/* 页面标识 */}
|
||||
<div className="mb-4 p-3 bg-blue-100 border border-blue-300 rounded text-blue-800">
|
||||
<h3 className="font-bold text-lg">当前页面: 文件上传 (files/new.tsx)</h3>
|
||||
<p>如果你看到这个提示，说明你正在浏览文件上传页面，路由已成功加载。</p>
|
||||
<div className="mt-2">
|
||||
<a href="/" className="text-blue-600 hover:underline">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card title="文件上传" icon="ri-upload-cloud-line" className="mt-6">
|
||||
<div className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50">
|
||||
<i className="ri-upload-cloud-line text-5xl text-gray-400 mb-4"></i>
|
||||
<p className="text-lg mb-4">拖拽文件到此处或点击上传</p>
|
||||
<Button type="primary" icon="ri-upload-line">选择文件</Button>
|
||||
<p className="text-gray-500 mt-3">支持 PDF、DOC、DOCX、XLS、XLSX 等格式</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,414 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { json, type MetaFunction } from '@remix-run/node';
|
||||
import { useLoaderData, useParams } from '@remix-run/react';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { Card } from '~/components/ui/Card';
|
||||
import { Breadcrumb } from '~/components/layout/Breadcrumb';
|
||||
import type { ReviewResult, RuleCheckResult } from '~/models/review';
|
||||
import type { File } from '~/models/file';
|
||||
import { RULE_CHECK_STATUS_LABELS, RULE_CHECK_STATUS_COLORS } from '~/models/review';
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查详情" },
|
||||
{ name: "description", content: "文件评查详情页面" }
|
||||
];
|
||||
};
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: '评查详情'
|
||||
};
|
||||
|
||||
interface LoaderData {
|
||||
file: File;
|
||||
reviewResult: ReviewResult;
|
||||
reviewPoints: RuleCheckResult[];
|
||||
fileContent?: string; // 模拟文件内容
|
||||
}
|
||||
|
||||
export async function loader({ params }) {
|
||||
const { reviewId } = params;
|
||||
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const file: File = {
|
||||
id: "1",
|
||||
fileName: "2023年度烟草专卖零售许可证.pdf",
|
||||
fileType: "application/pdf",
|
||||
documentTypeId: "2",
|
||||
documentTypeName: "专卖许可证",
|
||||
fileSize: 1024 * 1024 * 2.5, // 2.5MB
|
||||
uploaderId: "1",
|
||||
uploaderName: "张三",
|
||||
status: "completed",
|
||||
reviewStatus: "pass",
|
||||
createdAt: "2023-12-24 14:30",
|
||||
updatedAt: "2023-12-24 16:45"
|
||||
};
|
||||
|
||||
const reviewResult: ReviewResult = {
|
||||
id: reviewId,
|
||||
fileId: "1",
|
||||
fileName: "2023年度烟草专卖零售许可证.pdf",
|
||||
totalPoints: 15,
|
||||
passPoints: 6,
|
||||
warningPoints: 7,
|
||||
errorPoints: 2,
|
||||
score: 80,
|
||||
reviewStatus: "warning",
|
||||
reviewedAt: "2023-12-24 16:45",
|
||||
reviewerId: "system",
|
||||
reviewerName: "AI系统",
|
||||
createdAt: "2023-12-24 14:35",
|
||||
updatedAt: "2023-12-24 16:45"
|
||||
};
|
||||
|
||||
const reviewPoints: RuleCheckResult[] = [
|
||||
{
|
||||
id: "1",
|
||||
reviewResultId: reviewId,
|
||||
ruleId: "1",
|
||||
ruleName: "合同主体信息完整性检查",
|
||||
status: "pass",
|
||||
location: "第1页 第3段",
|
||||
content: "甲方：XX烟草公司，地址：XX市XX区XX路XX号，法定代表人：张XX",
|
||||
suggestion: "主体信息完整，符合规范",
|
||||
manualReviewed: false,
|
||||
createdAt: "2023-12-24 14:40",
|
||||
updatedAt: "2023-12-24 14:40"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
reviewResultId: reviewId,
|
||||
ruleId: "2",
|
||||
ruleName: "许可证编号格式检查",
|
||||
status: "warning",
|
||||
location: "第1页 第5段",
|
||||
content: "许可证编号：(2023)12345",
|
||||
suggestion: "许可证编号格式不完全符合规范，建议修改为'烟零许(2023)12345号'",
|
||||
manualReviewed: true,
|
||||
createdAt: "2023-12-24 14:40",
|
||||
updatedAt: "2023-12-24 15:20"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
reviewResultId: reviewId,
|
||||
ruleId: "3",
|
||||
ruleName: "许可证有效期检查",
|
||||
status: "fail",
|
||||
location: "第1页 第8段",
|
||||
content: "有效期：自2023年1月1日",
|
||||
suggestion: "许可证缺少有效期截止日期，必须明确注明有效期限",
|
||||
manualReviewed: false,
|
||||
createdAt: "2023-12-24 14:40",
|
||||
updatedAt: "2023-12-24 14:40"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
reviewResultId: reviewId,
|
||||
ruleId: "4",
|
||||
ruleName: "经营场所信息检查",
|
||||
status: "pass",
|
||||
location: "第1页 第12段",
|
||||
content: "经营场所：XX市XX区XX街XX号，面积：120平方米",
|
||||
suggestion: "经营场所信息完整",
|
||||
manualReviewed: false,
|
||||
createdAt: "2023-12-24 14:40",
|
||||
updatedAt: "2023-12-24 14:40"
|
||||
}
|
||||
];
|
||||
|
||||
// 模拟文件内容，实际项目中应从API获取或使用专用组件展示
|
||||
const fileContent = `烟草专卖零售许可证
|
||||
发证机关：XX市烟草专卖局
|
||||
发证日期：2023年1月1日
|
||||
|
||||
甲方：XX烟草公司，地址：XX市XX区XX路XX号，法定代表人：张XX
|
||||
|
||||
零售单位名称：XX便利店
|
||||
许可证编号：(2023)12345
|
||||
法定代表人/负责人：李XX
|
||||
经营者类型：个体工商户
|
||||
有效期：自2023年1月1日
|
||||
联系电话：123-4567890
|
||||
|
||||
经营场所：XX市XX区XX街XX号，面积：120平方米
|
||||
零售烟草制品品种：卷烟、雪茄烟
|
||||
|
||||
特别说明：本许可证不得伪造、变造、转让、涂改。
|
||||
`;
|
||||
|
||||
return json<LoaderData>({
|
||||
file,
|
||||
reviewResult,
|
||||
reviewPoints,
|
||||
fileContent
|
||||
});
|
||||
}
|
||||
|
||||
export default function ReviewDetail() {
|
||||
const { file, reviewResult, reviewPoints, fileContent } = useLoaderData<typeof loader>();
|
||||
const [activeTab, setActiveTab] = useState('tab-preview');
|
||||
const [selectedPoint, setSelectedPoint] = useState<string | null>(null);
|
||||
|
||||
const handleTabChange = (tabId: string) => {
|
||||
setActiveTab(tabId);
|
||||
};
|
||||
|
||||
const handlePointSelect = (pointId: string) => {
|
||||
setSelectedPoint(pointId === selectedPoint ? null : pointId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ title: '评查结果', to: '/reviews' },
|
||||
{ title: '评查详情', to: `/reviews/${reviewResult.id}` }
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-xl font-medium">{file.fileName}</h2>
|
||||
<span className={`ml-3 status-badge status-${reviewResult.reviewStatus === 'pass' ? 'success' : reviewResult.reviewStatus === 'warning' ? 'warning' : 'error'}`}>
|
||||
<i className={`ri-${reviewResult.reviewStatus === 'pass' ? 'checkbox-circle' : reviewResult.reviewStatus === 'warning' ? 'error-warning' : 'close-circle'}-line mr-1`}></i>
|
||||
{reviewResult.reviewStatus === 'pass' ? '通过' : reviewResult.reviewStatus === 'warning' ? '警告' : '不通过'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-x-2">
|
||||
<Button type="default" icon="ri-download-line">
|
||||
导出评查报告
|
||||
</Button>
|
||||
<Button type="primary" icon="ri-check-double-line">
|
||||
完成评查
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tab-container">
|
||||
<div className="tab-nav">
|
||||
<div
|
||||
className={`tab-nav-item ${activeTab === 'tab-preview' ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange('tab-preview')}
|
||||
>
|
||||
<i className="ri-file-text-line"></i> 评查结果
|
||||
</div>
|
||||
<div
|
||||
className={`tab-nav-item ${activeTab === 'tab-suggestion' ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange('tab-suggestion')}
|
||||
>
|
||||
<i className="ri-lightbulb-line"></i> AI智能分析
|
||||
</div>
|
||||
<div
|
||||
className={`tab-nav-item ${activeTab === 'tab-fileinfo' ? 'active' : ''}`}
|
||||
onClick={() => handleTabChange('tab-fileinfo')}
|
||||
>
|
||||
<i className="ri-information-line"></i> 文件信息
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tab-content">
|
||||
<div className={`tab-pane ${activeTab === 'tab-preview' ? 'active' : ''}`}>
|
||||
<div className="flex flex-col lg:flex-row lg:h-[calc(100vh-250px)]">
|
||||
{/* 文件内容预览 */}
|
||||
<div className="w-full lg:w-2/3 h-full mb-4 lg:mb-0 lg:pr-4">
|
||||
<div className="bg-white p-4 rounded-md shadow-sm h-full overflow-y-auto">
|
||||
<pre className="whitespace-pre-wrap font-sans text-gray-800">
|
||||
{fileContent}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 评查点列表 */}
|
||||
<div className="w-full lg:w-1/3 h-full lg:pl-4">
|
||||
<div className="review-points-panel h-full flex flex-col">
|
||||
<div className="review-panel-header py-2 px-4 flex items-center bg-primary-light">
|
||||
<i className="ri-file-list-check-line text-primary mr-2"></i>
|
||||
<span className="font-medium text-primary">评查结果</span>
|
||||
</div>
|
||||
|
||||
{/* 评查统计 */}
|
||||
<div className="review-statistics bg-white border-b border-gray-100 py-3 px-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<div className="w-7 h-7 bg-gray-100 rounded-md flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-gray-600">{reviewResult.totalPoints}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 ml-1">总计</span>
|
||||
</div>
|
||||
<div className="h-8 border-r border-gray-200"></div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-7 h-7 bg-green-50 rounded-md flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-success">{reviewResult.passPoints}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 ml-1">通过</span>
|
||||
</div>
|
||||
<div className="h-8 border-r border-gray-200"></div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-7 h-7 bg-yellow-50 rounded-md flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-warning">{reviewResult.warningPoints}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 ml-1">警告</span>
|
||||
</div>
|
||||
<div className="h-8 border-r border-gray-200"></div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-7 h-7 bg-red-50 rounded-md flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-error">{reviewResult.errorPoints}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 ml-1">错误</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 评查点列表 */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{reviewPoints.map(point => (
|
||||
<div
|
||||
key={point.id}
|
||||
className={`review-point-item ${selectedPoint === point.id ? 'bg-gray-50' : ''}`}
|
||||
onClick={() => handlePointSelect(point.id)}
|
||||
>
|
||||
<div className="review-point-header">
|
||||
<div className="review-point-title">{point.ruleName}</div>
|
||||
<span className={`status-badge status-${RULE_CHECK_STATUS_COLORS[point.status]}`}>
|
||||
<i className={`ri-${point.status === 'pass' ? 'checkbox-circle' : point.status === 'warning' ? 'error-warning' : 'close-circle'}-line mr-1`}></i>
|
||||
{RULE_CHECK_STATUS_LABELS[point.status]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="review-point-location">
|
||||
<i className="ri-file-list-line mr-1"></i>
|
||||
<span>{point.location}</span>
|
||||
</div>
|
||||
|
||||
{selectedPoint === point.id && (
|
||||
<div className="mt-2 pt-2 border-t border-gray-100">
|
||||
<div className="text-xs text-gray-600 mb-1">
|
||||
<span className="font-medium">内容：</span>
|
||||
<span>{point.content}</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600">
|
||||
<span className="font-medium">建议：</span>
|
||||
<span>{point.suggestion}</span>
|
||||
</div>
|
||||
<div className="mt-2 flex justify-between">
|
||||
<div className="text-xs text-gray-500">
|
||||
{point.manualReviewed &&
|
||||
<span><i className="ri-user-line mr-1"></i>人工审核</span>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<Button type="default" size="small">
|
||||
<i className="ri-edit-line mr-1"></i>修改
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`tab-pane ${activeTab === 'tab-suggestion' ? 'active' : ''}`}>
|
||||
<Card>
|
||||
<div className="text-lg font-medium mb-4 text-gray-800">AI智能分析意见</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="font-medium text-gray-700 mb-2">总体评价</div>
|
||||
<div className="p-3 bg-gray-50 rounded-md text-gray-600">
|
||||
该烟草专卖零售许可证文档基本符合规范要求，但存在部分问题需要修改。主要包括许可证编号格式不标准和缺少有效期截止日期两个问题，其中缺少有效期截止日期属于严重问题，必须补充完善。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="font-medium text-gray-700 mb-2">主要问题</div>
|
||||
<ul className="list-disc pl-5 space-y-2 text-gray-600">
|
||||
<li><span className="text-warning font-medium">许可证编号格式不规范</span> - 当前格式为"(2023)12345"，应修改为"烟零许(2023)12345号"</li>
|
||||
<li><span className="text-error font-medium">缺少许可证有效期截止日期</span> - 仅注明了起始日期"自2023年1月1日"，缺少截止日期</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="font-medium text-gray-700 mb-2">修改建议</div>
|
||||
<ul className="list-decimal pl-5 space-y-2 text-gray-600">
|
||||
<li>规范许可证编号格式，在前面添加"烟零许"，在后面添加"号"</li>
|
||||
<li>补充完善许可证有效期，明确注明截止日期，如"自2023年1月1日至2023年12月31日"</li>
|
||||
<li>建议对零售烟草制品品种部分进行细化描述，列明具体品牌类别</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className={`tab-pane ${activeTab === 'tab-fileinfo' ? 'active' : ''}`}>
|
||||
<Card>
|
||||
<div className="text-lg font-medium mb-4 text-gray-800">文件基本信息</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500 w-1/3">文件名称</td>
|
||||
<td className="py-2 text-gray-800">{file.fileName}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">文件类型</td>
|
||||
<td className="py-2 text-gray-800">{file.documentTypeName}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">文件大小</td>
|
||||
<td className="py-2 text-gray-800">{(file.fileSize / (1024 * 1024)).toFixed(2)} MB</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">上传人</td>
|
||||
<td className="py-2 text-gray-800">{file.uploaderName}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 text-gray-500">上传时间</td>
|
||||
<td className="py-2 text-gray-800">{file.createdAt}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<table className="w-full">
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500 w-1/3">评查状态</td>
|
||||
<td className="py-2 text-gray-800">
|
||||
<span className={`status-badge status-${reviewResult.reviewStatus === 'pass' ? 'success' : reviewResult.reviewStatus === 'warning' ? 'warning' : 'error'}`}>
|
||||
<i className={`ri-${reviewResult.reviewStatus === 'pass' ? 'checkbox-circle' : reviewResult.reviewStatus === 'warning' ? 'error-warning' : 'close-circle'}-line mr-1`}></i>
|
||||
{reviewResult.reviewStatus === 'pass' ? '通过' : reviewResult.reviewStatus === 'warning' ? '警告' : '不通过'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">评查得分</td>
|
||||
<td className="py-2 text-gray-800">{reviewResult.score} 分</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">评查完成时间</td>
|
||||
<td className="py-2 text-gray-800">{reviewResult.reviewedAt}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">评查人</td>
|
||||
<td className="py-2 text-gray-800">{reviewResult.reviewerName}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 text-gray-500">评查总点数</td>
|
||||
<td className="py-2 text-gray-800">{reviewResult.totalPoints} 项</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,328 +0,0 @@
|
||||
import React from 'react';
|
||||
import { json, type MetaFunction } from '@remix-run/node';
|
||||
import { useLoaderData, Link } from '@remix-run/react';
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { Card } from '~/components/ui/Card';
|
||||
import { Table } from '~/components/ui/Table';
|
||||
import type { ReviewResult } from '~/models/review';
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查结果" },
|
||||
{ name: "description", content: "文件评查结果列表" }
|
||||
];
|
||||
};
|
||||
|
||||
export const handle = {
|
||||
breadcrumb: '评查结果'
|
||||
};
|
||||
|
||||
interface LoaderData {
|
||||
reviews: ReviewResult[];
|
||||
totalCount: number;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
export async function loader({ request }) {
|
||||
// 解析查询参数
|
||||
const url = new URL(request.url);
|
||||
const keyword = url.searchParams.get("keyword") || "";
|
||||
const status = url.searchParams.get("status") || "";
|
||||
const startDate = url.searchParams.get("startDate") || "";
|
||||
const endDate = url.searchParams.get("endDate") || "";
|
||||
const page = parseInt(url.searchParams.get("page") || "1", 10);
|
||||
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
|
||||
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const reviews: ReviewResult[] = [
|
||||
{
|
||||
id: "1",
|
||||
fileId: "1",
|
||||
fileName: "2023年度烟草专卖零售许可证.pdf",
|
||||
totalPoints: 15,
|
||||
passPoints: 11,
|
||||
warningPoints: 3,
|
||||
errorPoints: 1,
|
||||
score: 85,
|
||||
reviewStatus: "warning",
|
||||
reviewedAt: "2023-12-24 16:45",
|
||||
reviewerId: "system",
|
||||
reviewerName: "AI系统",
|
||||
createdAt: "2023-12-24 14:35",
|
||||
updatedAt: "2023-12-24 16:45"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
fileId: "2",
|
||||
fileName: "烟草零售合同协议书.docx",
|
||||
totalPoints: 20,
|
||||
passPoints: 18,
|
||||
warningPoints: 2,
|
||||
errorPoints: 0,
|
||||
score: 92,
|
||||
reviewStatus: "pass",
|
||||
reviewedAt: "2023-12-23 10:30",
|
||||
reviewerId: "user1",
|
||||
reviewerName: "李四",
|
||||
createdAt: "2023-12-23 09:15",
|
||||
updatedAt: "2023-12-23 10:30"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
fileId: "3",
|
||||
fileName: "烟草采购清单2023.xlsx",
|
||||
totalPoints: 12,
|
||||
passPoints: 5,
|
||||
warningPoints: 3,
|
||||
errorPoints: 4,
|
||||
score: 60,
|
||||
reviewStatus: "fail",
|
||||
reviewedAt: "2023-12-22 18:20",
|
||||
reviewerId: "system",
|
||||
reviewerName: "AI系统",
|
||||
createdAt: "2023-12-22 17:45",
|
||||
updatedAt: "2023-12-22 18:20"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
fileId: "4",
|
||||
fileName: "2023年第三季度烟草销售报告.pdf",
|
||||
totalPoints: 18,
|
||||
passPoints: 16,
|
||||
warningPoints: 2,
|
||||
errorPoints: 0,
|
||||
score: 94,
|
||||
reviewStatus: "pass",
|
||||
reviewedAt: "2023-12-21 14:10",
|
||||
reviewerId: "user2",
|
||||
reviewerName: "王五",
|
||||
createdAt: "2023-12-21 13:30",
|
||||
updatedAt: "2023-12-21 14:10"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
fileId: "5",
|
||||
fileName: "烟草品牌授权书.pdf",
|
||||
totalPoints: 10,
|
||||
passPoints: 6,
|
||||
warningPoints: 3,
|
||||
errorPoints: 1,
|
||||
score: 75,
|
||||
reviewStatus: "warning",
|
||||
reviewedAt: "2023-12-20 11:25",
|
||||
reviewerId: "system",
|
||||
reviewerName: "AI系统",
|
||||
createdAt: "2023-12-20 10:50",
|
||||
updatedAt: "2023-12-20 11:25"
|
||||
}
|
||||
];
|
||||
|
||||
// 根据查询条件过滤结果
|
||||
let filteredReviews = [...reviews];
|
||||
|
||||
if (keyword) {
|
||||
filteredReviews = filteredReviews.filter(review =>
|
||||
review.fileName.toLowerCase().includes(keyword.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
if (status) {
|
||||
filteredReviews = filteredReviews.filter(review =>
|
||||
review.reviewStatus === status
|
||||
);
|
||||
}
|
||||
|
||||
if (startDate) {
|
||||
const start = new Date(startDate);
|
||||
filteredReviews = filteredReviews.filter(review =>
|
||||
new Date(review.reviewedAt) >= start
|
||||
);
|
||||
}
|
||||
|
||||
if (endDate) {
|
||||
const end = new Date(endDate);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
filteredReviews = filteredReviews.filter(review =>
|
||||
new Date(review.reviewedAt) <= end
|
||||
);
|
||||
}
|
||||
|
||||
// 分页
|
||||
const totalCount = filteredReviews.length;
|
||||
const totalPages = Math.ceil(totalCount / pageSize);
|
||||
const startIndex = (page - 1) * pageSize;
|
||||
const pagedReviews = filteredReviews.slice(startIndex, startIndex + pageSize);
|
||||
|
||||
return json<LoaderData>({
|
||||
reviews: pagedReviews,
|
||||
totalCount,
|
||||
currentPage: page,
|
||||
totalPages
|
||||
});
|
||||
}
|
||||
|
||||
export default function ReviewsList() {
|
||||
const { reviews, totalCount, currentPage, totalPages } = useLoaderData<typeof loader>();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "文件名称",
|
||||
key: "fileName",
|
||||
render: (review: ReviewResult) => (
|
||||
<Link
|
||||
to={`/reviews/${review.id}`}
|
||||
className="text-primary hover:text-primary-dark transition-colors"
|
||||
>
|
||||
{review.fileName}
|
||||
</Link>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "评查状态",
|
||||
key: "reviewStatus",
|
||||
render: (review: ReviewResult) => (
|
||||
<span className={`status-badge status-${review.reviewStatus === 'pass' ? 'success' : review.reviewStatus === 'warning' ? 'warning' : 'error'}`}>
|
||||
<i className={`ri-${review.reviewStatus === 'pass' ? 'checkbox-circle' : review.reviewStatus === 'warning' ? 'error-warning' : 'close-circle'}-line mr-1`}></i>
|
||||
{review.reviewStatus === 'pass' ? '通过' : review.reviewStatus === 'warning' ? '警告' : '不通过'}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "评查得分",
|
||||
key: "score",
|
||||
render: (review: ReviewResult) => (
|
||||
<span className={`font-medium ${review.score >= 90 ? 'text-success' : review.score >= 70 ? 'text-warning' : 'text-error'}`}>
|
||||
{review.score}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "评查点",
|
||||
key: "points",
|
||||
render: (review: ReviewResult) => (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs px-2 py-1 bg-gray-100 rounded-full">{review.totalPoints}项</span>
|
||||
<span className="text-xs px-2 py-1 bg-green-50 text-success rounded-full">{review.passPoints}</span>
|
||||
<span className="text-xs px-2 py-1 bg-yellow-50 text-warning rounded-full">{review.warningPoints}</span>
|
||||
<span className="text-xs px-2 py-1 bg-red-50 text-error rounded-full">{review.errorPoints}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "评查时间",
|
||||
key: "reviewedAt",
|
||||
render: (review: ReviewResult) => review.reviewedAt
|
||||
},
|
||||
{
|
||||
title: "评查人",
|
||||
key: "reviewerName",
|
||||
render: (review: ReviewResult) => (
|
||||
<span className="flex items-center">
|
||||
<i className={`ri-${review.reviewerId === 'system' ? 'robot-line' : 'user-line'} mr-1 ${review.reviewerId === 'system' ? 'text-primary' : 'text-gray-600'}`}></i>
|
||||
{review.reviewerName}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "actions",
|
||||
render: (review: ReviewResult) => (
|
||||
<div className="space-x-2">
|
||||
<Link
|
||||
to={`/reviews/${review.id}`}
|
||||
className="btn-text"
|
||||
>
|
||||
<i className="ri-search-line mr-1"></i>
|
||||
查看详情
|
||||
</Link>
|
||||
<button className="btn-text">
|
||||
<i className="ri-download-line mr-1"></i>
|
||||
导出报告
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-4 flex justify-between items-center">
|
||||
<h2 className="text-xl font-medium">评查结果列表</h2>
|
||||
<Link to="/files/upload" className="btn-primary">
|
||||
<i className="ri-upload-cloud-line mr-1"></i>
|
||||
上传新文件
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Card className="mb-4">
|
||||
<form className="filter-form">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="form-group">
|
||||
<label htmlFor="keyword" className="form-label">关键词</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="keyword"
|
||||
name="keyword"
|
||||
className="form-input pl-8"
|
||||
placeholder="文件名称"
|
||||
/>
|
||||
<i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="status" className="form-label">评查状态</label>
|
||||
<select id="status" name="status" className="form-select">
|
||||
<option value="">全部状态</option>
|
||||
<option value="pass">通过</option>
|
||||
<option value="warning">警告</option>
|
||||
<option value="fail">不通过</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="startDate" className="form-label">开始日期</label>
|
||||
<input type="date" id="startDate" name="startDate" className="form-input" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="endDate" className="form-label">结束日期</label>
|
||||
<input type="date" id="endDate" name="endDate" className="form-input" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end mt-4">
|
||||
<button type="reset" className="btn-default mr-2">
|
||||
<i className="ri-refresh-line mr-1"></i>
|
||||
重置
|
||||
</button>
|
||||
<button type="submit" className="btn-primary">
|
||||
<i className="ri-search-line mr-1"></i>
|
||||
查询
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div className="mb-3 text-gray-500">
|
||||
共 <span className="text-primary">{totalCount}</span> 条评查结果
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={reviews}
|
||||
rowKey="id"
|
||||
pagination={{
|
||||
current: currentPage,
|
||||
pageSize: 10,
|
||||
total: totalCount,
|
||||
totalPages: totalPages
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+206
-174
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { json, type MetaFunction, type LoaderFunctionArgs, redirect } from "@remix-run/node";
|
||||
import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
|
||||
import { useLoaderData, useSearchParams, useSubmit,Link } from "@remix-run/react";
|
||||
import { Button } from '~/components/ui/Button';
|
||||
import { Card } from '~/components/ui/Card';
|
||||
import { Tag } from '~/components/ui/Tag';
|
||||
@@ -9,219 +9,245 @@ import rulesStyles from "~/styles/pages/rules_index.css?url";
|
||||
import type { Rule } from '~/models/rule';
|
||||
import { RULE_TYPE_LABELS, RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
|
||||
import type { TagColor } from '~/components/ui/Tag';
|
||||
import { Link } from '@remix-run/react';
|
||||
import { Table } from '~/components/ui/Table';
|
||||
import { FilterPanel, FilterSelect, SearchFilter } from '~/components/ui/FilterPanel';
|
||||
import { Pagination } from '~/components/ui/Pagination';
|
||||
// import { getRulesList } from '~/api/evaluation_points/rules';
|
||||
|
||||
export const links = () => [
|
||||
{ rel: "stylesheet", href: rulesStyles }
|
||||
];
|
||||
|
||||
// export const handle = {
|
||||
// breadcrumb: "评查点列表"
|
||||
// };
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "中国烟草AI合同及卷宗审核系统 - 评查点列表" },
|
||||
{ name: "description", content: "管理评查点规则，支持根据类型、规则组和状态进行筛选" },
|
||||
{ name: "rules", content: "管理评查点规则，支持根据类型、规则组和状态进行筛选" },
|
||||
{ name: "keywords", content: "评查点,合同审核,规则管理,中国烟草" }
|
||||
];
|
||||
};
|
||||
|
||||
interface LoaderData {
|
||||
rules: Rule[];
|
||||
groups: {
|
||||
id: string;
|
||||
name: string;
|
||||
}[];
|
||||
totalCount: number;
|
||||
currentPage: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
}
|
||||
// 模拟数据 - 用于开发阶段展示UI
|
||||
const mockRules: Rule[] = [
|
||||
{
|
||||
id: '1',
|
||||
code: 'EP001',
|
||||
name: '合同名称要素检查',
|
||||
ruleType: 'essential',
|
||||
ruleGroupId: '1',
|
||||
groupName: '合同基本要素类检查',
|
||||
priority: 'high',
|
||||
description: '检查合同是否包含清晰的合同名称',
|
||||
checkMethod: 'automatic',
|
||||
prompt: '查找文档中的合同名称',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-15T08:30:00Z',
|
||||
updatedAt: '2024-03-15T08:30:00Z'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
code: 'EP002',
|
||||
name: '合同编号要素检查',
|
||||
ruleType: 'essential',
|
||||
ruleGroupId: '1',
|
||||
groupName: '合同基本要素类检查',
|
||||
priority: 'high',
|
||||
description: '检查合同是否包含唯一的合同编号',
|
||||
checkMethod: 'automatic',
|
||||
prompt: '查找文档中的合同编号',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-15T09:15:00Z',
|
||||
updatedAt: '2024-03-15T09:15:00Z'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
code: 'EP003',
|
||||
name: '合同主体资格检查',
|
||||
ruleType: 'legal',
|
||||
ruleGroupId: '2',
|
||||
groupName: '销售合同专项检查',
|
||||
priority: 'medium',
|
||||
description: '检查合同签署方是否具有合法的主体资格',
|
||||
checkMethod: 'manual',
|
||||
prompt: '确认合同签署方的法律主体资格',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-16T10:20:00Z',
|
||||
updatedAt: '2024-03-16T10:20:00Z'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
code: 'EP004',
|
||||
name: '付款条件检查',
|
||||
ruleType: 'content',
|
||||
ruleGroupId: '2',
|
||||
groupName: '销售合同专项检查',
|
||||
priority: 'medium',
|
||||
description: '检查合同中的付款条件是否明确',
|
||||
checkMethod: 'automatic',
|
||||
prompt: '提取文档中的付款条件相关内容',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-17T11:30:00Z',
|
||||
updatedAt: '2024-03-17T11:30:00Z'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
code: 'EP005',
|
||||
name: '违约责任条款检查',
|
||||
ruleType: 'legal',
|
||||
ruleGroupId: '3',
|
||||
groupName: '采购合同专项检查',
|
||||
priority: 'high',
|
||||
description: '检查合同是否包含违约责任条款',
|
||||
checkMethod: 'mixed',
|
||||
prompt: '提取文档中的违约责任相关条款',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-18T13:45:00Z',
|
||||
updatedAt: '2024-03-18T13:45:00Z'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
code: 'EP006',
|
||||
name: '合同文本格式检查',
|
||||
ruleType: 'format',
|
||||
ruleGroupId: '1',
|
||||
groupName: '合同基本要素类检查',
|
||||
priority: 'low',
|
||||
description: '检查合同文本格式是否符合规范',
|
||||
checkMethod: 'automatic',
|
||||
prompt: '检查文档的整体格式规范性',
|
||||
isActive: false,
|
||||
createdAt: '2024-03-19T14:50:00Z',
|
||||
updatedAt: '2024-03-19T14:50:00Z'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
code: 'EP007',
|
||||
name: '专卖许可证有效性检查',
|
||||
ruleType: 'legal',
|
||||
ruleGroupId: '4',
|
||||
groupName: '专卖许可证审核规则',
|
||||
priority: 'high',
|
||||
description: '检查专卖许可证是否在有效期内',
|
||||
checkMethod: 'automatic',
|
||||
prompt: '提取专卖许可证有效期信息并判断有效性',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-20T15:55:00Z',
|
||||
updatedAt: '2024-03-20T15:55:00Z'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
code: 'EP008',
|
||||
name: '处罚决定书格式检查',
|
||||
ruleType: 'format',
|
||||
ruleGroupId: '5',
|
||||
groupName: '行政处罚规范性检查',
|
||||
priority: 'medium',
|
||||
description: '检查行政处罚决定书格式是否规范',
|
||||
checkMethod: 'automatic',
|
||||
prompt: '检查处罚决定书的格式规范性',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-21T16:00:00Z',
|
||||
updatedAt: '2024-03-21T16:00:00Z'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
code: 'EP009',
|
||||
name: '处罚依据合法性检查',
|
||||
ruleType: 'legal',
|
||||
ruleGroupId: '5',
|
||||
groupName: '行政处罚规范性检查',
|
||||
priority: 'high',
|
||||
description: '检查行政处罚依据是否合法',
|
||||
checkMethod: 'manual',
|
||||
prompt: '审核处罚依据的法律合法性',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-22T09:10:00Z',
|
||||
updatedAt: '2024-03-22T09:10:00Z'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
code: 'EP010',
|
||||
name: '业务特殊条款检查',
|
||||
ruleType: 'business',
|
||||
ruleGroupId: '3',
|
||||
groupName: '采购合同专项检查',
|
||||
priority: 'medium',
|
||||
description: '检查合同是否包含烟草行业特殊条款',
|
||||
checkMethod: 'mixed',
|
||||
prompt: '识别文档中的烟草行业特殊要求条款',
|
||||
isActive: true,
|
||||
createdAt: '2024-03-23T10:15:00Z',
|
||||
updatedAt: '2024-03-23T10:15:00Z'
|
||||
}
|
||||
];
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
const url = new URL(request.url);
|
||||
const ruleType = url.searchParams.get("ruleType") || "";
|
||||
const groupId = url.searchParams.get("groupId") || "";
|
||||
const isActive = url.searchParams.get("isActive") || "";
|
||||
const keyword = url.searchParams.get("keyword") || "";
|
||||
const currentPage = parseInt(url.searchParams.get("page") || "1", 10);
|
||||
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
|
||||
|
||||
// 从 URL 参数中提取查询条件
|
||||
const params = {
|
||||
ruleType: url.searchParams.get("ruleType") || undefined,
|
||||
groupId: url.searchParams.get("groupId") || undefined,
|
||||
isActive: url.searchParams.get("isActive") ? url.searchParams.get("isActive") === "true" : undefined,
|
||||
keyword: url.searchParams.get("keyword") || undefined,
|
||||
page: parseInt(url.searchParams.get("page") || "1", 10),
|
||||
pageSize: parseInt(url.searchParams.get("pageSize") || "10", 10)
|
||||
};
|
||||
|
||||
try {
|
||||
// 模拟数据，实际项目中应从API获取
|
||||
const rules: Rule[] = [
|
||||
{
|
||||
id: "1",
|
||||
code: "CP001",
|
||||
name: "合同主体信息完整性检查",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "essential",
|
||||
priority: "high",
|
||||
description: "检查合同中是否完整包含签约方的基本信息，包括名称、地址、法定代表人等",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同主体双方信息是否完整，包括企业名称、注册地址、法定代表人或授权代表、联系方式等",
|
||||
isActive: true,
|
||||
createdAt: "2023-06-15 10:30",
|
||||
updatedAt: "2023-06-15 10:30"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
code: "CP002",
|
||||
name: "合同金额一致性校验",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "content",
|
||||
priority: "high",
|
||||
description: "检查合同大小写金额是否一致",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同中的金额大写和小写表示是否一致，如￥10,000.00(壹万元整)",
|
||||
isActive: true,
|
||||
createdAt: "2023-06-20 14:15",
|
||||
updatedAt: "2023-06-20 14:15"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
code: "CP003",
|
||||
name: "保密条款合规性审核",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "legal",
|
||||
priority: "medium",
|
||||
description: "检查合同是否包含保密条款并符合行业要求",
|
||||
checkMethod: "mixed",
|
||||
prompt: "检查合同中的保密条款是否完整、清晰，包含保密范围、期限、违约责任等",
|
||||
isActive: true,
|
||||
createdAt: "2023-07-05 09:45",
|
||||
updatedAt: "2023-07-05 09:45"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
code: "CP004",
|
||||
name: "合同签约日期格式检查",
|
||||
ruleGroupId: "1",
|
||||
groupName: "合同基本要素检查",
|
||||
ruleType: "format",
|
||||
priority: "low",
|
||||
description: "检查合同签约日期格式是否规范",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同签约日期格式是否符合YYYY年MM月DD日的规范格式",
|
||||
isActive: false,
|
||||
createdAt: "2023-07-10 16:20",
|
||||
updatedAt: "2023-07-10 16:20"
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
code: "CP005",
|
||||
name: "违约责任条款完整性检查",
|
||||
ruleGroupId: "2",
|
||||
groupName: "销售合同专项检查",
|
||||
ruleType: "legal",
|
||||
priority: "high",
|
||||
description: "检查合同违约责任条款是否明确、完整",
|
||||
checkMethod: "mixed",
|
||||
prompt: "检查合同中的违约责任条款是否包含违约情形、违约金计算方式、责任承担方式等内容",
|
||||
isActive: true,
|
||||
createdAt: "2023-07-15 11:30",
|
||||
updatedAt: "2023-07-15 11:30"
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
code: "CP006",
|
||||
name: "交货期限有效性检查",
|
||||
ruleGroupId: "2",
|
||||
groupName: "销售合同专项检查",
|
||||
ruleType: "business",
|
||||
priority: "medium",
|
||||
description: "检查合同中交货期限是否明确、合理",
|
||||
checkMethod: "automatic",
|
||||
prompt: "检查合同中是否明确约定了交货期限，并且期限设置是否合理",
|
||||
isActive: true,
|
||||
createdAt: "2023-08-01 14:40",
|
||||
updatedAt: "2023-08-01 14:40"
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
code: "CP007",
|
||||
name: "合同条款矛盾性检查",
|
||||
ruleGroupId: "3",
|
||||
groupName: "采购合同专项检查",
|
||||
ruleType: "legal",
|
||||
priority: "high",
|
||||
description: "检查合同条款之间是否存在矛盾或冲突",
|
||||
checkMethod: "mixed",
|
||||
prompt: "分析合同各条款，检查是否存在相互矛盾或冲突的内容",
|
||||
isActive: true,
|
||||
createdAt: "2023-08-10 09:15",
|
||||
updatedAt: "2023-08-10 09:15"
|
||||
}
|
||||
];
|
||||
// 使用模拟数据而不是API调用
|
||||
// const response = await getRulesList(params);
|
||||
|
||||
const groups = [
|
||||
{ id: "1", name: "合同基本要素检查" },
|
||||
{ id: "2", name: "销售合同专项检查" },
|
||||
{ id: "3", name: "采购合同专项检查" },
|
||||
{ id: "4", name: "专卖许可证审核规则" },
|
||||
{ id: "5", name: "行政处罚规范性检查" }
|
||||
];
|
||||
// 过滤模拟数据
|
||||
let filteredRules = [...mockRules];
|
||||
|
||||
// 过滤数据
|
||||
let filteredRules = [...rules];
|
||||
|
||||
if (ruleType) {
|
||||
filteredRules = filteredRules.filter(rule => rule.ruleType === ruleType);
|
||||
if (params.ruleType) {
|
||||
filteredRules = filteredRules.filter(rule => rule.ruleType === params.ruleType);
|
||||
}
|
||||
|
||||
if (groupId) {
|
||||
filteredRules = filteredRules.filter(rule => rule.ruleGroupId === groupId);
|
||||
if (params.groupId) {
|
||||
filteredRules = filteredRules.filter(rule => rule.ruleGroupId === params.groupId);
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
const activeValue = isActive === 'true';
|
||||
filteredRules = filteredRules.filter(rule => rule.isActive === activeValue);
|
||||
if (params.isActive !== undefined) {
|
||||
filteredRules = filteredRules.filter(rule => rule.isActive === params.isActive);
|
||||
}
|
||||
|
||||
if (keyword) {
|
||||
const lowerKeyword = keyword.toLowerCase();
|
||||
filteredRules = filteredRules.filter(rule =>
|
||||
rule.name.toLowerCase().includes(lowerKeyword) ||
|
||||
rule.code.toLowerCase().includes(lowerKeyword)
|
||||
if (params.keyword) {
|
||||
const keyword = params.keyword.toLowerCase();
|
||||
filteredRules = filteredRules.filter(
|
||||
rule => rule.name.toLowerCase().includes(keyword) ||
|
||||
rule.code.toLowerCase().includes(keyword)
|
||||
);
|
||||
}
|
||||
|
||||
// 计算分页信息
|
||||
// 计算总记录数
|
||||
const totalCount = filteredRules.length;
|
||||
const totalPages = Math.ceil(totalCount / pageSize);
|
||||
const totalPages = Math.ceil(totalCount / params.pageSize);
|
||||
|
||||
// 验证页码范围
|
||||
if (currentPage < 1 || (totalCount > 0 && currentPage > totalPages)) {
|
||||
// 如果页码超出范围，重定向到第一页
|
||||
if (params.page < 1 || (totalCount > 0 && params.page > totalPages)) {
|
||||
const newUrl = new URL(request.url);
|
||||
newUrl.searchParams.set('page', '1');
|
||||
return redirect(newUrl.pathname + newUrl.search);
|
||||
}
|
||||
|
||||
// 分页截取
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
const paginatedRules = filteredRules.slice(startIndex, endIndex);
|
||||
// 分页
|
||||
const offset = (params.page - 1) * params.pageSize;
|
||||
const paginatedRules = filteredRules.slice(offset, offset + params.pageSize);
|
||||
|
||||
return json<LoaderData>({
|
||||
return json({
|
||||
rules: paginatedRules,
|
||||
groups,
|
||||
totalCount,
|
||||
currentPage,
|
||||
pageSize,
|
||||
currentPage: params.page,
|
||||
pageSize: params.pageSize,
|
||||
totalPages
|
||||
}, {
|
||||
headers: {
|
||||
// 添加缓存控制，在生产环境中可以调整
|
||||
"Cache-Control": "max-age=60, s-maxage=180"
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载评查点列表失败:', error);
|
||||
throw new Response('加载评查点列表失败', { status: 500 });
|
||||
@@ -303,7 +329,7 @@ const priorityLabels = {
|
||||
};
|
||||
|
||||
export default function RulesIndex() {
|
||||
const { rules, groups, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
|
||||
const { rules, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const submit = useSubmit();
|
||||
|
||||
@@ -380,9 +406,9 @@ export default function RulesIndex() {
|
||||
};
|
||||
|
||||
// 处理重置筛选
|
||||
const handleReset = () => {
|
||||
setSearchParams(new URLSearchParams());
|
||||
};
|
||||
// const handleReset = () => {
|
||||
// setSearchParams(new URLSearchParams());
|
||||
// };
|
||||
|
||||
// 定义表格列配置
|
||||
const columns = [
|
||||
@@ -489,16 +515,22 @@ export default function RulesIndex() {
|
||||
{ value: "business", label: "业务专项类" }
|
||||
]}
|
||||
onChange={handleFilterChange}
|
||||
className="mr-3 w-80 "
|
||||
className="mr-3 w-60 "
|
||||
/>
|
||||
|
||||
<FilterSelect
|
||||
label="所属规则组"
|
||||
name="groupId"
|
||||
value={searchParams.get('groupId') || ''}
|
||||
options={groups.map(group => ({ value: group.id, label: group.name }))}
|
||||
options={[
|
||||
{ value: "1", label: "合同基本要素类检查" },
|
||||
{ value: "2", label: "销售合同专项检查" },
|
||||
{ value: "3", label: "采购合同专项检查" },
|
||||
{ value: "4", label: "专卖许可证审核规则" },
|
||||
{ value: "5", label: "行政处罚规范性检查" }
|
||||
]}
|
||||
onChange={handleFilterChange}
|
||||
className="mr-3 w-80"
|
||||
className="mr-3 w-60"
|
||||
/>
|
||||
|
||||
<FilterSelect
|
||||
@@ -510,7 +542,7 @@ export default function RulesIndex() {
|
||||
{ value: "false", label: "禁用" }
|
||||
]}
|
||||
onChange={handleFilterChange}
|
||||
className="mr-3 w-80"
|
||||
className="mr-3 w-60"
|
||||
/>
|
||||
|
||||
<SearchFilter
|
||||
|
||||
Reference in New Issue
Block a user