<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(tree)"/>
<style>
    .div-a{ float:left;width:15%;margin: 8px 3px 0px 3px;height:100%;}
    .div-b{ float:left;width:82%;margin: 8px 0px 8px 0px;height:100%;}
</style>
<body>
    <div id="app" v-cloak>
        <div class="div-a">
            <Card>
                <p slot="title">
                    菜单
                </p>
                <div id="treePanel" style="overflow: auto;">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
            </Card>
        </div>
        <div class="div-b">
            <Card>
                <!--模糊搜索区域-->
                <template>
                    <div style="margin-bottom: 8px;margin-top: 8px;">
                        <i-input placeholder="输入内容"  v-model="menu.description"  style="width: 300px"></i-input>
                        <i-button type="primary"  icon="ios-search" @click="load(0)">搜索</i-button>
                        <i-button type="primary"  icon="ios-redo" @click="reload()" >重置</i-button>
                        <i-button type="primary" style="float:right;" icon="md-add" @click="add()">新增</i-button>
                    </div>
                </template>
                <template>
                    <i-table size="small" :columns="tableTitle"  :data="tableData">
                    </i-table>
                    <br>
                </template>
            </Card>
        </div>
    </div>
<div th:replace="common/foot :: foot(jquery、tree)"></div>
<script th:inline="none">
var ztree;
var setting = {
    edit: {
        enable: true,
        showRenameBtn:false,
        showRemoveBtn:false,
        drag: {
            isCopy: false,
            isMove: true,
            prev: true,
            next: true,
            inner: true
        }
    },
    data : {
        simpleData : {
            enable : true,
            idKey : "menuId",
            pIdKey : "parentId",
            rootPId : "0"
        },
        key : {
            url : "nourl"
        }
    },
    callback : {
        onClick : function(event, treeId, treeNode) {
            vm.menu.parentId = treeNode.menuId;
            vm.menu.parentName = treeNode.name;
            vm.menu.type = treeNode.type+1;
            vm.load();
        },
        beforeDrag:function (treeId, treeNodes) {
            for (var i=0,l=treeNodes.length; i<l; i++) {
                if (treeNodes[i].drag === false) {
                    return false;
                }
            }
            return true;
        },
        beforeDrop:function (treeId, treeNodes, targetNode, moveType) {
            if(treeNodes[0].type==1&&targetNode.type==0){
                return targetNode ? targetNode.drop !== false : true;
            }else{
                return false;
            }
        },
        onDrop:function (event, treeId, treeNodes, targetNode,moveType) {
            var menuId = treeNodes[0].menuId;
            var parentId = targetNode.menuId;
            vm.okUtils.ajaxCloud({
                url:"/sys/menu/drop",
                param : {menuId:menuId,parentId:parentId},
                success : function(result) {
                     vm.okLayer.msg.greenTick(result.msg)
                }
            });
        }
    }
};
var vm = new Vue({
    el: '#app',
    data: {
        okUtils:null,
        okLayer:null,
        layer:null,
        parentName:null,
        tableTitle : [ {
            key : "name",
            title : "菜单名称",
            minWidth:80
        },{
            key : "icon",
            title : "图标",
            minWidth:50,
            render : function(h, params) {
                return h('div',{domProps:{
                    innerHTML:"<i class='"+ params.row.icon +"'></i>"
                }});
            }

        },{
            key : "type",
            title : "类型",
            minWidth:50,
            render : function(h, params) {
                var type = "目录";
                if(params.row.type==1){
                    type = "菜单";
                }else if(params.row.type==2){
                    type = "按钮";
                }
                return h('div',type);
            }
        },{
            key : "url",
            title : "菜单URL",
            minWidth:200
        },{
            key : "perms",
            title : "授权标识",
            minWidth:120
        },{
            key : "orderNum",
            title : "排序",
            minWidth:80
        },{
            title : '操作',
            key : 'action',
            minWidth : 300,
            align : 'center',
            render : function(h, params) {
                var functionList = [];
                var edit = h('Button', {
                    props : {
                        type : 'primary',
                        size : 'small',
                        icon : 'md-create'
                    },
                    style : {
                        marginRight : '8px'
                    },
                    on : {
                        click : function() {
                            vm.edit(params.row);
                        }
                    }
                }, '修改');
                functionList.push(edit);
                var remove = h('Button', {
                    props : {
                        type : 'primary',
                        size : 'small',
                        icon : 'md-trash'
                    },
                    style : {
                        marginRight : '8px'
                    },
                    on : {
                        click : function() {
                            vm.remove(params.row);
                        }
                    }
                }, '删除');
                functionList.push(remove);
                if(params.row.type!=2){
                    var add = h('Button', {
                        props : {
                            type : 'primary',
                            size : 'small',
                            icon : 'md-add'
                        },
                        style : {
                            marginRight : '8px'
                        },
                        on : {
                            click : function() {
                                vm.add(params.row);
                            }
                        }
                    }, '新增');
                    functionList.push(add);
                }
                return h('div', functionList);
            }
        } ],
        tableData : [],
        menu : {
            description:'',
            parentId:0,
            parentName:'一级菜单',
            type:-1,
            icon:''
        },
        tableSize : 0
    },
    methods: {
        tree : function() {
            vm.okUtils.ajaxCloud({
                url:"/sys/menu/select",
                param : {parentCode: ""},
                success : function(result) {
                    ztree = $.fn.zTree.init($("#menuTree"), setting, result.msg);
                }
            });
        },
        load : function() {
            vm.okUtils.ajaxCloud({
                url:"/sys/menu/list",
                param : vm.menu,
                success : function(result) {
                    vm.tableData = result.msg;
                }
            });
        },
        reload : function(){
            vm.menu.parentName = "一级菜单";
            vm.menu.parentId = 0;
            vm.menu.type = -1;
            vm.menu.description = '';
            this.load();
            this.tree();
        },
        changePage : function(pageNo) {
            vm.page.pageNo = pageNo;
            vm.load();
        },
        changePageSize : function(pageSize) {
            vm.page.pageSize = pageSize;
            vm.load();
        },
        edit : function(menu) {
            vm.okUtils.dialogOpen({
                title: '修改',
                url: "sys/menu/form.html",
                scroll : true,
                width: '40%',
                height: '75%',
                success : function(dialog) {
                    menu.parentName = vm.menu.parentName;
                    dialog.vm.menu = JSON.parse(JSON.stringify(menu));
                },
                yes : function(dialog) {
                    dialog.vm.acceptClick(vm);
                }
            });
        },
        add:function(menu){
            vm.okUtils.dialogOpen({
                title: '新增',
                url: "sys/menu/form.html",
                scroll : true,
                width: '40%',
                height: '75%',
                success : function(dialog) {
                    if(menu!=undefined){
                        vm.menu.parentId = menu.menuId;
                        vm.menu.parentName = menu.name;
                        vm.menu.type = menu.type + 1;
                    }
                    dialog.vm.menu = JSON.parse(JSON.stringify(vm.menu));
                },
                yes : function(dialog) {
                    dialog.vm.acceptClick(vm);
                }
            });
        },
        remove:function(menu) {
             vm.okLayer.confirm("确定要删除吗？", function () {
                vm.okUtils.ajaxCloud({
                    url:"/sys/menu/delete",
                    param : {menuId: menu.menuId},
                    success : function(result) {
                        vm.okLayer.msg.greenTick(result.msg, function () {
                             vm.load();
                        });
                    }
                });
            });
        }
    },
    created: function() {
        var that = this;
        layui.use(["okUtils", "okLayer"], function () {
             that.okUtils = layui.okUtils;
             that.okLayer = layui.okLayer;
             that.tree();
             that.load();
        });
    }
});
</script>
</body>
</html>
