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

@using VberZero.Session
@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.Tools.StringModel

@{
    string activeMenu = PermissionNames.VberSystemMgUserMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    ViewBag.Title = L("UserTitle");
    string userTypeSelect = ViewBag.UserType, activeTypeSelect = ViewBag.IsActive, accountTypeSelect = ViewBag.AccountType, gender = ViewBag.Gender;
    string[] gender2 = ViewBag.Gender2,activeTypeSelect2=ViewBag.IsActive2;
    var accountType = AbpSession.GetAccountType();
    var userType = AbpSession.GetUserType();
    var userName = AbpSession.GetUserName();
    var searchItem = new List<VmSearchItem>()
    {
        new VmSearchItem("userName", L("userName")),
        new VmSearchItem("surname", L("realName")),
        new VmSearchItem("phoneNumber", L("phoneNumber")),
        new VmSearchItem("emailAddress", L("emailAddress")),
        new VmSearchItem("gender", L("genderType"), FType.I, EType.Equal).WithRadio(gender2),
        new VmSearchItem("isActive", L("activeState"), FType.B, EType.Equal).WithRadio(activeTypeSelect2 ),
        new VmSearchItem("userType", L("userType"), FType.I, EType.Equal).WithSelect(userTypeSelect ),
        //new SearchItem("lastLoginTime", "最后登陆时间", FieldType.Dn).SetDateItem(0),
    };
    if (accountType == VzDefinition.AccountType.System)
    {
        searchItem.Add(new VmSearchItem("accountType", L("accountType"), FType.In, EType.Equal).WithSelect(accountTypeSelect, true));
    }
    var searchForm = new VmSearch(searchItem);
    var table = new VmTable(VzConsts.ApiAppUrl + "User/GetAll", activeMenu, searchForm).AddItems(new List<VmTableItem>()
    {
        new VmTableItem("userName", L("userName")).WithSort(),
        new VmTableItem("surname", L("realName")),
        new VmTableItem("emailAddress", L("emailAddress")),
        new VmTableItem("phoneNumber", L("phoneNumber")),
        new VmTableItem("gender", L("genderType"), "GenderFormatter").WithSort(),
        new VmTableItem("userType", L("userType"), "UserTypeFormatter").WithSort(),
        new VmTableItem("accountType", L("accountType"), "AccountTypeFormatter").WithSort(),
        new VmTableItem("accountNo", L("accountState"), "AccountStateFormatter").WithSort(),
        new VmTableItem("isActive", L("activeState"), "ActiveStateFormatter").WithSort(),
    });
    var modalBody = new VmModalBody();
    modalBody.AddTab(new VmModalTab("base-info", "用户信息")
        .AddInputs( new List<VmInputBase>()
        {
            new VmInputHidden("id"),
            new VmInputHidden("userName"),
        })
        .AddGroup(new List<VmInputBase>
        {
            new VmInput("surname", L("realName")).WithRequired(),
            new VmInput("emailAddress", L("emailAddress")).WithRequired(),
            new VmInput("phoneNumber", L("phoneNumber")),
        },3)
        .AddGroup( new List<VmInputBase>()
        {
            new VmInput("accountType", L("accountType"))
                .WithSelect(accountTypeSelect)
                .WithRequired(),
            new VmInput("userType", L("userType"))
                .WithSelect(userTypeSelect)
                .WithRequired()
        })
        .AddGroup(new List<VmInputBase>
        {
            new VmInput("gender", L("genderType")).WithRadio(gender2).WithDefaultValue(VzDefinition.GenderType.Man.ToStr()),
            new VmInput("isActive", L("activeState")).WithRadio(activeTypeSelect2)
        })
        );
        if (userType == VzDefinition.UserType.Supper || userType == VzDefinition.UserType.System)
        {
            modalBody.AddTab("role-info", "用户角色", "<div id=\"modal-role-box\" data-init=\"false\"><div class=\"row\"></div></div>");
        }
    modalBody.AddTab("auth-info", "用户权限", "<div id=\"modal-auth-box\" data-init=\"false\"><div id=\"auth-tree\"></div></div>");
    var modal = new VmModal()
        .WithHeaderAndFooter(L("user"),"")
        .WithBody(modalBody);
  
}
@await Html.PartialAsync("_Table", table)


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

