VberAdmin_V4/SourceCode/Src/VberAdmin.Web.Mvc/Views/Bs/SysRole.cshtml


@using Microsoft.AspNetCore.Mvc.Rendering
@using VberAdmin.Web.Models.Input
@using VberAdmin.Web.Models.Modals
@using VberAdmin.Web.Models.Search
@using VberAdmin.Web.Models.Table
@using VberZero
@using VberZero.Session
@using VberZero.Tools.StringModel

@{ string activeMenu = PermissionNames.VberSystemMgRoleMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    ViewBag.Title = L("RoleTitle");
    string roleTypeSelect = ViewBag.RoleType, activeTypeSelect = ViewBag.IsActive, accountTypeSelect = ViewBag.AccountType;
    var accountType = AbpSession.GetAccountType();
    var searchItem = new List<VmSearchItem>()
{
        new VmSearchItem("name", L("roleName")),
        new VmSearchItem("displayName", L("roleDisplayName")),
        new VmSearchItem("userType", L("roleType"), FType.I, EType.Equal).WithSelect(roleTypeSelect, true),
    };
    if (accountType == VzDefinition.AccountType.System)
    {
        searchItem.Add(new VmSearchItem("accountType", "账号类型", FType.I, EType.Equal).WithSelect(accountTypeSelect, true));
    }
    var searchForm = new VmSearch(searchItem);
    var table = new VmTable(VzConsts.ApiAppUrl + "Role/GetAll", activeMenu, searchForm).AddItems(new List<VmTableItem>()
{
        new VmTableItem("name", L("roleName")),
        new VmTableItem("displayName", L("roleDisplayName")),
        new VmTableItem("userType", L("roleType"), "RoleTypeFormatter"),
        new VmTableItem("accountType", L("accountType"), "AccountTypeFormatter"),
    });
   
    var tab1 = new VmModalTab("role-info", "角色信息")
        .AddInputs(new List<VmInputBase>()
        {
            new VmInputHidden("id"),
        })
        .AddGroup(new List<VmInputBase>()
        {
            new VmInput("name", L("roleName")),
            new VmInput("displayName", L("roleDisplayName")).WithRequired(),
        });
    if (accountType == VzDefinition.AccountType.System)
    {
        tab1.AddGroup(new List<VmInputBase>()
        {
            new VmInput("userType", L("roleType")).WithSelect(roleTypeSelect),
            new VmInput("accountType", L("accountType")).WithSelect(accountTypeSelect),
        });
    }
    else
    {
        tab1.AddInputs(new List<VmInputBase>()
        {
            new VmInput("userType", L("roleType")).WithSelect(roleTypeSelect),
            new VmInputHidden("accountType").WithDefaultValue(accountType.ToStr())
        });
    }
    tab1.AddInput(new VmInputTextarea("description", L("roleDescription")));
    var modalBody = new VmModalBody()
        .AddTab(tab1)
        .AddTab("auth-info", "角色权限", "<div id=\"modal-auth-box\" data-init=\"false\"><div id=\"auth-tree\"></div></div>");
    var modal = new VmModal().WithHeaderAndFooter(L("role"), "").WithBody(modalBody);


}
@section styles{
    <style>
        #modal-auth-box {
            padding: 0 20%;
        }
    </style>
    <link href="/Metronic/assets/plugins/custom/jstree/jstree.bundle.css" rel="stylesheet" />
}

@await Html.PartialAsync("_Table", table)

@await Html.PartialAsync("_Modal", modal)

