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

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 小时