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

fixed

Browse Source
This commit is contained in:
yorn
2025-04-15 23:24:32 +08:00
parent b315fc0fea
commit 9a9ce5fa55
19 changed files with 1405 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/_index.tsx
+31 -79
View File
@@ -5,14 +5,14 @@ import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { StatusBadge, links as statusBadgeLinks } from "~/components/ui/StatusBadge";
import { FileTag, links as fileTagLinks } from "~/components/ui/FileTag";
import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
// import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
import { Tag } from "~/components/ui/Tag";
import homeStyles from "~/styles/pages/home.css?url";
import { getDocuments, type DocumentUI } from "~/api/files/documents";
export const links = () => [
{ rel: "stylesheet", href: homeStyles },
...statusBadgeLinks(),
...fileTagLinks(),
...fileTypeTagLinks()
...fileTagLinks()
];
export const meta: MetaFunction = () => {
@@ -30,13 +30,6 @@ interface StatsData {
passRate: number;
}
interface RecentFile {
id: string;
name: string;
type: string;
reviewStatus: string;
updatedAt: string;
}
// interface LoaderData {
// stats: StatsData;
@@ -47,13 +40,22 @@ interface RecentFile {
// 模拟数据，实际项目中应该从API获取
export async function loader() {
try {
// 实际项目中这里应该是 API 调用
// const response = await fetch('/api/dashboard/stats');
// const stats: StatsData = await response.json();
// const filesResponse = await fetch('/api/files/recent');
// const recentFiles: RecentFile[] = await filesResponse.json();
const documentSearchParams = {
page: 1,
pageSize: 10,
order: 'updated_at.desc'
};
// 获取最近文档数据
const responseDocuments = await getDocuments(documentSearchParams);
if (responseDocuments.error) {
console.error('获取最近文档数据失败', responseDocuments.error);
return Response.json({ error: responseDocuments.error }, { status: responseDocuments.status || 500 });
}
const recentFiles = responseDocuments.data?.documents || [];
console.log("recentFiles-------",recentFiles);
// 模拟数据
const stats = {
totalFiles: 156,
@@ -62,43 +64,7 @@ export async function loader() {
passRate: 92.5
} as StatsData;
const recentFiles = [
{
id: "1",
name: "2023年度烟草专卖零售许可证.pdf",
type: "专卖许可证",
reviewStatus: "pass",
updatedAt: "2023-12-24 14:30"
},
{
id: "2",
name: "烟草制品购销合同(2023-12).docx",
type: "合同文档",
reviewStatus: "warning",
updatedAt: "2023-12-23 09:15"
},
{
id: "3",
name: "专卖管理处罚决定书(2023-145).pdf",
type: "行政处罚决定书",
reviewStatus: "fail",
updatedAt: "2023-12-22 16:45"
},
{
id: "4",
name: "2023年第四季度采购合同.docx",
type: "合同文档",
reviewStatus: "pass",
updatedAt: "2023-12-20 11:20"
},
{
id: "5",
name: "广告宣传协议书.pdf",
type: "合同文档",
reviewStatus: "pass",
updatedAt: "2023-12-18 15:30"
}
] as RecentFile[];
return Response.json({ stats, recentFiles });
} catch (error) {
@@ -117,14 +83,6 @@ export default function Index() {
return (
<div className="dashboard-container">
{/* 页面标识 */}
<div className="mb-4 p-3 bg-yellow-100 border border-yellow-300 rounded text-yellow-800">
<h3 className="font-bold text-lg">当前页面: 首页 (_index.tsx)</h3>
<p>如果你看到这个提示，说明你正在浏览首页，而不是评查点列表页面。</p>
<div className="mt-2">
<a href="/debug" className="text-blue-600 hover:underline">查看路由诊断页面</a> |
<a href="/rules" className="ml-2 text-blue-600 hover:underline">通过原生链接访问评查点列表</a>
</div>
</div>
{/* 统计卡片区域 */}
<Card title="统计信息" icon="ri-bar-chart-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
@@ -158,13 +116,13 @@ export default function Index() {
{/* 快捷访问区域 */}
<Card title="快捷访问" icon="ri-speed-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
<div className="shortcut-grid">
<ShortcutItem icon="ri-upload-cloud-line" label="上传文件" to="/files/new" />
<ShortcutItem icon="ri-file-list-3-line" label="文件列表" to="/files" />
<ShortcutItem icon="ri-upload-cloud-line" label="上传文件" to="/files/upload" />
<ShortcutItem icon="ri-file-list-3-line" label="文件列表" to="/documents" />
<ShortcutItem icon="ri-list-check-2" label="评查点管理" to="/rules" />
<ShortcutItem icon="ri-folder-open-line" label="评查点分组" to="/rule-groups" />
<ShortcutItem icon="ri-file-chart-line" label="评查详情" to="/reviews" />
<ShortcutItem icon="ri-file-list-line" label="文档类型" to="/doc-types" />
<ShortcutItem icon="ri-settings-3-line" label="系统设置" to="/settings" />
<ShortcutItem icon="ri-file-list-line" label="文档类型" to="/document-types" />
{/* <ShortcutItem icon="ri-settings-3-line" label="系统设置" to="/settings" /> */}
<ShortcutItem icon="ri-chat-1-line" label="提示词管理" to="/prompts" />
</div>
</Card>
@@ -173,11 +131,11 @@ export default function Index() {
<Card
title="最近文档"
icon="ri-file-list-3-line"
extra={<Button to="/files" size="small">查看全部</Button>}
extra={<Button to="/documents" size="small">查看全部</Button>}
className="mt-6"
>
<div className="doc-list">
{recentFiles.map((file: RecentFile) => (
{recentFiles.map((file: DocumentUI) => (
<div key={file.id} className="doc-item">
<div className="doc-info">
<FileTag
@@ -191,22 +149,16 @@ export default function Index() {
<div>
<div className="doc-name">{file.name}</div>
<div className="doc-meta">
<FileTypeTag
type={file.type === "合同文档" ? "sales-contract" :
file.type === "专卖许可证" ? "license" :
file.type === "行政处罚决定书" ? "punishment" : "agreement"}
text={file.type}
size="sm"
showIcon={false}
className="mr-2"
/>
<Tag size="sm" className="mr-2">
{file.typeName}
</Tag>
<span className="text-gray-500">·</span>
<span className="ml-2 text-gray-500">{file.updatedAt}</span>
</div>
</div>
</div>
<div className="doc-status">
<StatusBadge status={file.reviewStatus} />
<StatusBadge status={file.fileStatus} />
</div>
</div>
))}
app/routes/documents._index.tsx
+5 -4
View File
@@ -62,6 +62,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
// 获取文档类型列表，用于筛选条件，设置较大的pageSize确保获取所有数据
const typesResponse = await getDocumentTypes({ pageSize: 500 });
// console.log('typesResponse-----',typesResponse);
const documentTypes = typesResponse.data?.types || [];
const documentTypeOptions = documentTypes.map(type => ({
value: type.id,
@@ -433,7 +434,7 @@ export default function DocumentsIndex() {
{
title: "文档名称",
key: "name",
width:'20%',
width:'25%',
render: (_: unknown, record: DocumentUI) => (
<div className="flex items-center m-1">
<FileTag
@@ -445,7 +446,7 @@ export default function DocumentsIndex() {
className="mr-2 flex-shrink-0"
/>
<div className="overflow-hidden">
<span className="file-name truncate block" title={record.name}>{record.name}</span>
<span className="file-name break-words block" title={record.name}>{record.name}</span>
<div className="mt-2 flex inline-block">
<FileTypeTag
type={record.type}
@@ -515,7 +516,7 @@ export default function DocumentsIndex() {
{
title: "问题数量",
key: "issues",
width:"10%",
width:"5%",
render: (_: unknown, record: DocumentUI) => (
record.issues === null ? "-" : record.issues
)
@@ -534,7 +535,7 @@ export default function DocumentsIndex() {
<div className="operations-cell">
{(record.auditStatus === 0 || record.auditStatus == null) ? (
<Link
to={`/documents/${record.id}/review`}
to={`/reviews?id=${record.id}`}
className="mr-1 hover:underline"
>
<i className="ri-play-circle-line"></i>
app/routes/files.upload.tsx
+14 -4
View File
@@ -1,5 +1,5 @@
import { useState, useEffect, useRef } from "react";
import { MetaFunction, ActionFunctionArgs } from "@remix-run/node";
import { MetaFunction, ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
import { Form, useActionData, useLoaderData } from "@remix-run/react";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
@@ -26,6 +26,13 @@ export function links() {
];
}
// 面包屑导航
export const handle = {
breadcrumb: () => {
return '上传文件'
}
}
export const meta: MetaFunction = () => {
return [
{ title: "待审核文件上传 - 中国烟草AI合同及卷宗审核系统" },
@@ -221,13 +228,15 @@ export async function action({ request }: ActionFunctionArgs) {
type LoaderData = {
documents: Document[];
documentTypes: DocumentType[];
mode: string;
};
// 添加 loader 函数
export async function loader() {
export async function loader({ request }: LoaderFunctionArgs) {
try {
console.log('loader: 开始加载数据...');
// console.log('loader: 开始加载数据...');
const url = new URL(request.url);
const mode = url.searchParams.get("mode") || "create";
// 并行加载文档和文档类型
const [documentsResponse, typesResponse] = await Promise.all([
getTodayDocuments(),
@@ -242,6 +251,7 @@ export async function loader() {
}
return Response.json({
mode,
documents: documentsResponse.data || [],
documentTypes: typesResponse.data || []
});
app/routes/prompts._index.tsx
+5 -5
View File
@@ -67,7 +67,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
if (result.error) {
console.error('获取提示词模板失败:', result.error);
return json<LoaderData>(
return Response.json(
{
templates: [],
total: 0,
@@ -81,7 +81,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
console.log(`成功加载${result.data?.templates.length || 0}条提示词模板数据`);
return json<LoaderData>({
return Response.json({
templates: result.data?.templates || [],
total: result.data?.total || 0,
pageSize,
@@ -89,7 +89,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
});
} catch (error) {
console.error("加载提示词模板失败:", error);
return json<LoaderData>(
return Response.json(
{
templates: [],
total: 0,
@@ -262,7 +262,7 @@ export default function PromptsIndex() {
title: "描述",
key: "description",
render: (_: unknown, record: PromptTemplateUI) => (
<div className="text-secondary text-sm truncate max-w-xs" title={record.description}>
<div className="text-secondary text-sm max-w-xs text-wrap" title={record.description}>
{record.description}
</div>
)
@@ -276,7 +276,7 @@ export default function PromptsIndex() {
{
title: "状态",
key: "status",
width: "80px",
width: "100px",
render: (_: unknown, record: PromptTemplateUI) => {
let statusText = '';
let statusClass = '';
app/routes/prompts.new.tsx
+9 -10
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { MetaFunction, LoaderFunctionArgs, ActionFunctionArgs, json, redirect } from "@remix-run/node";
import { MetaFunction, LoaderFunctionArgs, ActionFunctionArgs, redirect } from "@remix-run/node";
import { Link, useLoaderData, useNavigation, useActionData, Form } from "@remix-run/react";
import { Button } from "~/components/ui/Button";
import newStyles from "~/styles/pages/prompts_new.css?url";
@@ -86,17 +86,16 @@ export async function loader({ request }: LoaderFunctionArgs) {
}
}
return json<LoaderData>({
return Response.json({
template,
mode
});
} catch (error) {
console.error("加载提示词模板失败:", error);
return json<LoaderData>(
{
template: null,
mode: "create",
error: error instanceof Error ? error.message : "加载提示词模板失败"
return Response.json({
template: null,
mode: "create",
error: error instanceof Error ? error.message : "加载提示词模板失败"
},
{ status: 500 }
);
@@ -131,7 +130,7 @@ export async function action({ request }: ActionFunctionArgs) {
}
if (Object.keys(errors).length > 0) {
return json({ errors });
return Response.json({ errors });
}
try {
@@ -166,7 +165,7 @@ export async function action({ request }: ActionFunctionArgs) {
}
if (result.error) {
return json({
return Response.json({
errors: { general: result.error },
formData: {
template_name,
@@ -183,7 +182,7 @@ export async function action({ request }: ActionFunctionArgs) {
return redirect("/prompts");
} catch (error) {
console.error("保存提示词模板失败:", error);
return json({
return Response.json({
errors: {
general: error instanceof Error ? error.message : "保存提示词模板失败"
},
app/routes/reviews.tsx
+102 -45
View File
@@ -25,10 +25,12 @@
* @author 中国烟草AI合同及卷宗审核系统开发团队
*/
import { type MetaFunction } from "@remix-run/node";
import { type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { useState, useEffect } from "react";
import { useNavigate } from "@remix-run/react";
import { useNavigate, useLoaderData } from "@remix-run/react";
import {getDocument} from "~/api/files/documents";
import reviewsStyles from "~/styles/reviews.css?url";
import { getReviewPoints } from "~/api/evaluation_points/reviews";
// 导入评查详情页面组件
import {
@@ -40,23 +42,21 @@ import {
FileDetails
} from "~/components/reviews";
// 定义评查点类型
interface ReviewPoint {
id: string;
title: string;
location: string;
status: string;
content: string;
suggestion: string;
needsHumanReview?: boolean;
humanReviewNote?: string;
humanReviewBy?: string;
humanReviewTime?: string;
position?: {
section: string;
index: number;
};
}
// 从ReviewPointsList组件中导入ReviewPoint类型
import { type ReviewPoint } from '~/components/reviews';
/**
* 文件信息组件
* 显示文件名称、状态信息以及操作按钮（下载原文件、导出评查报告、确认评查结果）
*/
// 格式化文件大小
const formatFileSize = (bytes: number) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
// 定义统计数据类型
interface Statistics {
@@ -76,6 +76,7 @@ interface FileInfo {
pageCount: number;
uploadTime: string;
uploadUser: string;
auditStatus: number;
}
// 定义合同信息类型
@@ -166,30 +167,79 @@ export const handle = {
breadcrumb: "评查详情"
};
export async function loader({ request }: LoaderFunctionArgs) {
try {
const url = new URL(request.url);
const id = url.searchParams.get('id') || undefined;
// console.log("id-------",id);
if (!id) {
return Response.json({ error: '评查ID不能为空' }, { status: 400 });
}
const documentData = await getDocument(id);
if (documentData.error) {
console.error("获取文档数据错误:", documentData.error);
return Response.json({ error: documentData.error }, { status: documentData.status || 500 });
}
const reviewData = await getReviewPoints(id);
console.log("reviewData-------",reviewData);
if (reviewData.error) {
console.error("获取评查点数据错误:", reviewData.error);
return Response.json({ error: reviewData.error }, { status: reviewData.status || 500 });
}
return Response.json({
document: documentData.data,
reviewPoints: reviewData.data,
statistics: reviewData.stats
});
} catch (error) {
console.error('获取评查数据失败:', error);
return Response.json({ error: '获取评查数据失败' }, { status: 500 });
}
}
export default function ReviewDetails() {
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(true);
const { document, reviewPoints, statistics } = useLoaderData<typeof loader>();
const [isLoading, setIsLoading] = useState(false); // 已经通过loader加载了数据，不需要再显示加载状态
const [activeTab, setActiveTab] = useState<string>('preview'); // 'preview', 'analysis', 'fileinfo'
const [reviewData, setReviewData] = useState<ReviewData | null>(null);
const [activeReviewPointId, setActiveReviewPointId] = useState<string | null>(null);
// 模拟获取评查数据
useEffect(() => {
// 模拟API请求延迟
const timer = setTimeout(() => {
// 模拟评查数据
const mockData = getMockReviewData();
setReviewData(mockData);
setIsLoading(false);
// 默认选中第一个评查点
if (mockData.reviewPoints.length > 0) {
setActiveReviewPointId(mockData.reviewPoints[0].id);
}
}, 800);
if (!document) return;
return () => clearTimeout(timer);
}, []);
// 构建文件信息对象
const fileInfo = {
fileName: document.name || "未知文件名",
contractNumber: document.documentNumber || "未知编号",
fileSize: document.size ? formatFileSize(document.size) : "未知大小",
fileFormat: document.fileType ? document.fileType.toUpperCase() : "未知格式",
pageCount: document.pageCount || 0,
uploadTime: document.uploadTime || "未知时间",
uploadUser: document.uploadUser || "未知用户",
auditStatus: document.auditStatus || 0,
};
// 创建包含真实文档数据的评查数据对象
const reviewDataObj: ReviewData = {
// 使用真实文件信息
fileInfo: fileInfo,
// 其他字段暂时使用默认值
contractInfo: getMockReviewData().contractInfo,
reviewInfo: getMockReviewData().reviewInfo,
statistics: statistics,
fileContent: getMockReviewData().fileContent,
reviewPoints: reviewPoints,
aiAnalysis: getMockReviewData().aiAnalysis,
};
setReviewData(reviewDataObj);
setIsLoading(false);
}, [document, reviewPoints, statistics]);
const handleTabChange = (tabKey: string) => {
setActiveTab(tabKey);
@@ -317,7 +367,8 @@ function getMockReviewData(): ReviewData {
fileFormat: "DOCX",
pageCount: 5,
uploadTime: "2023-10-25 14:30:45",
uploadUser: "张三"
uploadUser: "张三",
auditStatus: 0
},
contractInfo: {
contractType: "销售合同",
@@ -383,36 +434,40 @@ function getMockReviewData(): ReviewData {
{
id: "1",
title: "付款条件描述不明确",
location: "付款条款清晰性",
groupName: "付款条款清晰性",
// location: "交货与付款条款",
status: "error",
content: "乙方应在收到货物之日起5个工作日内支付合同款项，甲方应在收到乙方全部付款后开具增值税专用发票，乙方应在收到发票后支付剩余款项。",
suggestion: "乙方应在收到货物验收合格之日起5个工作日内支付合同总额的70%，甲方收到该部分款项后3个工作日内向乙方开具等额增值税专用发票；乙方应在收到发票之日起5个工作日内支付剩余30%款项。",
position: { section: "交货与付款", index: 2 }
position: { section: "交货与付款", index: 2 },
result: false
},
{
id: "2",
title: "违约责任条款缺失",
location: "合同权利义务对等性",
groupName: "合同权利义务对等性",
status: "warning",
content: "如合同发生纠纷，双方应协商解决。",
suggestion: "如合同发生纠纷，双方应友好协商解决；协商不成的，任何一方均有权向甲方所在地人民法院提起诉讼。任何一方未能履行本合同约定义务，应向守约方支付合同总金额的10%作为违约金；给对方造成损失的，还应赔偿由此产生的全部损失。",
position: { section: "争议解决", index: 0 }
position: { section: "争议解决", index: 0 },
result: false
},
{
id: "3",
title: "签章不完整",
location: "合同签署规范性",
groupName: "合同签署规范性",
status: "warning",
content: "乙方（盖章）：YY贸易有限公司\n代表人签字：李YY\n日期：2023年10月20日",
suggestion: "需要联系甲方补充公章",
needsHumanReview: true,
humanReviewNote: "需要联系甲方补充公章",
position: { section: "签章", index: 0 }
position: { section: "签章", index: 0 },
result: false
},
{
id: "9",
title: "交货方式描述模糊",
location: "履行条款明确性",
groupName: "履行条款明确性",
status: "success",
content: "3.4 运输方式：陆运，运费由甲方承担。",
suggestion: "建议补充具体的运输方式和时间",
@@ -420,16 +475,18 @@ function getMockReviewData(): ReviewData {
humanReviewNote: "经核实，该交货方式虽然描述不够详细，但符合行业惯例且双方已经多次合作，不会造成实际履行障碍。",
humanReviewBy: "王法务",
humanReviewTime: "2023-11-05 14:30:22",
position: { section: "交货与付款", index: 4 }
position: { section: "交货与付款", index: 4 },
result: true
},
{
id: "10",
title: "法律适用条款缺失",
location: "争议解决条款完整性",
groupName: "争议解决条款完整性",
status: "error",
content: "",
suggestion: "第十三条 法律适用\n本合同的订立、效力、解释、履行及争议的解决均适用中华人民共和国法律。因本合同引起的或与本合同有关的任何争议，双方应友好协商解决。协商不成的，提交甲方所在地人民法院诉讼解决。",
position: { section: "缺失", index: 0 }
position: { section: "缺失", index: 0 },
result: false
}
],
aiAnalysis: {
app/routes/rules-files.tsx
+110 -258
View File
@@ -1,4 +1,4 @@
import { json, type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData, useSearchParams } from "@remix-run/react";
import { Button } from "~/components/ui/Button";
import { Card } from "~/components/ui/Card";
@@ -6,15 +6,20 @@ import { FileIcon } from "~/components/ui/FileIcon";
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
import { Pagination } from "~/components/ui/Pagination";
import { Table } from "~/components/ui/Table";
import { FileTypeTag } from "~/components/ui/FileTypeTag";
import { Tag } from "~/components/ui/Tag";
import { StatusBadge } from "~/components/ui/StatusBadge";
import rulesFilesStyles from "~/styles/pages/rules-files.css?url";
import {
getReviewFiles,
updateReviewStatus,
type ReviewFileUI
} from "~/api/evaluation_points/rules-files";
import { getDocumentTypes } from "~/api/document-types/document-types";
export const links = () => [
{ rel: "stylesheet", href: rulesFilesStyles }
];
export const handle = {
breadcrumb: "评查文件列表"
};
@@ -27,23 +32,6 @@ export const meta: MetaFunction = () => {
];
};
// 评查文件类型枚举
export enum FileType {
CONTRACT = 'contract',
LICENSE = 'license',
PUNISHMENT = 'punishment',
REPORT = 'report',
OTHER = 'other'
}
// 评查状态枚举
export enum ReviewStatus {
PASS = 'pass',
WARNING = 'warning',
FAIL = 'fail',
PENDING = 'pending'
}
// 日期范围枚举
export enum DateRange {
ALL = 'all',
@@ -53,47 +41,14 @@ export enum DateRange {
CUSTOM = 'custom'
}
// 文件类型标签映射
export const FILE_TYPE_LABELS: Record<FileType, string> = {
[FileType.CONTRACT]: '合同文档',
[FileType.LICENSE]: '专卖许可证',
[FileType.PUNISHMENT]: '行政处罚',
[FileType.REPORT]: '报表文档',
[FileType.OTHER]: '其他文档'
};
// 评查状态标签映射
export const REVIEW_STATUS_LABELS: Record<ReviewStatus, string> = {
[ReviewStatus.PASS]: '通过',
[ReviewStatus.WARNING]: '警告',
[ReviewStatus.FAIL]: '不通过',
[ReviewStatus.PENDING]: '待人工确认'
export const REVIEW_STATUS_LABELS: Record<string, string> = {
'pass': '通过',
'warning': '警告',
'fail': '不通过',
'pending': '待人工确认'
};
// 评查文件模型
interface ReviewFile {
id: string;
fileName: string;
fileCode: string; // 文件编号
fileType: FileType;
fileSize: number;
uploadTime: string;
reviewStatus: ReviewStatus;
issueCount: number;
issues: Array<{
severity: 'info' | 'warning' | 'error' | 'critical';
message: string;
}>;
createdBy: string;
}
interface LoaderData {
files: ReviewFile[];
totalCount: number;
currentPage: number;
pageSize: number;
totalPages: number;
}
export async function loader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url);
@@ -106,164 +61,38 @@ export async function loader({ request }: LoaderFunctionArgs) {
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
try {
// 模拟数据，实际项目中应从API获取
const mockFiles: ReviewFile[] = [
{
id: "1",
fileName: "烟草产品销售合同（2023版）.pdf",
fileCode: "XS-2023-1025-001",
fileType: FileType.CONTRACT,
fileSize: 1024 * 1024 * 2.5, // 2.5MB
uploadTime: "2023-10-25 14:30:45",
reviewStatus: ReviewStatus.WARNING,
issueCount: 3,
issues: [
{ severity: "warning", message: "付款条件描述不明确" },
{ severity: "warning", message: "违约责任条款缺失" },
{ severity: "warning", message: "签章不完整" }
],
createdBy: "张三"
},
{
id: "2",
fileName: "2023年度烟草专卖零售许可证.pdf",
fileCode: "LS-2023-0058",
fileType: FileType.LICENSE,
fileSize: 1024 * 1024 * 1.2, // 1.2MB
uploadTime: "2023-10-24 10:15:22",
reviewStatus: ReviewStatus.PASS,
issueCount: 0,
issues: [],
createdBy: "李四"
},
{
id: "3",
fileName: "XX公司违规处罚决定书.pdf",
fileCode: "处罚[2023]42号",
fileType: FileType.PUNISHMENT,
fileSize: 1024 * 1024 * 3.1, // 3.1MB
uploadTime: "2023-10-23 16:45:30",
reviewStatus: ReviewStatus.FAIL,
issueCount: 2,
issues: [
{ severity: "error", message: "处罚依据条款引用错误" },
{ severity: "error", message: "处罚金额超出规定范围" }
],
createdBy: "王五"
},
{
id: "4",
fileName: "烟草设备采购协议.docx",
fileCode: "CG-2023-0089",
fileType: FileType.CONTRACT,
fileSize: 1024 * 1024 * 0.8, // 0.8MB
uploadTime: "2023-10-22 09:22:15",
reviewStatus: ReviewStatus.PENDING,
issueCount: 1,
issues: [
{ severity: "warning", message: "交付日期条款存在歧义，需人工确认" }
],
createdBy: "赵六"
},
{
id: "5",
fileName: "2023年度销售额报表.xlsx",
fileCode: "BB-2023-Q3",
fileType: FileType.REPORT,
fileSize: 1024 * 1024 * 0.5, // 0.5MB
uploadTime: "2023-10-20 14:05:38",
reviewStatus: ReviewStatus.PASS,
issueCount: 0,
issues: [],
createdBy: "钱七"
}
];
// 获取文档类型列表
const typesResponse = await getDocumentTypes({pageSize:500});
const documentTypes = typesResponse.data?.types || [];
// 过滤数据
let filteredFiles = [...mockFiles];
// 获取文件列表
const searchParams = {
fileType,
reviewStatus,
dateRange,
keyword,
sortOrder,
page: currentPage,
pageSize,
};
if (fileType) {
filteredFiles = filteredFiles.filter(file => file.fileType === fileType);
console.log('rules-filessearchParams-----',searchParams);
const filesResponse = await getReviewFiles(searchParams);
if (filesResponse.error) {
console.error('获取评查文件列表失败:', filesResponse.error);
throw new Response('获取评查文件列表失败', { status: filesResponse.status || 500 });
}
if (reviewStatus) {
filteredFiles = filteredFiles.filter(file => file.reviewStatus === reviewStatus);
}
const files = filesResponse.data?.files || [];
const totalCount = filesResponse.data?.total || 0;
if (dateRange) {
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
switch (dateRange) {
case DateRange.TODAY:
filteredFiles = filteredFiles.filter(file => {
const fileDate = new Date(file.uploadTime.split(' ')[0]);
return fileDate >= today;
});
break;
case DateRange.WEEK: {
const weekStart = new Date(today);
weekStart.setDate(today.getDate() - today.getDay());
filteredFiles = filteredFiles.filter(file => {
const fileDate = new Date(file.uploadTime.split(' ')[0]);
return fileDate >= weekStart;
});
break;
}
case DateRange.MONTH: {
const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
filteredFiles = filteredFiles.filter(file => {
const fileDate = new Date(file.uploadTime.split(' ')[0]);
return fileDate >= monthStart;
});
break;
}
}
}
if (keyword) {
const lowerKeyword = keyword.toLowerCase();
filteredFiles = filteredFiles.filter(file =>
file.fileName.toLowerCase().includes(lowerKeyword) ||
file.fileCode.toLowerCase().includes(lowerKeyword)
);
}
// 排序
switch (sortOrder) {
case "upload_time_desc":
filteredFiles.sort((a, b) => new Date(b.uploadTime).getTime() - new Date(a.uploadTime).getTime());
break;
case "upload_time_asc":
filteredFiles.sort((a, b) => new Date(a.uploadTime).getTime() - new Date(b.uploadTime).getTime());
break;
case "issue_count_desc":
filteredFiles.sort((a, b) => b.issueCount - a.issueCount);
break;
case "issue_count_asc":
filteredFiles.sort((a, b) => a.issueCount - b.issueCount);
break;
}
// 计算分页信息
const totalCount = filteredFiles.length;
const totalPages = Math.ceil(totalCount / pageSize);
// 分页截取
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedFiles = filteredFiles.slice(startIndex, endIndex);
return json<LoaderData>({
files: paginatedFiles,
return Response.json({
files,
documentTypes,
totalCount,
currentPage,
pageSize,
totalPages
}, {
headers: {
"Cache-Control": "max-age=60, s-maxage=180"
}
});
} catch (error) {
console.error('加载评查文件列表失败:', error);
@@ -284,9 +113,10 @@ export function ErrorBoundary() {
// 在文件中定义一个与路由文件名匹配的命名函数组件
export default function RulesFiles() {
const { files, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const { files, documentTypes, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const [searchParams, setSearchParams] = useSearchParams();
// 处理筛选条件变更
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
const { name, value } = e.target;
const newParams = new URLSearchParams(searchParams);
@@ -303,6 +133,7 @@ export default function RulesFiles() {
setSearchParams(newParams);
};
// 处理搜索操作
const handleSearch = (keyword: string) => {
const newParams = new URLSearchParams(searchParams);
if (keyword) {
@@ -317,13 +148,14 @@ export default function RulesFiles() {
setSearchParams(newParams);
};
// 处理页码变更
const handlePageChange = (page: number) => {
const newParams = new URLSearchParams(searchParams);
newParams.set('page', page.toString());
setSearchParams(newParams);
};
// 添加页码大小变更处理函数
// 处理每页条数变更
const handlePageSizeChange = (size: number) => {
const newParams = new URLSearchParams(searchParams);
newParams.set('pageSize', size.toString());
@@ -331,9 +163,23 @@ export default function RulesFiles() {
setSearchParams(newParams);
};
// 处理确认评查状态
const handleConfirmStatus = async (id: string, status: string) => {
try {
await updateReviewStatus(id, status);
// 刷新页面获取最新数据
const newParams = new URLSearchParams(searchParams);
setSearchParams(newParams);
} catch (error) {
console.error('更新评查状态失败:', error);
// 可以在这里添加错误提示
}
};
// 渲染问题摘要
const renderIssues = (issues: ReviewFile['issues']) => {
if (issues.length === 0) {
const renderIssues = (file: ReviewFileUI) => {
// 如果评查状态为通过，显示"所有评查点均通过"
if (file.reviewStatus === 'pass') {
return (
<div className="text-sm text-success">
<i className="ri-check-double-line mr-1"></i>所有评查点均通过
@@ -341,29 +187,23 @@ export default function RulesFiles() {
);
}
return (
<div className="text-sm">
{issues.slice(0, 3).map((issue, index) => (
<div key={index} className={`mb-1 ${index === issues.length - 1 ? 'last:mb-0' : ''}`}>
<span className={`severity-indicator severity-${issue.severity}`}></span>
{issue.message}
</div>
))}
</div>
);
// 其他状态显示占位符
return <div className="text-sm text-secondary">-</div>;
};
// 文件类型选项
const fileTypeOptions = Object.keys(FILE_TYPE_LABELS).map(type => ({
value: type,
label: FILE_TYPE_LABELS[type as FileType]
const fileTypeOptions = documentTypes.map((type: {id: number, name: string}) => ({
value: type.id.toString(),
label: type.name
}));
// 评查状态选项
const reviewStatusOptions = Object.keys(REVIEW_STATUS_LABELS).map(status => ({
value: status,
label: REVIEW_STATUS_LABELS[status as ReviewStatus]
}));
const reviewStatusOptions = [
{ value: 'pass', label: '通过' },
{ value: 'warning', label: '警告' },
{ value: 'fail', label: '不通过' },
{ value: 'pending', label: '待人工确认' }
];
// 时间范围选项
const dateRangeOptions = [
@@ -379,17 +219,13 @@ export default function RulesFiles() {
title: "文件名称",
key: "fileName",
width: "30%",
render: (_: unknown, file: ReviewFile) => (
render: (_: unknown, file: ReviewFileUI) => (
<div className="flex items-center">
<FileIcon fileName={file.fileName} className="mr-2 text-lg" />
<FileIcon fileName={file.fileName} className="mr-2 text-lg flex-shrink-0 w-10 h-10" />
<div>
<div className="font-normal text-base">{file.fileName}</div>
<div className="font-normal text-base break-words" title={file.fileName}>{file.fileName}</div>
<div className="text-xs text-secondary mt-1">
{file.fileType === FileType.CONTRACT && "合同编号："}
{file.fileType === FileType.LICENSE && "许可证号："}
{file.fileType === FileType.PUNISHMENT && "文号："}
{file.fileType === FileType.REPORT && "报表编号："}
{file.fileCode}
文件编号：{file.fileCode}
</div>
</div>
</div>
@@ -399,34 +235,38 @@ export default function RulesFiles() {
title: "文件类型",
key: "fileType",
width: "12%",
render: (_: unknown, file: ReviewFile) => (
<FileTypeTag
type={file.fileType}
text={FILE_TYPE_LABELS[file.fileType]}
showIcon={true}
/>
render: (_: unknown, file: ReviewFileUI) => (
<Tag
color="blue"
size="sm"
>
{file.fileType}
</Tag>
)
},
{
title: "上传时间",
key: "uploadTime",
width: "12%",
render: (_: unknown, file: ReviewFile) => (
<div>
<span className="text-base">{file.uploadTime.split(' ')[0]}</span>
<br />
<span className="text-xs text-secondary">{file.uploadTime.split(' ')[1]}</span>
</div>
)
render: (_: unknown, file: ReviewFileUI) => {
const [date, time] = file.uploadTime.split(' ');
return (
<div>
<span className="text-base">{date}</span>
<br />
<span className="text-xs text-secondary">{time}</span>
</div>
);
}
},
{
title: "评查状态",
key: "reviewStatus",
width: "12%",
render: (_: unknown, file: ReviewFile) => (
render: (_: unknown, file: ReviewFileUI) => (
<StatusBadge
status={file.reviewStatus}
text={file.issueCount > 0 ? `${REVIEW_STATUS_LABELS[file.reviewStatus]} (${file.issueCount})` : REVIEW_STATUS_LABELS[file.reviewStatus]}
text={REVIEW_STATUS_LABELS[file.reviewStatus]}
showIcon={true}
/>
)
@@ -435,20 +275,32 @@ export default function RulesFiles() {
title: "问题摘要",
key: "issues",
width: "20%",
render: (_: unknown, file: ReviewFile) => renderIssues(file.issues)
render: (_: unknown, file: ReviewFileUI) => renderIssues(file)
},
{
title: "操作",
key: "operation",
width: "14%",
render: (_: unknown, file: ReviewFile) => (
render: (_: unknown, file: ReviewFileUI) => (
<>
{file.reviewStatus === ReviewStatus.PENDING ? (
<Button type="primary" size="small" icon="ri-check-double-line" className="mr-2">
{file.reviewStatus === 'pending' ? (
<Button
type="primary"
size="small"
icon="ri-check-double-line"
className="mr-2"
onClick={() => handleConfirmStatus(file.id, 'pass')}
>
确认
</Button>
) : (
<Button type="default" size="small" icon="ri-eye-line" to={`/files/${file.id}`} className="mr-2">
<Button
type="default"
size="small"
icon="ri-eye-line"
to={`/files/${file.id}`}
className="mr-2"
>
查看
</Button>
)}
@@ -472,7 +324,7 @@ export default function RulesFiles() {
<span className="text-base font-normal text-primary ml-1">{totalCount}</span>
</div>
</div>
<Button type="primary" icon="ri-file-upload-line" to="/files/new">
<Button type="primary" icon="ri-file-upload-line" to="/files/upload">
上传新文件
</Button>
</div>
app/routes/rules._index.tsx
+2 -2
View File
@@ -415,7 +415,7 @@ export default function RulesIndex() {
title: "优先级",
key: "priority",
align: "left" as const,
width: "5%",
width: "8%",
render: (_: unknown, record: Rule) => {
const priorityColor = RULE_PRIORITY_COLORS[record.priority] as TagColor;
return (
@@ -467,7 +467,7 @@ export default function RulesIndex() {
{/* 页面头部 */}
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-medium">评查点管理</h2>
<Button type="primary" icon="ri-add-line" to="/rules/new" className="btn-add-rule">
<Button type="primary" icon="ri-add-line" to="/rules-new" className="btn-add-rule">
新增评查点
</Button>
</div>