@section scripts
{
    <script type="text/javascript">
        let $table = $('#table');
        $(function() {
            let curRoleId = 0;
            $('#tab-nav_auth-info').on('show.bs.tab.iwb',
                function() {
                    if (!$("#modal-auth-box").data("init")) {
                        $.vbAjax4({
                            url: abp.appUrl + "role/GetPermissions?roleId=" + curRoleId,
                            success: function(res) {
                                $("#modal-auth-box").data("init", true);
                                if (res) {
                                    AuthFormatter(res);
                                }
                            }
                        });
                    }

                });

            var funs = LoadTable();
            funs["btnCreate"] = function() {
                curRoleId = 0;
                $('#modal-auth-box').html('<div id="auth-tree"></div>').data("init", false);
                BtnCreate({
                    data: { accountType: @(accountType.ToInt()),userType:@(VzDefinition.UserType.Ordinary.ToInt()) },
                    dataFun: GetSaveData
                });
            };
            @{
                var disabled = AbpSession.GetUserType() == VzDefinition.UserType.Supper ? "" : ",userType";
            }
            funs["btnUpdate"] = function() {
                $('#modal-auth-box').html('<div id="auth-tree"></div>').data("init", false);
                var row = $table.VbTable("getSelection");
                if (row) {
                    curRoleId = row.id;
                    BtnUpdate({ disabled: "name,accountType,@(Html.Raw(disabled))", dataFun: GetSaveData });
                }
            };

        });

        function GetSaveData() {
            var data = $('#modal form').formSerialize();
            if ($('#modal-auth-box').data('init')) {
                var permissionNames = $('#auth-tree').jstree(true).get_selected(false)||[]; //获得所有选中节点，返回值为数组
                //console.log(1,permissionNames);
                //加上灰色的节点
                $(".jstree-undetermined").each(function () {
                    permissionNames.push($(this).parent().parent().attr('id'));
                });
                data.permissionNames = permissionNames;
            }
            return data;
        }

    </script>
    <script src="/Metronic/assets/plugins/custom/jstree/jstree.bundle.js"></script>
    <script>
        function AuthFormatter(data) {
            var authData = [];
            authData.push(data);
            authData = AuthDataConvert(authData).authData;
            console.log(authData);
            $("#auth-tree").jstree("destroy");
            $("#auth-tree").jstree({
                plugins: ["wholerow", "checkbox", "types"],
                core: {
                    themes: {
                        responsive: false
                    },
                    data: authData
                },
                types: {
                    default:
                    {
                        icon: "fa fa-folder m--font-warning"
                    },
                    file: {
                        icon: "fa fa-file  m--font-warning"
                    }
                }
            });
        }

        function AuthDataConvert(data) {
            var authData = [], j = 0;
            for (var i = 0; i < data.length; i++) {
                var item = data[i], newItem = {};
                newItem["id"] = item.name;
                newItem["text"] = item.displayName;
                newItem["icon"] = item.icon + "  m--font-warning ";
                newItem["state"] = {};
                newItem["state"].opened = item.isOpen;
                var childResult = { "authData": [], "isAuth": true };
                if (item.children && item.children.length > 0) {
                    childResult = AuthDataConvert(item.children);
                    newItem["children"] = childResult.authData;
                }
                if (!(item.isAuth && childResult.isAuth)) {
                    j++;
                }
                newItem["state"].selected = item.isAuth && childResult.isAuth;
                authData.push(newItem);
            }
            var result = { "authData": authData, "isAuth": j === 0 };
            return result;
        }

        function GetAuthData(roleId) {
            var authData = { Id: roleId, PermissionNames: [] };
            var permissionNames = $('#auth-tree').jstree(true).get_selected(false); //获得所有选中节点，返回值为数组
            //console.log(1,permissionNames);
            //加上灰色的节点
            $(".jstree-undetermined").each(function () {
                permissionNames.push($(this).parent().parent().attr('id'));
            });
            //console.log(2,permissionNames);
            authData.PermissionNames = permissionNames;
            return authData;
        }

    </script>
    <script>
        function RoleTypeFormatter(v) {
            var name = $('#hid-roleType option[value="' + v + '"]').text();
            if (v === 1) {
                return '<span class="badge badge-light-danger">' + name + '</span>';
            } else if (v === 2) {
                return '<span class="badge badge-light-success">' + name + '</span>';
            } else if (v === 3) {
                return '<span class="badge badge-light-warning">' + name + '</span>';
            } else if (v === 4) {
                return '<span class="badge badge-light-primary">' + name + '</span>';
            }
            return v;
        }
        function AccountTypeFormatter(v) {
            var name = $('#hid-accountType option[value="' + v + '"]').text();
            if (v === 1) {
                return '<span class="badge badge-light-danger">' + name + '</span>';
            } else if (v === 2) {
                return '<span class="badge badge-light-success">' + name + '</span>';
            } else if (v === 3) {
                return '<span class="badge badge-light-primary">' + name + '</span>';
            }
            return v;
        }

    </script>
}

<section style="display: none">
    <select id="hid-accountType">
        @Html.Raw(accountTypeSelect)
    </select>
    <select id="hid-roleType">
        @Html.Raw(ViewBag.RoleTypeAll)
    </select>
</section>