2.9 KiB
2.9 KiB
Implementation Plan: Menu CRUD
Overview
完善菜单管理页面的 CRUD 功能。后端 API 已完整实现，本计划专注于前端实现。
Tasks
-
1. 补充前端 Menu API 接口
- 1.1 添加 TypeScript 接口定义
- 添加 CreateMenuRequest 接口
- 添加 UpdateMenuRequest 接口
- Requirements: 1.5
- 1.2 添加 API 函数
- 添加 createMenu 函数 (POST /admin/menus)
- 添加 updateMenu 函数 (PUT /admin/menus/{id})
- 添加 deleteMenu 函数 (DELETE /admin/menus/{id})
- 添加 getMenuById 函数 (GET /admin/menus/{id})
- Requirements: 1.1, 1.2, 1.3, 1.4
- 1.1 添加 TypeScript 接口定义
-
2. 实现菜单表单对话框
- 2.1 添加表单状态和数据
- 添加 dialogVisible, isEdit, formRef, submitLoading 状态
- 添加 formData reactive 对象
- 添加 menuTreeForSelect 计算属性（用于父菜单选择）
- Requirements: 2.1, 2.2
- 2.2 添加表单验证规则
- 实现 name 必填验证
- 实现 menuType 条件验证（菜单类型需要 path/component，按钮类型需要 permission）
- Requirements: 6.1, 6.2, 6.3, 6.4, 6.5
- 2.3 添加表单对话框模板
- 添加 el-dialog 组件
- 添加 el-form 包含所有字段
- 添加 el-tree-select 用于父菜单选择
- 根据 menuType 动态显示/隐藏字段
- Requirements: 2.2, 3.2
- 2.1 添加表单状态和数据
-
3. 实现新增菜单功能
- 3.1 实现 handleAdd 方法
- 重置表单数据为默认值
- 设置 isEdit = false
- 打开对话框
- Requirements: 2.1
- 3.2 实现 handleAddChild 方法
- 重置表单数据
- 设置 parentId 为当前行的 id
- 打开对话框
- Requirements: 3.1, 3.2, 3.3
- 3.1 实现 handleAdd 方法
-
4. 实现编辑菜单功能
- 4.1 实现 handleEdit 方法
- 设置 isEdit = true
- 填充表单数据
- 打开对话框
- Requirements: 4.1, 4.2
- 4.1 实现 handleEdit 方法
-
5. 实现表单提交功能
- 5.1 实现 handleSubmit 方法
- 验证表单
- 根据 isEdit 调用 createMenu 或 updateMenu API
- 成功后关闭对话框并刷新数据
- 失败时显示错误信息
- Requirements: 2.3, 2.4, 2.5, 4.4, 4.5
- 5.1 实现 handleSubmit 方法
-
6. 实现删除菜单功能
- 6.1 实现 handleDelete 方法
- 显示确认对话框
- 调用 deleteMenu API
- 成功后刷新数据
- 失败时显示错误信息
- Requirements: 5.1, 5.2, 5.3, 5.4, 5.5
- 6.1 实现 handleDelete 方法
-
7. Checkpoint - 功能验证
- 验证新增菜单功能正常
- 验证添加子菜单功能正常
- 验证编辑菜单功能正常
- 验证删除菜单功能正常
- 验证表单验证逻辑正确
Notes
- 后端 API 已完整实现，无需修改后端代码
- 参考角色管理页面 (role/index.vue) 和部门管理页面 (department/index.vue) 的实现模式
- 表单字段根据 menuType 动态显示：目录(1)显示图标，菜单(2)显示路径/组件/图标，按钮(3)显示权限标识