cykj/hzdyjs
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

“出国申请附件上传功能修改”

Browse Source
This commit is contained in:
weizhong committed 2025-11-10 11:29:02 +08:00
1 parent 3ac3f6423c
commit a7ec129d20
2 files changed
+354 -181
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/service/impl/RsOverseasApplicationServiceImpl.java
+19
View File
@@ -489,6 +489,25 @@ public class RsOverseasApplicationServiceImpl extends ServiceImpl<RsOverseasAppl
updateWrapper.set(RsOverseasApplication::getStampedFileUploadTime, update.getStampedFileUploadTime());
if (update.getStampedFileUploadStatus() != null)
updateWrapper.set(RsOverseasApplication::getStampedFileUploadStatus, update.getStampedFileUploadStatus());
if (update.getStampedFileOssId() != null)
updateWrapper.set(RsOverseasApplication::getStampedFileOssId, update.getStampedFileOssId());
// ==================== 党籍保留附件字段 ====================
if (update.getPartyRetentionFilePath() != null)
updateWrapper.set(RsOverseasApplication::getPartyRetentionFilePath, update.getPartyRetentionFilePath());
if (update.getPartyRetentionFileName() != null)
updateWrapper.set(RsOverseasApplication::getPartyRetentionFileName, update.getPartyRetentionFileName());
if (update.getPartyRetentionUploadTime() != null)
updateWrapper.set(RsOverseasApplication::getPartyRetentionUploadTime, update.getPartyRetentionUploadTime());
if (update.getPartyRetentionUploadStatus() != null)
updateWrapper.set(RsOverseasApplication::getPartyRetentionUploadStatus,
update.getPartyRetentionUploadStatus());
if (update.getPartyRetentionFileOssId() != null)
updateWrapper.set(RsOverseasApplication::getPartyRetentionFileOssId, update.getPartyRetentionFileOssId());
// ==================== 附件IDs ====================
if (update.getAttachmentIds() != null)
updateWrapper.set(RsOverseasApplication::getAttachmentIds, update.getAttachmentIds());
return baseMapper.update(null, updateWrapper) > 0;
}
web/src/views/rs/overseas/index.vue
+335 -181
View File
@@ -790,47 +790,6 @@
</el-row>
</el-form>
<!-- 申请附件上传区域 -->
<div class="application-attachment-upload-section" style="margin: 20px 0; padding: 15px; border: 1px solid #e4e7ed; border-radius: 4px; background: #fafafa">
<div style="font-size: 14px; color: #303133; margin-bottom: 10px; font-weight: 600">
<el-icon><Paperclip /></el-icon>
申请附件上传（可选）
</div>
<div style="font-size: 12px; color: #909399; margin-bottom: 10px">
请上传与出国申请相关的附件材料（如邀请函、行程安排、会议通知等），支持PDF、Word、Excel、图片格式
</div>
<el-upload
v-model:file-list="applicationAttachmentFileList"
class="attachment-upload-demo"
drag
list-type="picture-card"
:action="`${baseApi}/resource/oss/upload`"
:headers="{
'Authorization': `Bearer ${getToken()}`,
'clientid': clientId
}"
:data="{
bizType: 'overseas_application_attachment'
}"
:auto-upload="true"
:before-upload="beforeApplicationAttachmentUpload"
:on-success="handleApplicationAttachmentSuccess"
:on-error="handleApplicationAttachmentError"
:on-remove="handleRemoveApplicationAttachment"
:limit="10"
:show-file-list="true"
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xls,.xlsx"
>
<template #tip>
<div class="el-upload__tip">支持PDF、Word、Excel、图片格式，单个文件不超过20MB，最多10个文件</div>
</template>
<div class="el-upload-dragger">
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
<div class="el-upload__text"><em>点击或拖拽文件到此处上传</em></div>
</div>
</el-upload>
</div>
<!-- 保留党籍附件按钮已隐藏 -->
<!-- <el-button
v-if="showPartyMembershipButton"
@@ -1085,6 +1044,49 @@
</el-table>
</div>
<!-- 党籍保留附件显示区域 -->
<div
v-if="state.viewData && 'applicationId' in state.viewData && !('recordId' in state.viewData) && (state.viewData as OverseasApplicationVO).partyRetentionUploadStatus === '1'"
class="attachment-section"
style="margin-top: 20px;"
>
<div class="section-title" style="margin-bottom: 15px; padding: 10px; border-left: 4px solid #67c23a; background-color: #f0f9ff;">
<el-icon style="margin-right: 8px;"><Document /></el-icon>
<strong>党籍保留附件</strong>
</div>
<div style="padding: 15px; border: 1px solid #e4e7ed; border-radius: 4px; background: #fafafa;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="flex: 1;">
<el-tag type="success" size="large" style="padding: 8px 16px;">
<el-icon><Document /></el-icon>
<span style="margin-left: 8px;">{{ (state.viewData as OverseasApplicationVO).partyRetentionFileName }}</span>
</el-tag>
<div style="margin-top: 8px; font-size: 12px; color: #909399;">
上传时间: {{ (state.viewData as OverseasApplicationVO).partyRetentionUploadTime }}
</div>
</div>
<div style="display: flex; gap: 8px;">
<el-button
type="primary"
icon="View"
@click="handlePreviewPartyRetentionFile(state.viewData as OverseasApplicationVO)"
v-if="(state.viewData as OverseasApplicationVO).partyRetentionFilePath"
>
预览
</el-button>
<el-button
type="success"
icon="Download"
@click="handleDownloadPartyRetentionFile(state.viewData as OverseasApplicationVO)"
v-if="(state.viewData as OverseasApplicationVO).partyRetentionFileOssId"
>
下载
</el-button>
</div>
</div>
</div>
</div>
<!-- 【废弃代码区域 - 保留备份】 -->
<div v-if="false">
<!-- 出国境登记表盖章文件 -->
@@ -1953,6 +1955,12 @@ const handleUpdateAndResubmitApplication = async (row: OverseasApplicationVO) =>
state.applicationDialog.title = '修改并重新提交因私出国（境）申请';
state.pageType = 'resubmit';
state.isResubmitMode = true; // 标记为重新提交模式
// 加载已上传的附件列表（关键：用于编辑时显示已有附件）
console.log('🔄 [重新提交] 开始加载已上传的附件列表，attachmentIds:', response.data.attachmentIds);
await loadApplicationAttachmentList(response.data.attachmentIds);
console.log('✅ [重新提交] 附件列表加载完成');
// 更新弹窗key，确保每次打开都是全新的组件
state.applicationDialog.key = Date.now();
console.log('🔄 [重新提交] 打开弹窗，更新key:', state.applicationDialog.key);
@@ -2342,6 +2350,10 @@ const resetApplicationForm = () => {
state.partyRetentionFileList = [];
console.log('🧹 [重置表单] 已清空党籍保留附件列表');
// ✅ 清空申请附件列表（关键修复！）
applicationAttachmentFileList.value = [];
console.log('🧹 [重置表单] 已清空申请附件列表');
// 重置签名画布
nextTick(() => {
if (signatureCanvas.value) {
@@ -2470,7 +2482,8 @@ const submitApplicationForm = () => {
itinerary: state.applicationForm.itinerary,
duration: state.applicationForm.duration,
personnelCategory: state.applicationForm.personnelCategory,
emergencyContact: state.applicationForm.emergencyContact // 添加应急联系人字段
emergencyContact: state.applicationForm.emergencyContact, // 添加应急联系人字段
attachmentIds: (state.applicationForm as any).attachmentIds // 添加附件ID字段（关键）
});
// 权限检查
@@ -3104,6 +3117,7 @@ const handlePartyRetentionFileUploadSuccess = (response: any, file: any) => {
state.applicationForm.partyRetentionFileName = response.data.fileName;
state.applicationForm.partyRetentionUploadTime = response.data.uploadTime;
state.applicationForm.partyRetentionUploadStatus = '1';
state.applicationForm.partyRetentionFileOssId = response.data.ossId; // ⭐ 保存OSS文件ID
ElMessage.success('党籍保留附件上传成功！');
} else {
@@ -3124,6 +3138,7 @@ const handlePartyRetentionFileRemove = () => {
state.applicationForm.partyRetentionFileName = '';
state.applicationForm.partyRetentionUploadTime = '';
state.applicationForm.partyRetentionUploadStatus = '0';
state.applicationForm.partyRetentionFileOssId = null; // ⭐ 清空OSS文件ID
// 清空文件列表（重要：解决删除后文件仍显示的问题）
state.partyRetentionFileList = [];
@@ -3395,6 +3410,87 @@ const loadViewAttachmentList = async (attachmentIds: string | null | undefined)
}
};
// 加载编辑表单的附件列表（用于编辑/重新提交时显示已上传的附件）
const loadApplicationAttachmentList = async (attachmentIds: string | null | undefined) => {
console.log('🔍 [编辑附件] 开始加载附件列表，attachmentIds:', attachmentIds);
try {
// 清空现有列表
applicationAttachmentFileList.value = [];
// 检查是否有附件ID
if (!attachmentIds || !attachmentIds.toString().trim()) {
console.log('⚠️ [编辑附件] 该申请暂无附件数据');
return;
}
// 解析OSS ID列表
const ossIdsArray = attachmentIds
.toString()
.split(',')
.map((id) => id.trim())
.filter((id) => id);
if (ossIdsArray.length === 0) {
console.warn('⚠️ [编辑附件] OSS ID列表为空');
return;
}
console.log('📋 [编辑附件] OSS ID列表:', ossIdsArray);
// 调用OSS接口获取文件信息
const response = await request({
url: `/resource/oss/listByIds/${ossIdsArray.join(',')}`,
method: 'get'
});
if (response.code === 200 && response.data) {
console.log('✅ [编辑附件] 获取OSS文件信息成功:', response.data);
// 转换数据格式到 el-upload 需要的格式
const attachmentFiles = response.data.map((item: any, index: number) => ({
uid: `edit_attachment_${index}_${Date.now()}`,
name: item.originalName || `附件${index + 1}`,
url: item.url,
ossId: item.ossId,
status: 'success', // 标记为上传成功
fileSize: item.fileSize || 0,
uploadTime: item.createTime,
response: {
code: 200,
data: {
url: item.url,
ossId: item.ossId
}
}
}));
applicationAttachmentFileList.value = attachmentFiles;
console.log('✨ [编辑附件] 附件数据处理完成，共', attachmentFiles.length, '个附件');
// 更新表单的 attachmentIds 字段
updateApplicationFormAttachmentIds();
} else {
console.warn('⚠️ [编辑附件] OSS接口返回数据为空');
}
} catch (error: any) {
console.error('❌ [编辑附件] 加载附件列表失败:', error);
console.error('📋 [编辑附件] 错误详情:', {
message: error.message,
response: error.response,
status: error.response?.status,
data: error.response?.data
});
// 根据错误类型给出提示
if (error.response?.status === 403) {
console.error('🔒 [编辑附件] 权限不足！请检查是否有 resource:oss:list 权限');
ElMessage.warning('您没有查询附件的权限，请联系管理员');
} else if (error.response?.status === 404) {
console.error('🔍 [编辑附件] OSS接口不存在！请检查后端服务是否正常');
}
}
};
// 打开添加附件对话框
const handleAddAttachment = () => {
if (!state.applicationForm.applicationId) {
@@ -3554,142 +3650,6 @@ const handleDownloadStampedFile = async (data: OverseasApplicationVO) => {
}
};
// 下载党籍保留附件 - 参考培训申请的实现
const handleDownloadPartyRetentionFile = async (data: OverseasApplicationVO) => {
console.log('📥 下载党籍保留附件:', data.partyRetentionFileName);
if (!data.partyRetentionFileOssId) {
ElMessage.warning('文件OSS ID不存在，无法下载');
return;
}
try {
// 使用request工具发送请求，自动包含认证头
const response = await request({
url: `/resource/oss/download/${data.partyRetentionFileOssId}`,
method: 'get',
responseType: 'blob' // 指定响应类型为blob
});
// 创建blob URL并触发下载（根据文件扩展名设置MIME类型）
const fileName = data.partyRetentionFileName || '党籍保留附件.pdf';
const fileExt = fileName.split('.').pop()?.toLowerCase();
const mimeType = fileExt === 'pdf' ? 'application/pdf' : 'application/octet-stream';
const blob = response instanceof Blob ? new Blob([response], { type: mimeType }) : new Blob([response.data], { type: mimeType });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
// 清理资源
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
ElMessage.success('文件下载成功');
} catch (error) {
console.error('下载党籍保留附件失败:', error);
ElMessage.error('下载文件失败，请检查文件权限或稍后重试');
}
};
// 预览党籍保留附件
const handlePreviewPartyRetentionFile = async (data: OverseasApplicationVO) => {
console.log('👁️ 预览党籍保留附件:', data.partyRetentionFileName);
if (!data.partyRetentionFileOssId) {
ElMessage.warning('文件OSS ID不存在，无法预览');
return;
}
try {
// 判断文件类型
const fileName = data.partyRetentionFileName || '';
const fileExt = fileName.split('.').pop()?.toLowerCase();
// 图片类型直接在新窗口预览
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileExt || '')) {
// 使用OSS下载接口获取图片
const imageUrl = `/resource/oss/download/${data.partyRetentionFileOssId}`;
// 获取blob URL用于预览
const response = await request({
url: imageUrl,
method: 'get',
responseType: 'blob'
});
const blob =
response instanceof Blob
? new Blob([response], { type: response.type || 'image/jpeg' })
: new Blob([response.data], { type: response.data.type || 'image/jpeg' });
const blobUrl = window.URL.createObjectURL(blob);
// 在新窗口打开图片
const previewWindow = window.open('', '_blank');
if (previewWindow) {
previewWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>${fileName}</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f5f5f5; }
img { max-width: 100%; max-height: 100vh; object-fit: contain; }
</style>
</head>
<body>
<img src="${blobUrl}" alt="${fileName}" />
</body>
</html>
`);
previewWindow.document.close();
}
}
// PDF类型在新窗口预览
else if (fileExt === 'pdf') {
// 获取PDF文件
const response = await request({
url: `/resource/oss/download/${data.partyRetentionFileOssId}`,
method: 'get',
responseType: 'blob'
});
// 正确处理Blob创建，确保包含正确的MIME类型
const blob =
response instanceof Blob ? new Blob([response], { type: 'application/pdf' }) : new Blob([response.data], { type: 'application/pdf' });
console.log('📄 [PDF预览] 党籍附件Blob创建成功:', {
size: blob.size,
type: blob.type,
fileName: fileName
});
const blobUrl = window.URL.createObjectURL(blob);
// 在新窗口打开PDF
window.open(blobUrl, '_blank');
// 延迟清理，确保新窗口已加载
setTimeout(() => {
window.URL.revokeObjectURL(blobUrl);
}, 60000); // 60秒后清理
}
// 其他文件类型提示下载
else {
ElMessage.info('该文件类型不支持在线预览，请下载后查看');
await handleDownloadPartyRetentionFile(data);
}
} catch (error) {
console.error('预览党籍保留附件失败:', error);
ElMessage.error('预览文件失败，请检查文件权限或稍后重试');
}
};
// 预览出国境登记表盖章文件
const handlePreviewStampedFile = async (data: OverseasApplicationVO) => {
console.log('👁️ 预览出国境登记表盖章文件:', data.stampedRegistrationFileName);
@@ -3783,6 +3743,98 @@ const handlePreviewStampedFile = async (data: OverseasApplicationVO) => {
}
};
// ==================== 党籍保留附件预览和下载方法 ====================
/** 预览党籍保留附件 */
const handlePreviewPartyRetentionFile = async (data: OverseasApplicationVO) => {
console.log('👁️ 预览党籍保留附件:', data.partyRetentionFileName);
if (!data.partyRetentionFileOssId) {
ElMessage.warning('文件OSS ID不存在，无法预览');
return;
}
try {
// 判断文件类型
const fileName = data.partyRetentionFileName || '';
const fileExt = fileName.split('.').pop()?.toLowerCase();
// 图片类型直接在新窗口预览
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileExt || '')) {
const imageUrl = `/resource/oss/download/${data.partyRetentionFileOssId}`;
const response = await request({
url: imageUrl,
method: 'get',
responseType: 'blob'
});
const blob = new Blob([response as BlobPart], { type: 'image/jpeg' });
const url = window.URL.createObjectURL(blob);
window.open(url, '_blank');
return;
}
// PDF文件在新窗口预览
if (fileExt === 'pdf') {
const pdfUrl = `/resource/oss/download/${data.partyRetentionFileOssId}`;
const response = await request({
url: pdfUrl,
method: 'get',
responseType: 'blob'
});
const blob = new Blob([response as BlobPart], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
window.open(url, '_blank');
return;
}
// 其他文件类型提示下载
ElMessage.info('该文件类型不支持预览，请下载后查看');
await handleDownloadPartyRetentionFile(data);
} catch (error) {
console.error('预览党籍保留附件失败:', error);
ElMessage.error('预览文件失败，请检查文件权限或稍后重试');
}
};
/** 下载党籍保留附件 */
const handleDownloadPartyRetentionFile = async (data: OverseasApplicationVO) => {
console.log('📥 下载党籍保留附件:', data.partyRetentionFileName);
if (!data.partyRetentionFileOssId) {
ElMessage.warning('文件OSS ID不存在，无法下载');
return;
}
try {
const response = await request({
url: `/resource/oss/download/${data.partyRetentionFileOssId}`,
method: 'get',
responseType: 'blob'
});
const fileName = data.partyRetentionFileName || '党籍保留附件.pdf';
const fileExt = fileName.split('.').pop()?.toLowerCase();
const mimeType = fileExt === 'pdf' ? 'application/pdf' : 'application/octet-stream';
const blob = new Blob([response as BlobPart], { type: mimeType });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
ElMessage.success('下载成功');
} catch (error) {
console.error('下载党籍保留附件失败:', error);
ElMessage.error('下载失败，请稍后重试');
}
};
// ==================== 申请附件上传相关方法（新增 - 参考培训申请模式） ====================
/** 申请附件上传前检查 */
@@ -3861,6 +3913,40 @@ function updateApplicationFormAttachmentIds() {
}
/** 移除申请附件 */
/** 预览申请附件 */
function handlePreviewApplicationAttachment(file: any) {
console.log('👁️ [申请附件] 预览附件:', file);
if (file.url) {
window.open(file.url, '_blank');
} else {
proxy?.$modal.msgWarning('该附件暂无预览地址');
}
}
/** 下载申请附件 */
function handleDownloadApplicationAttachment(file: any) {
console.log('⬇️ [申请附件] 下载附件:', file);
if (file.url) {
const link = document.createElement('a');
link.href = file.url;
link.download = file.name;
link.click();
} else {
proxy?.$modal.msgWarning('该附件暂无下载地址');
}
}
/** 确认移除申请附件 */
function confirmRemoveApplicationAttachment(file: any, fileList: any[]) {
proxy?.$modal
.confirm('确定要移除附件【' + file.name + '】吗？')
.then(() => {
handleRemoveApplicationAttachment(file);
proxy?.$modal.msgSuccess('附件移除成功');
})
.catch(() => {});
}
function handleRemoveApplicationAttachment(file: any) {
console.log('🗑️ [申请附件] 移除附件:', file.name);
// 更新 attachmentIds
@@ -3976,6 +4062,43 @@ function handleRemoveApplicationAttachment(file: any) {
font-size: 13px;
}
/* 申请附件拖拽上传区域样式 */
.el-upload-dragger-attachment {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 15px;
min-height: 50px;
background: #fafafa;
border: 1px dashed #d9d9d9;
border-radius: 4px;
transition: all 0.3s;
}
.el-upload-dragger-attachment:hover {
border-color: #409eff;
background: #f5f7fa;
}
.el-upload-dragger-attachment .el-icon--upload {
margin: 0;
font-size: 20px;
color: #409eff;
}
.el-upload-dragger-attachment .el-upload__text {
margin: 0;
font-size: 14px;
color: #606266;
}
.el-upload-dragger-attachment .el-upload__text em {
color: #409eff;
font-style: normal;
}
/* 自定义文件卡片样式 */
.upload-file-card {
width: 100%;
@@ -4036,16 +4159,47 @@ function handleRemoveApplicationAttachment(file: any) {
font-size: 12px;
}
.upload-file-name {
/* 文件信息区域 */
.upload-file-info {
padding: 5px 8px;
background: #fff;
border-top: 1px solid #e4e7ed;
}
.upload-file-name {
font-size: 12px;
color: #606266;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #fff;
border-top: 1px solid #e4e7ed;
margin-bottom: 3px;
}
.upload-file-status {
text-align: center;
font-size: 11px;
}
.status-uploading {
color: #409eff;
}
.status-success {
color: #67c23a;
}
.status-fail {
color: #f56c6c;
}
/* 文件图片预览样式 */
.upload-file-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.upload-file-card-actions {