71 lines
1.5 KiB
Markdown
71 lines
1.5 KiB
Markdown
|
# 异步文件上传功能实施计划 - Part 4: 前端开发
|
|||
|
|
|
|||
|
|
## 文档信息
|
|||
|
|
- **创建日期**: 2026-03-05
|
|||
|
|
- **版本**: v1.0
|
|||
|
|
- **作者**: Claude
|
|||
|
|
- **关联设计**: [前端设计文档](../design/2026-03-05-async-file-upload-frontend-design.md)
|
|||
|
|
|
|||
|
|
## 任务概述
|
|||
|
|
|
|||
|
|
根据前端设计文档，扩展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实时更新正常
|
|||
|
|
- [ ] 测试全部通过
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**文档结束**
|