TMS/plg-tms-std-web-vue/public/jq/pages/usercenter/roleGroupList.html

<div id="roleGroupList" class="plg-tab-container">

<div id="roleGroup" class="grid-container-full"></div>

<div id="roleGroupList_mywin" style="display: none;">
	<div id="roleGroupList_g1"></div>
	<div class="ccf">
		<button class="layui-btn layui-btn-primary" data-event="delMenu">
		  <i class="layui-icon layui-icon-down"></i>
		</button>
		<button class="layui-btn layui-btn-primary" data-event="addMenu">
		  <i class="layui-icon layui-icon-up"></i>
		</button>
	</div>
	<div id="roleGroupList_g2"></div>
</div>
<input id="roleGroupId" type="hidden" />

<form id="form1" style="display: none;margin-top: 10px;">
	<input id="id" name="id" type="hidden" />
	<div class="layui-form-item">
	    <label class="layui-form-label">角色组名称</label>
	    <div class="layui-input-block">
	      <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
	    </div>
	</div>
	<div class="layui-form-item">
	    <label class="layui-form-label">描述</label>
	    <div class="layui-input-block">
	      <input type="text" id="description" name="description" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
	    </div>
	</div>
</form>
</div>	
<style type="text/css">
	#roleGroupList_mywin{margin:15px;}
	#roleGroupList_mywin .ccf{width: 100%;margin: 10px;}
	#roleGroupList_mywin .b button{float:left;margin: 10px 10px;}
	.layui-form-label{width:210px;}
	.layui-input{width:66%;}
</style>

