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

package menu

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, false, "add", "refresh_cache")
        @component.TemplLink(meuns, "add_children", "edit")

        <div class="layui-panel">
            <table class="layui-hide" 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', 'treeTable'], function () {
            let $ = layui.jquery;
            let table = layui.table;
            let treetable = layui.treeTable;
            let form = layui.form;
            let util = layui.util;

            treetable.render({
                elem: '#tablelist',
                url: '/system/menu/list',
                method: 'post',
                headers: { 'X-CSRF-Token': '{{ token }}' },
                where: getQueryParams(),
                height: function () {
                    return $(window).height() - 22;
                },
                cols: [[
                    { field: 'name', title: '名称', width: 360 },
                    { field: 'display_name', title: '显示名称', width: 120, align: 'center' },
                    {
                        field: 'type', title: '类型', width: 100, align: 'center', templet: function (d) {
                            switch (d.type) {
                                case 'node': return '菜单节点';
                                case 'menu': return '菜单';
                                case 'btn': return '按钮';
                            }
                            return '';
                        }
                    },
                    {
                        field: 'avatar', title: '图标', width: 50, align: 'center', templet: function (d) {
                            if (!d.avatar) { return ''; }
                            return '<i class="' + d.avatar + '"></i>'
                        }
                    },
                    {
                        field: 'status', title: '状态', width: 60, align: 'center', templet: function (d) {
                            if (d.id === 0) { return ''; }

                            switch (d.status) {
                                case 0: return '<span style="color: green">正常</span>';
                                case -1: return '<span style="color: red">删除</span>';
                                default: return '其它';
                            }
                            return '';
                        }
                    },
                    {
                        field: 'is_list', title: '列表', width: 60, align: 'center', templet: function (d) {
                            if (d.is_list) { return '<span style="color: green">是</span>'; }
                            return '<span style="color: red">否</span>';
                        }
                    },
                    { title: '操作', toolbar: '#actionBox', align: 'center', width: 200 },
                    { field: 'url', title: 'url', width: 200 },
                    { field: 'created_at', title: '创建时间', width: 160, align: 'center', templet: function (d) { return (!d.created_at || d.id === 0) ? '' : util.toDateString(d.created_at) } },
                    { field: 'updated_at', title: '更新时间', width: 160, align: 'center', templet: function (d) { return !d.updated_at ? '' : util.toDateString(d.updated_at) } },
                ]],
                even: true,
                page: true,
                toolbar: '#toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'exports'],
                view: {}
            });

            table.on('toolbar(tablelist)', function (obj) {
                switch (obj.event) {
                    case 'add': add(); break;
                    case 'refresh_cache': refreshCache(); break;
                    case 'refresh': refresh(); break;

                }
            });

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

            function refreshCache() {
                layer.confirm('确定要刷新菜单缓存数据吗?', { title: '提示' }, function (index, layero) {
                    $.ajax({
                        url: '/system/menu/refresh_cache',
                        type: 'post',
                        headers: { 'X-CSRF-Token': '{{ token }}' },
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                                    table.reload('tablelist');
                                });
                            } else {
                                layer.msg(result.msg, { icon: 2 })
                            }
                        }
                    });
                    layer.close(index); // 关闭弹窗
                }, function (index, layero) {
                    layer.close(index); // 关闭弹窗
                });
            }

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

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

            function addChildren(obj) {
                layer.open({
                    type: 2,
                    title: '为 ' + obj.data.display_name + ' 新增子级',
                    shade: 0.1,
                    area: ['99%', '98%'],
                    content: "/system/menu/add_children?parentID=" + obj.data['id']
                });
            }

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

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

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