Files
hzdyjs/出国申请附件管理功能实现报告.md
T
2025-10-14 16:41:19 +08:00

11 KiB
Raw Blame History

出国申请附件管理功能实现报告

实现日期: 2025-10-10
功能描述: 为出国申请增加附件管理功能,支持附件标题和内容说明


📋 功能概述

业务需求

通过出国申请菜单下的出国申请选项卡中点击新增申请按钮弹窗界面填写内容和上传附件后,需要在出国申请选项卡列表中的查看详情弹窗界面中同步显示附件标题和附件内容。

功能特点

  • ✅ 支持上传多个附件(PDF、Word、Excel、图片、压缩包等格式)
  • ✅ 每个附件包含标题和内容说明
  • ✅ 附件自动上传到OSS云存储
  • ✅ 支持查看和下载附件
  • ✅ 支持删除附件
  • ✅ 文件大小限制50MB
  • ✅ 附件列表展示文件大小、上传时间等信息

🗂️ 实现内容

1. 数据库设计

新建表: rs_overseas_application_attachment

SQL脚本位置: docs/设计文档/database/rs_overseas_application_attachment.sql

主要字段:

  • attachment_id - 附件ID(主键)
  • application_id - 出国申请ID(关联字段)
  • attachment_title - 附件标题(必填)
  • attachment_content - 附件内容说明(选填)
  • file_name - 文件名称
  • file_original_name - 文件原始名称
  • file_path - 文件存储路径(OSS URL)
  • file_size - 文件大小(字节)
  • file_type - 文件类型
  • upload_time - 上传时间
  • upload_user_id - 上传人ID
  • upload_user_name - 上传人姓名

2. 后端实现

2.1 实体类

  • Entity: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/RsOverseasApplicationAttachment.java
  • VO: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/vo/RsOverseasApplicationAttachmentVo.java
  • BO: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/domain/bo/RsOverseasApplicationAttachmentBo.java

2.2 Mapper

  • Mapper接口: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/mapper/RsOverseasApplicationAttachmentMapper.java
  • Mapper XML: backend/ruoyi-modules/ruoyi-rs/src/main/resources/mapper/rs/RsOverseasApplicationAttachmentMapper.xml

2.3 Service

  • Service接口: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/service/IRsOverseasApplicationAttachmentService.java
  • Service实现: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/service/impl/RsOverseasApplicationAttachmentServiceImpl.java

2.4 Controller

  • 控制器: backend/ruoyi-modules/ruoyi-rs/src/main/java/org/dromara/rs/controller/RsOverseasApplicationAttachmentController.java

API接口:

  • GET /rs/overseas/attachment/list/{applicationId} - 查询附件列表
  • GET /rs/overseas/attachment/{attachmentId} - 查询附件详情
  • POST /rs/overseas/attachment/upload - 上传附件
  • PUT /rs/overseas/attachment - 更新附件信息
  • DELETE /rs/overseas/attachment/{attachmentId} - 删除附件
  • DELETE /rs/overseas/attachment/batch - 批量删除附件

3. 前端实现

3.1 API接口定义

文件: web/src/api/rs/overseas.ts

新增接口:

  • listOverseasAttachments - 查询附件列表
  • getOverseasAttachment - 查询附件详情
  • uploadOverseasAttachment - 上传附件
  • updateOverseasAttachment - 更新附件
  • deleteOverseasAttachment - 删除附件
  • deleteOverseasAttachments - 批量删除附件

3.2 页面组件

文件: web/src/views/rs/overseas/index.vue

新增功能模块:

  1. 申请表单中的附件管理区域(在提交按钮之前)

    • 显示已上传的附件列表
    • 添加附件按钮
    • 查看、删除附件功能
  2. 添加附件对话框

    • 附件标题输入框(必填)
    • 附件说明文本域(选填)
    • 文件上传组件
    • 支持的文件格式:PDF、Word、Excel、图片、压缩包
    • 文件大小限制:50MB
  3. 查看详情弹窗中的附件列表

    • 以表格形式展示附件信息
    • 显示序号、标题、说明、文件名、大小、上传时间
    • 支持下载附件

新增方法:

  • loadAttachmentList - 加载申请表单的附件列表
  • loadViewAttachmentList - 加载详情页的附件列表
  • handleAddAttachment - 打开添加附件对话框
  • handleAttachmentFileChange - 文件选择改变处理
  • handleAttachmentFileExceed - 文件超出限制处理
  • submitAttachment - 提交附件上传
  • handleViewAttachment - 查看附件
  • handleDeleteAttachment - 删除附件
  • handleDownloadAttachment - 下载附件

🚀 部署步骤

第一步:执行数据库脚本

# 进入数据库脚本目录
cd docs/设计文档/database/

# 执行SQL脚本
mysql -h 主机地址 -u 用户名 -p 数据库名 < rs_overseas_application_attachment.sql

或者使用数据库管理工具(如Navicat、DBeaver)执行脚本文件。

第二步:重启后端服务

# 进入后端目录
cd backend

# 重新编译
mvn clean install -DskipTests

# 重启服务
./start-all.sh

