Files
ccdi/doc/plans/2026-03-05-async-file-upload-part4-frontend.md

1.5 KiB
Raw Blame History

异步文件上传功能实施计划 - Part 4: 前端开发

文档信息

任务概述

根据前端设计文档扩展UploadData.vue组件实现异步批量上传功能。

预计工时: 5个工作日

任务清单

任务 1: API接口封装0.5天)

文件: ruoyi-ui/src/api/ccdiProjectUpload.js

新增4个接口函数

  • batchUploadFiles - 批量上传
  • getFileUploadList - 查询列表
  • getFileUploadStatistics - 查询统计
  • getFileUploadDetail - 查询详情

任务 2: 批量上传弹窗1天

修改UploadData.vue组件

  • 添加batchUploadDialogVisible状态
  • 修改handleUploadClick方法
  • 实现文件选择和校验
  • 实现批量上传逻辑

任务 3: 统计卡片0.5天)

添加统计卡片展示:

  • 显示4种状态数量
  • 点击筛选功能

任务 4: 文件列表1天

添加文件列表组件:

  • 列表展示和分页
  • 筛选和刷新
  • 操作按钮

任务 5: WebSocket集成1天

实现WebSocket实时更新

  • 连接和重连
  • 消息处理
  • 状态更新

任务 6: 联调测试1天

功能测试和性能测试。

验收标准

  • 所有API接口正常
  • 批量上传功能正常
  • 统计卡片正常
  • 文件列表正常
  • WebSocket实时更新正常
  • 测试全部通过

文档结束