el-tree+Vue实现菜单权限分配_el-tree权限

作者：小桥流水78 | 2024-07-30 10:38:33

踩

el-tree权限

1、菜单数据库表和实体类

数据库表：

实体类:


@Data
@AllArgsConstructor
@NoArgsConstructor
public class Menu implements Serializable {
 
	private Integer id;
	private String label;
	private Integer level;//菜单级别
	private Integer associate;
	private String url;
 
	private List<Menu> children;//子级菜单
}

2、实现菜单层级结构

先查出所有菜单数据，放在list集合中。

连接数据库时，使用了mybatis的sql动态语句和结果映射。

sql语句


<sql id="sqlMenu">
            m.id mid,m.menu_name,m.level mlevel,m.associate massociate,m.url murl
        </sql>
 
        <select id="getAllMenu" parameterType="int" resultMap="menuMap" useCache="false">
 
                    select <include refid="sqlMenu"/>
                    from role_menu rm join menus m
                    on rm.menu_id = m.id
                    <if test="roleId != null">
                        and rm.role_id = #{roleId}
                    </if>
                    order by m.associate,m.level
        </select>
 
    <resultMap id="menuMap" type="Menu">
        <id property="id" column="mid"/>
        <result property="label" column="menu_name"/>
        <result property="level" column="mlevel"/>
        <result property="associate" column="massociate"/>
        <result property="url" column="murl"/>
    </resultMap>

查询出来之后，在java代码中，做处理。


@Override
	public Result getAllMenus() {
 
		List<Menu> list = roleMapper.getAllMenus();//获取到的所有菜单项
 
		if(list == null || list.isEmpty()){
			return Result.error("角色没有分配菜单!");
		}
 
		List<Menu> menuList = new ArrayList<>();//存放分好层级的菜单
 
		//获取一级菜单
		for(Menu menu : list){
			if(menu.getLevel() == 1){
				menuList.add(menu);
			}
		}
		//把获取到的菜单信息移除集合
		for(Menu menu : menuList){
			list.remove(menu);
		}
		//获取一级菜单的所有子菜单
		getSubMenus(list,menuList);
 
		return Result.success(menuList);
	}


//递归出所有子菜单 并放入父级菜单
private void getSubMenus(List<Menu> list,List<Menu> menuList){
 
		if(list.isEmpty() || menuList.isEmpty()) return;
 
		for(Menu menu : menuList){
			menu.setChildren(getMenus(list, menu.getId()));
			getSubMenus(list, menu.getChildren());
		}
 
	}
 
    //所有associate和该id相等的，就是该id的子菜单 由于在取的时候该associate已经排过序,所以直接可以使用二分查找来查找这个范围
	private List<Menu> getMenus(List<Menu> list,int id){
		int left = 0,right = list.size() - 1;
		int leftBound = Integer.MAX_VALUE, rightBound = Integer.MIN_VALUE;
//查找右边界
		while (left <= right){
 
			int mid = ((right - left) >> 1) + left;
 
			if(list.get(mid).getAssociate() <= id){
				rightBound = mid;
				left = mid + 1;
			}else {
				right = mid - 1;
			}
		}
		left = 0;
		right = list.size() - 1;
        //查找左边界
		while (left <= right){
 
			int mid = ((right - left) >> 1) + left;
 
			if(list.get(mid).getAssociate() < id){
				left = mid + 1;
			}else {
				leftBound = mid;
				right = mid - 1;
			}
		}
 
		List<Menu> list1 = new ArrayList<>();
        //得到范围
		if(leftBound <= rightBound){
 
			for(int i = leftBound; i <= rightBound; i++){
				list1.add(list.get(i));
			}
		}
 
		return list1;
	}

json数据展示

3、回显菜单id数组

取出所有没有孩子的节点

用sql语句取太过麻烦，直接取出来在代码中处理。


@Override
	public Result getMenusIdByRoleId(Integer roleId) {
 
		if(roleId == null) return Result.error("roleId不能为空!");
        
        查出该用户下的菜单id
		List<Integer> menuIdList = roleMapper.getMenusIdByRoleId(roleId);
        
         //得到菜单详细信息
		List<Menu> menusItem = roleMapper.getAllMenusList(menuIdList);
        
        //存放分完层级的菜单
		List<Menu> menuList = new ArrayList<>();
		//获取一级菜单
		for(Menu menu : menusItem){
			if(menu.getLevel() == 1){
				menuList.add(menu);
			}
		}
		//把获取到的菜单信息移除集合
		for(Menu menu : menuList){
			menusItem.remove(menu);
		}
 
		//获取一级菜单的所有子菜单
		getSubMenus(menusItem,menuList);
		//清空
		menuIdList.clear();
        
        //得到所有没有孩子的节点
		getNoChildParent(menuIdList,menuList);
 
		return Result.success(menuIdList);
	}

下面只列出getNoChildParent方法，其他方法都与上面相同。


private void getNoChildParent(List<Integer> menuIdList,List<Menu> menuList){
        //递归结束条件
		if(menuList.isEmpty()) return;
 
		for(Menu menu : menuList){
			if(menu.getChildren().isEmpty()){
				System.out.println(menu);
				menuIdList.add(menu.getId());
			}
 
			getNoChildParent(menuIdList, menu.getChildren());
		}
	}

json数据展示

4、前端界面

这里只是权限的简单分配。

<div style="width: 100%;height: 100%">

<el-form :inline="true" :model="RoleSearch" class="demo-form-inline">

<el-form-item label="角色名">

<el-input v-model="RoleSearch.roleName" size="mini" placeholder="角色名"></el-input>

</el-form-item>

<el-form-item label="创建时间">

