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

@using Abp.Notifications
@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.VberSystemMgNotificationMg;
    ViewBag.ActiveMenu = activeMenu;
    ViewBag.Title =  L("NotificationTitle");

    string states = $"<option value=\"{UserNotificationState.Unread.ToStr()}\">{L("NoRead")}</option><option value=\"{UserNotificationState.Read.ToStr()}\">{L("HasRead")}</option>";
        var table = new VmTable(VzConsts.ApiAppUrl + "Notification/GetAll", ViewBag.ActiveMenu, new VmSearch(new List<VmSearchItem>()
        {
            new VmSearchItem("state", L("notificationState"), FType.I).WithRadio(L("NoRead"),UserNotificationState.Unread.ToStr(),L("HasRead"),UserNotificationState.Read.ToStr()),
            new VmSearchItem("date", L("notificationDate"), FType.Dn).WithDateRange()
        })).WithItems(new List<VmTableItem>()
        {
            new VmTableItem("name", L("notificationName")).WithSort(),
            new VmTableItem("text", L("notificationText")),
            new VmTableItem("time", L("notificationDate")).WithSort(),
            new VmTableItem("notificationState", L("notificationState"), "StateFormatter").WithSort(),
            new VmTableItem("", L("Actions"), "ActionFormatter").WithClassName("text-end"),
        });
    var modal = new VmModal().WithHeaderAndFooter("发送通知", "").WithBody( new VmModalBody(new List<VmInputBase>()
    {
        new VmInput("severity","通知类型").WithRadio("一般通知", NotificationSeverity.Success.ToStr(),"紧急通知",NotificationSeverity.Warn.ToStr()),
        new VmInputTextarea("message","通知内容")
    }));
}
<style>
   
</style>
@await Html.PartialAsync("_Table", table)
@await Html.PartialAsync("_Modal", modal)

@section scripts{
    <script type="text/javascript">
        let $table = $('#table');
        $(function() {
            $('#table_box #vber_search').find('div').eq(0).remove();
            $('#table_box [data-kt-table-toolbar="base"]').fadeOut();
            $('#table_box [data-kt-table-toolbar="ex-tool"]').hide()
                .append('<button type="button" class="btn btn-light-warning btn-sm me-2" onclick="ReadAll()"><i class="fas fa-book-reader"></i> 全部设为已读</button><button type="button" class="btn btn-light-danger btn-sm me-2" onclick=" DeleteAll()"><i class="far fa-minus-square"></i> 删除全部已读</button>')
                .append($('#table_box [data-kt-table-toolbar="base"] .menu').find('button').removeClass("mb-2")).fadeIn();
            $('#table_box [data-kt-table-toolbar="base"]').remove();

            var funs = LoadTable({
                table: 'table',
                responseHandler: function(res) {
                    let json = jQuery.parseJSON(res);
                    let result = {
                        recordsTotal: 0,
                        recordsFiltered: 0,
                        data: []
                    }
                    if (json.success) {
                        if (json.result.items.length > 0) {
                            var notifications = [];
                            json.result.items.forEach((v) => {
                                notifications.push(abp.userNotificationHelper.format(v, false));
                            });
                            result.recordsTotal = json.result.totalCount;
                            result.recordsFiltered = json.result.totalCount;
                            result.data = notifications;
                            console.log(result);
                        }
                    } else {
                        console.log('Table load failed');
                        if (json.error) {
                            if (json.error.details) {
                                return abp.message.error(json.error.details, json.error.message);
                            } else {
                                if (json.error.message && json.error.message.indexOf('登陆超时') >= 0) {
                                    return abp.message.error(json.error.message).done(function() {
                                        window.top.location.reload();
                                    });
                                } else {
                                    return abp.message.error(json.error.message || abp.ajax.defaultError.message);
                                }
                            }
                        }
                    }
                    return JSON.stringify(result);
                }
            });
            funs["btnSendNotification"] = function(url) {
                OpenModal({
                    url: url,
                    table:'table',
                    modal: 'modal'
                });
            }
      

        });


        function SetRead(id) {
            $.vbAjax4({
                url: abp.appUrl + 'Notification/SetNotificationAsRead',
                data: { id: id },
                success: function() {
                    abp.event.trigger('app.notifications.refresh', id);
                    RefreshTable();
                    abp.notify.success("已读成功！");
                }
            });
        }

        function ReadAll() {
            MsgConfirm("确认全部通知设为已读吗？",
                "全部已读",
                function() {
                    abp.userNotificationHelper.setAllAsRead(RefreshTable);
                });
        }

        function Delete(id) {
            let row = $table.VbTable('getRow', id);
            if (row) {
                MsgConfirm(`确认删除 [${row.name}]？`,
                    "删除通知",
                    function() {
                        $.vbAjax1({
                            url: abp.appUrl + 'Notification/DeleteNotification',
                            data: { id: id },
                            success: function() {
                                abp.event.trigger('app.notifications.refresh', id);
                                RefreshTable();
                            }
                        });
                    });
            }
        }

        function DeleteAll() {
            MsgConfirm("确认删除全部已读通知？",
                "删除全部",
                function() {
                    $.vbAjax1({
                        url: abp.appUrl + 'Notification/DeleteAllUserNotifications',
                        data: { state: @(UserNotificationState.Read.ToStr()) },
                        success: function() {
                            abp.event.trigger('app.notifications.refresh');
                            RefreshTable();
                        }
                    });
                });
        }


    </script>

    <script id="formatter-script">
        function ActionFormatter(v, r) {
            var readStr = `<span class="table-action" onclick="SetRead('${r.id}')">${icon}@(L("SetAsRead"))</span>`,
                deleteStr = `<span class="table-action" onclick="Delete('${r.id}')">${icon}@(L("DeleteNotification"))</span>`;
            var str = '';
            if (r.notificationState === 0) {
                str += readStr;
            }
            str += deleteStr;
            return str;
        }

        function StateFormatter(v) {
            var name = $('#hid-state option[value="' + v + '"]').text();
            if (v === 1) {
                return '<span class="badge badge-success">' + name + '</span>';
            } else
                return '<span class="badge badge-danger">' + name + '</span>';
        }

    </script>
}
<section style="display: none">
    <select id="hid-state">
        @Html.Raw(states)
    </select>
  
</section>