第三步:重新构建前端

# 进入前端目录
cd web

# 安装依赖(如有新的)
npm install

# 重新构建
npm run build:prod

第四步:配置权限(可选)

如需要为附件管理配置单独的权限,可在系统管理-权限管理中添加以下权限标识:

  • rs:overseas:attachment:query - 查询附件
  • rs:overseas:attachment:add - 新增附件
  • rs:overseas:attachment:edit - 编辑附件
  • rs:overseas:attachment:remove - 删除附件

目前代码中使用的是 rs:overseas:query、rs:overseas:edit、rs:overseas:remove,与出国申请的权限保持一致。


🧪 功能测试

测试场景1:新增申请并上传附件

  1. 点击"新增申请"按钮
  2. 阅读文件通知(30秒)
  3. 填写申请表单信息
  4. 点击"添加附件"按钮
  5. 输入附件标题(必填)和内容说明(选填)
  6. 选择要上传的文件
  7. 点击"确认上传"
  8. 验证附件列表中显示新上传的附件
  9. 点击"提交"保存申请

预期结果:

  • 附件成功上传到OSS
  • 附件列表显示标题、文件名、大小、上传时间
  • 可以查看、删除附件

测试场景2:查看详情中显示附件

  1. 在出国申请列表中找到已有附件的申请
  2. 点击"查看详情"按钮
  3. 滚动到底部查看"申请附件"区域

预期结果:

  • 显示所有附件的列表
  • 每个附件显示序号、标题、说明、文件名、大小、上传时间
  • 点击"下载"按钮可以下载附件

测试场景3:编辑申请时管理附件

  1. 在出国申请列表中找到草稿状态的申请
  2. 点击"修改"按钮
  3. 在表单底部查看附件列表
  4. 可以添加新附件或删除已有附件

预期结果:

  • 显示已有的附件列表
  • 可以添加新附件
  • 可以删除已有附件
  • 附件变更实时同步

测试场景4:文件格式和大小限制

  1. 尝试上传超过50MB的文件
  2. 尝试上传不支持的文件格式

预期结果:

  • 超过50MB的文件提示"文件大小超过50MB限制"
  • 不支持的格式在选择文件时被过滤

📊 数据流程

┌─────────────────┐
│  用户选择文件    │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  填写标题和说明  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ FormData上传     │
│ applicationId   │
│ title           │
│ content         │
│ file            │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  后端接收处理    │
│  - 文件校验     │
│  - OSS上传      │
│  - 数据库保存   │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  返回附件信息    │
│  - 文件URL      │
│  - 附件ID       │
│  - 上传时间     │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ 前端刷新附件列表 │
└─────────────────┘

🎯 技术亮点

  1. 文件存储: 使用OSS云存储,支持高并发和大文件
  2. 文件大小显示: 自动格式化显示(B、KB、MB、GB)
  3. 权限控制: 集成Sa-Token权限验证
  4. 用户体验:
    • 实时文件预览
    • 拖拽上传支持
    • 上传进度显示
    • 文件类型图标展示
  5. 数据安全:
    • 逻辑删除,数据可恢复
    • 多租户隔离
    • 文件大小和类型限制

📝 注意事项

  1. 权限配置: 确保用户具有 rs:overseas:edit 权限才能上传和删除附件
  2. OSS配置: 确认OSS配置正确,文件路径为 overseas/attachments/
  3. 文件清理: 删除附件时,OSS文件暂时不物理删除,可根据需要配置定期清理策略
  4. 并发上传: 当前实现为一次上传一个文件,如需支持批量上传可扩展
  5. 文件下载: 下载功能直接使用OSS URL,确保OSS配置允许外部访问

🔧 后续优化建议

  1. 批量上传: 支持一次选择多个文件批量上传
  2. 文件预览: 对于图片和PDF文件,支持在线预览
  3. 附件分类: 增加附件类型分类(如申请材料、证明文件、审批附件等)
  4. 版本控制: 支持附件版本管理,记录修改历史
  5. 下载统计: 记录附件下载次数和下载人
  6. 缩略图: 为图片文件生成缩略图,提升加载速度
  7. 压缩包解析: 自动解析zip压缩包内容
  8. 病毒扫描: 集成文件病毒扫描功能

✅ 完成检查清单

  • 数据库表设计完成
  • 后端Entity、VO、BO创建完成
  • 后端Mapper和Service实现完成
  • 后端Controller API接口完成
  • 前端API接口定义完成
  • 前端申请表单附件管理区域完成
  • 前端添加附件对话框完成
  • 前端查看详情附件列表完成
  • 附件上传、查看、删除功能完成
  • 数据库脚本执行
  • 后端服务重启
  • 前端重新构建部署
  • 功能测试验证

📞 技术支持

如在部署或使用过程中遇到问题,请检查:

  1. 数据库表是否创建成功
  2. 后端服务是否正常启动
  3. OSS配置是否正确
  4. 用户权限是否配置
  5. 浏览器控制台是否有错误信息

开发完成时间: 2025-10-10
开发人员: AI Assistant
版本: v1.0.0