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