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

{{template "header"}}

<script type="text/html" id="toolbar">
    {{ genBtn .AuthorizeMenus "add" "refresh_cache" }}
</script>

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

<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="tablelist" lay-filter="tablelist"></table>
    </div>
</div>

{{define "js"}}
<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;

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

        // 加载列表
        function loadList() {
            treetable.render({
                elem: '#tablelist',
                url: '/system/menu/list',
                method: 'post',
                headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                where: getQueryParams(),
                height: 'full',
                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: {}
            });
        }

        // 工具栏
        function toolbar() {
            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: ['95%', '95%'],
                    content: "/system/menu/add"
                });
            }

            function refreshCache() {
                $.ajax({
                    url: '/system/menu/refresh_cache',
                    type: 'post',
                    headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                    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 })
                        }
                    }
                });
            }

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

        // 表格项操作按钮
        function tableActionTool() {
            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: ['95%', '95%'],
                    content: "/system/menu/add_children?parentID=" + obj.data['id']
                });
            }

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

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

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

{{template "footer" .}}