@using Microsoft.AspNetCore.Mvc.Rendering
@using VberAdmin.Web.Models.Search
@using VberAdmin.Web.Models.Table
@using VberZero
@using VberZero.Authorization
@using VberZero.Tools.StringModel
@{
    string activeMenu = PermissionNames.VberSystemMgLogMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    string serviceNames = ViewBag.ServiceNames;
    string loginResult = $"<option value=\"\">请选择登录结果</option>" +
                         $"<option value=\"{VzLoginResultType.Success.ToStr()}\">{VzLoginResultType.Success}</option>" +
                         //$"<option value=\"{VzLoginResultType.InvaliduserNameOrEmailOrPhone.ToStr()}\">{VzLoginResultType.InvaliduserNameOrEmailOrPhone}</option>" +
                         $"<option value=\"{VzLoginResultType.InvalidPassword.ToStr()}\">{VzLoginResultType.InvalidPassword}</option>" +
                         $"<option value=\"{VzLoginResultType.UserIsNotActive.ToStr()}\">{VzLoginResultType.UserIsNotActive}</option>" +
                         $"<option value=\"{VzLoginResultType.LockedOut.ToStr()}\">{VzLoginResultType.LockedOut}</option>";
}

@{
    /**/
    ViewBag.Title = "系统日志管理";
    var table1 = new VmTable(VzConsts.ApiAppUrl + "AuditLog/GetAllLogin", activeMenu, new VmSearch(new List<VmSearchItem>()
    {
        new VmSearchItem("userName", L("realName")),
        new VmSearchItem("result",L("loginResult")).WithSelect(loginResult),
        new VmSearchItem("creationTime",L("loginTime")).WithDateRange(),
        new VmSearchItem("clientIpAddress", (L("clientIpAddress"))),
        new VmSearchItem("clientName", L("clientName")),
    })).AddItems(new List<VmTableItem>()
    {
        new VmTableItem("userName", L("realName")),
        new VmTableItem("userNameOrEmailOrPhone", L("userNameOrEmailOrPhone")),
        new VmTableItem("loginResult", (L("loginResult"))).WithFormatter("LoginResultFormatter"),
        new VmTableItem("creationTime", (L("loginTime"))).WithFormatter("DateTimeFormatter"),
        new VmTableItem("clientIpAddress", (L("clientIpAddress"))),
        new VmTableItem("clientName", (L("clientName"))),
        new VmTableItem("browserInfo", (L("browserInfo"))).WithTip(40),
    }).WithPage(15, 30, 50);
    var table2 = new VmTable(VzConsts.ApiAppUrl + "AuditLog/GetAll",null,  new VmSearch(new List<VmSearchItem>()
    {
        new VmSearchItem("userName", L("realName")),
        new VmSearchItem("executionTime",L("executionTime")).WithDateRange(),
        new VmSearchItem("serviceName",L("serviceName")).WithSelect(serviceNames,other:"onchange=\"QueryMethodName(this)\""),
        new VmSearchItem("methodName",L("methodName")).WithSelect(""),
        new VmSearchItem("clientIpAddress", (L("clientIpAddress"))),
        new VmSearchItem("clientName", L("clientName")),
    },"vber_search2"),"table2").AddItems(new List<VmTableItem>()
    {
        new VmTableItem("userName", (L("realName"))),
        new VmTableItem("serviceName", (L("serviceName"))),
        new VmTableItem("methodName", (L("methodName"))),
        new VmTableItem("executionTime", (L("executionTime"))).WithFormatter("DateTimeFormatter"),
        new VmTableItem("clientIpAddress", (L("clientIpAddress"))),
        new VmTableItem("clientName", (L("clientName"))),
        new VmTableItem("browserInfo", (L("browserInfo"))).WithTip(40),
    }).WithPage(15, 30, 50);
   
   
}
<ul class="nav nav-tabs nav-line-tabs mb-5 fs-5">
    <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_pane_login">登录日志</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_pane_log">操作日志</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active " id="tab_pane_login">

        @await Html.PartialAsync("_Table", table1)
    </div>
    <div class="tab-pane fade" id="tab_pane_log">
        @await Html.PartialAsync("_Table", table2)
    </div>
</div>


@section scripts
{
    <script type="text/javascript">
        $(function () {
            LoadTable();
            LoadTable({
                table:'table2',
                searchForm:"vber_search2"
            });
        });
        function QueryMethodName(_this) {
            var value = $(_this).val();
            if (value) {
                $.vbAjax4({
                    url: abp.appUrl + "Query/GetLogMethodSelectStr",
                    data: { ServiceName: value },
                    success: (res) => {
                        if (res) {
                            $('#vber_search2 [name="methodName"]').html(res).select2();

                        }
                    }
                });
            }
        }

    </script>

    <script>
      function LoginResultFormatter(v, r) {
          switch (r.result) {
            case @(VzLoginResultType.Success.ToStr()):
                return '<span class="badge badge-light-success">'+ v  + '</span>';
            default:
                return '<span class="badge badge-light-danger">'+ v  + '</span>';
          }
      }
    </script>
}