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

完善合同模板上传功能，增加模板文件选择和验证逻辑，支持PDF和Word格式，优化上传准备流程。

Browse Source
This commit is contained in:
Wren
2025-09-11 17:31:29 +08:00
parent a5ca3a8261
commit 6c1a105145
1 changed files with 93 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/files.upload.tsx
+93 -5
View File
@@ -306,6 +306,7 @@ export default function FilesUpload() {
const [isContractType, setIsContractType] = useState<boolean>(false);
const [contractMainFiles, setContractMainFiles] = useState<File[]>([]);
const [contractAttachmentFiles, setContractAttachmentFiles] = useState<File[]>([]);
const [contractTemplateFiles, setContractTemplateFiles] = useState<File[]>([]);
// 附件追加状态
const [showAttachmentUpload, setShowAttachmentUpload] = useState<boolean>(false);
@@ -784,6 +785,63 @@ export default function FilesUpload() {
}
};
// 处理合同模板文件选择
const handleContractTemplateFilesSelected = (files: FileList) => {
try {
console.log('【调试-handleContractTemplateFilesSelected】开始处理合同模板选择, 文件数量:', files.length);
// 检查组件是否已卸载
if (!isMountedRef.current) {
console.error('【调试-handleContractTemplateFilesSelected】组件已卸载，取消处理');
return;
}
if (files.length > 0) {
// 验证文件类型，支持PDF和Word
const validFiles: File[] = [];
let hasInvalidFiles = false;
Array.from(files).forEach(file => {
const fileName = file.name.toLowerCase();
const isValidType =
file.type === 'application/pdf' || fileName.endsWith('.pdf') ||
file.type === 'application/msword' || fileName.endsWith('.doc') ||
file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || fileName.endsWith('.docx');
if (isValidType) {
validFiles.push(file);
} else {
hasInvalidFiles = true;
console.error(`【调试-handleContractTemplateFilesSelected】无效的文件类型: ${file.name}, 类型: ${file.type}`);
}
});
if (hasInvalidFiles) {
// 显示错误提示
console.error('【调试-handleContractTemplateFilesSelected】存在无效的文件类型');
messageService.error('只支持PDF、Word格式的文件', {
title: '文件类型错误',
confirmText: '确定',
cancelText: '',
});
}
if (validFiles.length > 0 && isMountedRef.current) {
console.log('【调试-handleContractTemplateFilesSelected】有效文件数量:', validFiles.length);
console.log('【调试-handleContractTemplateFilesSelected】有效文件:', validFiles.map(f => ({ name: f.name, size: f.size, type: f.type })));
setContractTemplateFiles(validFiles);
} else {
console.error('【调试-handleContractTemplateFilesSelected】没有有效的文件或组件已卸载');
}
} else {
console.log('【调试-handleContractTemplateFilesSelected】未选择任何文件');
}
} catch (error) {
console.error('【调试-handleContractTemplateFilesSelected】处理合同模板选择时发生错误:', error);
}
};
// 处理附件追加文件选择
const handleAttachmentFilesSelected = (files: FileList) => {
try {
@@ -941,11 +999,12 @@ export default function FilesUpload() {
};
// 检查并准备上传
const checkAndPrepareUpload = (mainFiles: File[], attachmentFiles: File[]) => {
const checkAndPrepareUpload = (mainFiles: File[], attachmentFiles: File[], templateFiles: File[] = []) => {
try {
console.log('【调试-checkAndPrepareUpload】开始检查并准备上传文件', {
mainFilesCount: mainFiles.length,
attachmentFilesCount: attachmentFiles.length,
templateFilesCount: templateFiles.length,
fileType
});
@@ -982,13 +1041,18 @@ export default function FilesUpload() {
return;
}
// 记录主文件和附件文件信息
// 记录主文件、附件文件和模板文件信息
console.log('【调试-checkAndPrepareUpload】合同主文件:', mainFiles.map(f => ({ name: f.name, size: f.size, type: f.type })));
if (attachmentFiles.length > 0) {
console.log('【调试-checkAndPrepareUpload】合同附件文件:', attachmentFiles.map(f => ({ name: f.name, size: f.size, type: f.type })));
} else {
console.log('【调试-checkAndPrepareUpload】无合同附件文件');
}
if (templateFiles.length > 0) {
console.log('【调试-checkAndPrepareUpload】合同模板文件:', templateFiles.map(f => ({ name: f.name, size: f.size, type: f.type })));
} else {
console.log('【调试-checkAndPrepareUpload】无合同模板文件');
}
}
if (mainFiles.length > 0) {
@@ -999,6 +1063,11 @@ export default function FilesUpload() {
if (attachmentFiles.length > 0) {
allFiles = [...allFiles, ...attachmentFiles];
}
// 如果模板文件存在，则合并
if (templateFiles.length > 0) {
allFiles = [...allFiles, ...templateFiles];
}
// console.log('【调试-checkAndPrepareUpload】合并文件后总数:', allFiles.length);
@@ -1984,7 +2053,7 @@ export default function FilesUpload() {
<Button
type="primary"
icon="ri-upload-cloud-line"
onClick={() => checkAndPrepareUpload(contractMainFiles, contractAttachmentFiles)}
onClick={() => checkAndPrepareUpload(contractMainFiles, contractAttachmentFiles, contractTemplateFiles)}
>
开始上传
</Button>
@@ -2005,8 +2074,8 @@ export default function FilesUpload() {
shouldPreventFileSelect={!fileType}
/>
) : (
// 合同文件上传区域 - 双区域并排
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
// 合同文件上传区域 - 三区域布局
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<h4 className="font-medium mb-2">合同主文件</h4>
<UploadArea
@@ -2049,6 +2118,25 @@ export default function FilesUpload() {
</div>
)}
</div>
<div>
<h4 className="font-medium mb-2">合同模板</h4>
<UploadArea
onFilesSelected={handleContractTemplateFilesSelected}
multiple={false}
accept=".pdf,.doc,.docx"
tipText="请上传合同模板，格式：PDF/Word"
mainText="上传合同模板"
buttonText="选择模板"
icon="ri-file-copy-line"
shouldPreventFileSelect={!fileType}
/>
{contractTemplateFiles.length > 0 && (
<div className="mt-2 text-sm text-green-600">
<i className="ri-checkbox-circle-line"></i>
已选择模板: <span className="font-medium">{contractTemplateFiles[0].name}</span>
</div>
)}
</div>
</div>
)}