<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="power-table" lay-filter="power-table"></table>
    </div>
</div>

<script type="text/html" id="power-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
</script>

<script type="text/html" id="power-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<script type="text/html" id="power-type">
    {{#if (d.type == '0') { }}
    <span style="color: #2dc26b">目录</span>
    {{# }else if(d.type == '1'){ }}
    <span style="color: #1E9FFF">&nbsp&nbsp菜单</span>
    {{# }else if(d.type == '2'){ }}
    <span style="color: #eb7350">&nbsp&nbsp&nbsp&nbsp接口</span>
    {{# }else if(d.type == '3'){ }}
    <span style="color: red">&nbsp&nbsp&nbsp&nbsp数据</span>
    {{# } }}
</script>

<script type="text/html" id="power-enable">
    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="power-enable"
           {{ d.enable== true ? 'checked' : '' }}>
</script>

<script type="text/html" id="icon">
    <i class="layui-icon {{d.icon}}"></i>
</script>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'treetable', 'easyAdmin'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let treetable = layui.treetable;
        let easyAdmin = layui.easyAdmin;

        let MODULE_PATH = "power/";

        window.render = function () {
            easyAdmin.httpGet('/sys/menu/list', function (result) {
                treetable.render({
                    treeColIndex: 1,
                    treeSpid: 0,
                    treeIdName: 'menuId',
                    treePidName: 'pid',
                    skin: 'line',
                    treeDefaultClose: true,
                    toolbar: '#power-toolbar',
                    elem: '#power-table',
                    data: result.data,
                    defaultToolbar: [{layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports'],
                    page: false,
                    cols: [
                        [
                            {type: 'checkbox'},
                            {field: 'title', minWidth: 100, width: 180, title: '名称'},
                            {field: 'icon', width: 60, title: '图标', templet: '#icon'},
                            {field: 'type', title: '权限类型', templet: '#power-type'},
                            {field: 'href', title: '菜单路径', width: 380},
                            {field: 'powerCode', title: '权限标识', width: 200},
                            {
                                title: '数据权限', field: 'dataFilterType', align: 'center', width: 100
                                , templet: function (d) {
                                    if (d.type === 3) {
                                        if (d.dataFilterType === 'ALL') {
                                            return '<span style="color: red;">全部</span>'
                                        }
                                        if (d.dataFilterType === 'DEPT') {
                                            return '<span style="color:red;">本部门</span>'
                                        }
                                        if (d.dataFilterType === 'SELF') {
                                            return '<span style="color: red;">本人</span>'
                                        }
                                        return ''
                                    } else {
                                        return ''
                                    }
                                }
                            },
                            {field: 'enable', title: '是否可用', templet: '#power-enable', width: 100},
                            {field: 'sort', title: '排序', width: 60},
                            {title: '操作', templet: '#power-bar', width: 150, align: 'center', width: 100}
                        ]
                    ]
                });
            })

        }

        render();

        table.on('tool(power-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        })


        table.on('toolbar(power-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                treetable.reload("#power-table");
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            } else if (obj.event === 'expandAll') {
                treetable.expandAll("#power-table");
            } else if (obj.event === 'foldAll') {
                treetable.foldAll("#power-table");
            }
        });

        form.on('switch(power-enable)', function (obj) {
            let loading = layer.load();
            easyAdmin.http({
                url: '/sys/menu',
                data: JSON.stringify({menuId: this.value, enable: obj.elem.checked}),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.success) {
                        layer.msg("操作成功", {icon: 1, time: 1000, area: ['100px', '65px']});
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000, area: ['260px', '65px']});
                    }
                }
            })
        });


        window.add = function () {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: ['500px', '600px'],
                content: MODULE_PATH + 'add.html'
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['500px', '600px'],
                content: MODULE_PATH + 'edit.html?menuId=' + obj.data.menuId
            });
        }
        window.remove = function (obj) {
            layer.confirm('确定要删除该权限', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                easyAdmin.http({
                    url: "/sys/menu/" + obj.data['menuId'],
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {icon: 1, time: 1000, area: ['260px', '65px']}, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 1000, area: ['260px', '65px']});
                        }
                    }
                })
            });
        }
    })
</script>
</body>
</html>