<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
 	 <base href="#springUrl('/assets/adminlte/')"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工作台</title>
 	  <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">
    
       <!-- DataTables -->
    <link rel="stylesheet" href="plugins/datatables/dataTables.bootstrap.css">
    
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
    <!-- Morris chart -->
    <link rel="stylesheet" href="plugins/morris/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="plugins/ztree/css/metroStyle/metroStyle.css" type="text/css"/>

  <!--validate css-->
    <link rel="stylesheet" href="plugins/jquery-validation/css/validate.css">
		<style type="text/css">
.ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
.ztree li ul.level0 {padding:0; background:none;}
	</style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

 <body class="hold-transition skin-blue sidebar-mini">
<!-- END HEAD -->
 <div class="wrapper">
    <div class="content-wrapper"  style="margin-left:0;">
    
     <section class="content-header">
          <h1>
             	角色管理
            <small>角色信息</small>
          </h1>
<!--           <ol class="breadcrumb"> -->
<!--             <li><a href="#springUrl('/page/user/showstatics')"><i class="fa fa-dashboard"></i>首页</a></li> -->
<!--             <li><a class="active">添加角色</a></li> -->
<!--           </ol> -->
        </section>
    
    
    
        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-xs-12">
            	    <!-- general form elements disabled -->
              <div class="box box-primary">
                	 <form id="roleform" role="form">
               			 <div class="box-body">
                		 	<div class="form-group">
                                        <label for="roleName">角色名称</label>
                                        <input type="text" class="form-control htmlescape" name="roleName" id="roleName" maxlength="20" placeholder="请输入角色名称">
                                        
                                    </div>
                                    <div class="form-group">
                                        <label  for="roleSign">角色标识</label>
                                 		<input type="text" class="form-control htmlescape" name="roleSign" id="roleSign" placeholder="请输入角色标识">
                                    </div> 
                                    
                                    
                                      <div class="form-group">
                                        <label  for="description">描述</label>
                                 		<input type="text" class="form-control htmlescape" name="description" id="description" placeholder="请输入描述">
                                    </div> 
                                    
                                    
                                    
                                     <div class="form-group zTreeDemoBackground left">
                                     	 <label >权限菜单</label>
       				 					<ul id="tree" class="ztree"></ul>
    								</div>


                                    
                                    
                        </div>
                                       <div class="box-footer">
                                                 <input class="btn btn-primary" id="save" type="submit" value="保存">
                                                <a href="#springUrl('/a/role')" class="btn btn-default">取消</a>
                                            
                                      
                                    </div>   
                 
               
                 </form>
                <!-- /.box-body -->
              </div><!-- /.box -->
              
              
            </div><!-- /.col -->
          </div><!-- /.row -->
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->  
   	
 

      <!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
      <div class="control-sidebar-bg"></div>
    </div><!-- ./wrapper -->
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
    <!-- SlimScroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>
<script src="plugins/bootstrap-maxlength/bootstrap-maxlength.min.js" type="text/javascript"></script>   
<script src="plugins/security/sha256.js" type="text/javascript"></script>

<script src="plugins/ztree/js/jquery.ztree.all.min.js" type="text/javascript"></script>

<script src="plugins/jquery-validation/js/jquery.validate.min.js"></script>
<script src="plugins/jquery-validation/js/localization/messages_zh.js"></script>
<script>
    var csrfheader = {name:'_csrf_header',value:'${_csrf.headerName}'};
    var csrftoken  = {name:'_csrf',value:'${_csrf.token}'};
</script>



<script src="common/js/cfapp.js"></script>

<!-- END PAGE LEVEL PLUGINS -->
<script>
var sSource = "#springUrl('/a/menu/menudata')";
var saveSource = "#springUrl('/a/role/insertrole')";

function saveRole()
{

    //alert( nodes.join(","));
}

function fnCallback(data)
{
	   var setting = {
               check: {enable: true, nocheckInherit: true}, view: {selectedMulti: false},
               data: {simpleData: {enable: true}}, callback: {
                   beforeClick: function (id, node) {
                       tree.checkNode(node, !node.checked, true, true);
                       return false;
                   }
               }
           };
   var zNodes = data.aaData;
  var tree =  $.fn.zTree.init($("#tree"), setting, zNodes);
   // 不选择父节点
   tree.setting.check.chkboxType = {"Y": "ps", "N": "s"};
   // 默认选择节点
   var ids = "${role.menuIds}".split(",");
   for (var i = 0; i < ids.length; i++) {
       var node = tree.getNodeByParam("id", ids[i]);
       try {
           tree.checkNode(node, true, false);
       } catch (e) {
       }
   }
   // 默认展开全部节点
   tree.expandAll(true);
}


    jQuery(document).ready(function () {
    	
    	Cfapp.init();
    	
    	
    	
        $.ajax({
            "type": "GET",
            "contentType": "application/json",
            "url": sSource,
            "dataType": "json",
            "success": fnCallback
        });
        
        
        
        $("#roleform").validate({
            rules: {
            	roleName: {
                    required: true,
                    htmlescape: true
                },
                roleSign: {
                    required: true,
                    htmlescape: true
                },
                description: {
                    required: true,
                    htmlescape: true
                }
                
            },
            messages: {
            	roleName: {
                    required: "请输入角色名称",
                    htmlescape: "请您不要输入特殊字符!"
                },
                roleSign: {
                    required: "请输入角色标识",
                    htmlescape: "请您不要输入特殊字符!"
                },
                description: {
                    required: "请输入角色描述",
                    htmlescape: "请您不要输入特殊字符!"
                }
            },
            submitHandler: function (form) {
            	
            	var ztree = $.fn.zTree.getZTreeObj("tree");
            	var childNodes = ztree.getCheckedNodes(true);;
                var nodes = new Array();
                var data = {"roleName":$("#roleName").val(),"roleSign":$("#roleSign").val(),"description":$("#description").val()};
                for(i = 0; i < childNodes.length; i++) 
                {
                	data["permission["+i+"].id"] = childNodes[i].id;
                }
                data._csrf_header=csrfheader.value;
                data._csrf=csrftoken.value;
                $.ajax({
                    "method": "post",
                    "url": saveSource,
                    "data":data,
                    "dataType": "json",
                    "success": function (retdata)
                    {
                    	  if (retdata.errorCode == 0) {
                              Cfapp.confirm({
                                  message: "新增角色成功",
                                  btnoktext: "继续添加",
                                  btncanceltext: "关闭",
                                  success: function () {
                                      location.href = "#springUrl('/a/role/roleform')";
                                  },
                                  cancel: function () {
                                      location.href = "#springUrl('/a/role')";
                                  }
                              });
                          }
                    }
                });
            	
            }

        });
        
        
        
        
    });
</script>

</body>


<!-- END BODY -->
</html>