<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/header2.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/css/newCss/dialog.css">
<title>角色管理</title>
<style>
</style>
</head>
<body class="bg1">
	<div class="headCon">
		<%@ include file="/WEB-INF/jsp/top2.jsp"%>
	</div>

	<div class="clear"></div>

	<div class="container_fluid">
		<div class="searchCon left_menu managerLeft">
			<jsp:include page="/include/manageLeft.jsp">
				<jsp:param name="index" value="角色管理" />
			</jsp:include>
		</div>
		<!-- <div id="resultCon1" class="resultCon" style="margin-left: 255px;"> -->
		<div class="resultCon" style="margin-left: 255px;position:relative;">
			<div class="reSearch">
				<div class="p_bar" style="border-bottom: 1px dashed #afb4bb;">您当前的位置：角色管理</div>
				<div class="row">
					<div class="col-md-4">
						<div class="search-group">
							<span>
								角色名称：
								<input type="text" class="input_txt" name="roleName" placeholder="请输入角色名称"/>
							</span>
						</div>
					</div>
				</div>	
				<div class="row">
					<div class="search-group btnCon">
						<span>
							<button class="btn btn-primary"  id="addBtn"><span class="glyphicon glyphicon-plus" aria-hidden="ture"></span>添加</button>
						</span>
						<span>
							<button class="btn btn-primary" id="searchBtn"><span class="glyphicon glyphicon-search" aria-hidden="ture"></span>查询</button>
						</span>
					</div>
				</div>
			</div>	
			<div class="clear"></div><!-- 清除浮动 -->
			<div class="resultTable" style="width: 99%;padding: 10px;border-radius: 5px;">
					<table id="tbwrap" class="table table-bordered" style="table-layout:fixed;"></table>
					<div class="page eui-pager-custom" id="j_pager"></div>
			</div>
		</div>
	</div>
	
	
	<script type="text/html" id="tb_template">
		<thead>
			<tr>
				<th>角色名称</th>
				<th>描述</th>
				<th>数据状态</th>
				
				<th>关联用户</th>
				
				<th style="width:340px">操作</th>
			</tr>
		</thead>
		<tbody data-type="body">
			<!if(list.length>0) { !>
				<!for(var i=0,len=list.length;i<len;i++){
					var item = list[i],classItem = (i%2!=0)?"odd td_odd":"even";
				!>
				<tr class="gradeA <!=classItem!>">
					<td title="<!=item["roleName"]!>"><!=item["roleName"]!></td>
					<td title="<!=item["remark"]!>"><!=item["remark"]!></td>
					<td title="<!=item["statusName"]!>"><!=item["statusName"]!></td>
					<td><a title="关联用户" data-value="<!=item["roleId"]!>" class="relevanceUser btn btn-primary btn-xs">
						<span class="glyphicon glyphicon-eye-open" aria-hidden="ture"></span>查看</a></td>
					<td>
					    
							<a title="添加用户" data-value="<!=item["roleId"]!>" data-name="<!=item["roleName"]!>" class="addUser btn btn-primary btn-xs">
							<span class="glyphicon glyphicon-plus" aria-hidden="ture"></span>添加用户</a>&nbsp;
					    
						
							<a title="设置权限" data-value="<!=item["roleId"]!>" data-name="<!=item["roleName"]!>" class="setAuthority btn btn-primary btn-xs">
							<span class="glyphicon glyphicon-cog" aria-hidden="ture"></span>设置权限</a>&nbsp;
						
					
						<a title="详情" data-value="<!=item["roleId"]!>" data-name="<!=item["roleName"]!>" class="detail btn btn-primary btn-xs">
						<span class="glyphicon glyphicon-list" aria-hidden="ture"></span>详情</a>
						<a title="修改" data-value="<!=item["roleId"]!>" data-name="<!=item["roleName"]!>" class="edit btn btn-primary btn-xs">
						<span class="glyphicon glyphicon-edit" aria-hidden="ture"></span>修改</a>
						<a title="删除" data-value="<!=item["roleId"]!>" data-name="<!=item["roleName"]!>" class="delete btn btn-danger btn-xs">
						<span class="glyphicon glyphicon-trash" aria-hidden="ture"></span>删除</a>
		
					</td>
				</tr>
			<!}!>
			<!}else{!>
				<tr>
					<td colspan="5"> 暂无数据</td>
				</tr>
			<!}!>
		</tbody>
	</script>



	<script type="text/javascript">
		var sysRoleDialog;
		$(function() {
			initTree();
			// 页面加载完成调用查询分页
			search();
			// 1、添加
			$("#addBtn").click(function() {
				seajs.use("component/dialog", function(dialog) {
					sysRoleDialog = new dialog({
						"width": 800,
						"height": 500,
						"contentType": "iframe",
						"html": "${ctx}/sysRole/toAdd.do",
						// 内容
						"title": "添加系统角色信息" //标题
					});
				});
			});
			
			// 2、详细
			$("#tbwrap").delegate(".detail", "click", function() {
				// 2.1 获取主键
				var roleId = $(this).data("value");
				var roleName = $(this).data("name");
				// 2.2 弹窗窗口，显示详细信息
				seajs.use("component/dialog", function(dialog) {
					sysRoleDialog = new dialog({
						"width" : 800,
						"height" : 600,
						"contentType" : "iframe",
						"html" : "${ctx}/sysRole/view.do?roleId=" + roleId, // 内容
						"title" : "查看"+roleName+"详细信息" //标题
					});
				});
			});
			
			// 3、编辑
			$("#tbwrap").delegate(".edit", "click", function() {
				// 3.1 获取主键
				var roleId = $(this).data("value");
			
				// 3.2 弹窗窗口，显示详细信息
				seajs.use("component/dialog", function(dialog) {
					sysRoleDialog = new dialog({
						"width": 800,
						"height": 600,
						"contentType": "iframe",
						"html": "${ctx}/sysRole/toEdit.do?roleId=" + roleId,
						// 内容
						"title": "编辑详细信息" //标题
					});
				});
			});
			// 4、删除
			$("#tbwrap").delegate(".delete", "click", function() {
				var roleId = $(this).data("value");
			
				if (confirm('确定删除？')) {
					$.post("${ctx}/sysRole/delete.do", { roleId : roleId, CSRFToken : $("#CSRFToken").val()}, function(result) {
						if ("succ" == result) {
							alert("操作成功");
							// 刷新列表页面
							top.location.replace("${ctx}/sysRole/list.do?ts="+new Date().getTime()); //如果操作成功则跳到列表界面 
							// 关闭弹窗窗口
			    			parent.sysRoleDialog.close();
						} else if ("notThroughSecurityCheck" == result["isThroughSecurityCheck"]) { // 如果不通过安全检查
							var mess = result["mess"];
							$.post("${ctx}/common/notThroughSecurityCheck.do?ts=" + new Date().getTime(), mess, function(res) {
								alert(res);
							},"json");
	
						} else {
							alert(result);
						}
					}, "json");
				}
			
			});
			// 5、查询
			$("#searchBtn").click(function() {
				search();
			});
			// 6、设置权限
			$("#tbwrap").delegate(".setAuthority", "click", function () {
				// 2.1 获取主键
				var roleId = $(this).data("value");
				// 2.2 弹窗窗口，显示详细信息
				seajs.use("component/dialog", function (dialog) {
				    sysRoleDialog = new dialog({
				        "width" : 800,
				        "height" : 450,
				        "contentType" : "iframe",
						"html" : "${ctx}/sysRole/toSetAuthority.do?roleId="+roleId, // 内容
				        "title" : "设置权限" //标题
					});
				});
			});
			// 7、关联用户
			$("#tbwrap").delegate(".relevanceUser", "click", function () {
				// 7.1 获取主键
				var roleId = $(this).data("value");
				// 7.2 弹窗窗口，显示详细信息
				seajs.use("component/dialog", function (dialog) {
				    sysDeptDialog = new dialog({
				        "width" : 800,
				        "height" : 580,
				        "contentType" : "iframe",
						"html" : "${ctx}/sysRole/relevanceUser.do?roleId="+roleId, // 内容
				        "title" : "关联用户" //标题
					});
				});
			});
		
		// 8、添加用户
			$("#tbwrap").delegate(".addUser", "click", function () {
				// 7.1 获取主键
				var roleId = $(this).data("value");
				// 7.2 弹窗窗口，显示详细信息
				seajs.use("component/dialog", function (dialog) {
				    sysDeptDialog = new dialog({
				        "width" : 800,
				        "height" : 580,
				        "contentType" : "iframe",
						"html" : "${ctx}/sysRole/toSetUser.do?roleId="+roleId, // 内容
				        "title" : "添加用户" //标题
					});
				});
			});
		});
	</script>
	<%@ include file="/include/zTree.jsp" %>
	<script type="text/javascript">
		function search() {
			// 这里放包含查询条件的DIV
			var paramData = {
				page:1,
				roleName : $("[name='roleName']").val(),
			};

			seajs.use([ "component/table" ], function(uiTable) {
				$.post("${ctx}/sysRole/ajaxPage.do",paramData,function(data){
					var table = new uiTable({
						 "con": "#tbwrap",//放table的容器
						 "data": {
							 "list": data.dataList//渲染需要的数据
						 },
						 "template": "tb_template",//渲染的模板
						 "pager": {//翻页
							 "con": "#j_pager",//翻页容器
							 "data": {
								 "currentPage": data.currentPage,//当前页
								 "pageCount": data.pageCount,
								 "rowCount": data.rowCount
							 },
							 //翻页样式
							 template: '<ul class="pagination" style="margin: 0;"><li><a title="首页" class="page_first" data-role="first" href="#">首页</a></li><li><a title="上一页" class="page_prev" href="#" data-role="prev">上一页</a></li><li class="pageNum" data-value="pageNum"><a></a></li><li><a title="下一页" class="page_next" href="#" data-role="next">下一页</a></li><li><a title="尾页" class="page_last" href="#" data-role="last">尾页</a></li></ul><div class="pageGo">共<span data-role="rowCount"></span>条 跳转到 <input  type="text" data-target="input" class="input_txt" style="width:80px;"/><a href="#" data-role="go" class="go">GO</a></div>'
						 }
					 });
					 table.getPager().bind("changePage", function (event, page, hander) {//点击翻页时
						var paramData = {
								page:page,
								roleName : $("[name='roleName']").val(),
						};
						 $.post("${ctx}/sysRole/ajaxPage.do",paramData,function(change){
							 table.render({//重新渲染
									list: change.dataList//传入新的渲染数据
								});
								hander({
									"currentPage": change.currentPage,
									"pageCount": change.pageCount,
									"rowCount": change.rowCount
								});
						 });
					 });
				});
			});
		}
		function clear() {
			$("#deptId").val("");
			$("#deptName").val("");
		}
		function showMenu() {
			var cityObj = $("#deptName");
			var cityOffset = $("#deptName").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
		
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes();
			if(nodes.length > 0) {
				var parentNameObj = $("#deptName");
				parentNameObj.attr("value", nodes[0].name);
				var parentDeptIdObj = $("#deptId");
				parentDeptIdObj.attr("value", nodes[0].id);
			}
			hideMenu();
		}
		function initTree(){
			var setting = { 
				data: { 
					simpleData: { 
						enable: true 
					} 
				} ,
				view:{showLine:false},
				async: { 
					enable: true, 
					url:"${ctx}/sysDept/deptTree.do", 
					autoParam:["id"], 
					dataType: "json",//默认text 
					//type:"get",//默认post 
					dataFilter: filter //异步返回后经过Filter 
					},
				callback:{ 
					onAsyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun,自动查询根节点下的所有部门数据-by p-chen1,20140519
					asyncError: zTreeOnAsyncError, //加载错误的fun 
					onClick:onClick			
				} }; 
			
				//treeId是treeDemo 
				function filter(treeId, parentNode, childNodes) { 
					if (!childNodes) return null; 
						for (var i=0, l=childNodes.length; i<l; i++) { 
							childNodes[i].name = childNodes[i].name.replace('',''); 
					} 
					return childNodes; 
				}
			
				function beforeClick(treeId,treeNode){ 
					if(!treeNode.isParent){ 
						return false; 
					}else{ 
						return true; 
					} 
				} 
				function zTreeOnAsyncError(event, treeId, treeNode){ 
					alert("异步加载失败!"); 
				} 
				function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){ 
				} 

				$.fn.zTree.init($("#treeDemo"),setting);
				zTree = $.fn.zTree.getZTreeObj("treeDemo");
		}
	</script>
	<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
	<script>
	     $(function () {
			$(".searchCon").perfectScrollbar();
			$(".resultCon").perfectScrollbar();
			resize();
            $(window).resize(function(){
				resize();
			});				
	    });
	    function resize(){
			//获取窗口高度
			var windowheight=$(window).height();
			var leftList = windowheight-40;
			$(".searchCon").css({"height":leftList+"px"});
			$(".resultCon").css({"height":leftList-12+"px"});
			//$(".tableMain").css({"height":windowheight-40-42-131+"px"});
			//$(".table_list").css({"height":windowheight-40-42-100-85+"px"});
			$(".searchCon").perfectScrollbar("update");
			$(".resultCon").perfectScrollbar("update");
		}
	</script>
	<%@ include file="/include/footer.jsp"%>
</body>
</html>
