170 lines
5.9 KiB
Markdown
170 lines
5.9 KiB
Markdown
# 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 小时
|