{{to content}}

<style>
    h1,h2,h3,h4,h5,h6 {font-size: 100%; font-family: "MicroSoft YaHei";line-height:0;}
    input[type="radio"], input[type="checkbox"]{margin:0;margin-right:7px;}
    body{background-color:#f1f2f7;padding:0;margin:0;}
    .tree{min-height:20px;padding:19px;margin-bottom:20px;background-color:#fbfbfb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.tree li{list-style-type:none;margin:0;padding:10px 5px 0 5px;position:relative}.tree li::before,.tree li::after{content:'';left:-20px;position:absolute;right:auto}.tree li::before{border-left:1px solid #999;bottom:50px;height:100%;top:0;width:1px}.tree li::after{border-top:1px solid #999;height:20px;top:25px;width:25px}.tree li span{-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #999;border-radius:5px;display:inline-block;padding:3px 8px;text-decoration:none}.tree li.parent_li>span{cursor:pointer}.tree>ul>li::before,.tree>ul>li::after{border:0}.tree li:last-child::before{height:25px}.tree li.parent_li>span:hover,.tree li.parent_li>span:hover+ul li span{background:#eee;border:1px solid #94a0b4;color:#000}
    a.del {color:#e64525;border:1px solid #0480be;border-radius:5px;}
    a.edit {color:#0a67fb;border:1px solid #0480be;border-radius:5px;}
    a.add {color:#03b8cf;border:1px solid #0480be;border-radius:5px;}
    .label{display:inline;padding:.2em .6em .2em;font-size:75%;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;background-color:#808080;border-radius:.25em;}.label[href]:hover,.label[href]:focus{color:#fff;background-color:#666;}.label.label-circle{color:#808080;background:none;border:1px solid #808080;}.label[href]:hover,.label[href]:focus{color:#fff;text-decoration:none;cursor:pointer;}.label:empty{display:none;}.label-success{background-color:#38b03f;}
</style>

<section class="content">
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <div class="user-manage" style="overflow: scroll;margin-bottom:60px; outline: none;">

                <div class="tree well">
                    <ul>
                        <li>
                            <span><i class="glyphicon glyphicon-folder-open"></i>后台</span>
                            <a href="javascript:;" onclick="cml.form.add('新增顶级菜单', '{{url "adminbase/Acl/Menus/add/pid/0"}}', '{{url 'adminbase/Acl/Menus/save'}}');">添加顶层菜单</a>
                            <ul>
                                {{loop $menus $topmenu}}
                                <li>
                                    <span><i class="glyphicon glyphicon-folder-open"></i> {{$topmenu.title}} <span class="label label{{echo $topmenu['isshow'] ? '-success">show' : '-circle">hide'}}</span></span>
                                    <a href="javascript:;" class="add" onclick="cml.form.add('新增菜单', '{{url "adminbase/Acl/Menus/add/pid/{$topmenu['id']}"}}', '{{url 'adminbase/Acl/Menus/save'}}');"">添加子菜单</a>
                                    <a href="javascript:;" class="edit" onclick="cml.form.edit('编辑菜单', '{{url "adminbase/Acl/Menus/edit/id/{$topmenu['id']}"}}', '{{url 'adminbase/Acl/Menus/save'}}');">编辑</a>

                                    <a href="javascript:;" onclick="cml.form.del('{{url "adminbase/Acl/Menus/del/id/{$topmenu['id']}"}}', {{$topmenu['id']}});">删除</a>
                                    <ul>
                                        {{loop $topmenu['sonNode'] $submenu}}
                                        <li>
                                            <span><i class="glyphicon glyphicon-minus-sign"></i> {{$submenu.title}} <span class="label label{{echo $submenu['isshow'] ? '-success">show' : '-circle">hide'}}</span></span>
                                            <a href="javascript:;" class="add" onclick="cml.form.add('新增菜单', '{{url "adminbase/Acl/Menus/add/pid/{$submenu['id']}"}}', '{{url 'adminbase/Acl/Menus/save'}}');">添加子菜单</a>
                                            <a href="javascript:;" class="edit" onclick="cml.form.edit('编辑菜单', '{{url "adminbase/Acl/Menus/edit/id/{$submenu['id']}"}}', '{{url 'adminbase/Acl/Menus/save'}}');"> 编辑</span>
                                            <a href="javascript:;" class="del" onclick="cml.form.del('{{url "adminbase/Acl/Menus/del/id/{$submenu['id']}"}}', {{$submenu['id']}});">删除</a>
                                            <ul>
                                                {{loop $submenu['sonNode'] $sonmenu}}
                                                <li>
                                                    <span><i class="glyphicon glyphicon-leaf"></i> {{$sonmenu.title}} <span class="label label{{echo $sonmenu['isshow'] ? '-success">show' : '-circle">hide'}}</span></span>
                                                    <a href="javascript:;" class="edit" onclick="cml.form.edit('编辑菜单', '{{url "adminbase/Acl/Menus/edit/id/{$sonmenu['id']}"}}', '{{url 'adminbase/Acl/Menus/save'}}');">编辑</a>
                                                    <a href="javascript:;" class="del" onclick="cml.form.del('{{url "adminbase/Acl/Menus/del/id/{$sonmenu['id']}"}}', {{$sonmenu['id']}});">删除</a>
                                                </li>
                                                {{/loop}}
                                            </ul>
                                        </li>
                                        {{/loop}}
                                    </ul>
                                </li>
                                {{/loop}}
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    function onRequireJsReady() {
        require(['jquery', 'cml'], function ($, cml) {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('glyphicon glyphicon-plus-sign').removeClass('glyphicon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('glyphicon glyphicon-minus-sign').removeClass('glyphicon-plus-sign');
                }
                e.stopPropagation();
            });
        });
    }
</script>
{{/to}}