1012 lines
34 KiB
TypeScript
1012 lines
34 KiB
TypeScript
import { useState, useEffect, useRef, useCallback } from "react";
|
|
import { useSearchParams, useLoaderData, useFetcher, useNavigate,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 { FileTypeTag } from "~/components/ui/FileTypeTag";
|
|
import { FileTag } from "~/components/ui/FileTag";
|
|
import { FilterPanel, FilterSelect, SearchFilter, DateRangeFilter } from "~/components/ui/FilterPanel";
|
|
import { TableRowSkeleton, LoadingIndicator, NumberSkeleton } from '~/components/ui/SkeletonScreen';
|
|
import documentsIndexStyles from "~/styles/pages/documents_index.css?url";
|
|
import { getDocuments, deleteDocument, type DocumentUI } from "~/api/files/documents";
|
|
import { getDocumentTypes } from "~/api/document-types/document-types";
|
|
import { updateDocumentAuditStatus } from "~/api/evaluation_points/rules-files";
|
|
import { toastService } from "~/components/ui/Toast";
|
|
import { messageService } from "~/components/ui/MessageModal";
|
|
import { loadingBarService } from "~/components/ui/LoadingBar";
|
|
import { DOCUMENT_URL } from "~/api/axios-client";
|
|
|
|
// 导入样式
|
|
export function links() {
|
|
return [
|
|
{ rel: "stylesheet", href: documentsIndexStyles }
|
|
];
|
|
}
|
|
|
|
// 元数据
|
|
export const meta: MetaFunction = () => {
|
|
return [
|
|
{ title: "文档列表 - 中国烟草AI合同及卷宗审核系统" },
|
|
{ name: "description", content: "查看和管理系统中的所有文档，包括合同、许可证和行政处罚决定书等" },
|
|
];
|
|
};
|
|
|
|
// 数据加载器
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
// 获取URL查询参数，只保留必要的分页参数
|
|
const url = new URL(request.url);
|
|
const page = parseInt(url.searchParams.get("page") || "1", 10);
|
|
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
|
|
|
|
// 获取文档类型列表，用于筛选条件
|
|
const typesResponse = await getDocumentTypes({ pageSize: 500 });
|
|
const documentTypes = typesResponse.data?.types || [];
|
|
const documentTypeOptions = documentTypes.map(type => ({
|
|
value: type.id,
|
|
label: type.name
|
|
}));
|
|
|
|
// 初始返回空数据，将在客户端根据 sessionStorage 中的 reviewType 加载实际数据
|
|
return Response.json({
|
|
documents: [],
|
|
total: 0,
|
|
page,
|
|
pageSize,
|
|
documentTypeOptions,
|
|
initialLoad: true // 标记这是初始加载
|
|
});
|
|
};
|
|
|
|
// 定义action返回的数据类型
|
|
interface ActionResponse {
|
|
result: boolean;
|
|
message: string;
|
|
}
|
|
|
|
// 审核状态筛选选项
|
|
const auditStatusOptions = [
|
|
// { value: "", label: "全部" },
|
|
// { value: "-2", label: "警告" },
|
|
{ value: "-1", label: "不通过" },
|
|
{ value: "0", label: "待审核" },
|
|
{ value: "1", label: "通过" },
|
|
{ value: "2", label: "审核中" },
|
|
];
|
|
|
|
// 文件处理状态选项
|
|
const fileProcessingStatusOptions = [
|
|
{ value: "Waiting", label: "上传中", icon: "ri-loader-line", color: "blue" },
|
|
{ value: "Cutting", label: "切分中", icon: "ri-loader-line", color: "purple" },
|
|
{ value: "Extractioning", label: "抽取中", icon: "ri-loader-line", color: "cyan" },
|
|
{ value: "Evaluationing", label: "评查中", icon: "ri-loader-line", color: "teal" },
|
|
{ value: "Failed", label: "抽取异常", icon: "ri-close-circle-line", color: "red" },
|
|
{ value: "Processed", label: "已完成", icon: "ri-check-line", color: "green" },
|
|
];
|
|
|
|
// 文件状态筛选选项
|
|
const fileStatusOptions = [
|
|
// { value: "", label: "全部" },
|
|
{ value: "Waiting", label: "上传中" },
|
|
{ value: "Cutting", label: "切分中" },
|
|
{ value: "Extractioning", label: "抽取中" },
|
|
{ value: "Evaluationing", label: "评查中" },
|
|
{ value: "Failed", label: "抽取异常" },
|
|
{ value: "Processed", label: "已完成" },
|
|
];
|
|
|
|
// 审核状态选项及样式
|
|
const auditStatusMapping: Record<string, { label: string; color: string; icon: string }> = {
|
|
"-1": { label: "不通过", color: "red", icon: "ri-close-line" },
|
|
"-2": { label: "警告", color: "yellow", icon: "ri-alert-line" },
|
|
"0": { label: "待审核", color: "blue", icon: "ri-time-line" },
|
|
"1": { label: "通过", color: "green", icon: "ri-check-line" },
|
|
"2": { label: "审核中", color: "purple", icon: "ri-search-line" },
|
|
};
|
|
|
|
// 格式化文件大小
|
|
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];
|
|
};
|
|
|
|
// 处理表单提交和删除等操作
|
|
export const action = async ({ request }: ActionFunctionArgs) => {
|
|
try {
|
|
const formData = await request.formData();
|
|
const action = formData.get("_action");
|
|
|
|
if (action === "delete") {
|
|
const id = formData.get("id") as string;
|
|
const response = await deleteDocument(id);
|
|
|
|
if (response.error) {
|
|
return Response.json({ result: false, message: response.error }, { status: response.status || 500 });
|
|
}
|
|
return Response.json({ result: true, message: "文档已成功删除" });
|
|
}
|
|
|
|
if (action === "batchDelete") {
|
|
const ids = formData.getAll("ids") as string[];
|
|
|
|
// 批量删除处理
|
|
const results = await Promise.all(ids.map(id => deleteDocument(id)));
|
|
const failures = results.filter(r => r.error);
|
|
|
|
if (failures.length > 0) {
|
|
return Response.json({
|
|
result: false,
|
|
message: `删除失败: ${failures.map(f => f.error).join(', ')}`
|
|
}, { status: 400 });
|
|
}
|
|
|
|
return Response.json({ result: true, message: `已成功删除${ids.length}个文档` });
|
|
}
|
|
|
|
// 未知操作
|
|
return Response.json({ result: false, message: "未知操作" }, { status: 400 });
|
|
} catch (error) {
|
|
console.error('处理表单提交和删除等操作失败:', error);
|
|
return Response.json({
|
|
result: false,
|
|
error: error instanceof Error ? error.message : "处理表单提交和删除等操作失败"
|
|
}, { status: 500 });
|
|
}
|
|
};
|
|
|
|
export default function DocumentsIndex() {
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
|
|
const loaderData = useLoaderData<typeof loader>();
|
|
const fetcher = useFetcher<ActionResponse>();
|
|
const navigate = useNavigate();
|
|
|
|
// 存储从 sessionStorage 获取的 reviewType
|
|
const [reviewType, setReviewType] = useState<string | null>(null);
|
|
|
|
// 添加页面加载状态管理
|
|
const [isLoadingData, setIsLoadingData] = useState(true);
|
|
const [documents, setDocuments] = useState<DocumentUI[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [filteredDocumentTypeOptions, setFilteredDocumentTypeOptions] = useState(loaderData.documentTypeOptions);
|
|
const dataCache = useRef<typeof loaderData | null>(null);
|
|
|
|
// 添加一个状态来跟踪是否执行了删除操作
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
// 从URL获取当前筛选条件
|
|
const search = searchParams.get("search") || "";
|
|
const documentType = searchParams.get("documentType") || "";
|
|
const auditStatus = searchParams.get("auditStatus") || "";
|
|
const documentNumber = searchParams.get("documentNumber") || "";
|
|
const fileStatus = searchParams.get("fileStatus") || "";
|
|
const dateFrom = searchParams.get("dateFrom") || "";
|
|
const dateTo = searchParams.get("dateTo") || "";
|
|
const currentPage = parseInt(searchParams.get("page") || "1", 10);
|
|
const pageSize = parseInt(searchParams.get("pageSize") || "10", 10);
|
|
|
|
// 客户端数据请求
|
|
const fetchData = useCallback(async (storedReviewType: string) => {
|
|
setIsLoadingData(true);
|
|
loadingBarService.show();
|
|
|
|
try {
|
|
// 构建搜索参数
|
|
const searchParams = {
|
|
name: search || undefined,
|
|
documentNumber: documentNumber || undefined,
|
|
documentType: documentType || undefined,
|
|
auditStatus: auditStatus || undefined,
|
|
fileStatus: fileStatus || undefined,
|
|
dateFrom: dateFrom || undefined,
|
|
dateTo: dateTo || undefined,
|
|
reviewType: storedReviewType || undefined,
|
|
page: currentPage,
|
|
pageSize
|
|
};
|
|
|
|
// 获取文档列表
|
|
const documentsResponse = await getDocuments(searchParams);
|
|
if (documentsResponse.error) {
|
|
throw new Error(documentsResponse.error);
|
|
}
|
|
|
|
// 获取经过过滤的文档类型列表
|
|
const filteredTypesResponse = await getDocumentTypes({
|
|
pageSize: 500,
|
|
reviewType: storedReviewType || undefined
|
|
});
|
|
const filteredDocumentTypes = filteredTypesResponse.data?.types || [];
|
|
const filteredOptions = filteredDocumentTypes.map(type => ({
|
|
value: type.id,
|
|
label: type.name
|
|
}));
|
|
|
|
// 更新状态
|
|
setDocuments(documentsResponse.data?.documents || []);
|
|
setTotal(documentsResponse.data?.total || 0);
|
|
setFilteredDocumentTypeOptions(filteredOptions);
|
|
|
|
} catch (error) {
|
|
console.error('获取文档列表失败:', error);
|
|
toastService.error('获取文档列表失败: ' + (error instanceof Error ? error.message : '未知错误'));
|
|
} finally {
|
|
setIsLoadingData(false);
|
|
loadingBarService.hide();
|
|
}
|
|
}, [search, documentNumber, documentType, auditStatus, fileStatus, dateFrom, dateTo, currentPage, pageSize]);
|
|
|
|
// 在组件挂载时从 sessionStorage 获取 reviewType 并加载数据
|
|
useEffect(() => {
|
|
try {
|
|
if (typeof window !== 'undefined') {
|
|
const storedReviewType = sessionStorage.getItem('reviewType');
|
|
setReviewType(storedReviewType);
|
|
|
|
// 如果有 reviewType，则加载数据
|
|
if (storedReviewType) {
|
|
fetchData(storedReviewType);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('获取 sessionStorage 中的 reviewType 失败:', error);
|
|
}
|
|
}, [fetchData]);
|
|
|
|
// 监听 URL 参数变化，重新获取数据
|
|
useEffect(() => {
|
|
if (reviewType) {
|
|
fetchData(reviewType);
|
|
}
|
|
}, [searchParams, fetchData, reviewType]);
|
|
|
|
// 使用并更新缓存数据
|
|
useEffect(() => {
|
|
// 如果有缓存数据，先显示缓存，再在后台加载新数据
|
|
if (dataCache.current) {
|
|
setIsLoadingData(false);
|
|
} else {
|
|
// 显示加载状态 - 确保显示加载条
|
|
loadingBarService.show();
|
|
setIsLoadingData(true);
|
|
}
|
|
|
|
// 设置缓存数据
|
|
dataCache.current = loaderData;
|
|
|
|
// 处理loader错误
|
|
if (loaderData.error) {
|
|
toastService.error(loaderData.error);
|
|
}
|
|
}, [loaderData]);
|
|
|
|
// 使用useEffect监听fetcher状态变化并显示Toast
|
|
useEffect(() => {
|
|
if (fetcher.data && fetcher.state === 'idle' && isDeleting) {
|
|
// 重置删除状态
|
|
setIsDeleting(false);
|
|
|
|
if (fetcher.data.result) {
|
|
toastService.success(fetcher.data.message);
|
|
// 删除成功后重新加载数据
|
|
if (reviewType) {
|
|
fetchData(reviewType);
|
|
}
|
|
} else if (fetcher.data.message) {
|
|
toastService.error(fetcher.data.message);
|
|
// 删除失败只显示错误信息，不刷新数据
|
|
}
|
|
}
|
|
}, [fetcher.data, fetcher.state, fetchData, reviewType, isDeleting]);
|
|
|
|
// 分页处理函数
|
|
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("auditStatus", e.target.value);
|
|
} else {
|
|
params.delete("auditStatus");
|
|
}
|
|
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 = () => {
|
|
// 直接重置所有筛选条件的DOM值
|
|
const resetInput = (selector: string, value: string = "") => {
|
|
const element = document.querySelector<HTMLInputElement | HTMLSelectElement>(selector);
|
|
if (element) {
|
|
element.value = value;
|
|
|
|
// 对于搜索框，触发其input事件以激活搜索
|
|
if (element instanceof HTMLInputElement && element.type === "text") {
|
|
// 创建一个input事件
|
|
const event = new Event('input', { bubbles: true });
|
|
element.dispatchEvent(event);
|
|
}
|
|
}
|
|
};
|
|
|
|
// 重置所有搜索字段
|
|
resetInput('input[placeholder="请输入文档名称"]');
|
|
resetInput('input[placeholder="请输入文档编号"]');
|
|
resetInput('select[name="documentType"]');
|
|
resetInput('select[name="status"]');
|
|
resetInput('input[name="dateFrom"]');
|
|
resetInput('input[name="dateTo"]');
|
|
|
|
// 重置URL参数
|
|
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(documents.map((doc: DocumentUI) => doc.id.toString()));
|
|
} else {
|
|
setSelectedRowKeys([]);
|
|
}
|
|
};
|
|
|
|
// 下载文档
|
|
const handleDownload = async (path: string) => {
|
|
try {
|
|
const downloadUrl = `${DOCUMENT_URL}${path}`;
|
|
|
|
// 使用fetch获取文件内容
|
|
const response = await fetch(downloadUrl);
|
|
if (!response.ok) {
|
|
throw new Error(`下载失败: ${response.status} ${response.statusText}`);
|
|
}
|
|
|
|
// 将响应转换为Blob
|
|
const blob = await response.blob();
|
|
|
|
// 创建Blob URL
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
|
|
// 创建一个隐藏的a标签并点击它
|
|
const a = document.createElement('a');
|
|
a.style.display = 'none';
|
|
a.href = blobUrl;
|
|
// 从路径中获取文件名
|
|
const fileName = path.split('/').pop() || 'document';
|
|
a.download = decodeURIComponent(fileName);
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
|
|
// 清理
|
|
setTimeout(() => {
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(blobUrl);
|
|
}, 100);
|
|
} catch (error) {
|
|
console.error('下载文件失败:', error);
|
|
toastService.error(`下载文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
|
}
|
|
};
|
|
|
|
// 删除文档
|
|
const handleDelete = (id: string, name: string, fileStatus: string) => {
|
|
// 禁止删除处理中的文件
|
|
if (fileStatus !== "Processed" && fileStatus !== "Failed") {
|
|
toastService.warning("文件正在处理中，无法删除");
|
|
return;
|
|
}
|
|
|
|
messageService.show({
|
|
title: "确认删除",
|
|
message: `确定要删除文档"${name}"吗？`,
|
|
type: "warning",
|
|
confirmText: "删除",
|
|
cancelText: "取消",
|
|
onConfirm: () => {
|
|
// 设置删除状态为true
|
|
setIsDeleting(true);
|
|
|
|
const form = new FormData();
|
|
form.append("_action", "delete");
|
|
form.append("id", id);
|
|
|
|
fetcher.submit(form, { method: "post" });
|
|
}
|
|
});
|
|
};
|
|
|
|
// 批量删除
|
|
const handleBatchDelete = () => {
|
|
if (selectedRowKeys.length === 0) {
|
|
toastService.error('请至少选择一个文档');
|
|
return;
|
|
}
|
|
|
|
// 检查是否有正在处理中的文件
|
|
const hasProcessingFiles = documents.some((doc: DocumentUI) =>
|
|
selectedRowKeys.includes(doc.id.toString()) && doc.fileStatus !== 'Processed'
|
|
);
|
|
|
|
if (hasProcessingFiles) {
|
|
toastService.error('存在服务器未处理完成的文件，请重新选择需要删除的文件');
|
|
return;
|
|
}
|
|
|
|
messageService.show({
|
|
title: "确认批量删除",
|
|
message: `确认删除选中的 ${selectedRowKeys.length} 个文档？`,
|
|
type: "warning",
|
|
confirmText: "删除",
|
|
cancelText: "取消",
|
|
onConfirm: () => {
|
|
// 设置删除状态为true
|
|
setIsDeleting(true);
|
|
|
|
// 使用fetcher提交表单
|
|
const formData = new FormData();
|
|
formData.append('_action', 'batchDelete');
|
|
|
|
// 添加所有选中的ID
|
|
selectedRowKeys.forEach(id => {
|
|
formData.append('ids', id);
|
|
});
|
|
|
|
fetcher.submit(formData, { method: 'post' });
|
|
|
|
// 清空选中行
|
|
setSelectedRowKeys([]);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 处理文件状态变更
|
|
const handleFileStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const params = new URLSearchParams(searchParams);
|
|
if (e.target.value) {
|
|
params.set("fileStatus", e.target.value);
|
|
} else {
|
|
params.delete("fileStatus");
|
|
}
|
|
params.set("page", "1"); // 重置页码
|
|
setSearchParams(params);
|
|
};
|
|
|
|
// 导出列表
|
|
const handleExport = async () => {
|
|
// 如果没有文档，显示提示信息
|
|
if (documents.length === 0) {
|
|
// alert('当前页面没有文档可供导出');
|
|
toastService.error('当前页面没有文档可供导出');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 创建一个ZIP文件
|
|
const JSZip = await import('jszip').then(module => module.default);
|
|
const zip = new JSZip();
|
|
|
|
// 准备所有下载任务
|
|
const downloadTasks = documents.map(async (doc: DocumentUI) => {
|
|
try {
|
|
if (!doc.path) {
|
|
console.warn(`文档 ${doc.name} 没有有效的路径`);
|
|
return;
|
|
}
|
|
|
|
const downloadUrl = `${DOCUMENT_URL}${doc.path}`;
|
|
|
|
// 获取文件内容
|
|
const response = await fetch(downloadUrl);
|
|
if (!response.ok) {
|
|
throw new Error(`下载失败: ${response.status} ${response.statusText}`);
|
|
}
|
|
|
|
// 将响应转换为Blob
|
|
const blob = await response.blob();
|
|
|
|
// 从路径中获取文件名
|
|
const fileName = doc.path.split('/').pop() || doc.name;
|
|
|
|
// 添加到ZIP文件
|
|
zip.file(decodeURIComponent(fileName), blob);
|
|
|
|
return { success: true, name: fileName };
|
|
} catch (error) {
|
|
console.error(`下载文件 ${doc.name} 失败:`, error);
|
|
return { success: false, name: doc.name, error };
|
|
}
|
|
});
|
|
|
|
// 等待所有下载任务完成
|
|
const results = await Promise.all(downloadTasks);
|
|
|
|
// 计算成功和失败的数量
|
|
const succeeded = results.filter(r => r && r.success).length;
|
|
const failed = results.filter(r => r && !r.success).length;
|
|
|
|
if (succeeded === 0) {
|
|
// alert('所有文件下载失败');
|
|
toastService.error('所有文件下载失败');
|
|
return;
|
|
}
|
|
|
|
// 生成ZIP文件
|
|
const zipBlob = await zip.generateAsync({ type: 'blob' });
|
|
|
|
// 创建下载链接
|
|
const url = URL.createObjectURL(zipBlob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `文档导出_${new Date().toISOString().slice(0, 10)}.zip`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
|
|
// 清理
|
|
setTimeout(() => {
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}, 100);
|
|
|
|
// 显示结果消息
|
|
if (failed > 0) {
|
|
// alert(`成功导出 ${succeeded} 个文件，${failed} 个文件失败`);
|
|
toastService.warning(`成功导出 ${succeeded} 个文件，${failed} 个文件失败`);
|
|
} else {
|
|
// alert(`成功导出 ${succeeded} 个文件`);
|
|
toastService.success(`成功导出 ${succeeded} 个文件`);
|
|
}
|
|
} catch (error) {
|
|
console.error('导出文件失败:', error);
|
|
// alert(`导出文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
|
toastService.error(`导出文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
|
}
|
|
};
|
|
|
|
// 开始审核
|
|
const handleReviewFileClick = async (fileId: number, auditStatus: number | null) => {
|
|
// 检查audit_status是否为0，如果是则更新为2
|
|
if (auditStatus === 0 || auditStatus === null) {
|
|
try {
|
|
// console.log('开始审核',fileId,auditStatus)
|
|
const response = await updateDocumentAuditStatus(fileId.toString(), 2);
|
|
if (response.error) {
|
|
console.error('更新文件审核状态失败:', response.error);
|
|
toastService.error('更新文件审核状态失败:' + (response.error || '未知错误'));
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
console.error('更新文件审核状态时出错:', error);
|
|
toastService.error('更新文件审核状态时出错:' + (error instanceof Error ? error.message : '未知错误'));
|
|
return;
|
|
}
|
|
}
|
|
// console.log('更新成功，开始跳转')
|
|
// 导航到评查详情页
|
|
navigate(`/reviews?id=${fileId}&previousRoute=documents`);
|
|
};
|
|
|
|
|
|
// 表格列定义
|
|
const columns = [
|
|
{
|
|
title: (
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedRowKeys.length === documents.length}
|
|
onChange={(e) => handleSelectAll(e.target.checked)}
|
|
/>
|
|
),
|
|
key: "selection",
|
|
width: "50px",
|
|
render: (_: unknown, record: DocumentUI) => (
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedRowKeys.includes(record.id.toString())}
|
|
onChange={() => handleRowSelectionChange(record.id.toString())}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
title: "文档名称",
|
|
key: "name",
|
|
width:'25%',
|
|
render: (_: unknown, record: DocumentUI) => (
|
|
<div className="flex m-1">
|
|
<FileTag
|
|
extension={record.fileType}
|
|
showIcon={true}
|
|
showText={false}
|
|
showBackground={false}
|
|
size="lg"
|
|
className="mr-2 flex-shrink-0 self-center"
|
|
/>
|
|
<div className="overflow-hidden">
|
|
<span className="file-name break-words block whitespace-normal leading-normal" title={record.name}>{record.name}</span>
|
|
<div className="mt-2 flex inline-block">
|
|
<FileTypeTag
|
|
type={record.type}
|
|
typeName={record.typeName}
|
|
text={record.typeName}
|
|
size="sm"
|
|
showIcon={false}
|
|
fileType={record.fileType}
|
|
colorMode="light"
|
|
/>
|
|
{record.isTest && (
|
|
<span className="ml-2 text-xs bg-gray-100 text-gray-500 px-1 rounded">测试</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
title: "文档编号",
|
|
key: "documentNumber",
|
|
width:'10%',
|
|
render: (_: unknown, record: DocumentUI) => (
|
|
<span className="document-number">{record.documentNumber}</span>
|
|
)
|
|
},
|
|
{
|
|
title: "文件大小",
|
|
key: "size",
|
|
width: "10%",
|
|
render: (_: unknown, record: DocumentUI) => formatFileSize(record.size)
|
|
},
|
|
{
|
|
title: "文件状态",
|
|
key: "fileStatus",
|
|
width:'10%',
|
|
render: (_: unknown, record: DocumentUI) => {
|
|
// 处理fileStatus为null或undefined的情况
|
|
// console.log('fileStatus',record.fileStatus)
|
|
const fileStatus = record.fileStatus || "-";
|
|
const status = fileProcessingStatusOptions.find(s => s.value === fileStatus) ||
|
|
fileProcessingStatusOptions[0];
|
|
const isSpinning = fileStatus !== "Processed" && fileStatus !== "Failed";
|
|
return (
|
|
<div className={`inline-flex items-center px-2 py-1 rounded-full text-xs bg-${status.color}-100 text-${status.color}-800`}>
|
|
<i className={`${status.icon} ${isSpinning ? "animate-spin" : ""} mr-1`}></i>
|
|
<span>{status.label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "审核状态",
|
|
key: "auditStatus",
|
|
width:"10%",
|
|
render: (_: unknown, record: DocumentUI) => {
|
|
// 处理auditStatus为null或undefined的情况，默认为0（待审核）
|
|
const auditStatus = record.auditStatus != null ? record.auditStatus : 0;
|
|
const statusKey = auditStatus.toString();
|
|
const statusInfo = auditStatusMapping[statusKey] || auditStatusMapping["0"];
|
|
return (
|
|
<div className={`inline-flex items-center px-2 py-1 rounded-full text-xs bg-${statusInfo.color}-100 text-${statusInfo.color}-800`}>
|
|
<i className={`${statusInfo.icon} mr-1`}></i>
|
|
<span>{statusInfo.label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
title: "问题数量",
|
|
key: "issues",
|
|
width:"7%",
|
|
render: (_: unknown, record: DocumentUI) => (
|
|
record.issues === null ? "-" : record.issues
|
|
)
|
|
},
|
|
{
|
|
title: "上传时间",
|
|
key: "uploadTime",
|
|
width:"10%",
|
|
render: (_: unknown, record: DocumentUI) => record.uploadTime
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "actions",
|
|
width: "20%",
|
|
render: (_: unknown, record: DocumentUI) => (
|
|
<div className="operations-cell">
|
|
{(record.auditStatus === 0 || record.auditStatus == null) ? (
|
|
<button
|
|
onClick={() => handleReviewFileClick(record.id, record.auditStatus)}
|
|
disabled={record.fileStatus !== 'Processed'}
|
|
className={`mr-1 ${
|
|
record.fileStatus === 'Processed'
|
|
? 'hover:underline hover:cursor-pointer text-primary'
|
|
: 'text-gray-400 cursor-not-allowed opacity-60'
|
|
}`}
|
|
>
|
|
<i className="ri-play-circle-line"></i>
|
|
开始审核
|
|
</button>
|
|
) : record.auditStatus === 3 ? (
|
|
//record.auditStatus === 3 目前这个状态不存在，所以除了待审核(0)-开始审核，其他都是审核中(2)-查看
|
|
<Link
|
|
to={`/documents/${record.id}/progress`}
|
|
className="mr-1 hover:underline"
|
|
>
|
|
<i className="ri-eye-line"></i>
|
|
查看进度
|
|
</Link>
|
|
) : (
|
|
<Link
|
|
to={`/reviews?id=${record.id}&previousRoute=documents`}
|
|
className="mr-1 hover:underline"
|
|
>
|
|
<i className="ri-eye-line"></i>
|
|
查看
|
|
</Link>
|
|
)}
|
|
<Link
|
|
to={`/documents/edit?id=${record.id}`}
|
|
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={() => handleDownload(record.path)}
|
|
>
|
|
<i className="ri-download-line"></i>
|
|
下载
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="text-error hover:underline hover:text-red-700"
|
|
onClick={() => handleDelete(record.id.toString(), record.name, record.fileStatus)}
|
|
>
|
|
<i className="ri-delete-bin-line"></i>
|
|
删除
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="documents-page relative">
|
|
{/* 页面内容，在加载时降低不透明度但不隐藏内容 */}
|
|
<div className={isLoadingData ? "opacity-70 pointer-events-none transition-opacity" : "transition-opacity"}>
|
|
{/* 页面头部 */}
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div className="flex items-center">
|
|
<h2 className="text-xl font-medium">文档列表</h2>
|
|
{isLoadingData ? (
|
|
<div className="ml-4">
|
|
<NumberSkeleton />
|
|
</div>
|
|
) : (
|
|
<div className="ml-4 text-sm text-secondary">
|
|
共 <span className="font-medium text-primary">{total}</span> 条记录
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Button
|
|
type="primary"
|
|
icon="ri-upload-line"
|
|
to="/files/upload"
|
|
className="hover:text-white"
|
|
>
|
|
上传文档
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 搜索筛选区 */}
|
|
<FilterPanel
|
|
actions={
|
|
<>
|
|
<Button
|
|
type="default"
|
|
icon="ri-refresh-line"
|
|
onClick={handleReset}
|
|
className="mr-2"
|
|
>
|
|
重置
|
|
</Button>
|
|
</>
|
|
}
|
|
noActionDivider={true}
|
|
>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
|
|
<SearchFilter
|
|
label="文档名称"
|
|
placeholder="请输入文档名称"
|
|
value={search}
|
|
onSearch={handleNameSearch}
|
|
instantSearch={true}
|
|
/>
|
|
|
|
<SearchFilter
|
|
label="文档编号"
|
|
placeholder="请输入文档编号"
|
|
value={documentNumber}
|
|
onSearch={handleDocumentNumberChange}
|
|
instantSearch={true}
|
|
/>
|
|
|
|
<FilterSelect
|
|
label="文档类型"
|
|
name="documentType"
|
|
value={documentType}
|
|
options={filteredDocumentTypeOptions}
|
|
onChange={handleDocumentTypeChange}
|
|
/>
|
|
|
|
<FilterSelect
|
|
label="文件状态"
|
|
name="fileStatus"
|
|
value={fileStatus}
|
|
options={fileStatusOptions}
|
|
onChange={handleFileStatusChange}
|
|
/>
|
|
|
|
<FilterSelect
|
|
label="审核状态"
|
|
name="auditStatus"
|
|
value={auditStatus}
|
|
options={auditStatusOptions}
|
|
onChange={handleStatusChange}
|
|
/>
|
|
|
|
<DateRangeFilter
|
|
label="上传时间"
|
|
startDate={dateFrom}
|
|
endDate={dateTo}
|
|
onStartDateChange={(value) => handleDateChange('dateFrom', value)}
|
|
onEndDateChange={(value) => handleDateChange('dateTo', value)}
|
|
simple={true}
|
|
colorMode="light"
|
|
/>
|
|
</div>
|
|
</FilterPanel>
|
|
|
|
{/* 数据表格 */}
|
|
<Card>
|
|
{isLoadingData && <LoadingIndicator />}
|
|
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<div>
|
|
<Button
|
|
type="default"
|
|
icon="ri-delete-bin-line"
|
|
onClick={handleBatchDelete}
|
|
className="mr-2"
|
|
disabled={selectedRowKeys.length === 0}
|
|
>
|
|
批量删除
|
|
</Button>
|
|
<Button
|
|
type="default"
|
|
icon="ri-download-line"
|
|
onClick={handleExport}
|
|
>
|
|
导出列表
|
|
</Button>
|
|
</div>
|
|
<div className="text-sm text-secondary">
|
|
共 <span className="font-medium text-primary">{total}</span> 条记录
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
{isLoadingData && documents.length === 0 ? (
|
|
<TableRowSkeleton count={5} />
|
|
) : (
|
|
<Table
|
|
columns={columns}
|
|
dataSource={documents}
|
|
rowKey="id"
|
|
emptyText={isLoadingData ? "加载中..." : "暂无数据"}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* 分页 */}
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
total={total}
|
|
pageSize={pageSize}
|
|
onChange={handlePageChange}
|
|
onPageSizeChange={handlePageSizeChange}
|
|
pageSizeOptions={[10, 20, 50, 100]}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 错误边界处理
|
|
export function ErrorBoundary() {
|
|
return (
|
|
<div className="error-container">
|
|
<h1 className="text-xl font-bold text-red-500">出错了</h1>
|
|
<p>加载文档列表时出现错误。请刷新页面或联系系统管理员。</p>
|
|
</div>
|
|
);
|
|
}
|