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

{layout name="layout"} 

{block name="content"}
<div class="layui-card">
    <div class="layui-card-header">我的文章</div>
    <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>
            <a href="{:url('blog/member.article/create')}" class="layui-btn layui-btn-normal">写文章</a>
            <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>

<script type="text/html" id="rowTpl">
    <a class="layui-btn layui-btn-xs" href="{{ d.edit_url }}">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>
{/block}

{block name="js"}
<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: '#articleTable',
            url: '{:url("blog/member.article/index")}',
            where: { status: status, 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.detail_url + '" target="_blank">' + d.title + '</a>';
                    if (d.is_top == 1) { html += ' <span class="layui-badge layui-bg-red">置顶</span>'; }
                    return html;
                } },
                { field: 'category', title: '分类', width: 120 },
                { 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: '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 kw = $('#keywordInput').val();
        table.reload('articleTable', { where: { status: statusVal, 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/member.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 === 'delete') {
            layer.confirm('确定要删除这篇文章吗？', function (index) {
                $.post('{:url("blog/member.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>
{/block}