cast.html 7.62 KB
<link href="/pages/base/linecast/css/cast.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/pages/base/linecast/js/jquery.quicksearch.js"></script>

<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><span class="active">线路分配</span></li>
</ul>

<div class="row">
	<div class="col-md-4" style="padding-right: 0px;">
		<div class="portlet light bordered" style="min-height: 520px;">
			<div class="portlet-title">
				<div class="caption">
					  <i class="fa fa-users font-dark"></i>
					 <span class="caption-subject font-dark sbold uppercase">用户菜单</span>
				</div>
			</div>
			<div class="portlet-body">
				<div id="modules_tree" ></div>
			</div>
		</div>
	</div>
	<div class="col-md-6" style="padding-left: 0px;">
		<div class="portlet light bordered" style="height: 520px;">
			<div class="portlet-body" style="min-height: 200px;" id="init-text">
				<div class="text-info" style="text-align: center;line-height: 200px;">
					<i class="fa fa-info"></i> 单击节点查看详细
				</div>
			</div>
			
			<div style="display:none" id="line-cast">
			<!-- 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>
				         </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>
	</div>
</div>

<script type="text/html" id="left_line_cast">
	
</script>

<script>

$(function(){
	
	getTreeData(function(treeData){
		
		//初始化树
		$('#modules_tree').on('loaded.jstree', function(e, data){close_all();}).jstree({
		    'core' : {
		        'themes' : {
		            'responsive': false
		        },
		        'data': treeData,
		        'multiple':false
		    },
            'types' : {
            	"default" : {
                    "icon" : false
                },
                'enable_true' : {
                    "icon" : 'fa fa-check  icon-lg'
                },
                'enable_false' : {
                    'icon' : 'fa fa-close  icon-lg'
                },
                'group':{
                	'icon' : 'fa fa-object-group  icon-lg'
                }
            },
            'plugins': ['types']
		}).on('select_node.jstree', jstreeClick);
	});
	
	$('.tooltips').tooltip();
	
});

function jstreeClick(){
	
	var selected = getCurrSelNode();
	
	var obj = selected[0].original;
	
	$('#saveModuleSett').attr('disabled', 'disabled');
	
	if(obj.pId==null) {
		
		$('#line-cast').hide();
		
		$('#init-text').show();
	}else {
		
		$('#line-cast').show();
		
		$('#init-text').hide();
		
		var userId = obj.userId;
		
		getModuleTreeData(userId);
		
	}
	
}

function getCurrSelNode(){
	
	var array = [];
	
	try {
		
		array = $.jstree.reference("#modules_tree").get_selected(true);
		
	} catch (e) {
		
		console.log(e);
		
	}
	
	return array;
}

function close_all(){
	
	$.jstree.reference("#modules_tree").close_all();
	
}

 

function getTreeData(cb){
	
	var treeData = [];
	
	$get('/userline/userRoleTree',null, function(arr){
		
		//转换为jsTree想要的数据格式
		treeData = createTreeData(arr);
		
		cb && cb(treeData)
	});
}

/**
 * 将模块List 转换为树结构
 * @param arr
 * @returns {Array}
 */
function createTreeData(arr){
	var treeData = [];
	var len = arr.length;
	for(var i = 0; i < len; i ++){
		var pId = arr[i].pId;
		arr[i].text = arr[i].name;
		if(!pId){
			treeData.push(arr[i]);
		}

		for(var j = 0; j < len; j ++){
			if(pId == arr[j].id){
				if(!arr[j].children)
					arr[j].children = [];
				arr[j].children.push(arr[i]);
				break;
			}
		}
	}
	return treeData;
}

function getModuleTreeData(userId){
	 
	
	$get('/line/all',null, function(linedata){
		
		$get('/userline/all',{'user.id_eq':userId}, function(userlinedata){
			
			var options = '';
			
			var len = userlinedata.length;
			
			$.each(linedata, function(i, g){
				
				//是否被当前用户持有
				var selected = '';
				
				if(len>0) {
					
					for(var j = 0;j<userlinedata.length;j++ ) {
						
						if(userlinedata[j].line.id==g.id){
							
							selected = 'selected';
							
							break;
							
						}
						
					}
					
				}
				
				options += '<option value="'+g.id+'" ' + selected +'>'+g.name+'</option>'
			 
			});
			
			//初始化multiSelect
			$('#moduleSettSelect').html(options).multiSelect({
			    selectableOptgroup: true,
			    
			    selectableFooter: "<div class='multi-custom-header-left'>未分配</div>",
			    selectionFooter: "<div class='multi-custom-header-right'>已分配</div>",
			    
			    selectableHeader: "<input type='text' class='search-input' style='width: 221px;' autocomplete='off' placeholder='搜索线路'>",
			    selectionHeader: "<input type='text' class='search-input' style='width: 221px;' autocomplete='off' placeholder='搜索线路'>",
			    afterInit: function(ms){
			      var that = this,
			          $selectableSearch = that.$selectableUl.prev(),
			          $selectionSearch = that.$selectionUl.prev(),
			          selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
			          selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

			      that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
			      .on('keydown', function(e){
			        if (e.which === 40){
			          that.$selectableUl.focus();
			          return false;
			        }
			      });

			      that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
			      .on('keydown', function(e){
			        if (e.which == 40){
			          that.$selectionUl.focus();
			          return false;
			        }
			      });
			    },
			    afterSelect: function(){
			      this.qs1.cache();
			      this.qs2.cache();
			    },
			    afterDeselect: function(){
			      this.qs1.cache();
			      this.qs2.cache();
			    }
			}).on('change',function(){
				
				if( $(this).val() ==null ||  $(this).val().length > 0)
					$('#saveModuleSett').removeAttr('disabled');
				else
					$('#saveModuleSett').attr('disabled', 'disabled');
			});
			
			$('#moduleSettSelect').multiSelect('refresh'); 
			
		});
		
	});
}


$('#saveModuleSett').on('click', function(){
	if($(this).attr('disabled'))
		return;
	
	var ids = '';
	
	if($('#moduleSettSelect').val() !=null) {
		
		$.each($('#moduleSettSelect').val(), function(i, mId){
			ids += mId + ',';
		});
		
	}
	
	var selected = getCurrSelNode();
	
	var obj = selected[0].original;
	
	if(obj) {
		
		$post('/userline/setLineCasts', {'userId': obj.userId,mIds: ids}, function(){
			$('#saveModuleSett').attr('disabled', 'disabled');
			layer.msg('修改成功!');
		});
		
	}
	
});
</script>