1. 树形控件
点击查看代码
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
2. 角色信息编辑对话框
3. 定义menuProps
取的是表里的title字段
menuList需要被定义
写一个查询
复制一个menuManage出来
点击查看代码
import request from '@/utils/request'
export default{
getAllMenu(){
return request({
url: '/menu',
method: 'get'
});
},
}
引用它
在钩子函数中调用
4. 菜单嵌套
我们用parent_id来进行嵌套,用is_leaf来判断是否是叶子节点
5.实体类
找到menu实体类在里面加上@Data(get,set方法就不要了)
为了让这个表体现出层级关系,需要加上两个属性。
点击查看代码
@TableField(exist = false)
@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<Menu> children;
@TableField(exist = false)
private Map<String,Object> meta;
private Map<String,Object> getMeta(){
meta = new HashMap<>();
meta.put("title",title);
meta.put("icon",icon);
return meta;
}
6. 控制器
点击查看代码
package com.example.sys.controller;
import com.example.common.vo.Result;
import com.example.sys.entity.Menu;
import com.example.sys.service.IMenuService;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* <p>
* 前端控制器
* </p>
*
* @author CanisRufus
* @since 2023-06-30
*/
@RestController
@RequestMapping("/menu")
public class MenuController {
@Autowired
private IMenuService menuService;
@ApiOperation("查询所有的菜单数据")
@GetMapping
public Result<List<Menu>> getAllMenu(){
List<Menu> menuList = menuService.getAllMenu();
return Result.success(menuList);
}
}
7. x_menu表新增数据
点击查看代码
delete from x_menu;
insert into `x_menu` (`menu_id`, `component`, `path`, `redirect`, `name`, `title`, `icon`, `parent_id`, `is_leaf`, `hidden`) values('1','Layout','/sys','/sys/user','sysManage','系统管理','userManage','0','N','0');
insert into `x_menu` (`menu_id`, `component`, `path`, `redirect`, `name`, `title`, `icon`, `parent_id`, `is_leaf`, `hidden`) values('2','sys/user','user',NULL,'userList','用户列表','user','1','Y','0');
insert into `x_menu` (`menu_id`, `component`, `path`, `redirect`, `name`, `title`, `icon`, `parent_id`, `is_leaf`, `hidden`) values('3','sys/role','role',NULL,'roleList','角色列表','roleManage','1','Y','0');
insert into `x_menu` (`menu_id`, `component`, `path`, `redirect`, `name`, `title`, `icon`, `parent_id`, `is_leaf`, `hidden`) values('4','Layout','/test','/test/test1','test','功能测试','form','0','N','0');
insert into `x_menu` (`menu_id`, `component`, `path`, `redirect`, `name`, `title`, `icon`, `parent_id`, `is_leaf`, `hidden`) values('5','test/test1','test1','','test1','测试点一','form','4','Y','0');
insert into `x_menu` (`menu_id`, `component`, `path`, `redirect`, `name`, `title`, `icon`, `parent_id`, `is_leaf`, `hidden`) values('6','test/test2','test2','','test2','测试点二','form','4','Y','0');
insert into `x_menu` (`menu_id`, `component`, `path`, `redirect`, `name`, `title`, `icon`, `parent_id`, `is_leaf`, `hidden`) values('7','test/test3','test3','','test3','测试点三','form','4','Y','0');
8. MenuServiceImpl
点击查看代码
@Service
public class MenuServiceImpl extends ServiceImpl<MenuMapper, Menu> implements IMenuService {
@Override
public List<Menu> getAllMenu() {
// 一级菜单
LambdaQueryWrapper<Menu> wrapper = new LambdaQueryWrapper();
wrapper.eq(Menu::getParentId,0);
List<Menu> menuList = this.list(wrapper);
// 填充子菜单
setMenuChildren(menuList);
return menuList;
}
private void setMenuChildren(List<Menu> menuList) {
if(menuList != null) {
for (Menu menu:menuList) {
LambdaQueryWrapper<Menu> subWrapper = new LambdaQueryWrapper<>();
subWrapper.eq(Menu::getParentId, menu.getMenuId());
List<Menu> subMenuList = this.list(subWrapper);
menu.setChildren(subMenuList);
// 递归
setMenuChildren(subMenuList);
}
}
}
}
9. 重启看一下效果
怪事，底下怎么有个输入框，删了删了
默认展开菜单
