<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
|
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
+ path + "/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>菜单项管理</title>
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<link href="static/plugins/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css">
|
<link href="static/styles/initialize.css" rel="stylesheet" type="text/css">
|
<link href="static/styles/common.css" rel="stylesheet" type="text/css">
|
<link href="static/styles/tree-style.css" rel="stylesheet" type="text/css">
|
<script type="text/javascript" src="static/plugins/jquery/jquery.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/jquery.easyui.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
|
<script type="text/javascript" src="static/scripts/easyuiExtend.js"></script>
|
<script type="text/javascript" src="static/scripts/jquery-extend.js"></script>
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
|
|
<!-- 弹窗加载组件 -->
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/spin.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/jquery.spin.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery.blockUI.js"></script>
|
<!-- wcp组件 -->
|
<script type="text/javascript" src="static/wcp/scripts/wcp.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.layer.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.blockUI.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.spin.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.jquery.js"></script>
|
|
<!--[if lt IE 9]>
|
<script type="text/javascript" src="static/plugins/json2.js"></script>
|
<![endif]-->
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.infoPicker.js"></script>
|
<style>
|
html, body {
|
height: 100%;
|
width: 100%;
|
overflow: hidden;
|
}
|
|
.combobox-group {
|
clear: both;
|
}
|
|
.combobox-gitem {
|
float: left;
|
padding-right: 10px;
|
}
|
</style>
|
|
</head>
|
|
<body class="pt-tree">
|
<div>
|
<div class="pt-main-top clear">
|
<div class="pt-nav">
|
<span class="pt-title-icon">
|
<i class="fa fa-tasks"></i>
|
</span>
|
<div class="pt-title">
|
<div>
|
<h4>菜单项管理</h4>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="pt-left-menu">
|
<div class="pt-left-tools">
|
<shiro:hasPermission name="SYS_MANAGE.MENU.MENUITEM.OPERATION.ADDITEM">
|
<a class="easyui-menubutton pt-btn-primary" data-options="menu:'#div_MenuAdd'">
|
<i class="fa fa-plus-square"></i>
|
新增
|
</a>
|
</shiro:hasPermission>
|
<%-- <shiro:hasPermission name="SYS_MANAGE.MENU.MENUITEM.OPERATION.ADDITEM">
|
<button class="pt-btn pt-btn-success" id="btnAddRootMenuItem">
|
<i class="fa fa-plus-square"></i>新增根菜单
|
</button>
|
<button class="pt-btn pt-btn-purple" id="btnAddSubMenuItem">
|
<i class="fa fa-plus-square-o"></i>新增子菜单
|
</button>
|
</shiro:hasPermission> --%>
|
<shiro:hasPermission name="SYS_MANAGE.MENU.MENUITEM.OPERATION.DELETEITEM">
|
<button class="pt-btn pt-btn-danger" id="btnDeleteMenuItem">
|
<i class="fa fa-trash-o"></i>
|
删除
|
</button>
|
</shiro:hasPermission>
|
<shiro:hasPermission name="SYS_MANAGE.MENU.MENUITEM.OPERATION.ADDITEM">
|
<div id="div_MenuAdd" style="width:150px;">
|
<div id="btnAddRootMenuItem" data-options="iconCls:'fa fa-plus-square'">新增根菜单</div>
|
<div id="btnAddSubMenuItem" data-options="iconCls:'fa fa-plus-square-o'">新增子菜单</div>
|
</div>
|
</shiro:hasPermission>
|
</div>
|
<div class="easyui-panel">
|
<ul id="ul_menuItem"></ul>
|
</div>
|
|
</div>
|
<div class="pt-right-main">
|
<form class="pt-form" id="formMenuItem" method="post">
|
<table style="width: 100%;">
|
<tr>
|
<td class="tbtitle" style="width: 140px; ">
|
<input type="hidden" class="easyui-textbox" id="itemId" name="itemId"/>
|
<em class="pt-color-danger">*</em> 菜单项名称：
|
|
|
</td>
|
<td>
|
<input id="itemName" name="itemName" class="easyui-textbox" type="text" style="width:100%"
|
required="required"/>
|
<input type="hidden" id="menuId" name="menuId" value="${menuId}"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">
|
<em class="pt-color-danger">*</em>上级菜单：
|
</td>
|
<td>
|
<input id="parentId" name="parentId" class="easyui-combotree"
|
data-options="url:'management/menuItem/listMenuItemByComboTree?menuId=${menuId}',lines:true,method:'get',panelHeight: 'auto'"
|
style="width:100%;" required="required"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">菜单类型：</td>
|
<td>
|
<div>
|
<input class="easyui-radiobutton" name="menuitemType" value="0"
|
data-options="onChange:isMenuitemType" label="无">
|
<input class="easyui-radiobutton" name="menuitemType" value="1"
|
data-options="onChange:isMenuitemType" label="现有模块">
|
<input class="easyui-radiobutton" name="menuitemType" value="2"
|
data-options="onChange:isMenuitemType" label="打开指定网页">
|
</div>
|
</td>
|
</tr>
|
<tr id="isModuleId">
|
<td class="tbtitle">模块名称：</td>
|
<%-- <input id="moduleId" name="moduleId" class="easyui-combotree"
|
data-options="url:'management/menuItem/listMenuItemByComboTree?menuId=${menuId}',lines:true,method:'get'" style="width:100%;" /> --%>
|
<td>
|
<input id="txt_ModuleName" name="moduleName" class="easyui-textbox" style="width:100%;"
|
data-options="editable:false,buttonText:'选择模块',prompt:'',onClickButton:function(){selectModule();}"/>
|
<input type="hidden" name="moduleId" id="txt_ModuleId" class="easyui-textbox">
|
|
</td>
|
</tr>
|
<tr id="view_Css">
|
<td class="tbtitle">所属视图：</td>
|
<td>
|
<select name="viewId" id="sel_viewId" style="width:100%;" class="easyui-combobox"></select>
|
</td>
|
</tr>
|
<tr id="isUrl">
|
<td class="tbtitle">url地址：</td>
|
<td>
|
<input id="url" name="url" class="easyui-textbox" type="text" style="width:100%;"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">图标：</td>
|
<td>
|
<input id="txt_Icon" name="icon" class="easyui-textbox" type="text"
|
data-options="editable:false,buttonText:'选择图标',prompt:'',onClickButton:function(){selectIcon();}"
|
style="width:100%;"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">打开方式：</td>
|
<td>
|
<select id="openType" name="openType" class="easyui-combobox" style="width:100%;"
|
data-options="editable:false,onChange:openTyprOnChange">
|
<option value="0">选项卡</option>
|
<option value="1">新窗口</option>
|
<option value="2">弹出层</option>
|
</select>
|
</td>
|
</tr>
|
<tr id="tr_openWebPageParam" style="display:none;">
|
<td class="tbtitle">层宽度/高度：</td>
|
<td>
|
<input id="openUrlWidth" name="openWidth" class="easyui-numberspinner" type="text"
|
style="width:300px"/>
|
/
|
<input id="openUrlHeight" name="openHeight" class="easyui-numberspinner" type="text"
|
style="width:300px"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">提示信息：</td>
|
<td>
|
<input id="tipsInformation" name="tipsInformation" class="easyui-textbox" style="width:100%">
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">默认选中：</td>
|
<td>
|
<div>
|
<input class="easyui-radiobutton" name="defaultOpened" value="true" label="是">
|
<input class="easyui-radiobutton" name="defaultOpened" value="false" label="否">
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">排序号：</td>
|
<td>
|
<input id="sortNum" name="sortNum" class="easyui-numberspinner" style="width:100%"
|
data-options="min:1,max:1000,editable:false">
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">是否需要权限：</td>
|
<td>
|
<div>
|
<input class="easyui-radiobutton" name="isPermission" value="true"
|
data-options="onChange:isPermissionChange" label="是">
|
<input class="easyui-radiobutton" name="isPermission" value="false" label="否">
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">权限名称：</td>
|
<td>
|
<input id="permissionName" name="permissionName" class="easyui-textbox" type="text"
|
data-options="editable:false,buttonText:'选择权限',prompt:'',onClickButton:function(){selectPermission();}"
|
style="width:100%;"/>
|
|
</td>
|
</tr>
|
</table>
|
</form>
|
|
<div class="pt-form-btn">
|
<div class="form-group">
|
<shiro:hasPermission name="SYS_MANAGE.MENU.MENUITEM.OPERATION.SAVEITEM">
|
<button id="btnSave" class="pt-btn pt-btn-primary">保存</button>
|
</shiro:hasPermission>
|
<button id="btnReset" class="pt-btn pt-btn-default">重置</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
<script type="text/javascript" src="static/scripts/ResizeScroll.js"></script>
|
<script>
|
//定义页面全局变量
|
var NowSelectedNodeId = null;
|
var menuId = $("#menuId").val();
|
var params = {
|
callBack: null
|
};
|
var usedParentId = -1;
|
//页面加载事件
|
$(function () {
|
//初始化表单值(单选按钮)
|
$("input[radiobuttonName='isPermission'][value='${menuItem.isPermission}']").radiobutton('check');
|
$("input[radiobuttonName='defaultOpened'][value='${menuItem.defaultOpened}']").radiobutton('check');
|
$("input[radiobuttonName='menuitemType'][value='${menuItem.menuitemType}']").radiobutton('check');
|
var menuitemType = $("input[radiobuttonName='menuitemType'][value='${menuItem.menuitemType}']").val();
|
var isPermission = $("input[radiobuttonName='isPermission'][value='${menuItem.isPermission}']").val();
|
//判断权限名称是否可编写
|
if (isPermission == "true") {
|
$("#permissionName").textbox("enable");
|
} else {
|
$("#permissionName").textbox("disable");
|
}
|
openTyprOnChange();
|
//根据选中菜单类型判断显示具体字段
|
menuitemTypeCheck(menuitemType);
|
var itemId = "${menuItem.itemId}";
|
|
//初始化菜单树
|
$("#ul_menuItem").tree({
|
method: "get",
|
url: "management/menuItem/listMenuItemByTree?menuId=" + menuId,
|
animate: true,
|
lines: true,
|
onBeforeLoad: function (node, param) {
|
new ResizeScroll({
|
"id": "#ul_menuItem",
|
fun: function () {
|
|
var wh = $(window).height();
|
//$("#ul_dept").height(wh-79-39);
|
return (wh - 79 - 40 - 20);
|
|
}
|
});
|
|
wcp.ui.setBusy("#ul_menuItem");
|
},
|
onLoadSuccess: function (node, data) {
|
wcp.ui.clearBusy("#ul_menuItem");
|
new ResizeScroll({
|
"id": "#ul_menuItem",
|
fun: function () {
|
|
var wh = $(window).height();
|
//$("#ul_dept").height(wh-79-39);
|
return (wh - 79 - 40 - 20);
|
|
}
|
});
|
|
//重新加载数据时，选中之前被选中的数据
|
if (NowSelectedNodeId != null) {
|
var node = $('#ul_menuItem').tree('find', NowSelectedNodeId);
|
if (node != null) {
|
$('#ul_menuItem').tree('select', node.target);
|
}
|
}
|
},
|
onLoadError: function (args) {
|
wcp.ui.clearBusy("#ul_menuItem");
|
},
|
onClick: function (node) {
|
NowSelectedNodeId = node.id;
|
$('#formMenuItem').form('load', 'management/menuItem/getMenuItemInfo?itemId=' + node.id); // load from URL
|
wcp.ajax({
|
url: "management/menuItem/getMenuItemInfo?itemId=" + node.id,
|
}).done(function (result) {
|
var moduleId = result.moduleId;
|
var viId = result.viewId;
|
usedParentId = result.parentId;
|
if (moduleId != null && moduleId > 0) {
|
initView(moduleId, viId);
|
}
|
|
});
|
|
},
|
})
|
//初始化滚动条
|
new ResizeScroll({
|
"id": ".pt-form",
|
fun: function () {
|
|
var wh = $(window).height();
|
//$(".pt-form").height(wh-79-48);
|
return (wh - 79 - 48);
|
|
}
|
});
|
|
|
$('#formMenuItem').form({
|
onBeforeLoad: function (param) {
|
wcp.ui.setBusy("#formMenuItem");
|
},
|
onLoadSuccess: function (data) {
|
wcp.ui.clearBusy("#formMenuItem");
|
},
|
onLoadError: function () {
|
wcp.ui.clearBusy("#formMenuItem");
|
}
|
});
|
//绑定按钮事件
|
//添加根菜单按钮事件
|
$("#btnAddRootMenuItem").click(function () {
|
$("#formMenuItem").form('reset');
|
$('#parentId').combotree('setValue', 0);
|
var menuId = $("#menuId").val();
|
wcp.ajax({
|
url: "management/menuItem/getMaxSortNum?parentId=0&menuId=" + menuId,
|
}).done(function (result) {
|
$("#sortNum").numberspinner("setValue", result);
|
});
|
//初始化表单值(单选按钮)
|
radioCheck();
|
});
|
|
//添加子菜单按钮事件
|
$("#btnAddSubMenuItem").click(function () {
|
var node = $('#ul_menuItem').tree('getSelected');
|
if (node != null) {
|
$("#formMenuItem").form('reset');
|
$('#parentId').combotree('setValue', node.id);
|
var menuId = $("#menuId").val();
|
wcp.ajax({
|
url: "management/menuItem/getMaxSortNum?parentId=" + node.id + "&menuId=" + menuId,
|
}).done(function (result) {
|
$("#sortNum").numberspinner("setValue", result);
|
});
|
//初始化表单值(单选按钮)
|
radioCheck();
|
} else {
|
layer.alert('请先选择一个菜单！', {
|
icon: 1
|
});
|
}
|
});
|
|
$("#btnDeleteMenuItem").click(function () {
|
var node = $('#ul_menuItem').tree('getSelected');
|
if (node != null) {
|
//判断是否有子菜单
|
var msg = "";
|
if (node.children != null && node.children.length > 0) {
|
msg = '当前菜单有子菜单，确定要和子菜单一起删除吗?';
|
} else {
|
msg = '确定要删除当前选中的菜单吗?';
|
}
|
|
layer.confirm(msg, {
|
icon: 3,
|
title: '提示'
|
}, function (index) {
|
wcp.ui.setBusy("body", wcp.ajax({
|
url: "management/menuItem/deleteMenuItem",
|
data: node.id,
|
}).done(function (result) {
|
wcp.notify.success('删除成功！');
|
|
//重置表单数据
|
$('#formMenuItem').form('reset');
|
|
//重置选中的数据
|
NowSelectedNodeId = null;
|
|
//重新加载菜单数据
|
$('#ul_menuItem').tree('reload');
|
$('#parentId').combotree('reload');
|
}));
|
|
layer.close(index);
|
});
|
} else {
|
wcp.message.info('请先选择要删除的菜单！');
|
}
|
|
});
|
|
$("#btnSave").click(function () {
|
//验证表单信息
|
var isValid = $('#formMenuItem').form('validate');
|
if (!isValid) {
|
wcp.notify.warn('表单验证有误，请检查表单输入项！');
|
return;
|
}
|
|
var obj = $("#formMenuItem").serializeObject();
|
|
//判断权限名称是否为空
|
if (obj.isPermission == "true" && obj.permissionName == "") {
|
wcp.message.warn("启用权限后，权限名称不能为空！");
|
return false;
|
}
|
|
wcp.ui.setBusy("body", wcp.ajax({
|
url: "management/menuItem/saveMenuItem?usedParentId=" + usedParentId,
|
data: JSON.stringify(obj),
|
}).done(function (result) {
|
wcp.notify.success('保存成功！');
|
|
//重新加载表单数据
|
$('#formMenuItem').form('load', result);
|
var moduleId = result.moduleId;
|
var viId = result.viewId;
|
if (moduleId != null && moduleId > 0) {
|
initView(moduleId, viId);
|
}
|
|
//设置选中的数据
|
NowSelectedNodeId = result.menuItemId;
|
|
//重新加载菜单数据
|
$('#ul_menuItem').tree('reload');
|
//$('#parentId').combotree('reload');
|
}));
|
});
|
|
//重置菜单按钮事件
|
$("#btnReset").click(function () {
|
$("#formMenuItem").form('reset');
|
});
|
|
|
});
|
|
//判断权限名称是否填写
|
function isPermissionChange(checked) {
|
if (checked) {
|
$("#permissionName").textbox("enable");
|
} else {
|
$("#permissionName").textbox("disable");
|
}
|
}
|
|
function isMenuitemType(checked) {
|
if (checked) {
|
var val = $(this).val();
|
menuitemTypeCheck(val);
|
}
|
}
|
|
function radioCheck() {
|
$("input[radiobuttonName='defaultOpened'][value='false']").radiobutton('check');
|
$("input[radiobuttonName='isPermission'][value='false']").radiobutton('check');
|
$("input[radiobuttonName='menuitemType'][value='2']").radiobutton('check');
|
}
|
|
function menuitemTypeCheck(val) {
|
if (val == 0) {
|
$("#isUrl").hide();
|
$("#isModuleId").hide();
|
$("#view_Css").hide();
|
//下拉框设置值
|
$("#sel_viewId").combobox({
|
required: false
|
});
|
} else if (val == 1) {
|
$("#isUrl").hide();
|
$("#isModuleId").show();
|
$("#view_Css").show();
|
} else if (val == 2) {
|
$("#isModuleId").hide();
|
$("#isUrl").show();
|
$("#view_Css").hide();
|
//下拉框设置值
|
$("#sel_viewId").combobox({
|
required: false
|
});
|
}
|
|
}
|
|
//选择模块
|
function selectModule() {
|
wcp.picker.selectModule({
|
title: "请选择模块",
|
multiSelect: false,
|
idElement: "txt_ModuleId",
|
nameElement: "txt_ModuleName",
|
layerOpener: window
|
}, function (rows) {
|
var moduleId = rows[0].id;
|
$("#txt_Icon").textbox("setValue", rows[0].moduleIcon);
|
$("#sel_viewId").empty();
|
|
initView(moduleId);
|
});
|
}
|
|
function initView(moduleId, viId) {
|
$("#sel_viewId").empty();
|
wcp.ajax({
|
url: "config/view/getViewListByModuleId?moduleId=" + moduleId,
|
}).done(function (result) {
|
//下拉框设置值
|
$("#sel_viewId").combobox({
|
data: result,
|
valueField: 'viewId',
|
textField: 'viewName',
|
onLoadSuccess: function () {
|
if (viId) {
|
$('#sel_viewId').combobox('setValue', viId);
|
}
|
},
|
onClick: function (record) {
|
selectViewPermission(record);
|
}
|
});
|
});
|
}
|
|
//选择权限
|
function selectPermission() {
|
wcp.picker.selectPermission({
|
title: "请选择权限",
|
multiSelect: false,
|
nameElement: "permissionName",
|
layerOpener: window
|
});
|
}
|
|
//查询视图权限
|
function selectViewPermission(view) {
|
if (view.enablePermission == 1) {
|
$("input[radiobuttonName='isPermission'][value='true']").radiobutton('check');
|
$("#permissionName").textbox("setValue", view.permissionName);
|
} else {
|
$("input[radiobuttonName='isPermission'][value='false']").radiobutton('check');
|
$("#permissionName").textbox("setValue", "");
|
}
|
|
}
|
|
function openTyprOnChange() {
|
var openType = $('#openType').val();
|
if (openType == '2') {
|
$("#tr_openWebPageParam").show();
|
} else {
|
$("#tr_openWebPageParam").hide();
|
}
|
|
}
|
|
//选择图标
|
function selectIcon() {
|
wcp.picker.selectIcon({
|
title: "请选择图标",
|
nameElement: "txt_Icon",
|
layerOpener: window
|
});
|
}
|
</script>
|
</html>
|
