天津品牌网站建设公司,设计制作建筑模型教案,汕头网站建设推广平台,上海企业展厅设计公司这篇文章主要介绍怎么实现角色权限的快捷分配功能#xff0c;不需要像大多数项目的授权一样#xff0c;使用类似穿梭框的组件来授权。 具体实现#xff1a;通过菜单树的勾选和取消勾选来给角色分配权限#xff0c;在这之前#xff0c;需要得到角色的菜单树#xff0c;角色… 这篇文章主要介绍怎么实现角色权限的快捷分配功能不需要像大多数项目的授权一样使用类似穿梭框的组件来授权。 具体实现通过菜单树的勾选和取消勾选来给角色分配权限在这之前需要得到角色的菜单树角色已有的权限对应树节点的选中状态为true否则为false。
一、树的格式
首先简单了解一下easyui的tree组件的数据格式
官网截图 树的json数据格式 [{id:1,text:Folder1,iconCls:icon-save,children:[{text:File1,checked:true},{text:Books,state:open,attributes:{url:/demo/book/abc,price:100},children:[{text:PhotoShop,checked:true},{id: 8,text:Sub Bookds,state:closed}]}]},{text:Languages,state:closed,children:[{text:Java},{text:C#}]}] 二、创建实体类
根据这个格式创建一个满足tree组件数据格式要求的实体类其中attributes属性一般是用不到的扩展了一个pxh字段用于实现排序本篇文章用不到。
package cn.edu.sgu.www.authority.component;import lombok.Data;import java.util.List;/*** easyui树对象* author heyunlin* version 1.0*/
/*
树的数据格式每个节点可以包括下列属性id节点的 id它对于加载远程数据很重要。text要显示的节点文本。state节点状态open 或 closed默认是 open。当设置为 closed 时该节点有子节点并且将从远程站点加载它们。checked指示节点是否被选中。attributes给一个节点添加的自定义属性。children定义了一些子节点的节点数组。
*/
Data
public class TreeT {private String id;/*** 节点名称*/private String text;/*** 树节点的展开状态open/closed*/private String state;/*** 是否被选中*/private boolean checked;/*** 子树*/private ListTreeT children;/*** 自定义属性*/T attributes;/*** 排序号*/private Integer pxh;
} 三、获取角色的菜单树
完成分配角色权限的功能之前需要根据角色的权限生成一个权限树 第一步查询所有系统权限 第二步根据角色ID查询角色拥有的权限 第三步遍历所有系统权限生成菜单树角色拥有的权限对应树节点选中状态checked属性设置为true 因为实际保存的是系统中的子权限即controller接口的所有方法对应的url地址如/user/login。
所以在生成树的时候需要查询父级权限把父权限的信息设置到树的根结点上。
package cn.edu.sgu.www.authority.service.impl;import cn.edu.sgu.www.authority.base.Pager;
import cn.edu.sgu.www.authority.component.Tree;
import cn.edu.sgu.www.authority.dto.PermissionTreeDTO;
import cn.edu.sgu.www.authority.entity.Permission;
import cn.edu.sgu.www.authority.entity.RolePermission;
import cn.edu.sgu.www.authority.enums.PermissionType;
import cn.edu.sgu.www.authority.exception.GlobalException;
import cn.edu.sgu.www.authority.mapper.PermissionMapper;
import cn.edu.sgu.www.authority.mapper.RolePermissionMapper;
import cn.edu.sgu.www.authority.pager.RolePermissionPager;
import cn.edu.sgu.www.authority.restful.ResponseCode;
import cn.edu.sgu.www.authority.service.RolePermissionService;
import cn.edu.sgu.www.authority.util.StringUtils;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.stereotype.Service;import java.util.*;/*** author heyunlin* version 1.0*/
Service
public class RolePermissionServiceImpl implements RolePermissionService {private final PermissionMapper permissionMapper;private final RolePermissionMapper rolePermissionMapper;public RolePermissionServiceImpl(PermissionMapper permissionMapper, RolePermissionMapper rolePermissionMapper) {this.permissionMapper permissionMapper;this.rolePermissionMapper rolePermissionMapper;}Overridepublic ListTreeVoid listTree(Integer roleId) {// 查询所有父级权限权限类型为0并生成权限ID和权限信息的mapMapString, Permission parentMap new HashMap();ListPermission parentPermissions permissionMapper.selectByType(PermissionType.FQX.getValue());for (Permission permission : parentPermissions) {parentMap.put(permission.getId(), permission);}// 查询角色的权限ListPermission permissions rolePermissionMapper.selectByRoleId(roleId);// 查询全部二级权限权限类型为1ListPermission subPermissions permissionMapper.selectByType(PermissionType.ZQX.getValue());// 并根据父级权限ID分组存放到map中MapString, ListTreeVoid listHashMap new HashMap();// 遍历把查询出来的权限按照parentId存到map中for (Permission permission : subPermissions) {TreeVoid children new Tree();children.setId(permission.getId());children.setText(permission.getName());children.setChecked(permissions.contains(permission));String parentId permission.getParentId();if (listHashMap.containsKey(parentId)) {listHashMap.get(parentId).add(children);} else {listHashMap.put(parentId, new ArrayList());}}// 构建返回结果对象ListTreeVoid trees new ArrayList();// 遍历map生成菜单树listHashMap.forEach((key, value) - {Permission parent parentMap.get(key);TreeVoid tree new Tree();tree.setState(open);tree.setChildren(value);tree.setId(parent.getId());tree.setText(parent.getName());trees.add(tree);});return trees;}} 四、分配权限功能实现
页面效果图 当我们勾选树的节点左边的复选框时会把当前节点的ID添加到数组里创建两个数组分别存放勾选和取消勾选的树的ID不要求数组元素唯一因为在后端去重了List Set。 前端页面的js代码如下当勾选和取消勾选的是非叶子节点实际添加到数组中的是该节点下所有的叶子结点。点击对话框的【√确定】按钮时会把数组的数据提交到后台当没有选中或者取消选中树节点的时候不提交。
let insertIds [];
let deleteIds [];$(document).ready(function() {$(#tree).tree({dnd: true,animate: true,checkbox: true,onCheck: function (node, checked) {let children node.children;// 父节点点击复选框if (children) {if (checked) {for (let i 0; i children.length; i) {insertIds.push(children[i].id);}} else {for (let i 0; i children.length; i) {deleteIds.push(children[i].id);}}} else {if (checked) {insertIds.push(node.id);} else {deleteIds.push(node.id);}}},onContextMenu: function(e, node){e.preventDefault();$(#tree).tree(select, node.target);$(#mm).menu(show, {left: e.pageX,top: e.pageY});}});$(#authorize_dialog).dialog({title: 分配角色权限,closed: true,closable: true,draggable: false,buttons: [{iconCls: icon-ok,text: 确定,handler: function() {let row $(#role_list).datalist(getSelected);if (row) {if (insertIds.length 0 || deleteIds.length 0) {let data new FormData();data.append(roleId, row.id);if (insertIds.length 0) {data.append(insertIds, insertIds);}if (deleteIds.length 0) {data.append(deleteIds, deleteIds);}ajaxPost(/role_permission/distribute, data, function (res) {insertIds [];deleteIds [];showMsg(res.message);$(#tree).tree(reload);}, error);}}$(#authorize_dialog).dialog(close);}}, {iconCls: icon-cancel,text: 取消,handler: function() {$(#authorize_dialog).dialog(close);}}]});}); 好了这篇文章就分享到这里了完整代码可通过下方git地址获取看完之后如果对你有所帮助不要忘了点赞收藏哦~
统一权限平台https://gitee.com/he-yunlin/authority.git
