#@main("成员管理")

#define content()
<section class="content-header">
	<h1>成员管理 <small> Department management </small></h1>
	<ol class="breadcrumb">
		<li><a href="#(attr.indexUrl)"><i class="fa fa-dashboard"></i> 首页</a></li>
		<li class="active">成员管理</li>
	</ol>
</section>
<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', 'ez-net', 'kit'], function(Grid, Net, Kit){

	var rootJson = #(EJson.toJson(rootDept));
	var deptsJson = #(EJson.toJson(depts));
	var usersJson = #(EJson.toJson(users));
	var rolesJson = #(EJson.toJsonFilter(roles, 'id', 'caption'));
	var deptId = '#(pid)';
	var datagrid;
	
	var rolesOpts = [];
	rolesJson.forEach(role => {
		rolesOpts.push({'value': role.id, 'text': role.caption});
	});
	
	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");
		Net.location('#(attr.ctrl)?pid=' + deptId);
	}
	
	var initDeptGrid = function(){
		var opts = {
				container: '#dataTable'
				, data: usersJson
				, title: '成员列表'
				, columns: [{
		            field: 'caption'
		            , title: '姓名'
		            , width: 120
		            , required: true
				},{
	            	field: 'loginName'
		            , title: '登录账号'
		            , required: true
			        , visible: false
				},{
	            	field: 'loginPass'
		            , title: '登录密码'
			        , visible: false
			        , type: 'password'
				},{
	            	field: 'roleIds'
		            , title: '用户身份'
		            , type: 'selectMulti'
		            , options: rolesOpts
		            , formatter: function(value){
		            	let roles = [];
		            	if(value !== null && value !== '' && value !== undefined){
		            		let ids = value.split(",");
		            		ids.forEach(id => {
		            			rolesOpts.forEach(role => {
		            				if(id.trim() === role.value.trim()) roles.push(role.text);
		            			});
		            		});
		            		return roles.join("&nbsp; , &nbsp;");
		            	}
		            	return '';
		            }
	    		}]
				, btnAdd: { callback: function(params){ return '#(attr.ctrl)/add?pid=' + deptId } }
				, btnModify: { callback: function(params, row){ return '#(attr.ctrl)/modify?pid=' + deptId } }
				, btnRemove: { callback: function(params, rows){ return '#(attr.ctrl)/remove?pid=' + deptId + '&ids=' + Kit.getFields(rows, 'id').join(',') } }
			}
			Grid.load(opts, function(dg){
				datagrid = dg;
			});
	}
	
	initDeptTree();
	
});
</script>
#end