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

{{template "header"}}

<!-- 工具栏 -->
<script id="toolbar" type="text/html">
    {{ genBtn .AuthorizeMenus "add" "reset_pear"}}
    <button type="button" lay-event="search" lay-on="search" class="layui-btn layui-btn-primary layui-btn-sm">
        <i class="layui-icon layui-icon-search"></i>
    </button>
</script>

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

<div class="search-layer" id="search-layer" style="display: none;">
    <div class="layui-form layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-form-column">
                <label class="tips">名称</label>
                <input type="text" name="name" id="name" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
</div>

<div class="layui-panel">
    <table id="tablelist" lay-filter="tablelist"></table>
</div>

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

        table.render({
            elem: '#tablelist',
            url: "/system/config/list",
            method: "POST",
            headers: { 'X-CSRF-Token': $('#csrf_token').val() },
            where: getQueryParams(),
            height: function () {
                return $(window).height() - 22;
            },
            page: true,
            limit: 15,
            limits: [15, 30, 45, 60, 75, 90],
            cols: [[
                { field: 'key', title: '键', align: 'left', width: 180 },
                { field: 'value', title: '值', align: 'left', width: 600 },
                { title: '操作', toolbar: '#actionBox', align: 'center', width: 180 },
                { 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: 'grid',
            toolbar: '#toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'exports'],
            request: {
                pageName: 'page',
                limitName: 'rows'
            }
        });

        table.on('toolbar(tablelist)', function (obj) {
            switch (obj.event) {
                case 'add': add(); break;
                case 'search': search(); break;
                case 'reset_pear': resetPear(); break;
            }
        });

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

        function search() {
            layer.open({
                type: 1,
                offset: '20px',
                title: '搜索',
                content: $('#search-layer'), // 捕获的元素
                shade: 0.1,
                shadeClose: false,
                scrollbar: false,
                resize: false,
                move: false,
                skin: 'search-layer-open',
                area: ['50%', '350px'],
                btn: ['搜索', '重置'],
                btn1: function (index, layero) {
                    search_btn();
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    $('#name').val('');
                    return false;
                }
            });
        }

        function resetPear(obj) {
            layer.confirm('确定要重置pear吗？', { title: '提示' }, function (index, layero) {
                $.ajax({
                    url: '/system/config/reset_pear',
                    type: 'post',
                    headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                    dataType: 'json',
                    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); // 关闭弹窗
            });
        }

        table.on('tool(tablelist)', function (obj) {
            switch (obj.event) {
                case 'edit': edit(obj); break;
                case 'refresh': refresh(obj); break;
            }
        });

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

        function refresh(obj) {
            layer.confirm('确定要刷新数据吗？', { title: '提示' }, function (index, layero) {
                $.ajax({
                    url: '/system/config/refresh',
                    type: 'post',
                    headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                    dataType: 'json',
                    data: { "key": obj.data['key'] },
                    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 {
                SearchKey: $('#name').val()
            };
        }

        // 搜索
        function search_btn() {
            table.reload('tablelist', {
                where: getQueryParams(),
                page: {
                    curr: 1
                }
            })
            return false;
        }
    });
</script>
{{end}}

{{template "footer" .}}