<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色和权限管理</title>
<link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
<link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.3.3/themes/icon.css"></link>
<script type="text/javascript" src="../static/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="../static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var url;
function formatEdit(val,row){
return "<a href=\"javascript:openMenuSetDialog("+row.id+")\"><img style='margin-top: 4px' src='/static/images/settings.png' /></a>";
}
function formatSearch(val,row){
return "<a href=\"javascript:openMenuSearchDialog("+row.id+")\"><img style='margin-top: 4px' src='/static/images/zoom.png' /></a>";
}
function openMenuSearchDialog(roleId){
$("#menuSearchDialog").dialog("open").dialog("setTitle","menuSetDialog.查询菜单权限");
$("#menuTreeSearch").tree({
lines:true,
url:'../user/loadRoleMenuInfo?parentId=-1&roleId='+roleId,
//checkbox:true,
cascadeCheck:false,
onLoadSuccess:function(data){
console.log("查询菜单数据");
console.log(data);
$("#menuTreeSearch").tree('expandAll');
}
//
});
}
function openMenuSetDialog(roleId){
$("#menuSetDialog").dialog("open").dialog("setTitle","menuSetDialog.设置菜单权限");
$("#menuTree").tree({
lines:true,
url:'../admin/role/loadCheckMenuInfo?parentId=-1&roleId='+roleId,
//url:'../user/loadMenuInfo?parentId=-1',
checkbox:true,
cascadeCheck:false,
onLoadSuccess:function(data){
console.log("菜单数据");
console.log(data);
$("#menuTree").tree('expandAll');
},
onCheck:function(node,checked){
if(checked){
checkNode($('#menuTree').tree('getParent',node.target));
}
}
});
$("#roleId").val(roleId);
}
function checkNode(node){
if(!node){
return;
}else{
checkNode($('#menuTree').tree('getParent',node.target));
$('#menuTree').tree('check',node.target);
}
}
function saveMenuSet(){
var roleId=$("#roleId").val();
var nodes=$('#menuTree').tree('getChecked');
var menuArrIds=[];
for(var i=0;i<nodes.length;i++){
menuArrIds.push(nodes[i].id);
}
var menuIds=menuArrIds.join(",");
$.post("/admin/role/saveMenuSet",{menuIds:menuIds,roleId:roleId},function(result){
if(result.success){
closeMenuSetDialog();
$.messager.alert("系统提示","提交成功！");
}else{
$.messager.alert("系统提示","提交失败，请联系管理员！");
}
},"json");
}
function closeMenuSetDialog(){
$("#menuSetDialog").dialog("close");
}
function deleteRole(){
var selectedRows=$("#dg").datagrid("getSelections");
if(selectedRows.length!=1){
$.messager.alert("系统提示","请选择要删除的数据！");
return;
}
var id=selectedRows[0].id;
$.messager.confirm("系统提示","您确定要删除这条数据吗？",function(r){
if(r){
$.post("/admin/role/delete",{id:id},function(result){
if(result.success){
$.messager.alert("系统提示","数据已成功删除！");
$("#dg").datagrid("reload");
}else{
$.messager.alert("系统提示",result.errorInfo);
}
},"json");
}
});
}
function openRoleAddDialog(){
$("#dlg").dialog("open").dialog("setTitle","添加角色信息");
url="/admin/role/save";
}
function openRoleModifyDialog(){
var selectedRows=$("#dg").datagrid("getSelections");
if(selectedRows.length!=1){
$.messager.alert("系统提示","请选择一条要修改的数据！");
return;
}
var row=selectedRows[0];
$("#dlg").dialog("open").dialog("setTitle","修改角色信息");
$("#fm").form("load",row);
url="/admin/role/save?id="+row.id;
}
function saveRole(){
$("#fm").form("submit",{
url:url,
onSubmit:function(){
return $(this).form("validate");
},
success:function(result){
var result=eval('('+result+')');
if(result.success){
$.messager.alert("系统提示","保存成功！");
resetValue();
$("#dlg").dialog("close");
$("#dg").datagrid("reload");
}else{
$.messager.alert("系统提示",result.errorInfo);
}
}
});
}
function resetValue(){
$("#name").val("");
$("#remarks").val("");
}
function closeRoleDialog(){
$("#dlg").dialog("close");
resetValue();
}
function searchRole(){
$("#dg").datagrid('load',{
"name":$("#s_name").val()
});
}
$(function () {
$("#dg").datagrid({
//双击事件
onDblClickRow: function (index, row) {
$("#dlg").dialog("open").dialog("setTitle","修改角色信息");
$("#fm").form("load",row);
url="/admin/role/save?id="+row.id;
}
});
});
</script>
</head>
<body style="margin: 1px">
<table id="dg" title="角色和权限管理(power.role.1.0.0.0)" class="easyui-datagrid"
fitColumns="true" pagination="true" rownumbers="true" singleSelect="true"
url="/admin/role/list" fit="true" toolbar="#tb">
<thead>
<tr>
<th field="id" width="20" align="center">编号</th>
<th field="name" width="50" align="center">角色名称</th>
<th field="remarks" width="100" align="center">备注</th>
<th field="bb" width="50" align="center" formatter="formatSearch">查询菜单权限</th>
<th field="aa" width="50" align="center" formatter="formatEdit">设置菜单权限</th>
</tr>
</thead>
</table>
<div id="tb">
<div>
<a href="javascript:openRoleAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
<a href="javascript:openRoleModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
<a href="javascript:deleteRole()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
</div>
<div>
角色名称： <input type="text" id="s_name" size="20" onkeydown="if(event.keyCode==13) searchRole()"/>
<a href="javascript:searchRole()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
</div>
</div>
<div id="dlg" class="easyui-dialog" style="width:450px;height:250px;padding: 10px 20px"
closed="true" buttons="#dlg-buttons" data-options="onClose:function(){resetValue()}">
<form id="fm" method="post">
<table cellspacing="8px">
<tr>
<td>角色名称：</td>
<td><input type="text" id="name" name="name" class="easyui-validatebox" required="true" /></td>
</tr>
<tr>
<td valign="top">备注：</td>
<td>
<textarea rows="5" cols="40" id="remarks" name="remarks"></textarea>
</td>
</tr>
</table>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:saveRole()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
<a href="javascript:closeRoleDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>
<div id="menuSetDialog" class="easyui-dialog" style="width:300px;height:500px;padding: 10px 20px"
closed="true" buttons="#dlg-buttons2">
<input type="hidden" id="roleId" name="roleId"/>
<ul id="menuTree" class="easyui-tree"></ul>
</div>
<div id="dlg-buttons2">
<a href="javascript:saveMenuSet()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
<a href="javascript:closeMenuSetDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>
<!-- 查询菜单权限对话框 -->
<div id="menuSearchDialog" class="easyui-dialog" style="width:300px;height:500px;padding: 10px 20px"
closed="true">
<ul id="menuTreeSearch" class="easyui-tree"></ul>
</div>
</body>
</html>
/**
* 根据父节点获取所有复选框权限菜单树,在角色管理中添加菜单功能所用
*
* @param parentId 为-1，从根节点开始，查询所有节点
* @param roleId 角色id
* @return
* @throws Exception
*/
@PostMapping("/loadCheckMenuInfo")
@RequiresPermissions(value = { "角色管理" })
public String loadMenuInfo(Integer parentId, Integer roleId) throws Exception {
// 根据角色查询所有权限菜单信息
List<Menu> userRoleMenuList = menuService.findByRoleId(roleId);
// 根据角色查询所有权限菜单ID信息
List<Integer> useerRoleMenuIdList = new LinkedList<Integer>();
for (Menu menu : userRoleMenuList) {
useerRoleMenuIdList.add(menu.getId());
}
// 得到管理员角色ID为1
return getAllMenuByParentId(parentId, 1, useerRoleMenuIdList).toString();
}
/**
* 获取所有菜单信息,根据角色菜单，递归查询所有菜单
*
* @param parentId
* @param roleId
* @return
*/
private JsonArray getAllMenuByParentId(Integer parentId, Integer roleId, List<Integer> useerRoleMenuIdList) {
JsonArray jsonArray = this.getMenuByParentId(parentId, roleId, useerRoleMenuIdList);
for (int i = 0; i < jsonArray.size(); i++) {
JsonObject jsonObject = (JsonObject) jsonArray.get(i);
if ("open".equals(jsonObject.get("state").getAsString())) {
continue;
} else {
jsonObject.add("children",
getAllMenuByParentId(jsonObject.get("id").getAsInt(), roleId, useerRoleMenuIdList));
}
}
return jsonArray;
}
/**
* 根据父节点和用户角色id查询菜单
*
* @param parentId
* @param roleId
* @return
*/
private JsonArray getMenuByParentId(Integer parentId, Integer roleId, List<Integer> useerRoleMenuIdList) {
List<Menu> menuList = menuService.findByParentIdAndRoleId(parentId, roleId);
JsonArray jsonArray = new JsonArray();
for (Menu menu : menuList) {
JsonObject jsonObject = new JsonObject();
jsonObject.addProperty("id", menu.getId()); // 节点id
jsonObject.addProperty("text", menu.getName()); // 节点名称
if (menu.getState() == 1) {
jsonObject.addProperty("state", "closed"); // 根节点
} else {
jsonObject.addProperty("state", "open"); // 叶子节点
}
if (useerRoleMenuIdList.contains(menu.getId())) {
jsonObject.addProperty("checked", true);
}
else
{
jsonObject.addProperty("checked", false);
}
jsonObject.addProperty("iconCls", menu.getIcon());
JsonObject attributeObject = new JsonObject(); // 扩展属性
attributeObject.addProperty("url", menu.getUrl()); // 菜单请求地址
jsonObject.add("attributes", attributeObject);
jsonArray.add(jsonObject);
}
return jsonArray;
}
这是一个关于角色和权限管理的前端页面实现，使用jQuery EasyUI框架，包含角色的增删改查功能，并提供了设置和查询菜单权限的交互。页面中通过AJAX调用后台接口，如`/admin/role/save`、`/admin/role/delete`等，进行数据操作。同时，接口`/admin/role/loadCheckMenuInfo`用于加载角色的权限菜单信息，以供用户设置。
扫一扫
1762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
