# Tasks: Add Enterprise Device Authorization

## Overview

按照从底层到上层的顺序实现企业设备授权功能,确保每一步都可测试和验证。

## Task List

### Phase 1: Type Definitions (Foundation)

1. **创建企业设备类型定义文件**
   - 创建 `src/types/api/enterpriseDevice.ts`
   - 定义 `EnterpriseDeviceItem` 接口 (设备列表项)
   - 定义 `EnterpriseDeviceListParams` 接口 (查询参数)
   - 定义 `EnterpriseDevicePageResult` 接口 (分页结果)
   - 定义 `AllocateDevicesRequest` 接口 (授权请求)
   - 定义 `AllocateDevicesResponse` 接口 (授权响应)
   - 定义 `AuthorizedDeviceItem` 接口 (已授权设备项)
   - 定义 `FailedDeviceItem` 接口 (失败设备项)
   - 定义 `RecallDevicesRequest` 接口 (撤销请求)
   - 定义 `RecallDevicesResponse` 接口 (撤销响应)
   - **验证**: 运行 `npm run type-check` 确保无类型错误

2. **导出类型定义**
   - 在 `src/types/api/index.ts` 中导出新增的类型
   - **验证**: 确认其他模块可以正确导入类型

### Phase 2: API Service Layer

3. **扩展 EnterpriseService API 方法**
   - 在 `src/api/modules/enterprise.ts` 中添加:
     - `allocateDevices(enterpriseId, data)` - 授权设备
     - `getEnterpriseDevices(enterpriseId, params)` - 获取设备列表
     - `recallDevices(enterpriseId, data)` - 撤销授权
   - 导入新增的类型定义
   - **验证**: 运行 `npm run type-check` 确保类型正确

### Phase 3: Internationalization

4. **添加中文翻译**
   - 在 `src/locales/langs/zh.json` 的 `menus.assetManagement` 下添加 `enterpriseDevices` 条目
   - 在 `src/locales/langs/zh.json` 添加 `enterpriseDevices` 模块的所有中文文案:
     - 页面标题和搜索表单
     - 表格列名
     - 操作按钮和对话框标题
     - 表单标签和提示文本
     - 成功/错误消息
   - **验证**: 检查 JSON 格式正确性

5. **添加英文翻译**
   - 在 `src/locales/langs/en.json` 添加对应的英文翻译
   - 确保 key 与中文版本一致
   - **验证**: 检查 JSON 格式正确性,切换语言测试

### Phase 4: Routing

6. **添加路由别名**
   - 在 `src/router/routesAlias.ts` 添加 `EnterpriseDevices = '/asset-management/enterprise-devices'`
   - **验证**: 确认导出正确

7. **配置路由**
   - 在 `src/router/routes/asyncRoutes.ts` 的资产管理 (`/asset-management`) 模块下添加企业设备列表路由
   - 配置路由 meta 信息 (title, keepAlive)
   - **验证**: 运行应用,检查路由注册成功

### Phase 5: UI Components

8. **创建企业设备列表页面**
   - 创建 `src/views/asset-management/enterprise-devices/index.vue`
   - 实现页面基础结构:
     - 使用 `ArtTableFullScreen` 布局
     - 使用 `ArtSearchBar` 实现搜索表单 (企业ID,设备号搜索)
     - 使用 `ArtTable` 展示设备列表
     - 使用 `ArtTableHeader` 添加"授权设备"和"撤销授权"按钮
   - **验证**: 页面能正常渲染,无控制台错误

9. **实现设备列表查询功能**
   - 实现 `loadDeviceList()` 方法调用 API
   - 实现搜索和重置功能
   - 实现分页功能
   - 添加 loading 状态
   - **验证**: 能正确展示设备列表数据,分页工作正常

10. **实现授权设备对话框**
    - 创建授权设备对话框
    - 使用 `ElForm` + `ElInput` (textarea) 输入设备号列表
    - 支持多行输入或逗号分隔
    - 添加备注输入框 (可选)
    - 实现表单验证 (必填项,格式校验)
    - **验证**: 对话框显示正常,表单验证工作

11. **实现授权设备提交逻辑**
    - 实现 `handleAllocateDevices()` 方法
    - 解析设备号列表 (处理换行和逗号分隔)
    - 调用 `EnterpriseService.allocateDevices()` API
    - 展示授权结果 (成功数量,失败数量,失败列表)
    - 使用 `ElMessageBox` 或 `ElDialog` 展示详细结果
    - 授权成功后刷新列表
    - **验证**: 能成功授权设备,正确处理部分成功/失败情况

12. **实现撤销授权对话框**
    - 创建撤销授权对话框
    - 使用表格多选模式选择要撤销的设备
    - 或者使用输入框输入设备号列表
    - 实现二次确认逻辑
    - **验证**: 对话框显示正常

13. **实现撤销授权提交逻辑**
    - 实现 `handleRecallDevices()` 方法
    - 收集选中的设备号
    - 调用 `EnterpriseService.recallDevices()` API
    - 展示撤销结果 (成功数量,失败数量,失败列表)
    - 撤销成功后刷新列表
    - **验证**: 能成功撤销授权,正确处理部分成功/失败情况

### Phase 6: Polish & Testing

14. **完善表格列配置**
    - 配置表格列 (设备ID,设备号,设备名称,设备型号,绑定卡数量,授权时间)
    - 实现列显示/隐藏功能
    - 添加时间格式化
    - **验证**: 表格数据展示完整美观

15. **添加错误处理**
    - 为所有 API 调用添加 try-catch
    - 添加友好的错误提示消息
    - 处理网络错误和业务错误
    - **验证**: 各种错误场景都有适当提示

16. **样式调整**
    - 确保页面样式与系统其他页面一致
    - 响应式布局适配
    - 对话框尺寸和布局优化
    - **验证**: 在不同屏幕尺寸下显示正常

17. **最终验证**
    - 运行 `npm run type-check` 确保无类型错误
    - 运行 `npm run build` 确保能成功构建
    - 运行 `openspec validate add-enterprise-device-authorization --strict` 验证 spec
    - 手动测试所有功能点
    - 测试中英文切换
    - **验证**: 所有功能正常,无控制台错误

## Dependencies

- Task 3 依赖 Task 1 (API 需要类型定义)
- Task 8-13 依赖 Task 1-7 (UI 需要 API 和路由)
- Task 14-16 是并行任务,可以同时进行

## Estimated Effort

- Phase 1-2: 30 分钟 (类型和 API)
- Phase 3: 30 分钟 (国际化)
- Phase 4: 15 分钟 (路由)
- Phase 5: 2-3 小时 (UI 实现)
- Phase 6: 30 分钟 (测试和优化)

**Total**: 约 4-4.5 小时