<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>菜单列表</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add">
                    <i class="layui-icon layui-icon-addition" style="font-size: 10px;"></i>新增
                </button>
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="expand">
                    <i class="layui-icon layui-icon-down" style="font-size: 10px;"></i>展开
                </button>
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="fold">
                    <i class="layui-icon layui-icon-up" style="font-size: 10px;"></i>折叠
                </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-update" lay-event="update">
                <i class="layui-icon layui-icon-edit" style="font-size: 10px;"></i>编辑
            </a>
            {{#  if(d.status == '0'){ }}
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-forbid" lay-event="forbid">
                <i class="layui-icon layui-icon-close" style="font-size: 10px;"></i>禁用
            </a>
            {{#  } else { }}
            <a class="layui-btn layui-btn-warm layui-btn-xs data-count-enable" lay-event="enable">
                <i class="layui-icon layui-icon-play" style="font-size: 10px;"></i>启用
            </a>
            {{#  } }}
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delFlag">
                <i class="layui-icon layui-icon-delete" style="font-size: 10px;"></i>删除
            </a>
        </script>
    </div>
</div>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    var updateflag = 0;
    layui.use(['form', 'table', 'treeTable'], function () {
        var form = layui.form,
            treeTable = layui.treeTable;

        var isShow = true;

        var insTb = treeTable.render({
            elem: '#currentTableId',
            url: AjaxUtil.ctx + 'permission/list',
            skin: 'grid',
            tree: {
                treeColIndex: 1,
                treeSpid: "0",
                iconIndex: 0,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'permissionId',  // id字段名称
                pidName: 'parentId',     // pid字段名称
                arrowType: 'arrow2',
                getIcon: 'ew-tree-icon-style2'
            },
            treeDefaultClose: isShow,
            method: 'GET',
            page: false,
            toolbar: '#toolbarDemo',
            cols: [
                [
                    {field: 'name', minWidth: 200, title: '名称'},
                    {
                        field: 'icon', title: '图标', align: 'center', templet: function (d) {
                            if (!!d.icon) {
                                return '<i class="' + d.icon + '"></i>';
                            } else {
                                return '';
                            }
                        }
                    },
                    {field: 'sign', title: '标识', align: 'center'},
                    {field: 'href', title: '链接', align: 'center',},
                    {field: 'target', title: '打开方式', align: 'center'},
                    {
                        field: 'type', title: '类型', align: 'center', templet: function (d) {
                            if (0 == d.type) {
                                return '<span class="layui-badge layui-bg-cyan">模块</span>';
                            } else if (1 == d.type) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else if (2 == d.type) {
                                return '<span class="layui-badge layui-bg-orange">功能</span>';
                            } else {
                                return '<span class="layui-badge layui-bg-orange">按钮</span>';
                            }
                        }
                    },
                    {field: 'sort', title: '排序', align: 'center', edit: 'number'},
                    {field: 'descript', title: '描述'},
                    {
                        field: 'status', title: '状态', align: 'center', templet: function (d) {
                            if (0 == d.status) {
                                return '正常';
                            } else {
                                return '禁用';
                            }
                        }
                    },
                    {title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center", fixed: 'right'}
                ]
            ]
        });

        //监听行选中
        treeTable.on('row(currentTableId)', function (obj) {
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });

        // 监听单元格编辑
        treeTable.on('edit(currentTableId)', function (obj) {
            var value = obj.value
                , data = obj.data;
            if (!/^\+?[0-9][0-9]*$/.test(value)) {
                Message.warning('请输入数字，且大于0!', 1000);
                return false;
            }
            var index = layer.load(2, {shade: 0.1});
            AjaxUtil.get({
                url: AjaxUtil.ctx + 'permission/updateSort/' + data.permissionId + '/' + value,
                success: function (res) {
                    layer.close(index);
                    if (0 === res.code) {
                        layer.closeAll('dialog');
                        Message.success(500, res.message, function () {
                            // 重载表格
                            insTb.refresh();
                        });
                    } else {
                        Message.error(res.message, 1000);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error('服务器异常！', 1000);
                }
            });
        });

        treeTable.on('toolbar(currentTableId)', function (obj) {
            if (obj.event === 'add') {
                layer.open({
                    title: '新增菜单',
                    type: 2,
                    shadeClose: true,
                    maxmin: true,
                    shade: 0.2,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'permission/add',
                    end: function (index) {
                        if (updateflag == 1)
                            insTb.refresh();
                        updateflag = 0;
                    }
                });
                return false;
            } else if (obj.event === 'expand') {
                isShow = true;
                insTb.expandAll();// 展开全部
            } else if (obj.event === 'fold') {
                isShow = false;
                insTb.foldAll();// 折叠全部
            }
        });

        treeTable.on('tool(currentTableId)', function (obj) {
            var data = obj.data;
            if (obj.event === 'update') {
                layer.open({
                    type: 2,
                    shade: 0.2,
                    title: '修改菜单',
                    shadeClose: true,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'permission/update/' + data.permissionId,
                    end: function (index) {
                        if (updateflag == 1)
                            insTb.refresh();
                        updateflag = 0;
                    }
                });
                return false;
            } else if (obj.event === 'delFlag') {
                if (data.children != undefined) {
                    Message.error('该节点下存在子节点，不能直接删除', 2000);
                } else {
                    var index = layer.load(0, {shade: 0.1});
                    AjaxUtil.get({
                        url: AjaxUtil.ctx + 'permission/delete/' + data.permissionId,
                        success: function (res) {
                            layer.close(index);
                            if (0 === res.code) {
                                layer.closeAll('dialog');
                                Message.success(500, res.message, function () {
                                    // 重载表格
                                    insTb.refresh();
                                });
                            } else {
                                Message.error(res.message, 1000);
                            }
                        },
                        error: function (error) {
                            layer.close(index);
                            Message.error("服务器异常！", 1000);
                        }
                    });
                }
                return false;
            } else if (obj.event === 'enable') {
                layer.confirm('确认启用该数据以及所有子级数据', {
                    title: '提示'
                }, function () {
                    var index = layer.load(0, {shade: 0.1});
                    AjaxUtil.get({
                        url: AjaxUtil.ctx + 'permission/enable/' + data.permissionId,
                        success: function (res) {
                            layer.close(index);
                            if (0 === res.code) {
                                layer.closeAll('dialog');
                                Message.success(500, res.message, function () {
                                    // 重载表格
                                    insTb.refresh();
                                });
                            } else {
                                Message.error(res.message, 1000);
                            }
                        },
                        error: function (error) {
                            layer.close(index);
                            Message.error("服务器异常！", 1000);
                        }
                    });
                });
                return false;
            } else if (obj.event === 'forbid') {
                layer.confirm('确认禁用该数据以及所有子级数据', {
                    title: '提示'
                }, function () {
                    var index = layer.load(0, {shade: 0.1});
                    AjaxUtil.get({
                        url: AjaxUtil.ctx + 'permission/forbid/' + data.permissionId,
                        success: function (res) {
                            layer.close(index);
                            if (0 === res.code) {
                                layer.closeAll('dialog');
                                Message.success(500, res.message, function () {
                                    // 重载表格
                                    insTb.refresh();
                                });
                            } else {
                                Message.error(res.message, 1000);
                            }
                        },
                        error: function (error) {
                            layer.close(index);
                            Message.error("服务器异常！", 1000);
                        }
                    });
                });
                return false;
            }
        });
    });

    function SetData() {
        updateflag = 1;
    }
</script>
</body>
</html>