one-pipe-system/openspec/changes/add-device-management/tasks.md

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 在所有功能开发完成后进行