<script type="text/javascript">
(function(){
	var form=$("#roleGroupList #form1");
	var grid1;
	var grid2;
	
	$("#roleGroupList").on("click","button",function(e){
		e.preventDefault();
		e.stopPropagation(); 
		if($(this).data("event")=="delMenu"){
			delMenu();
		}
		if($(this).data("event")=="addMenu"){
			addMenu();
		}
	});
	
	window.roleGroupList_aclick=aclick;
	window.roleGroupList_update=update;
	window.roleGroupList_del=del;
	
	function delMenu(){
		var id=grid1.getCheckedIds();
		var uid = $("#roleGroupList #roleGroupId").val();
		if(id==""){
			PlgDialog.msg('请选择一条数据',{
				zIndex:PlgDialog.zIndex
			});
			return false;
		}
	    $.ajax({
	        type: 'delete',
	        url: "/api/service-user/roleGroup/delRoleGroupAndMenus?roleGroupId="+uid+"&menuIds="+id,
	        async: true,
	        success: function (data) {
				if (data.success) {
	                grid1.reload();
					grid2.reload();
	            } else {
	                PlgDialog.msg(data.message,{
						zIndex:PlgDialog.zIndex
					});
	            }
	        }
	    });
	}
	
	function addMenu(){
		var id=grid2.getCheckedIds();
		var uid = $("#roleGroupList #roleGroupId").val();
		if(id==""){
			PlgDialog.msg('请选择一条数据',{
				zIndex:PlgDialog.zIndex
			});
			return false;
		}
	    $.ajax({
	        type: 'POST',
	        url: "/api/service-user/roleGroup/addRoleGroupAndMenus",
	        data: {roleGroupId:uid,menuIds:id},
	        async: true,
	        success: function (data) {
	            if (data.success) {
	                grid1.reload();
					grid2.reload();
	            } else {
	                PlgDialog.msg(data.message,{
						zIndex:PlgDialog.zIndex
					});
	            }
				
	        }
	    });
	}
	
	var opts = {
   		skin:"terrace",
   		columns:[
			{id:"id",name:"id",type:'txt',width:200,hidden:true},
			{id:"name",name:"角色组名称",type:'ro',width:230},
			{id:"description",name:"描述",type:'ro',width:260},
			{id:"systemId",name:"系统id",type:'ro',width:200},
			{id:"op",name:"操作",type:'button',width:"*",render:function(){
   				return "分配菜单/权限^roleGroupList_aclick,修改^roleGroupList_update,删除^roleGroupList_del";
   			}}
			],
		toolbar:[
			{type:"combo", name:"systemId", label:"系统id:", width:140},{type: "newcolumn"},
			{type:"button", name:"addBtn",className:"plg-toolbar-right",value:"<i class='layui-icon layui-icon-add-1'></i>添加"},{type: "newcolumn"},
			{type:"input", name:"name", label:"角色组名称:", placeholder: '请输入角色组名称', offsetLeft:10},{type: "newcolumn"},
   		{type:"button", name:"searchBtn",className:"", value:"查询"},{type: "newcolumn"},
	    {type:"button", name:"all", className:"normal", value:"所有"}
		],
   		formData:[
			{type:"settings",inputWidth :300,width:400,labelWidth:80,position:"label-left",labelAlign:"left"},
		 	{type: "hidden", name:"id", value:""},
	    {type: "input", name: "name", label: '角色组名称:', placeholder: '请输入角色组名称'},
	    {type: "input", name:"systemId", label:"系统id:", placeholder: '请输入系统id'},
//	  {type:"combo",name:"systemId", label: "系统id",remote:{url:'/api/service-user/system/getAllList',data:{},valueField:"id",textField:"systemId",method:"get"}},
	    {type: "input", name:"description", label:"描述:", placeholder: '请输入描述'}
		],
		pagebar:{
			buttons:[{text:"<i class='layui-icon layui-icon-delete '></i>删除",className:"layui-btn-danger",name:"delete"}]
		},
   		url:"/api/service-user/roleGroup",//数据接口
   		type:"get",//数据提交方式，默认为get
		params:{pageNum:1,pageSize:10,name:""},//查询提交参数，分页参数默认为pageNum,pageSize
		page:true, //是否启用分页
		multiselect:true,//是否支持多选
		imagePath:"../../prologui/assets/PlgGrid/",
		totalCount:"totalCount" //总记录数字段，默认totalCount
　　	};
	var roleGroup = new PlgGrid(opts);	
	roleGroup.renderTo("roleGroup");
	roleGroup.loadData();
	
	roleGroup.attachToolBarEvent("onButtonClick", function(name){
		if(name=="searchBtn"){
			var fdata = roleGroup.getToolBarForm().getFormData();
			roleGroup.setParams(fdata);
			roleGroup.reload();
		}
		if(name=="all"){
			roleGroup.setParams({pageNum:1,pageSize:10,name:""});
			roleGroup.reload();
		}else if(name=="addBtn"){
			roleGroupList_add();
		}
	});
	
	roleGroup.attachPageBarEvent(function(name,ids){
		if(name=="delete"){
			if(ids==""){
				return;
			}
			PlgDialog.confirm('确定删除？', {
	        title:'删除提示',
	        btnAlign:'c',
	        btn: ['确定', '取消'] //可以无限个按钮
	    	}, function(index, layero){
		        $.ajax({ 
					url: '/api/service-user/roleGroup/del/'+ids, 
					type: 'delete', 
					success:function (data) {
						PlgDialog.close(index);
					    roleGroup.reload();
					    PlgDialog.msg(data.message);
					}
				});
	    	});
		}
	});
	
	function aclick(roleGroupId){
		$("#roleGroupList #roleGroupId").val(roleGroupId);
		var index = PlgDialog.open({
		        type: 1 
		        ,title: '分配菜单/权限'
		        ,area: ['880px', '680px']
		        ,shade: 0.5
		        ,skin: 'layui-layer-lan'
		        ,content: $("#roleGroupList_mywin")
		        ,closeBtn:1
		        ,btn: []
		        ,success: function(layero){
	        		var opts1 = {
				   		title:'已分配菜单/按钮',
				   		columns:[
							{id:"id",name:"id",type:'txt',hidden:true},
							{id:"name",name:"名称",type:'ro',width:150},
							{id:"numbers",name:"编号",type:'ro',width:150},
							{id:"parentId",name:"父节点",type:'ro',width:100},
							{id:"leaf",name:"是否为子节点",type:'ro',width:100,render:function(v,d){if(v==0) return '否';if(v==1) return '是'}},
							{id:"type",name:"类型",type:'ro',width:100,render:function(v,d){if(v==0) return '菜单';if(v==1) return '按钮'}},
							{id:"systemId",name:"系统id",type:'ro',width:150}
						],
				   		url:"/api/service-user/roleGroup/getMenuListByRoleGroupId?roleGroupId="+roleGroupId,//数据接口
				   		type:"get",//数据提交方式，默认为get
						params:{type:"1",pageNum:1,pageSize:10},//查询提交参数，分页参数默认为pageNum,pageSize
						page:true, //是否启用分页
						imagePath:"../../prologui/assets/PlgGrid/",
						multiselect:true,//是否支持多选
						totalCount:"totalCount" //总记录数字段，默认totalCount
			　　		};

					var opts2 = {
						title:'未分配菜单/按钮',
						columns:[
							{id:"id",name:"id",type:'txt',hidden:true},
							{id:"name",name:"名称",type:'ro',width:150},
							{id:"numbers",name:"编号",type:'ro',width:150},
							{id:"parentId",name:"父节点",type:'ro',width:100},
							{id:"leaf",name:"是否为子节点",type:'ro',width:100,render:function(v,d){if(v==0) return '否';if(v==1) return '是'}},
							{id:"type",name:"类型",type:'ro',width:100,render:function(v,d){if(v==0) return '菜单';if(v==1) return '按钮'}},
							{id:"systemId",name:"系统id",type:'ro',width:150}
						],
						url:"/api/service-user/roleGroup/getMenuListByRoleGroupId?roleGroupId="+roleGroupId,//数据接口
						type:"get",//数据提交方式，默认为get
						params:{type:"2",pageNum:1,pageSize:10},//查询提交参数，分页参数默认为pageNum,pageSize
						page:true, //是否启用分页
						multiselect:true,//是否支持多选
						imagePath:"../../prologui/assets/PlgGrid/",
						totalCount:"totalCount" //总记录数字段，默认totalCount
				　　	};
					grid1 =new PlgGrid(opts1);
					grid1.renderTo("roleGroupList_g1");
					grid1.loadData();
					grid2 =new PlgGrid(opts2);
					grid2.renderTo("roleGroupList_g2");
					grid2.loadData();
		        }
		        ,end:function(){
		        	$("#roleGroupList_g1").empty();
		        	$("#roleGroupList_g2").empty();
		        	$("#roleGroupList_mywin").hide();
		        }
		});
	}

	function roleGroupList_add(){
		roleGroup.showDialog(0,"添加",430,250,{url:"/api/service-user/roleGroup",type:"post",contentType:"application/json"});
//		var m = roleGroup.getGridForm();
//		m.loadComboData("systemId",{data:{}});
	}
	
	function update(id){
		$("#roleGroupList #id").val(id);
		roleGroup.selectRowById(id);
		roleGroup.showDialog(1,"编辑",430,250,{url:"/api/service-user/roleGroup",type:"put",contentType:"application/json"});
	}
	
	function del(id){
		PlgDialog.confirm('确定删除？', {
        title:'删除提示',
        btnAlign:'c',
        btn: ['确定', '取消'] //可以无限个按钮
    	}, function(index, layero){
	        $.ajax({ 
				url: '/api/service-user/roleGroup/'+id, 
				type: 'delete', 
				success:function (data) {
					PlgDialog.close(index);
				    roleGroup.reload();
				    PlgDialog.msg(data.message);
				}
			});
    	});
	}
	
	var f = roleGroup.getToolBarForm();
	f.loadComboData("systemId",{url:'/api/service-user/system/getAllList',data:{},valueField:"systemId",textField:"systemId",method:"get"});
	
})()
</script>