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