projectx/internal/erpserver/templ/system/config/list.templ

package config

import (
	"context"

    "management/internal/erpserver/templ/base"
    "management/internal/pkg/mid"
	"management/internal/erpserver/templ/component"
)

templ List(ctx context.Context) {
    @base.Base(ctx, listCss(), listJs(ctx)) {
        {{ meuns := mid.GetCurMenus(ctx) }}
        @component.TemplBtn(meuns, true, "add", "reset_pear")
        @component.TemplLink(meuns, "edit", "refresh_cache")

        <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 for="name" 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>
    }
}

templ listCss() {
}

templ listJs(ctx context.Context) {
    {{ token := mid.GetCsrfToken(ctx) }}
    <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': '{{ token }}' },
                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': '{{ token }}' },
                        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_cache': refresh_cache(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_cache(obj) {
                layer.confirm('确定要刷新数据吗？', { title: '提示' }, function (index, layero) {
                    $.ajax({
                        url: '/system/config/refresh_cache',
                        type: 'post',
                        headers: { 'X-CSRF-Token': '{{ token }}' },
                        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>
}