角色菜单
-
-
- 相关组件方法
- 效果图
- MySQL
- 代码实现
- 资源菜单树组件实现
-
- 权限树方法js
- 后端代码
-
- Controlle层代码
- Service代码及实现类代码
- [resourceMapper 代码](#resourceMapper 代码)
- roleResourceMapper代码
- Mybatis代码
- TreeNode.java类
- DataGridView.java类
- 角色信息添加及编辑页面实现
- 前端页面完整代码
-
相关组件方法
消息通知组件:notify
树组件:dtree
前端框架:layuimini
layui文档地址:layui
效果图
MySQL
代码实现
资源菜单树组件实现
权限树方法js
这里我先主要实现权限树的整体实现方法,如果是直接查看使用的话可以只看这里!
javascript
//初始化树
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层代码
java
/*
* 权限配置菜单查询
* @getAllSelectRoleDate
* */
@PostMapping("/getAllSelectResourceDate")
public DataGridView listResource(Integer roleId) {
// System.out.println("前端接受的权限id"+roleId);
return roleService.listResource(roleId);
}
Service代码及实现类代码
Service代码
java
/*
* 查询所有菜单
* */
DataGridView listResource(Integer roleId);
ServiceImpl代码
java
/*
* 查询所有菜单信息
* */
@Override
public DataGridView listResource(Integer roleId) {
// 从数据库中获取所有的资源
List<ResourceEntity> resourceList = resourceMapper.selectAllResource();
//根据权限id查询资源,修改更新权限的时候使用
List<RoleResourceEntity> roleResourceEntities = roleResourceMapper.selectRoleResourceByRoleId(roleId);
// 遍历所有资源
List<TreeNode> 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 代码
java
/*
* 查询所有资源
* */
List<ResourceEntity> selectAllResource();
roleResourceMapper代码
java
/*
* 根据角色ID查询角色资源
* */
List<RoleResourceEntity> selectRoleResourceByRoleId(Integer roleId);
Mybatis代码
RoleResourceMapper.xml
xml
<select id="selectRoleResourceByRoleId" resultType="com.example.erp_project.entity.RoleResourceEntity">
select *
from sys_role_resource
where roleId = #{roleId}
</select>
ResourceMapper.xml
xml
<!--查询所有资源-->
<select id="selectAllResource" resultType="com.example.erp_project.entity.ResourceEntity">
select *
from sys_resource
order by sort asc
</select>
TreeNode.java类
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 List<TreeNode> children = new ArrayList<TreeNode>();
/**
* 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类
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"属性
html
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
<form class="layui-form" lay-filter="role-form" id="role-form">
<!--隐藏数据id值,用于数据更新使用-->
<input type="hidden" name="roleId" id="roleId">
<div class="layui-form-item">
<label class="layui-form-label">角色名称:</label>
<div class="layui-input-block">
<input type="text" name="roleName" id="roleName" lay-verify="required"
placeholder="请填写角色名称"
autocomplete="off"
class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色描述:</label>
<div class="layui-input-block">
<textarea name="remark" placeholder="请输入内容" class="layui-textarea"
lay-affix="clear"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色状态:</label>
<div class="layui-input-block">
<input type="radio" name="state" value="1" title="正常" checked>
<input type="radio" name="state" value="0" title="停用">
</div>
</div>
<input type="hidden" name="r" id="r">
<div class="layui-form-item">
<label class="layui-form-label">分配权限:</label>
<div class="layui-input-block">
<input type="radio" name="roleState" value="1" title="分配" lay-filter="role-status">
<input type="radio" name="roleState" value="0" title="暂不分配"lay-filter="role-status" >
</div>
</div>
</form>
</div>
<!-- 添加和修改的弹出层结束 -->
单选框对应的js代码
javascript
/*
* 权限分配菜单
* */
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代码
html
<!--分配权限的弹出层开始-->
<div style="display: none;padding: 20px" id="roleDiv">
<div style="padding: 15px">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-xs data-orange-btn"
dtree-id="treeSelect" dtree-menu="checkAll"><i class="fa fa-check-square-o"></i> 全选
</button>
<button type="button" class="layui-btn layui-btn-xs data-black-btn"
dtree-id="treeSelect" dtree-menu="unCheckAll"><i class="fa fa-remove"></i> 取消全选
</button>
<button class="layui-btn data-light-btn layui-btn-xs" dtree-id="treeSelect" dtree-menu="moveDown"><i
class="fa fa-expand"></i> 展开
</button>
<button class="layui-btn data-grey-btn layui-btn-xs" dtree-id="treeSelect" dtree-menu="moveUp"><i
class="fa fa-compress"></i> 折叠
</button>
</div>
<div class="layui-input-inline" style="width: 130px">
<input type="text" class="layui-input" id="searchInput" placeholder="输入查询节点内容..."
lay-affix="clear"
style="height: 28px;font-size: 13px">
</div>
<button class="layui-btn data-other-btn layui-btn-xs " id="search_btn"><i class="fa fa-search"></i> 搜索
</button>
<button class="layui-btn data-other-btn layui-btn-xs " dtree-id="treeSelect" dtree-menu="refresh"><i
class="fa fa-refresh"></i> 刷新
</button>
<div class="layui-form-item" style="padding: 15px">
<ul id="treeSelect" class="dtree" data-id="0"></ul>
</div>
</div>
</div>
<!--分配权限的弹出层结束-->
添加和编辑页面下图中的代码课一不用查看
javascript
/*
* 权限树弹出层方法
* 这里传递两个参数一个是根据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: ['<i class="fa fa-check"></i> 确认分配', '<i class="fa fa-times "></i> 关闭'],
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();
}
}
});
}
表格头部监听栏按钮的操作
javascript
/*
* 头部操作栏监听
* */
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: ['<i class="fa fa-check"></i> 新增', '<i class="fa fa-mail-reply-all "></i> 取消'],
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;
}
;
});
添加,修改,删除的方法
javascript
/*
* 方法整合调用
* */
/*
* 表单提交,这里设置五个参数: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: ['<i class="fa fa-check"></i> 保存', '<i class="fa fa-mail-reply-all "></i> 取消'],
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代码
java
/*
* 数据添加
* @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 Map<String, Object> params) {
try {
// 从请求参数中获取要删除的ID列表
List<Integer> ids = (List<Integer>) params.get("ids");
System.out.println("删除的数据id值" + ids);
//批量查询角色信息
List<RoleEntity> 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代码
java
/*
* 数据插入
* @return
* */
void saveAndUpdateRoleInfo(RoleEntity role, String resource);
/*
* 数据删除
* */
void deleteRoleInfo(List<Integer> ids);
/*
* 查询所有菜单
* */
DataGridView listResource(Integer roleId);
/*
* 根据名称查询角色
* */
RoleEntity getRoleInfo(String roleName);
ServiceImpl代码
java
/*
* 数据添加和修改操作
* */
@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(List<Integer> ids) {
roleMapper.deleteRoleInfo(ids);
}
/*
* 根据角色名称查询角色信息
* */
@Override
public RoleEntity getRoleInfo(String roleName) {
return roleMapper.getRoleInfo(roleName);
}
RoleResourceMapper
java
/*
* 添加角色资源
* */
void insertRoleResource(RoleResourceEntity roleResourceEntity);
/*
* 根据角色ID删除角色资源
* */
void deleteRoleResource(Integer roleId);
RoleMapper
java
/*
* 数据插入操作
* @return
* */
void insertRoleInfo(RoleEntity role);
/*
* 数据更新操作
* @return
* */
void updateRoleInfo(RoleEntity role);
/*
* 数据删除操作
* @return
* */
void deleteRoleInfo(List<Integer> ids);
/*
* 根据角色名查询角色信息
* */
RoleEntity getRoleInfo(String roleName);
RoleMapper.xml
xml
<!--数据添加操作insertRoleInfo-->
<insert id="insertRoleInfo">
insert into sys_role(role_name,remark,status,create_time,role_state)
values(#{roleName},#{remark},#{status},#{createTime},#{roleState})
</insert>
<!--数据更新操作-->
<update id="updateRoleInfo" parameterType="RoleEntity">
update sys_role
<set>
<if test="roleName != null and roleName != ''">
role_name = #{roleName},
</if>
<if test="remark != null and remark != ''">
remark = #{remark},
</if>
<if test="status != null">
status = #{status},
</if>
<if test="updateTime != null">
update_time = #{updateTime},
</if>
<if test="roleState != null">
role_state = #{roleState},
</if>
</set>
where roleId = #{roleId}
</update>
<!--数据批量删除操作-->
<delete id="deleteRoleInfo" parameterType="java.util.List">
delete from sys_role where roleId in
<foreach collection="list" item="r" separator="," open="(" close=")">
#{r.roleId}
</foreach>
</delete>
RoleResourceMapper.xml
xml
<!--添加角色资源-->
<insert id="insertRoleResource" parameterType="com.example.erp_project.entity.RoleResourceEntity">
insert into sys_role_resource(roleId,resourceId)
values(#{roleId},#{resourceId})
</insert>
<!--根据id删除角色资源-->
<delete id="deleteRoleResource" parameterType="int">
delete from sys_role_resource
where roleId = #{roleId}
</delete>
<!--根据roleId查询数据-->
<select id="selectByRoleId" resultType="com.example.erp_project.entity.RoleResourceEntity">
select *
from sys_role_resource
where roleId = #{roleId}
</select>
前端页面完整代码
html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>角色信息管理</title>
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{../static/favicon.ico}"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{../layui/css/layui.css}" media="all">
<link rel="stylesheet" th:href="@{../css/public.css}" media="all">
<!-- 图标样式文件-->
<link rel="stylesheet" th:href="@{../lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
<!--引入自定义的样式文件-->
<link rel="stylesheet" th:href="@{../css/custom/custom.css}" media="all">
<!--第三方树组件-->
<link rel="stylesheet" th:href="@{../dist/dtree/font/dtreefont.css}" media="all">
<link rel="stylesheet" th:href="@{../dist/dtree/dtree.css}" media="all">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<!-- 搜索表单信息-->
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form class="layui-form layui-form-pane">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">角色名称</label>
<div class="layui-input-inline">
<input type="text" name="name" autocomplete="off" class="layui-input"
lay-affix="clear">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">角色状态</label>
<div class="layui-input-inline" style="width: 100px">
<select name="status" lay-filter="aihao">
<option value="">所有</option>
<option value="1">正常</option>
<option value="0">停用</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">权限状态</label>
<div class="layui-input-inline" style="width: 100px">
<select name="roleState" lay-filter="aihao">
<option value="">所有</option>
<option value="1">已分配</option>
<option value="0">未分配</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">创建日期</label>
<div class="layui-inline" id="laydate-rangeLinked">
<div class="layui-input-inline" style="width: 100px">
<input type="text" autocomplete="off" id="start-date" name="start"
class="layui-input" placeholder="创建日期" readonly>
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px">
<input type="text" autocomplete="off" id="end-date" name="end" class="layui-input"
placeholder="结束日期" readonly>
</div>
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-bg-green layui-btn-radius layui-btn-sm"
lay-submit
lay-filter="search-btn"><i class="fa fa-search"></i> 搜 索
</button>
<button type="button" class="layui-btn layui-bg-orange layui-btn-radius layui-btn-sm"
lay-on="reset-btn">
<i class="fa fa-refresh"></i> 重置
</button>
</div>
</div>
</form>
</div>
</fieldset>
<!-- 表头表单-->
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
<button class="layui-btn data-add-btn layui-btn-sm " lay-event="add"><i
class="fa fa-plus"></i> 新增
</button>
<button class="layui-btn data-edit-btn layui-btn-sm " lay-event="edit"><i
class="fa fa-pencil-square-o"></i> 编辑
</button>
<button class="layui-btn layui-btn-sm data-del-btn" lay-event="delete"><i
class="fa fa-times"></i> 删除
</button>
</div>
</script>
<!-- 表格-->
<table class="layui-hide" id="roleTableId" lay-filter="roleTableFilter"></table>
<!-- 表格后的操作栏-->
<script type="text/html" id="TableBar">
<!--如果权限状态为1、则显示编辑权限,编辑,删除按钮,如果为0,则显示分配权限,编辑,删除按钮-->
{{#if(d.roleState=='1'&&d.roleName!="超级管理员"){}}
<a class="layui-btn layui-btn-xs data-other-btn" lay-event="ed-role"><i
class="fa fa-pencil-square-o"></i> 权限</a>
<a class="layui-btn layui-btn-xs data-edit-btn" lay-event="edit"><i
class="fa fa-pencil-square-o"></i> 信息</a>
<a class="layui-btn layui-btn-xs data-del-btn" lay-event="delete"><i
class="fa fa-times"></i> 删除</a>
{{#}else if(d.roleState=='0'&&d.roleName!="超级管理员"){}}
<a class="layui-btn layui-btn-xs data-orange-btn" lay-event="add-role"><i
class="fa fa-sitemap"></i> 分配权限</a>
<a class="layui-btn layui-btn-xs data-edit-btn" lay-event="edit"><i
class="fa fa-pencil-square-o"></i> 信息</a>
<a class="layui-btn layui-btn-xs data-del-btn" lay-event="delete"><i
class="fa fa-times"></i> 删除</a>
{{#}}}
</script>
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
<form class="layui-form" lay-filter="role-form" id="role-form">
<!--隐藏数据id值,用于数据更新使用-->
<input type="hidden" name="roleId" id="roleId">
<div class="layui-form-item">
<label class="layui-form-label">角色名称:</label>
<div class="layui-input-block">
<input type="text" name="roleName" id="roleName" lay-verify="required"
placeholder="请填写角色名称"
autocomplete="off"
class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色描述:</label>
<div class="layui-input-block">
<textarea name="remark" placeholder="请输入内容" class="layui-textarea"
lay-affix="clear"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色状态:</label>
<div class="layui-input-block">
<input type="radio" name="state" value="1" title="正常" checked>
<input type="radio" name="state" value="0" title="停用">
</div>
</div>
<input type="hidden" name="r" id="r">
<div class="layui-form-item">
<label class="layui-form-label">分配权限:</label>
<div class="layui-input-block">
<input type="radio" name="roleState" value="1" title="分配" lay-filter="role-status">
<input type="radio" name="roleState" value="0" title="暂不分配"lay-filter="role-status" >
</div>
</div>
</form>
</div>
<!-- 添加和修改的弹出层结束 -->
<!--分配权限的弹出层开始-->
<div style="display: none;padding: 20px" id="roleDiv">
<div style="padding: 15px">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-xs data-orange-btn"
dtree-id="treeSelect" dtree-menu="checkAll"><i class="fa fa-check-square-o"></i> 全选
</button>
<button type="button" class="layui-btn layui-btn-xs data-black-btn"
dtree-id="treeSelect" dtree-menu="unCheckAll"><i class="fa fa-remove"></i> 取消全选
</button>
<button class="layui-btn data-light-btn layui-btn-xs" dtree-id="treeSelect" dtree-menu="moveDown"><i
class="fa fa-expand"></i> 展开
</button>
<button class="layui-btn data-grey-btn layui-btn-xs" dtree-id="treeSelect" dtree-menu="moveUp"><i
class="fa fa-compress"></i> 折叠
</button>
</div>
<div class="layui-input-inline" style="width: 130px">
<input type="text" class="layui-input" id="searchInput" placeholder="输入查询节点内容..."
lay-affix="clear"
style="height: 28px;font-size: 13px">
</div>
<button class="layui-btn data-other-btn layui-btn-xs " id="search_btn"><i class="fa fa-search"></i> 搜索
</button>
<button class="layui-btn data-other-btn layui-btn-xs " dtree-id="treeSelect" dtree-menu="refresh"><i
class="fa fa-refresh"></i> 刷新
</button>
<div class="layui-form-item" style="padding: 15px">
<ul id="treeSelect" class="dtree" data-id="0"></ul>
</div>
</div>
</div>
<!--分配权限的弹出层结束-->
</div>
</div>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>
<!--引用第三方插件(消息通知插件)-->
<script th:src="@{../dist/notify/notify.js}"></script>
<!--第三方树组件-->
<script th:src="@{../dist/dtree/dtree.js}"></script>
<script type="text/html" id="templet-switch">
<!-- 这里的 checked 的状态值判断仅作为演示 -->
{{# if(d.roleName != "超级管理员") {}}
<input type="checkbox" name="status" value="{{= d.roleId }}" title="启用|停用" lay-skin="switch"
style="background-color: #c2bddc"
lay-filter="templet-status" {{=d.status== 1 ? "checked" : "" }}>
{{# }}}
</script>
<script th:inline="none">
layui.use(['form', 'table', 'notify','dtree'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
var notify = layui.notify;
var util = layui.util;
var laydate = layui.laydate;
var tree = layui.tree;
var dtree = layui.dtree;
/*
* 权限分配菜单
* */
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();//获取隐藏域的值,如果为空则赋值为0,否则赋值为隐藏域的值
if (!roleId) {
roleId = 0;
}
//如果选中的是分配权限,然后调用 treeSelectData(roleId,1);方法加载菜单资源
if (value==="1"){
treeSelectData(roleId,1);//这里传递的roleId是0 查询的就是全部资源未选择,而编辑页面传递的就是选中数据的roleId
}
});
/*
* 搜索栏日期选择
* 日期范围 - 左右面板联动选择模式
* */
laydate.render({
elem: '#laydate-rangeLinked',
range: ['#start-date', '#end-date'],
rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
theme: '#e5e5f6'
});
/*
* 点击重置按钮,重新加载当前页面
* */
util.on('lay-on', {
"reset-btn": function () {//搜索页面重载表格数据
//重载当前页面
window.location.reload();
},
});
/*
* 数据表渲染
* */
table.render({
elem: '#roleTableId',
url: '/role/getAllSelectRoleDate',
toolbar: '#toolbar',
defaultToolbar: false,
cols: [[
{type: "checkbox", width: 50},
{field: 'roleName', title: '角色名称', align: "center"},
{
field: 'roleState', title: '权限状态', align: "center", templet: function (d) {
if (d.roleName==="超级管理员"){
return '<span class="layui-btn layui-btn-xs layui-btn-radius" style="color: #e64e81">不允许修改</span>';
}else {
if (d.roleState == 1) {
return '<span class="layui-btn layui-btn-xs layui-btn-radius" ' +
'style="background-color: #0a84b2;" lay-event="eroa">已分配</span>';
} else {
return '<span class="layui-btn layui-btn-xs layui-btn-radius" ' +
'style="background-color: #e5dbd7;" lay-event="area">未分配</span>';
}
}
}
},
{field: 'remark', title: '角色描述', align: "center"},
{field: 'status', title: '角色状态', align: "center", templet: '#templet-switch'},
{field: 'createTime', title: '创建时间', align: "center"},
{title: '操作', Width: 180, toolbar: '#TableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
text: {
none: '抱歉!暂无相关数据'
},
loading: true,
skin: 'grid'
});
/*
* 监听搜索操作
* */
form.on('submit(search-btn)', function (data) {
//获取搜索栏中的数据
var result = data.field;
//执行搜索重载
table.reload('roleTableId', {
page: {
curr: 1
}
, where: {
roleName: result.name,
status: result.status,
startDate: result.start,
endDate: result.end,
roleState: result.roleState
}
}, 'data');
return false;
});
/*
* 头部操作栏监听
* */
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: ['<i class="fa fa-check"></i> 新增', '<i class="fa fa-mail-reply-all "></i> 取消'],
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;
}
;
});
/*
* 表格状态监听栏
*
* */
table.on('tool(roleTableFilter)', function (obj) {
//编辑需要将数据赋值到页面
var data = obj.data;
//定义数组来存放obj.data,进行删除操作
var dataArr = [];
//数组赋值
dataArr.push(obj.data);
//数据编辑操作
if (obj.event === 'edit') {
updateFormInfo(data);
return false;
} else if (obj.event === 'delete') {
deleteFormInfo(dataArr);
} else if (obj.event === 'eroa') {
layer.confirm('该角色已经分配权限,是否编辑权限?', function (index) {
treeSelectData(data.roleId,0);
})
} else if (obj.event === 'area') {
layer.confirm('该角色还未分配权限,立即分配权限?', function (index) {
treeSelectData(data.roleId,0);
})
} else if (obj.event === 'add-role') {
treeSelectData(data.roleId,0);
} else if (obj.event === 'ed-role') {
treeSelectData(data.roleId,0);
}
});
/*
* 开关状态
* */
form.on('switch(templet-status)', function (obj) {
var id = this.value;
var name = this.name;
var status = obj.elem.checked ? 1 : 0;
$.ajax({
url: '/role/updateRoleStatus',
type: 'POST',
data: {
roleId: id,
status: status
},
success: function (result) {
if (result.code ===0) {
// notify.success(result.msg, "vcenter", "shadow", false, 1500); // 成功提示
layer.tips(result.msg, obj.othis);// 成功提示
} else {
// notify.warning(result.msg, "vcenter", "shadow", false, 1500);// 警告提示
layer.tips(result.msg, obj.othis);// 警告提示
}
}
});
});
/*
* 方法整合调用
* */
/*
* 表单提交,这里设置五个参数: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: ['<i class="fa fa-check"></i> 保存', '<i class="fa fa-mail-reply-all "></i> 取消'],
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)
});
}
/*
* 权限树生成
* */
//初始化树
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(); // 内置方法刷新树
}
});
}
/*
* 权限树弹出层方法
* 这里传递两个参数一个是根据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: ['<i class="fa fa-check"></i> 确认分配', '<i class="fa fa-times "></i> 关闭'],
success: function () {
initTree(roleId);
},
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();
}
}
});
}
})
</script>
</body>
</html>