projectx/web/templates/manage/system/user/list.tmpl

{{template "header"}}

<div class="layui-row layui-col-space15">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <div class="layui-colla-title">查询</div>
            <div class="layui-colla-content layui-show">
                <div class="layui-card">
                    <div class="layui-card-body layui-bzw-table">
                        <form class="layui-form" action="">
                            {{.CsrfTokenField}}
                            <div class="layui-form-item">
                                <div class="layui-form-item layui-inline">
                                    <select id="searchStatus">
                                        <option value="0">正常</option>
                                        <option value="-1">删除</option>
                                        <option value="9999">全部</option>
                                    </select>
                                </div>

                                <div class="layui-form-item layui-inline">
                                    <select id="searchName">
                                        <option value="userName">名称</option>
                                    </select>
                                </div>

                                <div class="layui-form-item layui-inline">
                                    <input type="text" id="searchKey" placeholder=""
                                        class="layui-input layui-form-group-input">
                                </div>

                                <div class="layui-form-item layui-inline">
                                    <button type="button" class="pear-btn pear-btn-md pear-btn-primary" lay-submit
                                        lay-filter="user-query">
                                        <i class="layui-icon layui-icon-search"></i>
                                        查询
                                    </button>
                                    <button type="reset" class="pear-btn pear-btn-md" lay-submit
                                        lay-filter="user-reset">
                                        <i class="layui-icon layui-icon-refresh"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 工具栏 -->
<script id="toolbar" type="text/html">
    {{ genBtn .AuthorizeMenus "add"}}
</script>

<div class="layui-card" style="margin-top: 15px;">
    <div class="layui-card-body">
        <table id="tablelist" lay-filter="tablelist"></table>
    </div>
</div>

<script type="text/html" id="actionBox">
    {{ genLink .AuthorizeMenus "edit"}}
</script>

{{define "js"}}
<script>
    layui.use(['table', 'form', 'jquery', 'util'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let util = layui.util;

        loadList();
        toolbar();
        tableActionTool();
        search();

        // 加载列表
        function loadList() {
            table.render({
                elem: '#tablelist',
                url: "/system/user/list",
                method: "POST",
                headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                where: getQueryParams(),
                height: 'full',
                page: true,
                cols: [[
                    { field: 'email', title: '邮箱', align: 'left', width: 180 },
                    { field: 'username', title: '用户名', align: 'left', width: 100 },
                    {
                        field: 'avatar', title: '头像', align: 'center', width: 90, templet: function (d) {
                            if (d.avatar === 0 || d.avatar === undefined || d.avatar === '') { return ''; }
                            if (d.avatar === '/statics/admin/images/avatar.jpg') {
                                return '<img src="/statics/admin/images/avatar.jpg" width=30 height=30 />';
                            }
                            return '<img src="https://school-1251542740.cos.ap-shanghai.myqcloud.com' + d.avatar + '" width=30 height=30 />';
                        }
                    },
                    { field: 'department_name', title: '部门', align: 'left', width: 100 },
                    { field: 'role_name', title: '角色', align: 'left', width: 100 },
                    {
                        field: 'gender', title: '性别', align: 'center', width: 50, templet: function (d) {
                            if (d.gender == 0) {
                                return '未知';
                            } else if (d.gender == 1) {
                                return '男';
                            } else if (d.gender == 2) {
                                return '女';
                            }
                        }
                    },
                    {
                        field: 'status', title: '状态', align: 'center', width: 90, templet: function (row) {
                            switch (row.status) {
                                case 0: return '正常';
                                case -1: return '删除';
                                default: return '其它';
                            }
                            return '';
                        }
                    },
                    { title: '操作', toolbar: '#actionBox', align: 'center', width: 100 },
                    { field: 'created_at', title: '创建时间', align: 'center', width: 160, templet: function (d) { return !d.created_at ? '' : util.toDateString(d.created_at) } },
                    { field: 'updated_at', title: '更新时间', align: 'center', width: 160, templet: function (d) { return !d.updated_at ? '' : util.toDateString(d.updated_at) } },
                ]],
                skin: 'line',
                toolbar: '#toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'exports'],
                request: {
                    pageName: 'page',
                    limitName: 'rows'
                }
            });
        }

        // 工具栏
        function toolbar() {
            table.on('toolbar(tablelist)', function (obj) {
                switch (obj.event) {
                    case 'add': add(); break;
                    case 'refresh': refresh(); break;
                }
            });

            function add(obj) {
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    area: ['95%', '95%'],
                    content: "/system/user/add"
                });
            }

            function refresh() {
                table.reload('tablelist');
            }
        }

        // 表格项操作按钮
        function tableActionTool() {
            table.on('tool(tablelist)', function (obj) {
                switch (obj.event) {
                    case 'edit': edit(obj); break;
                }
            });

            function edit(obj) {
                layer.open({
                    type: 2,
                    title: '修改',
                    shade: 0.1,
                    area: ['95%', '95%'],
                    content: "/system/user/edit?id=" + obj.data['id']
                });
            }

            function roleMenuRefresh(obj) {
                layer.confirm('确定要刷新角色权限吗？', { title: '提示' }, function (index, layero) {
                    $.ajax({
                        url: '/system/menu/roleMenuRefresh',
                        type: 'post',
                        headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                        dataType: 'json',
                        data: { "roleName": obj.data['name'] },
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.msg, { icon: 1, time: 2000 });
                            } else {
                                layer.msg(result.msg, { icon: 2 })
                            }
                        }
                    });
                    layer.close(index); // 关闭弹窗
                }, function (index, layero) {
                    layer.close(index); // 关闭弹窗
                });
            }
        }

        // 搜索条件
        function getQueryParams() {
            return {
                SearchStatus: $('#searchStatus').val(),
                SearchName: $('#searchName').val(),
                SearchKey: $('#searchKey').val()
            };
        }

        // 搜索
        function search() {
            form.on('submit(user-query)', function (data) {
                table.reload('tablelist', {
                    where: getQueryParams(),
                    page: {
                        curr: 1
                    }
                })
                return false;
            });
        }
    });
</script>
{{end}}

{{template "footer" .}}