@section styles
{
    <style>
        .tab-pane {
            min-height: 250px;
        }
        #vb-tab_base-info {
            padding: 0;
        }
        #modal-role-box, #modal-auth-box {
            padding: 0 20%;
        }

        #modal-role-box {
            padding-right: 5%;
        }
    </style>
    <link href="/Metronic/assets/plugins/custom/jstree/jstree.bundle.css" rel="stylesheet" />
}

@section scripts
{
    <script>
        var $table=$('#table'), curUserId = 0;
        $(function() {
           window.funs = LoadTable({
                table:$table
            });
             
            $('#tab-nav_role-info').on('show.bs.tab.iwb',
                function() {
                    if (!$("#modal-role-box").data("init")) {
                        $.vbAjax4({
                            url: abp.appUrl + "user/GetRoles?userId=" + curUserId,
                            success: function(res) {
                                $("#modal-role-box").data("init", true);
                                if (res && res.items && res.items.length) {
                                    var str = "";
                                    res.items.forEach(function(v) {
                                        str +=
                                            `<label class="form-check form-check-custom form-check-solid form-check-sm col-md-6 mb-2"><input class="form-check-input" name="role" type="checkbox" data-id="${v.id}" data-name="${v.name}" title="${v.name}" ${v.isCheck ? "checked" : ""}><span class="form-check-label">${v.displayName}</span></label>`;
                                    });
                                    $("#modal-role-box .row").html(str);
                                }
                            }
                        });
                    }
                });
            $('#tab-nav_auth-info').on('show.bs.tab.iwb',
                function() {
                    if (!$("#modal-auth-box").data("init")) {
                        $.vbAjax4({
                            url: abp.appUrl + "user/GetPermissions?userId=" + curUserId,
                            success: function(res) {
                                $("#modal-auth-box").data("init", true);
                                if (res) {
                                    AuthFormatter(res);
                                }
                            }
                        });
                    }

                });
            funs["btnCreate"] = function(url) {
                curUserId = 0;
                $('#modal-role-box').html('<div class="row"></div>').data("init", false);
                $('#modal-auth-box').html('<div id="auth-tree"></div>').data("init", false);
                BtnCreate({
                    url: url,
                    data: { accountType: @(accountType.ToInt()),userType:@(VzDefinition.UserType.Ordinary.ToInt()), isActive: 'true' },
                    dataFun: GetSaveData
                });
            };
            funs["btnUpdate"] = function(url) {
                $('#modal-role-box').html('<div class="row"></div>').data("init", false);
                $('#modal-auth-box').html('<div id="auth-tree"></div>').data("init", false);
                var row = $table.VbTable("getSelection");
                if (row) {
                    curUserId = row.id;
                    BtnUpdate({
                            url: url,
                            disabled: "@Html.Raw(accountType==VzDefinition.AccountType.System&&userType.ToInt()<VzDefinition.UserType.Advanced.ToInt()?"":"userType,")@Html.Raw(userName== VberZero.BaseSystem.Users.User.AdminUserName||userName== VberZero.BaseSystem.Users.User.SystemUserName?"":"accountType,")userName",
                            dataFun: GetSaveData
                        },
                        row);
                }
            };
            funs["btnResetLock"] = function(url) {
                console.log("ResetLock");
                var row = $table.VbTable("getSelection");
                if (row) {
                    BtnConfirm(abp.localization.VberZero("UserUnLockConfirmContent"),
                        abp.localization.VberZero("UserUnLockConfirm"),
                        url,
                        row);
                }
            };
            funs["btnResetPwd"] = function (url) {
                console.log("ResetPwd");
                var row = $table.VbTable("getSelection");
                if (row) {
                    MsgConfirm(
                        "确定重置 【" + row.name + "(" + row.userName + ") 】的密码吗？", "重置密码",
                        function () {
                            $(document).IwbModal("create",
                                {
                                    url: url,
                                    data: { userName: row.userName, name: row.name, userId: row.id },
                                    title: "重置密码",
                                    modalBody: `
                            <div class="modal-body"><form class="form-horizontal iwb-form">
                                <input class="form-control " id="userId" name="userId" type="hidden" />
                                <div class="form-group row">
                                    <label class="col-sm-3 col-md-2 iwb-label " for="name">用户名</label>
                                    <div class="col-sm-9 col-md-10">
                                        <div class="input-group input-group-sm  " style="position: relative">
                                            <input class="form-control " id="userName" name="userName" type="text" placeholder="请输入用户名..."  disabled style="width:100%" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-md-2 iwb-label " for="name">姓名</label>
                                    <div class="col-sm-9 col-md-10">
                                        <div class="input-group input-group-sm  " style="position: relative">
                                            <input class="form-control " id="name" name="name" type="text" placeholder="请输入姓名..."  disabled style="width:100%" />
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-md-2 iwb-label iwb-label-sm iwb-label-required" for="adminPassword">管理员密码</label>
                                    <div class="col-sm-9 col-md-10">
                                        <div class="input-group input-group-sm  " style="position: relative">
                                            <input class="form-control required" id="adminPassword" name="adminPassword" type="password" placeholder="请输入管理员密码..." style="width:100%"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-md-2 iwb-label iwb-label-sm iwb-label-required" for="newPassword">新密码</label>
                                    <div class="col-sm-9 col-md-10">
                                        <div class="input-group input-group-sm  " style="position: relative">
                                            <input class="form-control required" id="newPassword" name="newPassword" type="text" placeholder="请输入新密码..." style="width:100%"/>
                                        </div>
                                    </div>
                                </div>
                            </form></div>`
                                });
                        });
                } else
                    abp.message.warn(abp.localization.VberZero("SelectRecordOperation"));
            };
            funs["btnActivate"] = function(url) {
                console.log("Activate");
                var row = $table.VbTable("getSelection");
                if (row) {
                    if (!row.isActive) {
                        BtnConfirm("确定激活 【" + row.name + "(" + row.userName + ") 】用户吗？", "激活用户", url, $table, row);
                    } else {
                        abp.message.warn("用户已激活，请问重复操作！");
                    }
                }
            };
            funs["btnDeActivate"] = function(url) {
                console.log("DeActivate");
                var row = $table.VbTable("getSelection");
                if (row) {
                    if (row.isActive) {
                        BtnConfirm("确定锁定 【" + row.name + "(" + row.userName + ") 】用户吗？", "锁定用户", url, $table, row);
                    } else {
                        abp.message.warn("用户已锁定，请问重复操作！");
                    }
                }
            };

        });

        function GetSaveData() {
            var data = $('#modal form').formSerialize();
            if ($('#modal-role-box').data('init')) {
                var roleNames = [];
                $('#modal-role-box input[name="role"]').each(function() {
                    if ($(this).is(":checked")) {
                        roleNames.push($(this).data("name"));
                    }
                });
                data.roleNames = roleNames;
            }
            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) {
            //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.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(id) {
            var authData = { Id: id, 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 UserTypeFormatter(v) {
            var name = $('#hid-userType 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-primary">' + name + '</span>';
            } else if (v === 3) {
                return '<span class="badge badge-light-success">' + name + '</span>';
            }
            return name;
        }
        function GenderFormatter(v) {
            var name = $('#hid-gender option[value="' + v + '"]').text();
            if (v === 1) {
                return '<span class="badge badge-light-success">' + name + '</span>';
            } else if (v === 2) {
                return '<span class="badge badge-light-danger">' + name + '</span>';
            } else  {
                return '<span class="badge badge-light-success">' + name + '</span>';
            }
            //return name;
        }
        function AccountStateFormatter(v, r) {
            if (r.accountType === 1) {
                return '<span class="badge badge-light-primary"> 不分配</span>';
            }
            if (v) {
                return '<span class="badge badge-light-success"> 已分配</span>';
            }
            return '<span class="badge badge-light-danger"> 未分配</span>';
        }
        function ActiveStateFormatter(v) {
            var name = $('#hid-activeType option[value="' + v + '"]').text();
            if (v) {
                return '<span class="badge badge-success"> ' + name + '</span>';
            }
            return '<span class="badge badge-danger"> ' + name + '</span>';
        }
    </script>
}

<section style="display: none">
    <select id="hid-accountType">
        @Html.Raw(accountTypeSelect)
    </select>
    <select id="hid-gender">
        @Html.Raw(gender)
    </select>
    <select id="hid-activeType">
        @Html.Raw(activeTypeSelect)
    </select>
    <select id="hid-userType">
        @Html.Raw(ViewBag.UserTypeAll)
    </select>
</section>