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/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>