<!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">
    <link rel="stylesheet" th:href="@{/lib/ztree/css/metroStyle/metroStyle.css}">
</head>
<body>
<div class="ok-body" id="app" v-cloak>
    <div id="treePanel" style="overflow: auto;">
        <ul id="orgTree" class="ztree"></ul>
    </div>
</div>
<div th:replace="common/foot :: foot(jquery、tree)"></div>
<script th:inline="none">
var setting = {
    data : {
        simpleData : {
            enable : true,
            idKey : "orgId",
            pIdKey : "parentId",
            rootPId : "0"
        },
        key : {
            url : "nourl"
        }
    },
    callback : {
        onClick : function(event, treeId, treeNode) {
            vm.parentId = treeNode.orgId;
            vm.parentName = treeNode.name;
        }
    }
};
var vm = new Vue({
    el: '#app',
    data:{
		okUtils:null,
		okLayer:null,
		orgId:null,
		parentName:null
    },
    methods: {
        tree : function() {
            vm.okUtils.ajaxCloud({
                url:"/sys/org/select",
                param : {parentId: vm.parentId},
                close:false,
                success : function(result) {
                    $.fn.zTree.init($("#orgTree"), setting, result.msg);
                }
            });
        },
        acceptClick : function(dialog){
            dialog.user.orgId = vm.parentId;
            dialog.user.orgName = vm.parentName;
            vm.okUtils.dialogClose();
	    }
    },
    created: function() {
        var that = this;
        layui.use(["okUtils", "okLayer"], function () {
             that.okUtils = layui.okUtils;
             that.okLayer = layui.okLayer;
             that.tree();
        });
    }
});
</script>
</body>
</html>