vue+elementui实现给角色分配菜单的功能
注：本项目为前后端分离项目后端框架SpringBoot+MybatisPlus
效果展示：
前端代码：
首先在角色管理操作中加入分配菜单按钮
<el-row>
<el-button size="mini"
type="text"
@click="handleSelectMenu(scope.row.id)">分配菜单
</el-button>
</el-row>
定义好分配菜单的弹框
<!--分配菜单-->
<el-dialog
title="分配菜单"
:visible.sync="dialogVisibleMenu"
width="30%">
<el-tree
:data="menuTreeList"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
<div style="margin-top: 20px" align="center">
<el-button type="primary" @click="handleSaveMenu()">保存</el-button>
<el-button @click="handleClearMenu()">清空</el-button>
</div>
</el-dialog>
在data定义初始值
data() {
return {
//菜单相关
dialogVisibleMenu:false,
menuTreeList:[],
defaultProps:{
children:'children',
label:'title'
},
roleId:null,
}
}
开始定义方法实现：
methods: {
//分配菜单
handleSelectMenu(roleId){
this.dialogVisibleMenu=true;
this.roleId=roleId;
//查询菜单数据
getMenuTree().then(result=>{
this.menuTreeList=result.data.data;
})
//回显菜单数据
queryMenuByRoleId(roleId).then(result=>{
let roleMenu=result.data.data;
let checkedMenuIds=[];
for(let i=0;i<roleMenu.length;i++){
if(roleMenu!=null && roleMenu.length>0){
checkedMenuIds.push(roleMenu[i].menuId);
}
}
this.$refs.tree.setCheckedKeys(checkedMenuIds);
})
},
//新增分配菜单
handleSaveMenu(){
let checkedMenu =this.$refs.tree.getCheckedNodes();
let checkedMenuIds =[];
for(let i=0;i<checkedMenu.length;i++){
checkedMenuIds.push(checkedMenu[i].id);
}
this.$confirm('是否要分配该菜单?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
params.append("roleId", this.roleId);
params.append("menuIds",checkedMenuIds );
allocMenu(params).then(response => {
this.$message({
message: '分配成功！',
type: 'success'
});
this.dialogVisibleMenu = false;
})
})
},
}
api中发请求：
//页面注入
import {
getMenuTree} from "../../../api/ums/menu/menu";
import {
queryMenuByRoleId,allocMenu} from "../../../api/ums/RoleMenuRelation/RoleMenuRelation";
//查询菜单数据
export const getMenuTree = () => {
return request({
url: 'http://localhost:8080/menu/tree',
method: 'get',
});
};
//查询回显菜单数据
export const queryMenuByRoleId = roleId => {
return request({
url: 'http://localhost:8080/roleMenuRelation/'+roleId,
method: 'get',
});
};
//新增或修改菜单
export const allocMenu = params => {
return request({
url: 'http://localhost:8080/roleMenuRelation',
method: 'post',
data:params
});
}
后端代码：
后台菜单表 前端控制器 MenuController类
//查询菜单数据
@GetMapping("tree")
public ResultObj getMenuTree(){
List<Map<String,Object>>list=menuService.getMenuTree();
return ResultObj.success(list);
}
MenuServiceImpl实现类组装树形结构
@Override
public List<Map<String, Object>> getMenuTree() {
List<Menu> menuList = super.list();
return getChildren(menuList, 0L);
}
private List<Map<String, Object>> getChildren(List<Menu> menuList, long pid) {
List<Map<String, Object>> list = new ArrayList<>();
menuList.forEach(menu ->{
Map<String,Object> map = null;
if (pid == menu.getParentId()){
map = new HashMap<>();
map.put("id",menu.getId());
map.put("title",menu.getTitle());
if (menu.getLevel() == 0) {
map.put("children",getChildren(menuList,menu.getId()));
}
}
if (map != null){
list.add(map);
}
});
return list;
}
后台角色菜单关系表 前端控制器 前端控制器 RoleMenuRelationController类
@GetMapping("{roleId}")
public ResultObj queryMenuByRoleId(@PathVariable Long roleId){
List<RoleMenuRelation> menuRelations = roleMenuRelationService.list(new QueryWrapper<RoleMenuRelation>().eq("role_id", roleId));
return ResultObj.success(menuRelations);
}
@PostMapping
public ResultObj addRoleMenu(@RequestParam("roleId") Long roleId,@RequestParam("menuIds")List<Long>menuIds){
roleMenuRelationService.addRoleMenu(roleId,menuIds);
return ResultObj.success();
}
RoleMenuRelationServiceImpl实现类代码
@Override
public void addRoleMenu(Long roleId, List<Long> menuIds) {
super.remove(new QueryWrapper<RoleMenuRelation>().eq("role_id",roleId));
List<RoleMenuRelation>list=new ArrayList<>();
if(!CollectionUtils.isEmpty(menuIds)){
menuIds.forEach(menuId->{
RoleMenuRelation roleMenuRelation=new RoleMenuRelation();
roleMenuRelation.setMenuId(menuId);
roleMenuRelation.setRoleId(roleId);
list.add(roleMenuRelation);
});
}
super.saveBatch(list);
}