<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
 <%@include file="/views/common.jsp"%>
<link rel="stylesheet" href="${path}/static/css/metroStyle/metroStyle.css">
<script src="${path}/static/js/jquery.ztree.all.min.js"></script>
</head>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container demoTable">
    <button class="layui-btn layui-btn-sm" lay-event="add" ><i class="layui-icon layui-icon-add-circle-fine" style="font-size:20px;font-weight:bold"></i> 新增角色</button>
  </div>
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"style="color:white;font-size:20px"></i>编辑</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editPer"><i class="layui-icon layui-icon-auz"style="color:white;font-size:20px"></i>修改权限</a>
</script>
<script type="text/html" id="statusTpl">
  <input type="checkbox" name="isRegist" value="{{d.roleId}}"  lay-skin="switch" lay-text="是|否" lay-filter="statusDemo" {{ d.isRegist == '1'? 'checked' : '' }}>
</script>
<body>
	<br>
	<form class="layui-form" action="">
		<div class="layui-inline">
			<label class="layui-form-label">角色名</label>
			<div class="layui-input-inline">
				<input type="text" id="roleName" name="roleName" placeholder="请输入角色名称"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<div class="layui-input-inline">
				<button class="layui-btn" id="searchBtn" lay-submit
					lay-filter="formDemo" style="margin-left: 15px">
					<i class="layui-icon layui-icon-search"></i> 查询
				</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	
	<div class="layui-fluid">
		<div class="layui-row">
			<table class="layui-hide" id="roleTable"lay-data="roleTable" lay-filter="roleTable"></table>
			 <div class="layui-col-md12" id="editPers" style="display:none;">
	            <h3>角色权限</h3>
	            <hr>
	            <ul id="treeDemo" class="ztree"></ul>
	            <hr>
	            <button onclick="assignPers();" class="layui-btn layui-btn-fluid">授权</button>
	        </div>
		</div>
	</div>
	<script type="text/javascript">
		var zTreeObj;
	    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
	    var setting = {
	        check : {
	            enable: true,
	            chkStyle: "checkbox"
	        },
	        data: {
	            key: {
	                name: "perName"
	            }
	        }
	    };
	    $.get('${path}/sysPermission/parentList',function (zNodes) {
	        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
	        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
	    })
		//给用户授权
		var roleId ;
		function assignPers(){
			//获取选中用户的权限编号
			var nodes = zTreeObj.getCheckedNodes(true);
			var str = "";
			$.each(nodes,function(){
				str += this.perId +",";
			});
			str = str.substring(0,str.length - 1);
			//发送请求，改变用户权限
			$.post("${path}/assignPers",{
				roleId :roleId,
				persIds:str
			},function(){
				layer.msg('授权成功~',{icon:1});
			});
		}
	</script>
	</script>
	<script src="${path}/js/role.js" charset="utf-8"></script>
</body>

</html>