Files
one-pipe-system/openspec/changes/add-device-management/tasks.md
sexygoat 5c6312c407
Some checks failed
构建并部署前端到测试环境 / build-and-deploy (push) Failing after 6s
fetch(add): 新增
2026-01-27 09:18:45 +08:00

127 lines
4.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Implementation Tasks
## 1. 类型定义和API服务 (Foundation)
- [ ] 1.1 创建 `src/types/api/device.ts` 定义所有设备相关类型
- DeviceItem, DeviceQueryParams, DevicePageResult
- DeviceCardBinding, DeviceCardBindingList
- AllocateDevicesRequest/Response, RecallDevicesRequest/Response
- BindCardRequest/Response, UnbindCardResponse
- ImportDeviceRequest/Response, DeviceImportTask相关类型
- [ ] 1.2 创建 `src/api/modules/device.ts` 实现 DeviceService
- getDevices (列表)
- getDeviceById (详情)
- deleteDevice (删除)
- getDeviceCards (绑定的卡列表)
- bindCard (绑定卡)
- unbindCard (解绑卡)
- allocateDevices (批量分配)
- recallDevices (批量回收)
- importDevices (批量导入)
- getImportTasks (导入任务列表)
- getImportTaskDetail (导入任务详情)
- [ ] 1.3 在 `src/api/modules/index.ts` 导出 DeviceService
- [ ] 1.4 在 `src/types/api/index.ts` 导出 Device 相关类型
## 2. 设备列表页面 (Core UI)
- [ ] 2.1 创建 `src/views/asset-management/device-list/index.vue`
- 搜索栏:设备号、设备名称、状态、店铺、批次号、设备类型、制造商、创建时间范围
- 表格:展示设备信息,支持勾选、列筛选
- 表格列ID、设备号、设备名称、设备型号、设备类型、制造商、最大插槽数、已绑定卡数、状态、店铺、批次号、激活时间、创建时间
- 状态使用 CommonStatus + ElSwitch 显示
- 操作列:查看详情、删除按钮(使用 ArtButtonTable
- [ ] 2.2 实现批量操作按钮
- 批量分配:弹出对话框选择目标店铺
- 批量回收:弹出对话框确认回收
- 导入设备:跳转到设备导入页面
- [ ] 2.3 实现批量分配对话框
- 选择目标店铺(下拉搜索)
- 显示已选设备数量
- 备注输入
- 展示分配结果(成功/失败)
- [ ] 2.4 实现批量回收对话框
- 确认回收设备列表
- 备注输入
- 展示回收结果(成功/失败)
## 3. 设备详情页面 (Detail View)
- [ ] 3.1 创建 `src/views/asset-management/device-detail/index.vue`
- 设备基本信息卡片ElDescriptions
- 绑定的卡列表表格展示4个插槽位置
- 返回按钮
- [ ] 3.2 实现卡绑定管理
- 绑定卡按钮:弹出对话框选择卡和插槽位置
- 解绑按钮:每个绑定记录旁边
- 显示插槽位置1-4
- 展示卡的基本信息ICCID、手机号、运营商、状态
## 4. 任务管理改进 (Task Management)
- [ ] 4.1 修改 `src/views/asset-management/task-management/index.vue`
- 添加任务类型筛选ICCID导入 / 设备导入
- 支持展示设备导入任务
- 任务列表显示任务类型标签
- [ ] 4.2 修改 `src/views/asset-management/task-detail/index.vue`
- 根据任务类型展示不同的详情内容
- 设备导入任务显示设备号、绑定的ICCID、失败原因
- 失败和跳过记录展示
## 5. 设备导入改进 (Import Enhancement)
- [ ] 5.1 修改 `src/views/batch/device-import/index.vue`
- 改用对象存储三步上传流程
1. 获取上传URL (StorageService.getUploadUrl)
2. 上传文件到对象存储 (StorageService.uploadFile)
3. 调用导入接口 (DeviceService.importDevices)
- CSV格式说明device_no, device_name, device_model, device_type, max_sim_slots, manufacturer, iccid_1~iccid_4, batch_no
- 导入成功后显示任务编号,引导去任务管理查看
- [ ] 5.2 优化导入记录展示
- 移除mock数据改为真实API调用
- 点击"查看详情"跳转到任务详情页
## 6. 路由和导航 (Routing)
- [ ] 6.1 在 `src/router/routes/asyncRoutes.ts` 添加路由
- /asset-management/device-list (设备列表)
- /asset-management/device-detail (设备详情带query参数id)
- [ ] 6.2 在 `src/router/routesAlias.ts` 添加路由别名
- DeviceList = '/asset-management/device-list'
- DeviceDetail = '/asset-management/device-detail'
- [ ] 6.3 在 `src/locales/langs/zh.json` 添加翻译
- assetManagement.deviceList: "设备列表"
- assetManagement.deviceDetail: "设备详情"
## 7. 测试和优化 (Testing & Polish)
- [ ] 7.1 功能测试
- 设备列表的搜索、分页、排序
- 批量分配和回收流程
- 设备与卡的绑定/解绑
- 设备导入完整流程
- 任务状态查看
- [ ] 7.2 边界情况处理
- 空列表状态
- 加载失败提示
- 删除确认提示
- 表单验证
- [ ] 7.3 性能优化
- 列表数据懒加载
- 防抖搜索
- 批量操作结果分页展示
- [ ] 7.4 代码审查
- TypeScript类型完整性
- 错误处理
- 代码复用性
- 注释完整性
## Dependencies
- 1.x 必须先完成才能开始 2.x-6.x
- 2.1-2.2 可以并行开发
- 3.x 依赖 1.x可与 2.x 并行
- 4.x 和 5.x 依赖 1.x可与其他任务并行
- 6.x 可在对应页面开发完成后立即进行
- 7.x 在所有功能开发完成后进行