YwxAppThink/addon/blog/view/backend/comment/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">
                    <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-normal" id="batchApproveBtn">批量通过</button>
                <button type="button" class="layui-btn layui-btn-warm" id="batchRejectBtn">批量拒绝</button>
                <button type="button" class="layui-btn layui-btn-danger" id="batchDeleteBtn">批量删除</button>
            </form>
            <table class="layui-hide" id="commentTable" lay-filter="commentTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="rowTpl">
    {{# if (d.status == 0) { }}
    <a class="layui-btn layui-btn-xs" lay-event="approve">通过</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 keyword = '{$keyword|default=""}';
    $('select[name="status"]').val(status);
    $('#keywordInput').val(keyword);

    var renderTable = function () {
        table.render({
            elem: '#commentTable',
            url: '{:url("blog/backend.comment/index")}',
            where: { status: status, keyword: keyword },
            page: true,
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: 70, sort: true },
                { field: 'nickname', title: '用户', width: 140, templet: function (d) {
                    var av = d.avatar ? d.avatar : '/assets/images/avatar.png';
                    return '<img src="' + av + '" class="layui-nav-img" style="width:30px;height:30px;border-radius:50%;">' + (d.nickname || '-');
                } },
                { field: 'content', title: '评论内容', minWidth: 220 },
                { field: 'article_title', title: '文章', minWidth: 160, templet: function (d) {
                    if (d.article_url) {
                        return '<a href="' + d.article_url + '">' + (d.article_title || '-') + '</a>';
                    }
                    return d.article_title || '-';
                } },
                { field: 'create_text', title: '时间', width: 160 },
                { field: 'status', title: '状态', width: 90, templet: function (d) {
                    return d.status == 1
                        ? '<span class="status-badge status-approved">已通过</span>'
                        : '<span class="status-badge status-pending">待审核</span>';
                } },
                { title: '操作', width: 110, align: 'center', toolbar: '#rowTpl', fixed: 'right' }
            ]]
        });
    };
    renderTable();

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

    // 批量通过
    $('#batchApproveBtn').click(function () {
        batchOp('approve', '确定要批量通过选中的评论吗？');
    });
    // 批量拒绝
    $('#batchRejectBtn').click(function () {
        batchOp('reject', '确定要批量拒绝选中的评论吗？');
    });
    // 批量删除
    $('#batchDeleteBtn').click(function () {
        batchOp('delete', '确定要删除选中的评论吗？');
    });

    function batchOp(action, tip) {
        var checkData = table.checkStatus('commentTable').data;
        if (! checkData.length) {
            return layer.msg('请选择评论');
        }
        var ids = checkData.map(function (i) { return i.id; });
        layer.confirm(tip, function (index) {
            $.post('{:url("blog/backend.comment/batch")}', { action: action, 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(commentTable)', function (obj) {
        if (obj.event === 'approve') {
            $.post('{:url("blog/backend.comment/approve")}', { 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 });
                }
            });
        } else if (obj.event === 'delete') {
            layer.confirm('确定要删除这条评论吗？', function (index) {
                $.post('{:url("blog/backend.comment/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>