YwxAppThink/addon/blog/view/backend/user/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>
                        <option value="-1">删除</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="userTable" lay-filter="userTable"></table>
        </div>
    </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>

<script>
layui.use(['table', 'layer', 'form', 'http', 'ywxapp'], function () {
    var http = layui.http;
    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: '#userTable',
            url: '{:url("blog/backend.user/index")}',
            where: { status: status, keyword: keyword },
            page: true,
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'uid', title: 'UID', width: 80, sort: true },
                { field: 'account', title: '账号', width: 140 },
                { field: 'nickname', title: '昵称', width: 140 },
                { field: 'email', title: '邮箱', minWidth: 160 },
                { field: 'mobile', title: '手机号', width: 130 },
                { field: 'article_count', title: '文章数', width: 90, sort: true, align: 'center' },
                { field: 'status_text', title: '状态', width: 90, templet: function (d) {
                    var map = { '正常': 'layui-bg-green', '禁用': 'layui-bg-gray', '删除': 'layui-bg-red' };
                    var cls = map[d.status_text] || 'layui-bg-gray';
                    return '<span class="layui-badge ' + cls + '">' + d.status_text + '</span>';
                } },
                { field: 'create_at', title: '注册时间', width: 160 },
                { field: 'update_at', 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('userTable', { where: { status: statusVal, keyword: kw }, page: { curr: 1 } });
        return false;
    });

    // 批量删除
    $('#batchDeleteBtn').click(function () {
        var checkData = table.checkStatus('userTable').data;
        if (! checkData.length) {
            return layer.msg('请选择要删除的用户');
        }
        var ids = checkData.map(function (i) { return i.uid; });
        layer.confirm('确定要删除选中的 ' + ids.length + ' 个用户吗？', function (index) {
            http.post('{:url("blog/backend.user/batch")}', { ids: ids }).then(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(userTable)', function (obj) {
        if (obj.event === 'delete') {
            layer.confirm('确定要删除该用户吗？', function (index) {
                http.post('{:url("blog/backend.user/delete")}', { id: obj.data.uid }).then(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>