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

优化评查详情，新增信息提示框组件

Browse Source
This commit is contained in:
yorn
2025-04-23 20:48:32 +08:00
parent ee36ce2620
commit be99fdec79
15 changed files with 1399 additions and 757 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/documents._index.tsx
+131 -108
View File
@@ -13,6 +13,7 @@ import { getDocuments, deleteDocument, type DocumentUI } from "~/api/files/docum
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";
// 导入样式
export function links() {
@@ -56,77 +57,49 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
pageSize
};
// 获取文档列表
const documentsResponse = await getDocuments(searchParams);
// console.log('documentsResponse---1--',JSON.stringify(documentsResponse,null,2));
if (documentsResponse.error) {
throw new Error(documentsResponse.error);
try {
// 获取文档列表
const documentsResponse = await getDocuments(searchParams);
// console.log('documentsResponse---1--',JSON.stringify(documentsResponse,null,2));
if (documentsResponse.error) {
throw new Error(documentsResponse.error);
}
// 获取文档类型列表，用于筛选条件，设置较大的pageSize确保获取所有数据
const typesResponse = await getDocumentTypes({ pageSize: 500 });
// console.log('typesResponse-----',typesResponse);
const documentTypes = typesResponse.data?.types || [];
const documentTypeOptions = documentTypes.map(type => ({
value: type.id,
label: type.name
}));
return Response.json({
documents: documentsResponse.data?.documents || [],
total: documentsResponse.data?.total || 0,
page,
pageSize,
documentTypeOptions
});
} catch (error) {
console.error('获取文档列表失败:', error);
return Response.json({
error: '获取文档列表失败',
status: 500
}, { status: 500 });
}
// 获取文档类型列表，用于筛选条件，设置较大的pageSize确保获取所有数据
const typesResponse = await getDocumentTypes({ pageSize: 500 });
// console.log('typesResponse-----',typesResponse);
const documentTypes = typesResponse.data?.types || [];
const documentTypeOptions = documentTypes.map(type => ({
value: type.id,
label: type.name
}));
return Response.json({
documents: documentsResponse.data?.documents || [],
total: documentsResponse.data?.total || 0,
page,
pageSize,
documentTypeOptions
});
};
// 定义action返回的数据类型
interface ActionResponse {
success: boolean;
result: boolean;
message: string;
}
// 处理表单提交和删除等操作
export const action = async ({ request }: ActionFunctionArgs) => {
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({ success: false, message: response.error }, { status: response.status || 500 });
}
return Response.json({ success: 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({
success: false,
message: `删除失败: ${failures.map(f => f.error).join(', ')}`
}, { status: 400 });
}
return Response.json({ success: true, message: `已成功删除${ids.length}个文档` });
}
// 未知操作
return Response.json({ success: false, message: "未知操作" }, { status: 400 });
};
// 审核状态筛选选项
const auditStatusOptions = [
// { value: "", label: "全部" },
{ value: "-2", label: "警告" },
// { value: "-2", label: "警告" },
{ value: "-1", label: "不通过" },
{ value: "0", label: "待审核" },
{ value: "1", label: "通过" },
@@ -172,19 +145,49 @@ const formatFileSize = (bytes: number) => {
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 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();
@@ -207,6 +210,24 @@ export default function DocumentsIndex() {
// 获取API返回的数据
const { documents, total, documentTypeOptions } = loaderData;
// 处理loader错误
useEffect(() => {
if (loaderData.error) {
toastService.error(loaderData.error);
}
}, [loaderData.error]);
// 使用useEffect监听fetcher状态变化并显示Toast
useEffect(() => {
if (fetcher.data && fetcher.state === 'idle') {
if (fetcher.data.result) {
toastService.success(fetcher.data.message);
} else if (fetcher.data.message) {
toastService.error(fetcher.data.message);
}
}
}, [fetcher.data, fetcher.state]);
// 分页处理函数
const handlePageChange = (page: number) => {
searchParams.set("page", page.toString());
@@ -365,7 +386,7 @@ export default function DocumentsIndex() {
}, 100);
} catch (error) {
console.error('下载文件失败:', error);
alert(`下载文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
toastService.error(`下载文件失败: ${error instanceof Error ? error.message : '未知错误'}`);
}
};
@@ -377,19 +398,25 @@ export default function DocumentsIndex() {
return;
}
if (confirm(`确定要删除文档"${name}"吗？`)) {
const form = new FormData();
form.append("_action", "delete");
form.append("id", id);
fetcher.submit(form, { method: "post" });
}
messageService.show({
title: "确认删除",
message: `确定要删除文档"${name}"吗？`,
type: "warning",
confirmText: "删除",
cancelText: "取消",
onConfirm: () => {
const form = new FormData();
form.append("_action", "delete");
form.append("id", id);
fetcher.submit(form, { method: "post" });
}
});
};
// 批量删除
const handleBatchDelete = () => {
if (selectedRowKeys.length === 0) {
// alert('请至少选择一个文档');
toastService.error('请至少选择一个文档');
return;
}
@@ -400,26 +427,32 @@ export default function DocumentsIndex() {
);
if (hasProcessingFiles) {
// alert('存在服务器未处理完成的文件，请重新选择需要删除的文件');
toastService.error('存在服务器未处理完成的文件，请重新选择需要删除的文件');
return;
}
if (window.confirm(`确认删除选中的 ${selectedRowKeys.length} 个文档？`)) {
// 使用fetcher提交表单
const formData = new FormData();
formData.append('_action', 'batchDelete');
// 添加所有选中的ID
selectedRowKeys.forEach(id => {
formData.append('ids', id);
});
fetcher.submit(formData, { method: 'post' });
// 清空选中行
setSelectedRowKeys([]);
}
messageService.show({
title: "确认批量删除",
message: `确认删除选中的 ${selectedRowKeys.length} 个文档？`,
type: "warning",
confirmText: "删除",
cancelText: "取消",
onConfirm: () => {
// 使用fetcher提交表单
const formData = new FormData();
formData.append('_action', 'batchDelete');
// 添加所有选中的ID
selectedRowKeys.forEach(id => {
formData.append('ids', id);
});
fetcher.submit(formData, { method: 'post' });
// 清空选中行
setSelectedRowKeys([]);
}
});
};
// 处理文件状态变更
@@ -548,16 +581,6 @@ export default function DocumentsIndex() {
navigate(`/reviews?id=${fileId}&previousRoute=documents`);
};
// 使用useEffect监听fetcher状态变化并显示Toast
useEffect(() => {
if (fetcher.data && fetcher.state === 'idle') {
if (fetcher.data.success) {
toastService.success(fetcher.data.message);
} else if (fetcher.data.message) {
toastService.error(fetcher.data.message);
}
}
}, [fetcher.data, fetcher.state]);
// 表格列定义
const columns = [