We_Relese/Platform/Relese/Views/BaseSystem/SysRoles.cshtml

@using WePlatform
@using WePlatform.Authorization
@using WePlatform.Configuration
@using WePlatform.Views.Shared.Modals
@using WePlatform.Views.Shared.SearchForm
@using WePlatform.Views.Shared.Table
@{
    string activeMenu = PermissionNames.PagesSystemMgRoleMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    ViewBag.Title = L("RoleTitle");
    List<SelectListItem> roleType = ViewBag.RoleType;
    List<SelectListItem> activeType = ViewBag.IsActive;
    List<SelectListItem> accountType = ViewBag.AccountType;
    var searchItem = new List<SearchItem>()
{
new SearchItem("name",  L("roleName")),
new SearchItem("displayName",  L("roleDisplayName")),
new SearchItem("roleType",  L("roleType"), FieldType.I,ExpType.Equal).SetSelectItem(roleType,true),
};
    if (AbpSession.AccountType == 1)
    {
        searchItem.Add(new SearchItem("accountType", "账号类型", FieldType.I, ExpType.Equal).SetSelectItem(accountType));
    }
    var searchForm = new SearchFormViewModel(searchItem);
    var table = new TableViewModel(IwbConsts.ApiAppUrl + "Roles/GetAll", activeMenu, searchForm).SetFields(new List<FieldItem>()
{
new FieldItem("name", L("roleName")),
new FieldItem("displayName", L("roleDisplayName")),
new FieldItem("roleType", L("roleType"),"RoleTypeFormatter"),
new FieldItem("accountType", L("accountType"),"AccountTypeFormatter"),
});
}
@section styles{
    <link href="~/Content/Libs/jstree/themes/default/style.min.css" rel="stylesheet" />
}

@Html.Partial("Table/_Table", table)

@section modal{
    @{
        var inputs = new List<Input>()
{
new InputHide("id"),
new Input("name", L("roleName")),
new Input("displayName", L("roleDisplayName")),
new Input("roleType", L("roleType")).SetSelectOptions(roleType),
new InputTextarea("description", L("roleDescription")).SetNotRequired()

};
        if (AbpSession.AccountType == 1)
        {
            inputs.Add(new Input("accountType", L("accountType"))
                .SetSelectOptions(accountType));
            //inputs.Add(new Input("accountNo", InputTypes.List, "账号所属").SetNotRequired());
        }
        else
        {
            inputs.Add(new Input("accountType", value: AbpSession.AccountType + "", hide: true));
            inputs.Add(new Input("accountTypeName", L("accountType"), value: ViewBag.AccountTypeName).SetNotRequired());
            //inputs.Add(new Input("accountNo", InputTypes.List, "账号所属").SetNotRequired());
        }

        var modal = new ModalViewModel(L("role"), new ModalBodyViewModel(inputs));
        @Html.Partial("Modals/_Modal", modal)
    }
    <section>
        <!--Auth Modal -->
        <div class="modal fade" id="auth_Modal" role="dialog" aria-labelledby="ModalLabel_AUTH" aria-hidden="true">
            <div class="modal-dialog" role="document" style="min-height: 700px;width: 500px;">
                <div class="modal-content" style="">
                    @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel(L("roleAuthSetting"), ""))
                    <form>
                        <div class="modal-body" style=" padding: 10px 30px;">
                            <div class="" id="auth-tree"></div>
                        </div>
                    </form>
                    @Html.Partial("Modals/_ModalFooter", "0")

                </div>
            </div>
        </div>
    </section>
}

@section scripts
    {
    <script src="~/Content/Libs/jstree/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $table = LoadTable();
            var funs = window.iwbfuns  || { none: function () { console.log("No type"); } };
            funs["btnCreate"] = function() {
                BtnCreate({
                    data: { accountType: "@AbpSession.AccountType" }
                });
            };
            @{
                var disabled = AbpSession.UserType == UsersAndRolesTypeDefinition.Supper ? "" : ",roleType,accountType";
            }
            funs["btnUpdate"] = function () { BtnUpdate({ disabled: "name,accountTypeName@(Html.Raw(disabled))" }); };
            funs["btnAuth"] = function (url) {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    abp.ui.setBusy();
                    var roleId = row.id;
                    $.iwbAjax4({
                        url: abp.appUrl + 'Roles/GetPermissions?roleId=' + roleId,
                        success: function (res) {
                            $("#auth_Modal").on('show.bs.modal', function () {
                                AuthFormatter(res);
                                $("#auth_Modal").find("button.save-btn").off("click").on("click", function () {
                                    var authData = GetAuthData(roleId);
                                    $.iwbAjax1({
                                        url: url,
                                        success: function () { $("#auth_Modal").modal("hide"); },
                                        data: authData
                                    });
                                });
                            });
                            $("#auth_Modal").modal("show");
                        }
                    });
                } else
                    abp.message.warn(abp.localization.iwbZero("SelectRecordOperation"));
            };


            //ChangeAccountList(null,"@AbpSession.AccountType");
            // $("#accountType").on("change.accountType", ChangeAccountList);
        });


        //function ChangeAccountList(accountNo, accountType) {
        //    accountType = accountType||$("#accountType").val();
        //    if (accountType === "1") {
        //        $("#accountNo").closest(".form-group-sm").css("display", "none");
        //    } else {
        //        var url = window.appUrl + (accountType === "2" ? "LawyerInfo/GetSelectStrForNoAccount" : "CustomerContact/GetSelectStrForNoAccount");
        //        abp.ajax({
        //            url: url,
        //            type: 'POST',
        //            dataType: "json",
        //            success: function (res) {
        //                console.log(res);
        //                res = '<option value="">请选择...</option>' + res;
        //                $("#accountNo").closest(".form-group-sm").css("display", "block");
        //                if (accountNo) {
        //                    $("#accountNo").html(res).val(accountNo).select2();
        //                } else {
        //                    $("#accountNo").html(res).select2();
        //                }
        //            }
        //        });
        //    }
        //}
    </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"
                    }
                }
            });
            //[{
            //        text: "Same but with checkboxes",
            //        children: [{
            //                id:"",
            //                text: "initially selected",
            //                state: {
            //                    selected: !0
            //                    opened: !0
            //                    disabled: !0
            //                }
            //            }]
            //    }]
        }

        function AuthDataConvert(data) {
            //console.log(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.permDisplayName;
                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 = $('#modal #roleType option[value="' + v + '"]').text();
            if (v === 0) {
                return '<span class="label label-danger">' + name + '</span>';
            } else if (v === 1) {
                return '<span class="label label-success">' + name + '</span>';
            } else if (v === 2) {
                return '<span class="label label-warning">' + name + '</span>';
            } else if (v === 3) {
                return '<span class="label label-primary">' + name + '</span>';
            }
            return v;
        }
        function AccountTypeFormatter(v) {
            var name = $('#hid-accountType option[value="' + v + '"]').text();
            if (v === 1) {
                return '<span class="label label-danger">' + name + '</span>';
            } else if (v === 2) {
                return '<span class="label label-success">' + name + '</span>';
            }
            return v;
        }

    </script>
}

<section style="display:none">
    @Html.DropDownList("hid-accountType", accountType)
</section>