YwxAppThink/addon/blog/view/backend/article/index.html

<div class="layui-fluid">
    <div class="admin-title">文章管理</div>
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-inline" lay-filter="searchForm">
                <div class="layui-inline">
                    <select name="status">
                        <option value="all">全部状态</option>
                        <option value="1">已发布</option>
                        <option value="0">草稿</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <select name="audit">
                        <option value="all">全部审核</option>
                        <option value="1">待审</option>
                        <option value="2">通过</option>
                        <option value="3">驳回</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <input type="text" name="keyword" placeholder="搜索标题/内容" class="layui-input" id="keywordInput">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search">搜索</button>
                </div>
                <button type="button" class="layui-btn layui-btn-danger" id="batchDeleteBtn">批量删除</button>
            </form>
            <table class="layui-hide" id="articleTable" lay-filter="articleTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="rowTpl">
    <a class="layui-btn layui-btn-xs" href="{{ d.edit_url }}">编辑</a>
    {{# if (d.audit_status == 1) { }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="audit">通过</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="reject">驳回</a>
    {{# } }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<script>
layui.use(['table', 'layer', 'form'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.$;

    var status = '{$status|default="all"}';
    var audit = '{$audit|default="all"}';
    var keyword = '{$keyword|default=""}';
    $('select[name="status"]').val(status);
    $('select[name="audit"]').val(audit);
    $('#keywordInput').val(keyword);

    var renderTable = function () {
        table.render({
            elem: '#articleTable',
            url: '{:url("blog/backend.article/index")}',
            where: { status: status, audit: audit, keyword: keyword },
            page: true,
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: 70, sort: true },
                { field: 'title', title: '标题', minWidth: 220, templet: function (d) {
                    var html = '<a href="' + d.edit_url + '">' + d.title + '</a>';
                    if (d.is_top == 1) { html += ' <span class="layui-badge layui-bg-red">置顶</span>'; }
                    return html;
                } },
                { field: 'author', title: '作者', width: 120 },
                { field: 'category', title: '分类', width: 120 },
                { field: 'tags', title: '标签', width: 150, templet: function (d) { return d.tags || '-'; } },
                { field: 'status', title: '状态', width: 90, templet: function (d) {
                    return d.status == 1
                        ? '<span class="layui-badge layui-bg-green">已发布</span>'
                        : '<span class="layui-badge">草稿</span>';
                } },
                { field: 'audit_status', title: '审核', width: 90, templet: function (d) {
                    var map = { 0: '<span class="layui-badge">草稿</span>', 1: '<span class="layui-badge layui-bg-orange">待审</span>', 2: '<span class="layui-badge layui-bg-green">通过</span>', 3: '<span class="layui-badge layui-bg-red">驳回</span>' };
                    return map[d.audit_status] || '-';
                } },
                { field: 'view_count', title: '阅读', width: 80, sort: true, align: 'center' },
                { field: 'comment_count', title: '评论', width: 80, sort: true, align: 'center' },
                { field: 'like_count', title: '点赞', width: 80, sort: true, align: 'center' },
                { field: 'favorite_count', title: '收藏', width: 80, sort: true, align: 'center' },
                { field: 'share_count', title: '分享', width: 80, sort: true, align: 'center' },
                { field: 'create_text', title: '发布时间', width: 160 },
                { title: '操作', width: 130, align: 'center', toolbar: '#rowTpl', fixed: 'right' }
            ]]
        });
    };
    renderTable();

    // 搜索
    form.on('submit(search)', function () {
        var statusVal = $('select[name="status"]').val();
        var auditVal = $('select[name="audit"]').val();
        var kw = $('#keywordInput').val();
        table.reload('articleTable', { where: { status: statusVal, audit: auditVal, keyword: kw }, page: { curr: 1 } });
        return false;
    });

    // 批量删除
    $('#batchDeleteBtn').click(function () {
        var checkData = table.checkStatus('articleTable').data;
        if (! checkData.length) {
            return layer.msg('请选择要删除的文章');
        }
        var ids = checkData.map(function (i) { return i.id; });
        layer.confirm('确定要删除选中的 ' + ids.length + ' 篇文章吗？', function (index) {
            $.post('{:url("blog/backend.article/batch")}', { action: 'delete', ids: ids }, function (res) {
                if (res.code === 1) {
                    layer.msg(res.msg, { icon: 1 }, function () { renderTable(); });
                } else {
                    layer.msg(res.msg, { icon: 2 });
                }
            });
            layer.close(index);
        });
    });

    // 行操作
    table.on('tool(articleTable)', function (obj) {
        if (obj.event === 'audit') {
            layer.confirm('确认审核通过该文章？', function (index) {
                $.post('{:url("blog/backend.article/audit")}', { id: obj.data.id }, function (res) {
                    layer.msg(res.msg, { icon: res.code === 1 ? 1 : 2 }, function () { renderTable(); });
                });
                layer.close(index);
            });
        } else if (obj.event === 'reject') {
            layer.prompt({ title: '驳回理由', formType: 2 }, function (val, index) {
                $.post('{:url("blog/backend.article/reject")}', { id: obj.data.id, reason: val }, function (res) {
                    layer.close(index);
                    layer.msg(res.msg, { icon: res.code === 1 ? 1 : 2 }, function () { renderTable(); });
                });
            });
        } else if (obj.event === 'delete') {
            layer.confirm('确定要删除这篇文章吗？', function (index) {
                $.post('{:url("blog/backend.article/delete")}', { id: obj.data.id }, function (res) {
                    if (res.code === 1) {
                        layer.msg(res.msg, { icon: 1 }, function () { renderTable(); });
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                    }
                });
                layer.close(index);
            });
        }
    });
});
</script>