角色菜单
- 相关组件方法
- 效果图
- 代码实现
- 资源菜单树组件实现
- 权限树方法js
- 这里我先主要实现权限树的整体实现方法，如果是直接查看使用的话可以只看这里！
- 后端代码
- Controlle层代码
- Service代码及实现类代码
- Service代码
- ServiceImpl代码
- resourceMapper 代码
- roleResourceMapper代码
- Mybatis代码
- RoleResourceMapper.xml
- ResourceMapper.xml
- TreeNode.java类
- DataGridView.java类
- 角色信息添加及编辑页面实现
- 添加页面和编辑页面代码HTML
- 单选框对应的js代码
- treeSelectData方法
- 表格头部监听栏按钮的操作
- 添加，修改，删除的方法
- 添加，修改，删除的后端方法
- Controller代码
- Service代码
- ServiceImpl代码
- RoleResourceMapper
- RoleMapper
- RoleMapper.xml
- RoleResourceMapper.xml
- 前端页面完整代码
相关组件方法
消息通知组件：notify
树组件：dtree
前端框架：layuimini
layui文档地址：layui
效果图
代码实现
资源菜单树组件实现
权限树方法js
这里我先主要实现权限树的整体实现方法，如果是直接查看使用的话可以只看这里！
//初始化树 function initTree(roleId) { console.log(roleId); var DTree = dtree.render({ elem: "#treeSelect", dataStyle: "layuiStyle", //使用layui风格的数据格式 response: {message: "msg", statusCode: 0}, //修改response中返回数据的定义 dataFormat: "list", //配置data的风格为list checkbar: true,//复选框 checkbarType: "all", // 默认就是all checkbarData: "choose", menubar: true,//菜单栏 menubarTips: { group: ["moveDown", "moveUp", "refresh", "checkAll", "unCheckAll", "searchNode"], //按钮组 }, skin: "zdy", // 自定义风格 line: true, // 显示树线 initLevel: 1,//默认展开层级为1 ficon: ["1", "-1"], // 显示非最后一级节点图标，隐藏最后一级节点图标 icon: "2",//修改二级图标样式 url: "/role/getAllSelectResourceDate?roleId=" + roleId }); /* * 搜索框方法 * */ $("#search_btn").unbind("click"); $("#search_btn").click(function () { var value = $("#searchInput").val(); if (value) { var flag = DTree.searchNode(value); // 内置方法查找节点 if (!flag) { layer.msg("该名称节点不存在！刷新后重试！"); } } else { DTree.menubarMethod().refreshTree(); // 内置方法刷新树 } }); }后端代码
Controlle层代码
/* * 权限配置菜单查询 * @getAllSelectRoleDate * */ @PostMapping("/getAllSelectResourceDate") public DataGridView listResource(Integer roleId) { // System.out.println("前端接受的权限id"+roleId); return roleService.listResource(roleId); }Service代码及实现类代码
Service代码
/* * 查询所有菜单 * */ DataGridView listResource(Integer roleId);ServiceImpl代码
/* * 查询所有菜单信息 * */ @Override public DataGridView listResource(Integer roleId) { // 从数据库中获取所有的资源 ListresourceList = resourceMapper.selectAllResource(); //根据权限id查询资源，修改更新权限的时候使用 List roleResourceEntities = roleResourceMapper.selectRoleResourceByRoleId(roleId); // 遍历所有资源 List data = new ArrayList<>(); // 判断是否是提提添加还是修改操作 if (roleId == 0 || roleResourceEntities.isEmpty()) { for (ResourceEntity resource : resourceList) { // 资源ID Integer id = resource.getResourceId(); // 资源ID Integer pid = resource.getParentId(); // 资源名称 String title = resource.getTitle(); // 默认展开状态为false Boolean spread = false; // 默认选中状态为false String checkArr="0"; // 封装数据 data.add(new TreeNode(id, pid, title, spread,checkArr)); } } else { for (ResourceEntity resource : resourceList) { // 遍历角色对应的资源列表 // 默认选中状态为false 这里实现的是dtree的选中状态 0：未选中 1：选中 String checkArr = "0"; for (RoleResourceEntity roleResource : roleResourceEntities) { // 如果资源ID相同 if (roleResource.getResourceId().equals(resource.getResourceId())) { // 将资源的选中状态设置为true checkArr = "1"; } } // 封装数据 // 资源ID Integer id = resource.getResourceId(); // 父级ID Integer pid = resource.getParentId(); // 资源名称 String title = resource.getTitle(); // 默认不展开,如果数据不为空则展开 Boolean spread = true; // 将数据封装到TreeNode中 data.add(new TreeNode(id, pid, title, spread, checkArr)); } } // 返回数据 return new DataGridView(data); } resourceMapper 代码
/* * 查询所有资源 * */ ListselectAllResource(); roleResourceMapper代码
/* * 根据角色ID查询角色资源 * */ ListselectRoleResourceByRoleId(Integer roleId); Mybatis代码
RoleResourceMapper.xml
ResourceMapper.xml
TreeNode.java类
package com.example.erp_project.util; import com.fasterxml.jackson.annotation.JsonProperty; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import java.util.ArrayList; import java.util.List; @Data @AllArgsConstructor @NoArgsConstructor public class TreeNode { //自己的资源id private Integer id; @JsonProperty("parentId") //返回的json的名称 parentId ,为了确定层级关系 //父级id private Integer pid; //名称 private String title; //是否展开 private Boolean spread; //子节点 private Listchildren = new ArrayList (); /** * 0为不选中 1为选中 */ private String checkArr="0"; /* * 前端数据接收的数据项 * */ public TreeNode(Integer id, Integer pid, String title, Boolean spread, String checkArr) { this.id = id; this.pid = pid; this.title = title; this.spread = spread; this.checkArr = checkArr; } } DataGridView.java类
package com.example.erp_project.util; import lombok.Data; /** * @author Lolo don‘t feel */ @Data public class DataGridView { //状态码 private Integer code = 0; //总数 private String msg = ""; //分页数据 private Long count = 0L; //这里是dtree中部门的数据 private Object data; public DataGridView(Long count, Object data) { this.count = count; this.data = data; } public DataGridView(Object data) { this.data = data; } }角色信息添加及编辑页面实现
添加页面和编辑页面代码HTML
这里主要查看的是分配权限中的 lay-filter="role-status"属性
单选框对应的js代码
/* * 权限分配菜单 * */ form.on('radio(role-status)', function (data) { var elem = data.elem; // 获得 radio 原始 DOM 对象 var checked = elem.checked; // 获得 radio 选中状态 var value = elem.value; // 获得 radio 值 var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象 //获取页面输入框的值,如果为空则赋值为0，否则赋值为输入框的值 //将value赋值给隐藏域 $("#r").val(value);//将value赋值给隐藏域，这里注意用于角色信息编辑页面，否则会报错，报的错误就是：Cannot read property 'checked' of null var roleId = $("#roleId").val(); if (!roleId) { roleId = 0; } //如果选中的是分配权限，然后调用 treeSelectData(roleId,1);方法加载菜单资源 if (value==="1"){ treeSelectData(roleId,1);//这里传递的roleId是0 查询的就是全部资源未选择，而编辑页面传递的就是选中数据的roleId } });treeSelectData方法
效果图
HTML代码
添加和编辑页面下图中的代码课一不用查看
/* * 权限树弹出层方法 * 这里传递两个参数一个是根据roleId（用于获取数据将权限进行分配）， * 一个是根据status（用于判断是添加和修改页面，还是权限直接分配页面）。 * */ function treeSelectData(roleId,status) { layer.open({ type: 1, title: '权限分配', content: $("#roleDiv"), area: ['360px', '520px'], closeBtn: false, btnAlign: 'c', //样式 skin: 'class-layer-orange', btn: [' 确认分配', ' 关闭'], success: function () { initTree(roleId);//弹出树组件根据角色id去查询对应的资源菜单 }, yes: function (index) { var params = dtree.getCheckbarNodesParam("treeSelect"); // 获取选中值 if (params.length == 0) {//判断是否选中节点 notify.info("至少选择一个节点！" ,"vcenter", "shadow", false,1000); return false; } //判断是添加和修改页面，还是权限直接分配页面,如果为1则表示是在角色信息，添加，修改页面的操作。 if (status == 1){ notify.loading('正在分配权限...', "vcenter", "shadow", false); setTimeout(function () { notify.destroyAll();//关闭loading加载 notify.success('分配成功！', "vcenter", "shadow", false,1000);//设置提示框，"提示信息","位置", "样式", "是否显示关闭按钮", "显示时间" //关闭当前页面 layer.closeLast('page'); },1000) }else { /* * 页面分配权限，及角色信息页面的权限分配 * */ // 将选中的节点转换为字符串 var mStr = params.map(node => node.nodeId).join(","); notify.loading('正在分配权限...', "vcenter", "shadow", false); setTimeout(function () { notify.destroyAll();//关闭loading加载 //传递数据到后端 $.ajax({ url: '/role/updateRoleResource', type: 'POST', data: {roleId: roleId, resourceIds: mStr}, success: function (data) { if (data.code === 0) { notify.success(data.msg, "vcenter", "shadow", false,1000); } else if (data.code === 1){ notify.warning(data.msg, "vcenter", "shadow", false,1000); } else { notify.error(data.msg, "vcenter", "shadow", false,1000); } } }) .done(function () { setTimeout(function () { notify.destroyAll(); layer.closeAll(); table.reload('roleTableId');//重载表格 }, 1000); }); },2000) } } , btn2: function () { if (status == 1){ //清空 radio 值 form.val("role-form", { "roleState": "" }); notify.info("已取消操作！", "vcenter", "shadow", false,1000); layer.close(); }else { notify.info("已取消操作！", "vcenter", "shadow", false,1000); layer.closeAll(); } } }); }表格头部监听栏按钮的操作
/* * 头部操作栏监听 * */ table.on('toolbar(roleTableFilter)', function (obj) { switch (obj.event) { case 'add': layer.open({ type: 1, title: '新增角色', content: $("#saveOrUpdateDiv"), area: ['660px', '450px'], closeBtn: false, //样式 skin: 'class-layer-sea', btn: [' 新增', ' 取消'], success: function (layero, index) { //清空表单数据 $("#role-form")[0].reset(); }, yes: function (index) { var str = $("#r").val(); submitForm('/role/insertRoleInfo', 'GET', index,'正在新增角色信息...',str) } , btn2: function () { layer.close(); } }); break; case 'edit': var id = 'roleTableId'; //获取表格id var checkStatus = table.checkStatus(id) //获取选中行数据 var data = checkStatus.data[0]; //获取选中行数据 if (checkStatus.data.length == 0) { //判断 notify.info('请选择要修改的角色信息', "vcenter", "shadow", false,1500); return false; } if (checkStatus.data.length > 1) {//判断 notify.warning('只能选择一条数据进行修改', "vcenter", "shadow", false,1500); return false; } if (data.roleName==="超级管理员"){ notify.warning('超级管理员不能进行修改', "vcenter", "shadow", false,1500); return false; } //调用数据修改方法 updateFormInfo(data); break; case 'delete': var id = 'roleTableId';//获取表格id var checkStatus = table.checkStatus(id)//获取选中行数据 var data = checkStatus.data; // 获取选中的数据 console.log(data); if (data.length == 0) { notify.info('请选择要删除的角色信息', "vcenter", "shadow", false,1500); return false; } if (data[0].roleName=="超级管理员"){ notify.warning('超级管理员不能进行删除', "vcenter", "shadow", false,1500); return false; } deleteFormInfo(data); break; } ; });添加，修改，删除的方法
/* * 方法整合调用 * */ /* * 表单提交，这里设置五个参数：url, type, index,mes,str * */ function submitForm(url, type, index,mes,str) { //获取表单数据 var roleName = $("input[name='roleName']").val(); var remark = $("textarea[name='remark']").val(); var status = $("input[name='state']:checked").val(); var roleState = $("input[name='roleState']:checked").val(); console.log(status); console.log(roleState); //验证表单数据 if (roleName === '') { notify.info('请填写角色名称', "vcenter", "shadow", false,1000); return false; } if (remark === '') { notify.info('请填写角色描述', "vcenter", "shadow", false,1000); return false; } if (status == null) { notify.info('请选择角色状态', "vcenter", "shadow", false,1000); return false; } if (roleState == null) { notify.info('请选择是否分配权限', "vcenter", "shadow", false,1000); return false; } // 判断是否分配权限，如果等于1才获取选中的节点，否则不获取 if (str==='1'){//根据是否分配权限判断，如果等于1才获取选中的节点，否则不获取 if (roleState === '1'){ // 获取选中的节点 var param = dtree.getCheckbarNodesParam("treeSelect"); // 将选中的节点转换为字符串 var mStr = param.map(node => node.nodeId).join(","); } } // 提交表单数据 notify.loading(mes, "vcenter", "shadow", false); // 延迟执行，避免loading层显示过快 setTimeout(function () { notify.destroyAll(); $.ajax({ url: url, type: type, data: { roleName: roleName, // 角色名称 remark: remark, // 角色描述 status: status, // 角色状态：1：启用，0：禁用 roleState: roleState, //角色状态：1：启用，0：禁用 resource: mStr // 将选中的节点转换为字符串 }, success: function (data) { if (data.code === 0) { notify.success(data.msg, "vcenter", "shadow", false); } else if (data.code === 1) { notify.warning(data.msg, "vcenter", "shadow", false); } else { notify.error(data.msg, "vcenter", "shadow", false); } } }).done(function () { setTimeout(function () { notify.destroyAll(); layer.closeAll(index); parent.location.reload(); }, 500); }); }, 2000); } /* * 修改数据方法 * */ function updateFormInfo(data) { layer.open({ type: 1, title: '修改角色信息', content: $("#saveOrUpdateDiv"), area: ['660px', '450px'], closeBtn: false, //样式 skin: 'class-layer-yellow', btn: [' 保存', ' 取消'], success: function (layero, index) { //清空表单数据 form.val("role-form", data); } , yes: function (index) { var str = $("input[name='r']").val(); console.log(str); //调用方法提交表单 submitForm('/role/updateRoleInfo?roleId=' + data.roleId, 'POST', index,'正在更新角色信息...',str) } , btn2: function () { layer.close(); } }) } /* * 删除数据方法 * */ function deleteFormInfo(data) { layer.confirm('确定删除该数据么', function (index) { //执行删除操作 notify.loading('正在删除数据信息...', "vcenter", "shadow", false); setTimeout(function () { //关闭loading加载 notify.destroyAll(); $.ajax({ url: '/role/deleteRoleInfo', type: 'DELETE', data: JSON.stringify({ids: data}), contentType: "application/json", success: function (data) { if (data.code === 0) { notify.success(data.msg, "vcenter", "shadow", false); } else { notify.error(data.msg, "vcenter", "shadow", false); } } }) .done(function () { setTimeout(function () { notify.destroyAll(); layer.closeAll(index); parent.location.reload();//重载页面 }, 500); }); }, 2000) }); }添加，修改，删除的后端方法
Controller代码
/* * 数据添加 * @insertRoleInfo * */ @GetMapping("/insertRoleInfo") // 定义一个方法，用于插入角色信息 public ResultUtil insertRoleInfo(String roleName, String remark, Integer status, Integer roleState, String resource) { // 从请求参数中获取要删除的ID列表 System.out.println(resource); try { // 判断传入的参数是否为空 if (roleName != null && remark != null && status != null && roleState != null) { // 调用roleService的getRoleInfo方法，根据角色名查询角色信息 RoleEntity roleEntity = roleService.getRoleInfo(roleName); // 如果查询到的角色信息不为空，说明角色名已存在 if (roleEntity == null) { // 创建一个新的RoleEntity对象，并设置相关属性 RoleEntity role = new RoleEntity(); role.setRoleName(roleName); role.setRemark(remark); role.setStatus(status); role.setRoleState(roleState); role.setCreateTime(new Date()); // 调用roleService的saveAndUpdateRoleInfo方法添加角色信息，并返回添加结果 roleService.saveAndUpdateRoleInfo(role, resource); return ResultUtil.ok(0, "角色信息新增成功"); } return ResultUtil.warning(1, "角色名称重复！请更换！"); } return ResultUtil.warning(1, "表单提交信息错误"); } catch (Exception e) { e.fillInStackTrace(); return ResultUtil.error("角色信息新增失败"); } } /* * 数据更新 * @updateRoleInfo * */ @PostMapping("/updateRoleInfo") public ResultUtil updateRoleInfo(Integer roleId, String roleName, String remark, Integer status, Integer roleState, String resource) { //System.out.println("权限id" + roleId + "是否分配" + roleState); //System.out.println("菜单" + resource); //System.out.println(status+""+roleState); try { // 调用roleService的getRoleInfo方法，根据角色名查询角色信息 RoleEntity roleEntity = roleService.getRoleInfo(roleName); // 如果查询到的角色信息不为空，说明角色名已存在 if (roleEntity != null && !roleEntity.getRoleId().equals(roleId)) { return ResultUtil.warning(1, "角色名称重复！请更换！"); } // 创建一个新的RoleEntity对象，并设置相关属性 RoleEntity role = new RoleEntity(); // 设置角色名称 role.setRoleName(roleName); // 设置角色备注 role.setRemark(remark); // 设置角色状态 role.setStatus(status); // 设置权限状态 role.setRoleState(roleState); // 设置更新时间 role.setUpdateTime(new Date()); // 设置角色ID role.setRoleId(roleId); // 调用roleService的saveAndUpdateRoleInfo方法更新角色信息，并返回更新结果 roleService.saveAndUpdateRoleInfo(role, resource); //返回成功信息 return ResultUtil.ok(0, "角色信息更新成功"); } catch (Exception e) { e.fillInStackTrace(); return ResultUtil.error("角色信息更新失败"); } } /* * 数据删除操作 * @deleteRoleInfo * */ @DeleteMapping("/deleteRoleInfo") public ResultUtil deleteRoleInfo(@RequestBody Mapids = (List ) params.get("ids"); System.out.println("删除的数据id值" + ids); //批量查询角色信息 List roleEntities = roleService.selectRoleInfo(ids); // 判断角色信息列表是否为空 if (roleEntities.size() > 0) { // 遍历角色信息列表，删除角色与资源的关联关系 for (RoleEntity roleEntity : roleEntities) { // 删除角色与资源的关联关系 roleResourceService.deleteRoleResource(roleEntity.getRoleId()); } } // 根据标识符列表查询要删除的数据 roleService.deleteRoleInfo(ids); // 返回成功消息 return ResultUtil.ok(0, "数据删除成功"); } catch (Exception e) { e.printStackTrace(); // 返回失败消息 return ResultUtil.error("数据删除失败"); } } Service代码
/* * 数据插入 * @return * */ void saveAndUpdateRoleInfo(RoleEntity role, String resource); /* * 数据删除 * */ void deleteRoleInfo(Listids); /* * 查询所有菜单 * */ DataGridView listResource(Integer roleId); /* * 根据名称查询角色 * */ RoleEntity getRoleInfo(String roleName); ServiceImpl代码
/* * 数据添加和修改操作 * */ @Override public void saveAndUpdateRoleInfo(RoleEntity role, String resource) { //System.out.println("role = " + resource); // 判断是否为添加操作 if (role.getRoleId() == null){ // 添加操作 roleMapper.insertRoleInfo(role); // 获取添加的角色信息,根据当前角色名称获取角色信息 RoleEntity roleEntity = roleMapper.getRoleInfo(role.getRoleName()); //System.out.println("roleEntity = " + roleEntity); // 判断是否添加成功 if (roleEntity != null) { // 如果资源字符串不为空且长度不为0 if (resource != null && resource.length() != 0){ // 将资源字符串按逗号分割 String[] split = resource.split(","); for (String s : split) { // 创建角色资源实体对象 RoleResourceEntity roleResourceEntity = new RoleResourceEntity(); // 设置角色ID roleResourceEntity.setRoleId(roleEntity.getRoleId()); // 设置资源ID roleResourceEntity.setResourceId(Integer.parseInt(s)); // 插入角色资源信息 roleResourceMapper.insertRoleResource(roleResourceEntity); } } } }else if (role.getRoleId() != null){ // 修改操作 roleMapper.updateRoleInfo(role); // 删除角色资源信息 roleResourceMapper.deleteRoleResource(role.getRoleId()); // 判断是否为空 if (resource != null && resource.length() != 0){ // 将资源字符串按逗号分割 String[] split = resource.split(","); for (String s : split) { // 创建角色资源实体对象 RoleResourceEntity roleResourceEntity = new RoleResourceEntity(); // 设置角色ID roleResourceEntity.setRoleId(role.getRoleId()); // 设置资源ID roleResourceEntity.setResourceId(Integer.parseInt(s)); // 插入角色资源信息 roleResourceMapper.insertRoleResource(roleResourceEntity); } } } } /* * 数据删除操作 * */ @Override public void deleteRoleInfo(Listids) { roleMapper.deleteRoleInfo(ids); } /* * 根据角色名称查询角色信息 * */ @Override public RoleEntity getRoleInfo(String roleName) { return roleMapper.getRoleInfo(roleName); } RoleResourceMapper
/* * 添加角色资源 * */ void insertRoleResource(RoleResourceEntity roleResourceEntity); /* * 根据角色ID删除角色资源 * */ void deleteRoleResource(Integer roleId);RoleMapper
/* * 数据插入操作 * @return * */ void insertRoleInfo(RoleEntity role); /* * 数据更新操作 * @return * */ void updateRoleInfo(RoleEntity role); /* * 数据删除操作 * @return * */ void deleteRoleInfo(Listids); /* * 根据角色名查询角色信息 * */ RoleEntity getRoleInfo(String roleName); RoleMapper.xml
insert into sys_role(role_name,remark,status,create_time,role_state) values(#{roleName},#{remark},#{status},#{createTime},#{roleState}) update sys_role role_name = #{roleName}, remark = #{remark}, status = #{status}, update_time = #{updateTime}, role_state = #{roleState}, delete from sys_role where roleId in #{r.roleId} RoleResourceMapper.xml
insert into sys_role_resource(roleId,resourceId) values(#{roleId},#{resourceId}) delete from sys_role_resource where roleId = #{roleId} 前端页面完整代码
角色信息管理
![[工业自动化-1]：PLC架构与工作原理](https://img-blog.csdnimg.cn/ce10a1471ed14382bc58364cf8bd5209.png)
还没有评论，来说两句吧...