<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">权限管理</a></li>
        <li class="active">角色管理</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-5 col-xs-8">
                    <label class="control-label  col-xs-4" for="roleName">角色名称:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="roleName">
                    </div>
                </div>
                <shiro:hasPermission name="role:list">
                    <div class="col-md-5 col-xs-4 " style="text-align:left;">
                        <button type="button" id="btn_query" class="btn btn-info">查询</button>
                    </div>
                </shiro:hasPermission>

            </div>

        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <shiro:hasPermission name="role:add">
                <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#roleModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
            </shiro:hasPermission>
            <shiro:hasPermission name="role:batchDelete">
                <button id="btn_batch_delete" type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
                </button>
            </shiro:hasPermission>
        </div>
        <table id="table"></table>
    </div>

</section>
<!-- 角色模态框 -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增角色</h4>
            </div>
            <div class="modal-body">
                <div>
                    <form class="form-horizontal" id="roleForm" method = 'post' th:action="@{/role/add}">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">角色名称 <span style="color: red">*</span> :</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="name" id="name" require="必填项"  placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="description" class="col-sm-3 control-label">角色描述 :</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="description" id="description" placeholder="">
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <div class="pull-right">
                                <button type="button" id="saveRole" class="btn btn-info">确定</button>
                                <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                            </div>
                        </div>
                        <!-- /.box-footer -->
                    </form>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<!-- 角色模态框 -->
<div id="roleDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">角色信息</h4>
            </div>
            <div class="modal-body">
                <div id="roleOpenWindow">
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- 分配权限 -->
<div id="assignPermissionModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">分配权限</h4>
            </div>
            <div class="modal-body">
                <ul id="permissionTree" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <div class="pull-right">
                    <button type="button" id="saveAssign" class="btn btn-info">确定</button>
                    <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<script>
    var editFlag = "[[${@perms.hasPerm('role:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('role:delete')}]]";
    var assignPermsFlag="[[${@perms.hasPerm('role:assignPerms')}]]";
    var roleId="";
    var roleIdStr;//批量
    var columns=[
        {checkbox: true },
        {
            field: 'name',
            title: '角色名称',
            align : "center"
        }, {
            field: 'description',
            title: '角色描述',
            align : "center"
        },
        {
            field: 'createTime',
            title: '创建时间',
            align : "center"
        },
        {
            field : 'operation',
            title : '操作',
            align : "center",
            formatter : function(value,
                                 row, index) {
                var edit = editFlag=="true"  ?  '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="editRole('+row.id+')">编辑</a>' : '';
                var assign = assignPermsFlag=="true"  ? '<a class="table-btn table-btn-info"  href="javascript:void(0)" onclick="assignPermsList('+row.roleId+')">分配权限</a>':'';
                var del = deleteFlag=="true"  ?  '<a  class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deleteRole('+row.roleId+')">删除</a>' : '';
                return edit + assign + del;
            }
        }];
    var options={
        id:"#table",
        url: '[[@{/role/list}]]',
        columns:columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams : queryParams
    }
    Core.initTable(options);

    //树-初始化设置
    var treeSetting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "parentId"
            }
        }
    };

    $(function () {
        /*查询*/
        $("#btn_query").click(function(){
            Core.refreshTable("#table");
        });
        /*新增*/
        $("#btn_add").click(function(){
            Core.clearError("#roleForm");
        });
        //批量删除
        $("#btn_batch_delete").click(function(){
            var checkedRows= Core.selectMutiData("#table");
            if(checkedRows!=false){
                Core.confirm("确定删除选中的"+checkedRows.length+"条记录？",function () {
                    roleIdStr="";
                    $.each(checkedRows, function (i, item) {
                        roleIdStr+=(item.roleId+",");
                    })
                    roleIdStr=roleIdStr.substring(0,roleIdStr.length-1);
                    Core.postAjax("[[@{/role/batch/delete}]]",{"roleIdStr":roleIdStr},function(data){
                        if(data.ret==0){
                            Core.refreshTable("#table");
                        }
                        layer.msg(data.msg);
                    },"get")
                })
            }
        });
        //新增-保存
        $("#saveRole").click(function(){
            if(doValidForm(roleForm)){
                Core.mask("#saveRole");
                Core.postAjax("[[@{/role/add}]]",$("#roleForm").serialize(),function (data) {
                    Core.unmask("#saveRole");
                    if(data.ret==0){
                        $("#roleModal").modal("hide");
                        $("#roleForm")[0].reset();
                        Core.refreshTable("#table")
                    }
                    layer.msg(data.msg);
                })
            };
        });
        /*保存分配*/
        $("#saveAssign").click(function () {
            Core.mask("#saveAssign")
            var permissionIdStr="";
            var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
            var nodes = treeObj.getCheckedNodes(true);
            for(var i=0;i<nodes.length;i++){
                if(i==(nodes.length-1)){
                    permissionIdStr+=nodes[i].permissionId;
                }else{
                    permissionIdStr+=nodes[i].permissionId+",";
                }
            }
            Core.postAjax( '[[@{/role/assign/permission}]]',{roleId:roleId,permissionIdStr:permissionIdStr},function (data) {
                Core.unmask("#saveAssign");
                if(data.ret==0){
                    $("#assignPermissionModal").modal("hide");
                }
                layer.msg(data.msg);
            });
        });
    });
    //查询参数
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            name: $("#roleName").val(),
            status: $("#status").val()
        };
        return temp;
    }
    /*编辑*/
    function editRole(id) {
        Core.load("#roleOpenWindow","[[@{/role/edit}]]?&id="+id, function(){
            $("#roleDetailModal").modal("show");
        },2);
    }
    /*删除*/
    function deleteRole(id) {
        Core.confirm("确定删除该角色？",function () {
            Core.postAjax("[[@{/role/delete}]]", {"roleId": id}, function (data) {
                if (data.ret==0) {
                    Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            }, "get")
        })
    }
    /*分配权限-列表查询*/
    function assignPermsList(id) {
        roleId=id;
        Core.postAjax("[[@{/role/assign/permission/list}]]",{"roleId":roleId},function(data){
            var zNodes=data;
            $.fn.zTree.init($("#permissionTree"), treeSetting, zNodes);
            $("#assignPermissionModal").modal("show");
        })
    }

</script>