catchAdmin/catch/permissions/view/permission/index.html

{extend name="$layout"}
{block name="title"}角色管理{/block}
{block name="search"}
<div class="layui-form toolbar">
    <div class="layui-form-item">
        <!--<div class="layui-inline">
            <div class="layui-input-inline mr0">
                <input id="edtSearchAuth" class="layui-input" type="text" placeholder="输入角色名称"/>
            </div>
        </div>
        <div class="layui-inline">
            <button id="btnSearchAuth" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
            </button>-->
            <button id="btnAddAuth" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
        <!--</div>-->
    </div>
</div>
{/block}
{block name="table"}
<table class="layui-table" id="tablePermission" lay-filter="tablePermission"></table>
<!-- 表格操作列 -->
<script type="text/html" id="tableBarAuth">
    {:editButton()}
    {:addButton('新增子菜单')}
    {:deleteButton()}
</script>
{/block}
{block name="script"}
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var treeTable = layui.treeTable;

        var treeTb = treeTable.render({
            tree: {
                arrowType: 'arrow2',
                iconIndex: 1,  // 折叠图标显示在第几列
                idName: 'id',  // 自定义id字段的名称
                childName: 'children', // 自定义标识是否还有子节点的字段名称
                pidName: 'parent_id',
                isPidData: true,
                getIcon: function(d) {  // 自定义图标
                    // d是当前行的数据
                    if (d.children.length) {  // 判断是否有子集
                        return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
                    } else {
                        return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
                    }
                }
            },
            elem: '#tablePermission',
            cellMinWidth: 100,
            cols: [
                {type: 'numbers', title: '#'},
                {field: 'permission_name', title: '菜单名称', minWidth: 200},
                {field: 'route', title: '菜单路由', templet: function (d) {
                        return escapeChars(d.route);
                    }
                },
                {field: 'method', title: '请求方法', width: 90},
                {field: 'permission_mark', title: '权限标识'},
                {field: 'type', title: '菜单类型', templet: function (d) {
                        return d.type == 1 ? '<button class="layui-btn layui-btn-primary layui-btn-xs">菜单</button>' :
                            '<button class="layui-btn layui-btn-primary layui-btn-xs">按钮</button>'
                    }, width: 90, align: 'center'
                },
                {field: 'sort', title: '排序', width:60, align: 'center'},
                {
                    field: 'created_at', sort: true, templet: function (d) {
                        return util.toDateString(d.created_at);
                    }, title: '创建时间', maxWidth: 100
                },
                {templet: '#tableBarAuth', title: '操作', align: 'center', minWidth: 150}
            ],
            reqData: function(data, callback) {
                // 在这里写ajax请求，通过callback方法回调数据
                $.get('{:url("permissions")}', function (res) {
                    callback(res.data);  // 参数是数组类型
                });
            }
        });

        // 添加按钮点击事件
        $('#btnAddAuth').click(function () {
            showEditModel();
        });
        function escapeChars(str) {
            str = str.replace(/&/g, '&amp;');
            str = str.replace(/</g, '&lt;');
            str = str.replace(/>/g, '&gt;');
            str = str.replace(/'/g, '&acute;');
            str = str.replace(/"/g, '&quot;');
            str = str.replace(/\|/g, '&brvbar;');
            return str;
        }
        // 工具条点击事件
        treeTable.on('tool(tablePermission)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDel(obj);
            } else {
                showEditModel(data, true);
            }
        });
        treeTable.on('row(tablePermission)', function(obj){
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });
        // 删除
        function doDel(obj) {
            layer.confirm('确定要删除“' + obj.data.permission_name + '”吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (index) {
                layer.close(index);
                admin.req('/permission/'+ obj.data.id, {}, function (response) {
                    if (response.code === 10000) {
                        layer.msg(response.msg, {icon: 1});
                        obj.del()
                    } else {
                        layer.msg(response.msg, {icon: 2});
                    }
                }, 'delete');
            });
        }

        // 显示表单弹窗
        // 显示表单弹窗
        function showEditModel(permission, addPermission= false) {
            var layIndex = admin.open({
                title: addPermission ? '新增子菜单' : ((permission ? '修改' : '添加') + '菜单'),
                url: addPermission ? '/permission/create' + '?id='+permission.id : (permission ? '/permission/'+permission.id + '/edit': '/permission/create'),
                data: addPermission ? '' : permission,     // 传递数据到表单页面
                end: function () {
                    if (admin.getLayerData(layIndex, 'formOk')) {  // 判断表单操作成功标识
                        if (addPermission) {
                           treeTb.reload();
                            setTimeout(function () {
                                treeTb.expand(permission.id)
                            }, 200)
                        } else {
                            if (permission) {
                                treeTb.reload();
                                setTimeout(function () {
                                    treeTb.expand(permission.id)
                                }, 200)
                            } else {
                                treeTb.reload();  // 成功刷新表格
                            }
                        }
                    }
                },
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        // 搜索按钮点击事件
        $('#btnSearchAuth').click(function () {
            $('#edtSearchAuth').removeClass('layui-form-danger');
            var keyword = $('#edtSearchAuth').val();
            var $tds = $('#tableAuth').next('.treeTable').find('.layui-table-body tbody tr td');
            $tds.css('background-color', 'transparent');
            if (!keyword) {
                layer.tips('请输入关键字', '#edtSearchAuth', {tips: [1, '#ff4c4c']});
                $('#edtSearchAuth').addClass('layui-form-danger');
                $('#edtSearchAuth').focus();
                return;
            }
            var searchCount = 0;
            $tds.each(function () {
                if ($(this).text().indexOf(keyword) >= 0) {
                    $(this).css('background-color', '#FAE6A0');
                    if (searchCount == 0) {
                        $('body,html').stop(true);
                        $('body,html').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5, anim: 6});
            } else {
                treetable.expandAll('#tableAuth');
            }
        });
    });
</script>
{/block}