#@mgr(attr.getItem("currentMenuName"))

#define content()
<section class="content container-fluid">
	<div class="row">
		<div class="col-md-3">
			<div class="box box-info">
				<div class="box-header with-border">
					<h3 class="box-title">组织架构</h3>
					<div class="box-tools">
						<button class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body no-padding">
					<ul class="tree-list"></ul>
				</div>
			</div>
		</div>
		<div class="col-md-9">
			<div id="dataTable"></div>
		</div>
	</div>
</section>
#end

#define after()
<script>
require(['ez-datagrid', 'kit'], function(Grid, Kit){
	
	var rootJson = #(EJson.toJson(rootDept));
	var deptsJson = #(EJson.toJson(depts));
	var deptId = '#(pid)';
	var datagrid;
	var getSubDepts = function(){
		var depts = [];
		deptsJson.forEach(dept => {
			if(dept.pid === deptId) depts.push(dept);
		});
		return depts;
	}
	var initDeptTree = function(){
		var box = $(".tree-list");
		var rootLi = deptId == rootJson.id ? $("<li class='active'>") : $("<li>");
		box.append(rootLi);
		$("<a href='javascript:void(0)' data-id='" + rootJson.id + "'>" + rootJson.caption + "</a>").on("click", chgDept).appendTo(rootLi);
		deptsJson.forEach(dept => {
			var li = deptId == dept.id ? $("<li class='active'>") : $("<li>");
			box.append(li);
			var level = dept.path.split("_").length * 10 + 15;
			$("<a href='javascript:void(0)' data-id='" + dept.id + "' style='padding-left:" + level + "px'>" + dept.caption + "</a>").on("click", chgDept).appendTo(li);
		});
		$("#deptCaption").text(rootJson.caption);
		initDeptGrid();
	}
	var chgDept = function(){
		var me = $(this);
		deptId = me.data("id");
		$(".tree-list li.active").removeClass("active");
		me.parent().addClass("active");
		$("#deptCaption").text(me.parent().text());
		datagrid.update(getSubDepts());
	}
	
	var initDeptGrid = function(){
		var opts = {
			container: '#dataTable'
			, data: getSubDepts()
			, title: '下级部门'
			, columns: [{
	            field: 'caption'
	            , title: '部门名称'
	            , width: 120
	            , required: true
			},{
            	field: 'summary'
	            , title: '部门描述'
			},{
            	field: 'level'
	            , title: '部门级别'
	            , type: 'slider'
	            , slider: { min: 1, max: 10 }
    		}]
			, btnAdd: { callback: function(params){ return '#(attr.ctrl)/add?pid=' + deptId } }
			, btnModify: { callback: function(params, row){ return '#(attr.ctrl)/modify' } }
			, btnRemove: { callback: function(params, rows){ return '#(attr.ctrl)/remove?pid=' + deptId + '&ids=' + Kit.getFields(rows, 'id').join(',') } }
			, btnSortUp: { used: true, callback: function(params, rows){ return '#(attr.ctrl)/sort?pid=' + deptId + '&opt=up&ids=' + Kit.getFields(rows, 'id').join(',') } }
			, btnSortDown: { used: true, callback: function(params, rows){ return '#(attr.ctrl)/sort?pid=' + deptId + '&opt=down&ids=' + Kit.getFields(rows, 'id').join(',') } }
		}
		Grid.load(opts, function(dg){
			datagrid = dg;
		});
	}
	
	initDeptTree();
	
});
</script>
#end