settings.html 6.03 KB
<div class="page-head">
	<div class="page-title">
		<h1>模块配置</h1>
	</div>
</div>

<ul class="page-breadcrumb breadcrumb">
	<li><a href="/pages/home.html" data-pjax>首页</a> <i
		class="fa fa-circle"></i></li>
	<li><span class="active">权限管理</span> <i class="fa fa-circle"></i></li>
	<li><a href="list.html" data-pjax>角色管理</a> <i class="fa fa-circle"></i></li>
	<li><span class="active">模块配置</span></li>
</ul>
<br><br>
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-5 col-md-offset-1">
 <!-- BEGIN PORTLET-->
 <div class="portlet light bordered">
     <div class="portlet-title">
         <div class="caption">
             <i class="icon-bar-chart font-green"></i>
             <span class="caption-subject font-green bold uppercase">角色信息</span>
             <span class="caption-helper">更新于 2016-03-29 16:40</span>
         </div>
     </div>
     <div class="portlet-body">
     	<div class="mt-element-list">
             <div class="mt-list-container list-simple" style="border: none;">
             </div>
         </div>
     </div>
 </div>
 <!-- END PORTLET-->
</div>
<script id="role_detail_temp" type="text/html">
<ul>
<li class="mt-list-item" style="border-bottom:none;">
    <div class="list-item-content" >
        <h5 class="uppercase">
            <span><i class="fa fa-code"></i> 角色代码:{{codeName}}</span>
        </h5>
    </div>
</li>
<li class="mt-list-item" style="border-bottom:none;">
    <div class="list-item-content">
        <h5 class="uppercase">
            <span><i class="fa fa-user"></i> 角色名称:{{roleName}}</span>
        </h5>
    </div>
</li>
<li class="mt-list-item" style="border-bottom:none;">
    <div class="list-item-content">
        <h5 class="uppercase">
            <span><i class="fa fa-clock-o"></i> 创建时间:{{createDate}}</span>
        </h5>
    </div>
</li>
<li class="mt-list-item" style="border-bottom:none;">
    <div class="list-item-content">
        <h5 class="uppercase">
            <span><i class="fa fa-check-circle"></i> 状态:
				{{if enable == 1}}
					可用
				{{else}}
					禁用
				{{/if}}
			</span>
        </h5>
    </div>
</li>
<li class="mt-list-item" style="border-bottom:none;">
    <div class="list-item-content">
        <h5 class="uppercase">
            <span><i class="fa fa-columns"></i> 模块数:...</span>
        </h5>
    </div>
</li>
<li class="mt-list-item" style="border-bottom:none;">
    <div class="list-item-content">
        <h5 class="uppercase">
            <span><i class="fa fa-users"></i> 用户:张三,李四,王五,刘六</span>
        </h5>
    </div>
</li>
<li class="mt-list-item" style="border-bottom:none;">
    <div class="list-item-content">
        <h5 class="uppercase">
            <span><i class="fa fa-ambulance"></i> 资源数:...</span>
        </h5>
    </div>
</li>
<li class="mt-list-item" style="border-bottom:none;">
    <div class="list-item-content">
        <h5 class="uppercase">
            <span><i class="fa fa-text-width"></i> 描述:{{descriptions}}</span>
        </h5>
    </div>
</li>
</ul>
</script>

<div style="display: inline-block;">
 <!-- BEGIN PORTLET-->
 <div class="portlet light bordered">
     <div class="portlet-title">
         <div class="caption">
             <i class="icon-bar-chart font-green"></i>
             <span class="caption-subject font-green bold uppercase">模块配置</span>
         </div>
         <div class="actions">
             <button class="btn green btn-circle btn-sm"  disabled="disabled" id="saveModuleSett"><i class="fa fa-check"></i> 保存修改</button>
             <a href="list.html" data-pjax class="btn grey btn-circle btn-sm"><i class="fa fa-reply"></i> 返回</a>
         </div>
     </div>
     <div class="portlet-body">
     	<div class="form-group last" >
			<div>
				<select multiple="multiple" class="multi-select" id="moduleSettSelect" ></select>
			</div>
		</div>
     </div>
 </div>
</div>
</div>

<script>
$(function(){
	var id = $.url().param('no')
		,roleObj;
		
	if(!id){
		alert('缺少主键');
	}
	else{
		$get('/role/' + id ,null, function(obj){
			roleObj = obj;
			var htmlStr = template('role_detail_temp', obj);
			$('.mt-list-container').html(htmlStr);
		});
	}
	
	$('#saveModuleSett').on('click', function(){
		if($(this).attr('disabled'))
			return;
		
		var ids = '';
		$.each($('#moduleSettSelect').val(), function(i, mId){
			ids += mId + ',';
		});
		
		if(roleObj){
			$post('/role/settModules', {roleId: roleObj.id,mIds: ids}, function(){
				layer.msg('修改成功!');
			});
		}
	});
	
	//模块下拉框
	getModuleTreeData(function(treeData){
		var options = '';
		$.each(treeData, function(i, g){
			var dArray = g.children;
			
			for(var i = 0,d; d = dArray[i++];){
				options += '<optgroup label="'+d.name+'">';
				if(!d.children)
					continue;
				
				$.each(d.children, function(j, m){
					//是否被当前角色持有
					var selected = '';
					if(m.roles){
						for(var s = 0, role; role = m.roles[s++];){
							if(role.id == roleObj.id){
								selected = 'selected';
								break;
							}
						}
					}
					
					options += '<option value="'+m.id+'" '+selected+'>'+m.name+'</option>'
				});
				options += '</optgroup>';
			}
		});
		
		//初始化multiSelect
		$('#moduleSettSelect').html(options).multiSelect({
		    selectableOptgroup: true,
		    selectableHeader: "<div class='multi-custom-header-left'>未分配</div>",
		    selectionHeader: "<div class='multi-custom-header-right'>已分配</div>",
		}).on('change',function(){
			if($(this).val().length > 0)
				$('#saveModuleSett').removeAttr('disabled');
			else
				$('#saveModuleSett').attr('disabled', 'disabled');
		});
	});
	
	
	function getModuleByRole(){
		
	}
	
	function getModuleTreeData(cb){
		var treeData = [];
		$get('/module/all',null, function(arr){
			treeData = createTreeData(arr);
			cb && cb(treeData)
		});
	}
});
</script>