添加交叉评查任务的文档列表，评查详情的意见列表
This commit is contained in:
@@ -0,0 +1,286 @@
|
||||
|
||||
import { Modal } from '../ui/Modal';
|
||||
import { Table } from '../ui/Table';
|
||||
import { Button } from '../ui/Button';
|
||||
import { FileIcon } from '../ui/FileIcon';
|
||||
import { FileTypeTag } from '../ui/FileTypeTag';
|
||||
import { StatusBadge } from '../ui/StatusBadge';
|
||||
import { Pagination } from '../ui/Pagination';
|
||||
import { LoadingIndicator } from '../ui/SkeletonScreen';
|
||||
import type { ReviewFileUI } from '~/api/evaluation_points/rules-files';
|
||||
import { updateDocumentAuditStatus } from '~/api/evaluation_points/rules-files';
|
||||
import { toastService } from '../ui/Toast';
|
||||
|
||||
// 导出样式链接
|
||||
export const links = () => [];
|
||||
|
||||
interface DocumentListModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
files: ReviewFileUI[];
|
||||
onViewFile?: (fileId: string) => void;
|
||||
loading?: boolean;
|
||||
// 分页相关属性
|
||||
currentPage?: number;
|
||||
pageSize?: number;
|
||||
total?: number;
|
||||
onPageChange?: (page: number) => void;
|
||||
onPageSizeChange?: (size: number) => void;
|
||||
}
|
||||
|
||||
export function DocumentListModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
title,
|
||||
files,
|
||||
onViewFile,
|
||||
loading = false,
|
||||
// 分页属性，使用默认值
|
||||
currentPage = 1,
|
||||
pageSize = 10,
|
||||
total = 0,
|
||||
onPageChange,
|
||||
onPageSizeChange
|
||||
}: DocumentListModalProps) {
|
||||
|
||||
// 查看评查文件
|
||||
const handleReviewFileClick = async (fileId: string, auditStatus: number | null) => {
|
||||
// 检查audit_status是否为0，如果是则更新为2
|
||||
if (auditStatus === 0 || auditStatus === null) {
|
||||
try {
|
||||
const response = await updateDocumentAuditStatus(fileId, 2);
|
||||
if (response.error) {
|
||||
throw new Error(response.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新文件审核状态时出错:', error);
|
||||
toastService.error(`更新文件审核状态时出错:${error instanceof Error ? error.message : '未知错误'}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果有自定义的查看处理函数，则调用它
|
||||
if (onViewFile) {
|
||||
onViewFile(fileId);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染问题摘要
|
||||
const renderIssues = (file: ReviewFileUI) => {
|
||||
// 如果文件状态为完成
|
||||
if (file.status === 'Processed') {
|
||||
// 如果没有问题，显示"所有评查点均通过"
|
||||
if (file.warningCount <= 0 && file.failCount <= 0) {
|
||||
return (
|
||||
<div className="text-sm text-success">
|
||||
<i className="ri-check-double-line mr-1"></i>所有评查点均通过
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 显示问题列表
|
||||
if (file.issues && file.issues.length > 0) {
|
||||
// 最多显示2个问题
|
||||
const displayIssues = file.issues.slice(0, 2);
|
||||
|
||||
return (
|
||||
<div className="text-sm">
|
||||
{displayIssues.map((issue, index) => (
|
||||
<div key={index} className="mb-1">
|
||||
<i className="ri-circle-fill mr-1 text-yellow-400"></i>
|
||||
{issue.message}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{file.issues.length > 2 && (
|
||||
<div className="text-secondary mt-1">
|
||||
还有 {file.issues.length - 2} 个问题...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
// 其他状态显示占位符
|
||||
return <div className="text-sm text-secondary">-</div>;
|
||||
};
|
||||
|
||||
// 定义表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: "文件名称",
|
||||
key: "fileName",
|
||||
width: "30%",
|
||||
render: (_: unknown, file: ReviewFileUI) => (
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0 flex items-center self-center">
|
||||
<FileIcon fileName={file.fileName} className="text-lg w-10 h-10" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 flex flex-col py-2 ml-2">
|
||||
<div className="font-normal text-base break-words whitespace-normal leading-normal" title={file.fileName}>{file.fileName}</div>
|
||||
<div className="text-xs text-secondary mt-2">
|
||||
文件编号：{file.fileCode}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "文件类型",
|
||||
key: "fileType",
|
||||
width: "12%",
|
||||
render: (_: unknown, file: ReviewFileUI) => (
|
||||
<FileTypeTag
|
||||
type="other"
|
||||
typeName={file.fileType}
|
||||
text={file.fileType}
|
||||
size="sm"
|
||||
showIcon={false}
|
||||
colorMode="light"
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "上传时间",
|
||||
key: "uploadTime",
|
||||
width: "12%",
|
||||
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: ReviewFileUI) =>
|
||||
// 要文件切分处理完之后，再显示评查统计
|
||||
file.status === 'Processed' ? (
|
||||
<div>
|
||||
{file.passCount > 0 && (
|
||||
<StatusBadge
|
||||
status="pass"
|
||||
text={`通过(${file.passCount})`}
|
||||
showIcon={true}
|
||||
className="my-2"
|
||||
/>
|
||||
)}
|
||||
{file.warningCount > 0 && (
|
||||
<StatusBadge
|
||||
status="warning"
|
||||
text={`警告(${file.warningCount})`}
|
||||
showIcon={true}
|
||||
className="my-2"
|
||||
/>
|
||||
)}
|
||||
{file.failCount > 0 && (
|
||||
<StatusBadge
|
||||
status="fail"
|
||||
text={`不通过(${file.failCount})`}
|
||||
showIcon={true}
|
||||
className="my-2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
) : (
|
||||
<div className="text-sm">
|
||||
-
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "问题摘要",
|
||||
key: "issues",
|
||||
width: "20%",
|
||||
render: (_: unknown, file: ReviewFileUI) => renderIssues(file)
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operation",
|
||||
width: "14%",
|
||||
render: (_: unknown, file: ReviewFileUI) => (
|
||||
<>
|
||||
<Button
|
||||
type="default"
|
||||
size="small"
|
||||
icon="ri-eye-line"
|
||||
onClick={() => handleReviewFileClick(file.id, file.auditStatus)}
|
||||
disabled={file.status !== 'Processed'}
|
||||
className="mr-2"
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
size="full"
|
||||
className="document-list-modal"
|
||||
>
|
||||
<div className="px-6 py-4">
|
||||
{loading ? (
|
||||
// 显示loading状态
|
||||
<div className="py-8">
|
||||
<LoadingIndicator text="正在加载文档列表..." />
|
||||
</div>
|
||||
) : files.length === 0 ? (
|
||||
// 无数据状态
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
暂无文档数据
|
||||
</div>
|
||||
) : (
|
||||
// 有数据时显示表格和分页
|
||||
<>
|
||||
<div className="mb-4 flex items-center">
|
||||
<i className="ri-file-list-3-line text-primary text-lg mr-2"></i>
|
||||
<span className="text-sm text-secondary">共有</span>
|
||||
<span className="text-base font-normal text-primary ml-1 mr-1">{total || files.length}</span>
|
||||
<span className="text-sm text-secondary">个文档</span>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={files}
|
||||
rowKey="id"
|
||||
emptyText="暂无文件数据"
|
||||
className="files-table table-auto-height"
|
||||
/>
|
||||
|
||||
{/* 分页组件 - 只有在提供了分页回调函数且总数大于每页大小时才显示 */}
|
||||
{(onPageChange || onPageSizeChange) && total > pageSize ? (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
total={total}
|
||||
pageSize={pageSize}
|
||||
onChange={onPageChange || (() => {})}
|
||||
onPageSizeChange={onPageSizeChange}
|
||||
showTotal={true}
|
||||
showPageSizeChanger={!!onPageSizeChange}
|
||||
pageSizeOptions={[10, 20, 30, 50]}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-sm text-gray-500 mt-4 text-center">
|
||||
共 {total} 条记录，每页 {pageSize} 条
|
||||
{total <= pageSize && " (无需分页)"}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user