
@{
    ViewData["Title"] = "设置权限";
    Layout = "~/Pages/Shared/_MainLayout.cshtml";
    ViewBag.Nav = new string[] { "系统设置", "权限设置" };
}

<div class="row">
    <div class="col-sm-12">
        <div class="row" style="min-height:600px;">
            <div class="col-sm-3">
                <div style="background:#fff;-moz-box-shadow:3px 3px 8px #bbb; -webkit-box-shadow:3px 3px 3px #bbb; box-shadow:3px 3px 8px #bbb;">
                    <div style="margin-left:10px;padding-top:15px;padding-bottom:20px;">
                        <h3>角色<span style="font-size:13px;color:#aaa;">(请选择角色)</span></h3>
                        <div id="role_contain" style="margin-top:10px;margin-bottom:30px;height:540px;overflow-y:auto;">
                            @foreach (var item in ViewBag.roles)
                            {
                                <div style="margin:3px 100px 3px 3px;padding:8px 8px;border-bottom:solid 1px #eee;" val="@(item.id)">@(item.name)</div>
                            }
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3" style="padding-left:0px;">
                <div style="background:#fff;-moz-box-shadow:3px 3px 8px #bbb; -webkit-box-shadow:3px 3px 3px #bbb; box-shadow:3px 3px 8px #bbb;">
                    <div style="margin-left:10px;padding-top:15px;padding-bottom:20px;">
                        <h3 style="margin-top:20px;">归属角色的用户</h3>
                        <div>
                            <div style="border-bottom:solid 1px #eee;padding-bottom:10px;">
                                <select id="sel_user" class="clselect" style="padding-top:3px;padding-bottom:3px;">
                                    <option value="">请选择用户</option>
                                    @foreach (var item in ViewBag.users)
                                    {
                                        <option value="@(item.userId+"_"+item.userName)">@(item.userName)</option>
                                    }
                                </select>
                                <button class="btn btn-success" onclick="SaveUserToRole()">添加</button>
                            </div>
                            <div id="user_contain" style="margin-top:10px;">
                                @*<div id="rela_2" style="padding:5px;">Allan<span style="margin-left:5px" onclick="del(2);">X</span></div>*@
                            </div>
                            <div style="clear:both;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3" style="padding-left:0px;">
                <div style="background:#fff;-moz-box-shadow:3px 3px 8px #bbb; -webkit-box-shadow:3px 3px 3px #bbb; box-shadow:3px 3px 8px #bbb;">
                    <div style="margin-left:10px;padding-top:15px;padding-bottom:20px;">
                        <h3 style="margin-top:20px;">已授权菜单<span style="font-size:13px;color:#aaa;">(已勾选的)</span></h3>
                        <div id="menu_contain">
                            <input id="chk_all" name="chk_all" type="checkbox" onclick="ChkAll()" /><label for="chk_all" onclick="ChkAll()">全选</label>
                            <div id="ztree" class="ztree" style="max-height: 800px;overflow: auto;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3" style="padding-left:0px;">
                <div style="background:#fff;-moz-box-shadow:3px 3px 8px #bbb; -webkit-box-shadow:3px 3px 3px #bbb; box-shadow:3px 3px 8px #bbb;">
                    <div style="margin-left:10px;padding-top:15px;padding-bottom:20px;">
                        <h3 style="margin-top:20px;">已授权导出权限<span style="font-size:13px;color:#aaa;">(已勾选的)</span></h3>
                        <div id="menu_contain">
                            <input id="chk_export_all" name="chk_export_all" type="checkbox" onclick="Chk_Export_All()" /><label for="chk_export_all" onclick="Chk_Export_All()">全选</label>
                            <div id="ztree_export" class="ztree" style="max-height: 800px;overflow: auto;">
                                @if (ViewBag.listcode.Count > 0)
                                {
                                    foreach (var item in ViewBag.listcode)
                                    {
                                        <div style="border-bottom:solid 1px #eee;height:30px;line-height:30px;">
                                            <input id="@item.code" type="checkbox" class="chk_export" />
                                            <label for="@item.code">@item.name</label>
                                        </div>
                                    }
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-bottom:20px;">
            <div class="col-sm-12" style="text-align:center;">
                <button class="btn btn-primary" onclick="SaveMenus();">保存菜单权限</button>
                <button class="btn btn-primary" onclick="SaveExport();" style="margin-left:5px;">保存导出权限</button>
            </div>
        </div>
    </div>
</div>

@section css{
    <link href="~/css/select2/select2.min.css" rel="stylesheet" />
    <link href="~/css/chosen_v1.6.2/chosen.min.css" rel="stylesheet" />
    <link href="~/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <style>
        ul{padding:0px;margin:0px;}
        .mules {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .activerole {
            background: #21AB62;
            color: #fff
        }

        .muser{border:solid 1px #eee;padding:5px 10px;border-radius:5px 5px;float:left;margin-right:8px;margin-top:8px;}
        .muser:hover{background-color:aliceblue}
    </style>
}

@section scripts{
    <script src="~/js/jquery.ztree.core.min.js"></script>
    <script src="~/js/jquery.ztree.excheck.min.js"></script>
    <script src="~/css/select2/select2.min.js"></script>
    <script src="~/css/chosen_v1.6.2/chosen.jquery.min.js"></script>
    <script type="text/javascript">
        var zTreeObj;
        $(document).ready(function () {
            $('#role_contain').find('div').each(function () {
                var obj = $(this);
                obj.click(function () {
                    $('.activerole').each(function () {
                        $(this).removeClass('activerole');
                    })

                    obj.addClass('activerole');

                    getInfo(obj.attr('val'));
                })
            })

            getBaseMenu();

            $(".clselect").chosen({ width: '150px' });
        })

        function getBaseMenu() {
            $.submit({
                url: '@Url.Content("~/Users/Home/GetMenus")',
                type:'POST',
                paramData: '',
                func: function (result) {
                    if (result != undefined && result != null) {
                        var setting = {
                            check: {
                                chkStyle: 'checkbox',
                                enable: true
                            }
                        };

                        zTreeObj = $.fn.zTree.init($("#ztree"), setting, result);
                    }
                    else {
                        alert('获取菜单失败！');
                    }
                }
            })
        }

        function getInfo(id) {
            $.submit({
                url: '@Url.Content("~/Users/Home/GetRoleInfo")',
                type:'POST',
                paramData: 'roleid='+id,
                func: function (result) {
                    if (result.success) {
                        $('#user_contain').html('');
                        $('#chk_all').prop('checked', false);
                        for (var item in result.rela) {
                            var obj_rela = result.rela[item];
                            $('#user_contain').append('<div class="muser" id="rela_' + obj_rela.id + '">' + obj_rela.username + '<button style="margin-left:5px;" class="btn btn-xs btn-danger" onclick="del(' + obj_rela.id + ');" >删除</button></div>');
                        }
                        
                        $('#chk_export_all').prop('checked', false);
                        $('.chk_export').prop('checked', false);
                        for (var i in result.codes) {
                            $('#' + result.codes[i].code).prop('checked', true);
                        }

                        zTreeObj.checkAllNodes(false);

                        //选中已授权的权限
                        for (var item in result.menus) {
                            if (result.menus[item].isall == 1) {
                                zTreeObj.checkAllNodes(true);
                                $('#chk_all').prop('checked', true);

                                return false;
                            }
                            var node = zTreeObj.getNodeByParam("id", result.menus[item].menuid, null);
                            if (node != null && node != undefined) {
                                zTreeObj.checkNode(node, true, false);
                            }
                        }
                    }
                }
            })
        }

        function SaveUserToRole() {
            var objRole = $('.activerole');

            if (objRole.length==0) {
                alert('请选择角色！');
                return false;
            }

            var roleid = objRole.first().attr('val');
            var user = $('#sel_user').val();
            if (user == '') {
                alert('请选择员工');
                return false;
            }

            var arr = user.split('_');
            if (arr.length != 2) {
                layer.msg('员工信息异常，请刷新页面再重试！');
                return false;
            }

            $.submit({
                url: '@Url.Content("~/Users/Home/SaveRoleUser")',
                type:'POST',
                paramData: 'userid=' + arr[0] + '&username='+ arr[1] + '&roleid=' + roleid,
                func: function (result) {
                    if (result.success) {
                        $('#user_contain').append('<div class="muser" id="rela_' + result.dataid + '">' + arr[1] + '<button style="margin-left:5px;" class="btn btn-xs btn-danger" onclick="del(' + result.dataid + ');" >删除</button></div>');
                        layer.msg('提交成功！');
                    }
                    else {
                        alert('提交失败，请重试！');
                    }
                }
            })
        }

        function del(id) {
            
            $.submit({
                url: '@Url.Content("~/Users/Home/DelRoleUser")',
                paramData: 'id=' + id,
                type:'POST',
                func: function (result) {
                    if (!result.success) {
                        layer.msg(result.msg);
                    }
                    else {
                        $('#rela_' + id).remove();
                    }
                }
            })
        }

        function SaveMenus() {
            var objRole = $('.activerole');

            if (objRole.length == 0) {
                alert('请选择角色！');
                return false;
            }

            var roleid = objRole.first().attr('val');

            var s = '';

            var nodes = zTreeObj.getCheckedNodes();
            for (var i in nodes) {
                s += (nodes[i].id) + '|';
            }

            var chk = $('#chk_all').prop('checked');

            $.submit({
                url: '@Url.Content("~/Users/Home/SaveRoleMenus")',
                paramData: 'roleid=' + roleid + '&s=' + s + '&isall=' + (chk?1:0),
                type:'POST',
                func: function (result) {
                    if (result.success) {
                        layer.msg('提交菜单权限成功！');
                        return false;
                    }
                    else {
                        layer.msg(result.msg);
                    }
                }
            })

        }

        function SaveExport() {
            var objRole = $('.activerole');

            if (objRole.length == 0) {
                alert('请选择角色！');
                return false;
            }

            var roleid = objRole.first().attr('val');

            var s = '';

            $('.chk_export').each(function () {
                if ($(this).prop('checked')) {
                    s += $(this).attr('id') + '|';
                }
                
            })

            $.submit({
                url: '@Url.Content("~/Users/Home/SaveRoleExport")',
                paramData: 'roleid=' + roleid + '&s=' + s,
                type:'POST',
                func: function (result) {
                    if (result.success) {
                        layer.msg('提交导出权限成功！');
                        return false;
                    }
                    else {
                        layer.msg(result.msg);
                    }
                }
            })
        }


        function ChkAll() {
            var chk = $('#chk_all').prop('checked');

            if (chk) {
                $('#chk_all').prop('checked', false);
                zTreeObj.checkAllNodes(false);
            }
            else {
                $('#chk_all').prop('checked', true);
                zTreeObj.checkAllNodes(true);
            }
        }

        function Chk_Export_All() {
            var chk = $('#chk_export_all').prop('checked');

            if (chk) {
                $('#chk_export_all').prop('checked', false);
                $('.chk_export').prop('checked',false);
            }
            else {
                $('#chk_export_all').prop('checked', true);
                $('.chk_export').prop('checked', true);
            }
        }


    </script>
}

