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

backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/service/impl/RsOverseasApplicationServiceImpl.java

@@ -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

@@ -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,67 +3650,24 @@ 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);
+// 预览出国境登记表盖章文件
+const handlePreviewStampedFile = async (data: OverseasApplicationVO) => {
+  console.log('👁️ 预览出国境登记表盖章文件:', data.stampedRegistrationFileName);
 
-  if (!data.partyRetentionFileOssId) {
+  if (!data.stampedFileOssId) {
     ElMessage.warning('文件OSS ID不存在，无法预览');
     return;
   }
 
   try {
     // 判断文件类型
-    const fileName = data.partyRetentionFileName || '';
+    const fileName = data.stampedRegistrationFileName || '';
     const fileExt = fileName.split('.').pop()?.toLowerCase();
 
     // 图片类型直接在新窗口预览
     if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileExt || '')) {
       // 使用OSS下载接口获取图片
-      const imageUrl = `/resource/oss/download/${data.partyRetentionFileOssId}`;
+      const imageUrl = `/resource/oss/download/${data.stampedFileOssId}`;
 
       // 获取blob URL用于预览
       const response = await request({
@@ -3654,7 +3707,7 @@ const handlePreviewPartyRetentionFile = async (data: OverseasApplicationVO) => {
     else if (fileExt === 'pdf') {
       // 获取PDF文件
       const response = await request({
-        url: `/resource/oss/download/${data.partyRetentionFileOssId}`,
+        url: `/resource/oss/download/${data.stampedFileOssId}`,
         method: 'get',
         responseType: 'blob'
       });
@@ -3663,7 +3716,7 @@ const handlePreviewPartyRetentionFile = async (data: OverseasApplicationVO) => {
       const blob =
         response instanceof Blob ? new Blob([response], { type: 'application/pdf' }) : new Blob([response.data], { type: 'application/pdf' });
 
-      console.log('📄 [PDF预览] 党籍附件Blob创建成功:', {
+      console.log('📄 [PDF预览] 盖章文件Blob创建成功:', {
         size: blob.size,
         type: blob.type,
         fileName: fileName
@@ -3682,104 +3735,103 @@ const handlePreviewPartyRetentionFile = async (data: OverseasApplicationVO) => {
     // 其他文件类型提示下载
     else {
       ElMessage.info('该文件类型不支持在线预览，请下载后查看');
-      await handleDownloadPartyRetentionFile(data);
+      await handleDownloadStampedFile(data);
     }
   } catch (error) {
-    console.error('预览党籍保留附件失败:', error);
+    console.error('预览出国境登记表盖章文件失败:', error);
     ElMessage.error('预览文件失败，请检查文件权限或稍后重试');
   }
 };
 
-// 预览出国境登记表盖章文件
-const handlePreviewStampedFile = async (data: OverseasApplicationVO) => {
-  console.log('👁️ 预览出国境登记表盖章文件:', data.stampedRegistrationFileName);
+// ==================== 党籍保留附件预览和下载方法 ====================
 
-  if (!data.stampedFileOssId) {
+/** 预览党籍保留附件 */
+const handlePreviewPartyRetentionFile = async (data: OverseasApplicationVO) => {
+  console.log('👁️ 预览党籍保留附件:', data.partyRetentionFileName);
+
+  if (!data.partyRetentionFileOssId) {
     ElMessage.warning('文件OSS ID不存在，无法预览');
     return;
   }
 
   try {
     // 判断文件类型
-    const fileName = data.stampedRegistrationFileName || '';
+    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.stampedFileOssId}`;
-
-      // 获取blob URL用于预览
+      const imageUrl = `/resource/oss/download/${data.partyRetentionFileOssId}`;
       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();
-      }
+      const blob = new Blob([response as BlobPart], { type: 'image/jpeg' });
+      const url = window.URL.createObjectURL(blob);
+      window.open(url, '_blank');
+      return;
     }
-    // PDF类型在新窗口预览
-    else if (fileExt === 'pdf') {
-      // 获取PDF文件
+
+    // PDF文件在新窗口预览
+    if (fileExt === 'pdf') {
+      const pdfUrl = `/resource/oss/download/${data.partyRetentionFileOssId}`;
       const response = await request({
-        url: `/resource/oss/download/${data.stampedFileOssId}`,
+        url: pdfUrl,
         method: 'get',
         responseType: 'blob'
       });
 
-      // 正确处理Blob创建，确保包含正确的MIME类型
-      const blob =
-        response instanceof Blob ? new Blob([response], { type: 'application/pdf' }) : new Blob([response.data], { type: 'application/pdf' });
+      const blob = new Blob([response as BlobPart], { type: 'application/pdf' });
+      const url = window.URL.createObjectURL(blob);
+      window.open(url, '_blank');
+      return;
+    }
 
-      console.log('📄 [PDF预览] 盖章文件Blob创建成功:', {
-        size: blob.size,
-        type: blob.type,
-        fileName: fileName
-      });
+    // 其他文件类型提示下载
+    ElMessage.info('该文件类型不支持预览，请下载后查看');
+    await handleDownloadPartyRetentionFile(data);
+  } catch (error) {
+    console.error('预览党籍保留附件失败:', error);
+    ElMessage.error('预览文件失败，请检查文件权限或稍后重试');
+  }
+};
 
-      const blobUrl = window.URL.createObjectURL(blob);
+/** 下载党籍保留附件 */
+const handleDownloadPartyRetentionFile = async (data: OverseasApplicationVO) => {
+  console.log('📥 下载党籍保留附件:', data.partyRetentionFileName);
 
-      // 在新窗口打开PDF
-      window.open(blobUrl, '_blank');
+  if (!data.partyRetentionFileOssId) {
+    ElMessage.warning('文件OSS ID不存在，无法下载');
+    return;
+  }
 
-      // 延迟清理，确保新窗口已加载
-      setTimeout(() => {
-        window.URL.revokeObjectURL(blobUrl);
-      }, 60000); // 60秒后清理
-    }
-    // 其他文件类型提示下载
-    else {
-      ElMessage.info('该文件类型不支持在线预览，请下载后查看');
-      await handleDownloadStampedFile(data);
-    }
+  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('预览文件失败，请检查文件权限或稍后重试');
+    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 {