<el-date-picker

v-model="value"

type="daterange"

placement="bottom-start"

size="mini"

value-format="yyyy-MM-dd"

range-separator="至"

start-placeholder="开始日期"

end-placeholder="结束日期"

@change="dateFormat">

</el-date-picker>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="onSubmit">查询</el-button>

</el-form-item>

</el-form>



<el-table

:data="roleTable"

border

style="width: 100%">

<el-table-column

prop="roleName"

label="角色"

width="180">

</el-table-column>

<el-table-column

prop="gmtCreate"

label="创建时间"

width="180">

</el-table-column>

<el-table-column

prop="gmtModified"

label="修改日期">

</el-table-column>

<el-table-column

label="操作">

<template slot-scope="scope">

<el-button type="primary" size="mini">查看</el-button>

<el-button type="primary" size="mini" @click="updateRole(scope.row)">编辑</el-button>

<el-button type="primary" @click="changPro(scope.row.id)" size="mini">权限管理</el-button>

<el-button type="danger" size="mini" @click="deleteRole(scope.row.id)">删除</el-button>

</template>

</el-table-column>

</el-table>



<el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="pageNum"

:page-sizes="pageSizes"

:page-size="pageSize"

layout="total, sizes, prev, pager, next, jumper"

:total="tal">

</el-pagination>

<el-dialog title="权限" :visible.sync="dialogFormVisible">

<el-tree

:data="menuData"

show-checkbox

node-key="id"

ref="tree"

:default-checked-keys="checkedKey"

:check-strictly="systemNodeFlag"

style="padding-left: 100px">

</el-tree>

<div slot="footer" class="dialog-footer">

<el-button size="mini" @click="cancel" :plain="true">取消</el-button>

<el-button size="mini" type="primary" @click="submitForm" :plain="true">确定</el-button>

</div>

</el-dialog>

<el-dialog title="编辑用户" :visible.sync="dialogFormVisibles">

<el-form :model="role">

<el-form-item label="角色" label-width="80px">

<el-input v-model="role.roleName" autocomplete="off"></el-input>

</el-form-item>

<el-form-item label="描述" label-width="80px">

<el-input v-model="role.remark" autocomplete="off"></el-input>

</el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">

<el-button size="mini" @click="cancels" :plain="true">取消</el-button>

<el-button size="mini" type="primary" @click="submitForms" :plain="true">确定</el-button>

</div>

</el-dialog>

</div>

</template>

<script>

export default {

data(){

return{

//模糊查询

RoleSearch:{

roleName:'',

startTime:'',

endTime:''

},

roleTable:[],

//时间

value1: '',

//分页

pageNum:1,

pageSize:5,

pageSizes:[],

tal:0,

dialogFormVisible:false,

checkedKey: [],

multipleSelection: [],

systemNodeFlag:false,

menuData:[],

roleId:'',

role:{},

dialogFormVisibles:false

}

},

computed:{

value:{

get(){

return this.value1;

},

set(val){

this.value1 = val;

}

},

},

created() {

this.initRoleTable();

},

methods:{

submitForms(){

this.$http.post("role/updateRole",this.role)

.then(res => {

if(res.data.code == 200){

this.$message.success(res.data.message);

}

this.dialogFormVisibles = false;

})

},

cancels(){

this.dialogFormVisibles = false;

this.role = {};

},

//模糊查询中的点击查询

onSubmit:function () {

this.pageNum=1;

this.initRoleTable();

},

resetForm(){

this.RoleSearch={startTime:'',endTime:''};

this.value1='';

},

//日期

dateFormat(picker){

this.RoleSearch.startTime=picker[0].toString();

this.RoleSearch.endTime=picker[1].toString();

},

initRoleTable(){

this.$http.post("role/list/"+this.pageNum+"/"+this.pageSize,this.RoleSearch).then(result=>{

this.roleTable=result.data.data.records;

console.log(this.roleTable)

let sizes = [];

this.tal = result.data.data.total;

let page = this.tal%5 === 0 ? this.tal/5 : this.tal/5+1;

sizes.push(1);

for(let i=1; i<=page; i++){

sizes.push(5*i);

}

this.pageSizes = sizes;

})

},

//分页部分内容

handleSizeChange(val) {

this.pageSize = val;

this.initRoleTable();

},

handleCurrentChange(val) {

this.pageNum = val;

this.initRoleTable();

},



changPro(roleId){

this.dialogFormVisible = true;

             //获取权限列表

this.getAllPermission();

this.roleId = roleId;

             //获取当前角色的权限

this.getRolePermission(roleId);

},

//获取全部权限信息

getAllPermission(){

this.$http.post("permission/getRoleMenuPermission").then(res => {

if(res.data.code == 200){

this.menuData = res.data.data;

}

})

},

//获取相应角色权限

getRolePermission(roleId){

this.$http.post("permission/getMenuByRoleId/"+roleId)

.then(res => {

if(res.data.code == 200){

this.checkedKey = res.data.data;

}

})

},

submitForm(){

let list = this.$refs.tree.getCheckedNodes(false,true);

             //$http 是axios 因为设置在了Vue上，命名为了$http

this.$http.post("rolePermission/updateRoleMenu/"+this.roleId,list)

.then(res => {

if(res.data.code == 200){

this.$message.success(res.data.message);

this.$refs.tree.getCheckedNodes([]);

}

this.dialogFormVisible = false;

})

},

        //关闭对话框

cancel(){

this.$refs.tree.getCheckedNodes([]);

this.dialogFormVisible = false;

},



updateRole(row){

this.dialogFormVisibles = true;

this.role =row;

}

}

}

</script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/903352