mirror of
https://github.com/DzzXH/DzzOffice.git
synced 2026-03-09 12:02:44 +08:00
300 lines
8.9 KiB
HTML
300 lines
8.9 KiB
HTML
|
<style>
|
|||
|
|
.modal-body{
|
|||
|
|
|
|||
|
|
padding:0;
|
|||
|
|
}
|
|||
|
|
.user-list{
|
|||
|
|
padding:10px 0;
|
|||
|
|
overflow-x:hidden;
|
|||
|
|
overlfow-y:auto
|
|||
|
|
}
|
|||
|
|
.user-list li{
|
|||
|
|
line-height:30px;
|
|||
|
|
list-style:none;
|
|||
|
|
padding:5px;
|
|||
|
|
margin:5px;
|
|||
|
|
cursor:pointer;
|
|||
|
|
border:1px solid #FFF;
|
|||
|
|
overflow:hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-list li.selected{
|
|||
|
|
background-color: #0081C2;
|
|||
|
|
background-image: linear-gradient(to bottom, #0088CC, #0077B3);
|
|||
|
|
background-repeat: repeat-x;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
.user-list li img{
|
|||
|
|
width:21px;
|
|||
|
|
height:21px;
|
|||
|
|
margin-top:-2px;
|
|||
|
|
}
|
|||
|
|
.user-list li span{
|
|||
|
|
padding:0 10px;
|
|||
|
|
line-height:21px;
|
|||
|
|
}
|
|||
|
|
.seluser-select,.seluser-selected{
|
|||
|
|
height:295px;
|
|||
|
|
border-top:1px solid #DDD;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul{
|
|||
|
|
margin:0;
|
|||
|
|
}
|
|||
|
|
.range{
|
|||
|
|
padding:5px;
|
|||
|
|
}
|
|||
|
|
.dropdown-menu .child-org{
|
|||
|
|
height: 20px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.dropdown-menu .child-org .child-tree {
|
|||
|
|
display: inline-block;
|
|||
|
|
height: 20px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
width: 10px;
|
|||
|
|
}
|
|||
|
|
.user-list .hover{
|
|||
|
|
background:#F1F1F1;
|
|||
|
|
border:1px solid #CCC;
|
|||
|
|
}
|
|||
|
|
.user-list a{
|
|||
|
|
display:none;
|
|||
|
|
padding:0 5px;
|
|||
|
|
}
|
|||
|
|
.user-list .setmoderator{
|
|||
|
|
padding:0 2px 0 0;
|
|||
|
|
}
|
|||
|
|
.seluser-selected a{
|
|||
|
|
display:inline-block;
|
|||
|
|
}
|
|||
|
|
.seluser-selected a .glyphicon-ismoderator{
|
|||
|
|
display:inline-block;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.seluser-selected .remove{
|
|||
|
|
display:none;
|
|||
|
|
}
|
|||
|
|
.seluser-selected .hover .remove{
|
|||
|
|
display:inline-block;
|
|||
|
|
}
|
|||
|
|
.seluser-select .add{
|
|||
|
|
display:none;
|
|||
|
|
}
|
|||
|
|
.seluser-select .hover .add{
|
|||
|
|
display:inline-block;
|
|||
|
|
}
|
|||
|
|
.seluser-select a{
|
|||
|
|
display:none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.seluser-selected a.glyphicon-user .glyphicon-user,.seluser-selected a.glyphicon-user .glyphicon-ismoderator{
|
|||
|
|
display:none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-body{
|
|||
|
|
overflow-y:hidden;
|
|||
|
|
}
|
|||
|
|
.member-info {
|
|||
|
|
height:33px;
|
|||
|
|
line-height:30px;
|
|||
|
|
}
|
|||
|
|
.member-info .sum{
|
|||
|
|
color:#F60;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="row-fluid">
|
|||
|
|
<div class="col-xs-5">
|
|||
|
|
<div class="seluser-range" >
|
|||
|
|
<ul class="nav nav-pills nav-stacked" style="margin:10px 0;height:33px;overflow:visible;">
|
|||
|
|
|
|||
|
|
<!--{if $orgtree}-->
|
|||
|
|
<li class="dropdown <!--{if $org}-->active<!--{/if}-->">
|
|||
|
|
<!--{if $org}-->
|
|||
|
|
<a href="javascript:;" data-toggle="dropdown" role="button" id="drop-org" _orgid="$org[orgid]" class="dropdown-toggle" style="padding:8px 10px;">$org[orgname]<b class="caret"></b></a>
|
|||
|
|
<!--{else}-->
|
|||
|
|
<a href="{BASESCRIPT}?mod=$mod&orgid=0" data-toggle="dropdown" role="button" id="drop-org" _orgid="0" class="dropdown-toggle">{lang all}<b class="caret"></b></a>
|
|||
|
|
<!--{/if}-->
|
|||
|
|
<ul aria-labelledby="drop-org" role="menu" class="dropdown-menu" id="drop-org-menu">
|
|||
|
|
$orgtree
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<!--{/if}-->
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<ul id="seluser_select" class="user-list seluser-select">
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-2" style="border-right:1px solid #DDD;border-left:1px solid #DDD;height:350px;">
|
|||
|
|
<table width="100%" height="100%">
|
|||
|
|
<tr><td></td></tr>
|
|||
|
|
<tr><td align="center" valign="middle"><a id="seluser_addall" href="javascript:;" class="btn btn-primary " title="{lang add_all}"><i class="glyphicon glyphicon-forward"></i><i class="glyphicon glyphicon-forward" style="margin-left:-2px;"></i></a></td></tr>
|
|||
|
|
<tr><td align="center" valign="top"><a id="seluser_removeall" href="javascript:;" class="btn btn-danger" title="{lang remover_all}"><i class="glyphicon glyphicon-backward"></i><i class="glyphicon glyphicon-backward" style="margin-left:-2px;"></i></a></td></tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xs-5" style="height:345px;">
|
|||
|
|
<h5 class="member-info">
|
|||
|
|
{lang selected}: <span id="member_sum" class="sum">0</span> {lang administrator}：<span id="moderator_sum" class="sum">0</span>
|
|||
|
|
</h5>
|
|||
|
|
<ul id="seluser_selected" class="user-list seluser-selected">
|
|||
|
|
<!--{loop $userlist $value}-->
|
|||
|
|
<li username="$value[username]" uid="$value[uid]">
|
|||
|
|
<!--{if $value[ismoderator]}-->
|
|||
|
|
<a href="javascript:;" class="setmoderator glyphicon glyphicon-user" title="{lang cancel_administrator}"><i class="glyphicon-ismoderator glyphicon glyphicon-user "></i></a>
|
|||
|
|
<!--{else}-->
|
|||
|
|
<a href="javascript:;" class="setmoderator glyphicon" title="{lang set_administrator}"><i class="glyphicon glyphicon-ismoderator"></i></a>
|
|||
|
|
<!--{/if}-->
|
|||
|
|
<img src="avatar.php?uid=$value[uid]">
|
|||
|
|
<span>$value[username]</span>
|
|||
|
|
<a class="pull-right remove" href="javascript:;" onclick="deleteMember(this,'$value[uid]');" title="{lang delete}"><i class="glyphicon glyphicon-remove"></i></a>
|
|||
|
|
</li>
|
|||
|
|
<!--{/loop}-->
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript" >
|
|||
|
|
jQuery('#myModalLabel').html('{lang member_management} － $org[orgname]');
|
|||
|
|
fixTree_seluser();
|
|||
|
|
setCount();
|
|||
|
|
getUserList('{$orgid}');
|
|||
|
|
jQuery(document).off('click','.setmoderator');
|
|||
|
|
jQuery(document).on('click','.setmoderator',function(){
|
|||
|
|
if(jQuery(this).hasClass('glyphicon-user')){
|
|||
|
|
jQuery(this).removeClass('glyphicon-user')
|
|||
|
|
}else{
|
|||
|
|
jQuery(this).addClass('glyphicon-user')
|
|||
|
|
}
|
|||
|
|
setCount();
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
jQuery(document).off('click','.add');
|
|||
|
|
jQuery(document).on('click','.add',function(){
|
|||
|
|
var li=jQuery(this).parent();
|
|||
|
|
addToRight(li);
|
|||
|
|
setCount();
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
jQuery(document).off('dblclick','.user-list li');
|
|||
|
|
jQuery(document).on('dblclick','.user-list li',function(e){
|
|||
|
|
addToRight(jQuery(this));
|
|||
|
|
setCount();
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
jQuery(document).off('mouseenter','.user-list li');
|
|||
|
|
jQuery(document).on('mouseenter','.user-list li',function(e){
|
|||
|
|
jQuery(this).addClass('hover');
|
|||
|
|
jQuery(this).find('.glyphicon-ismoderator').addClass('glyphicon-user');
|
|||
|
|
});
|
|||
|
|
jQuery(document).off('mouseleave','.user-list li');
|
|||
|
|
jQuery(document).on('mouseleave','.user-list li',function(e){
|
|||
|
|
jQuery(this).removeClass('hover');
|
|||
|
|
jQuery(this).find('.glyphicon-ismoderator').removeClass('glyphicon-user');
|
|||
|
|
});
|
|||
|
|
/*jQuery(document).off('click','#seluser_add');
|
|||
|
|
jQuery(document).on('click','#seluser_add',function(e){
|
|||
|
|
jQuery('#seluser_select li.selected').each(function(){
|
|||
|
|
addToRight(jQuery(this));
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
});*/
|
|||
|
|
jQuery(document).off('click','#seluser_addall');
|
|||
|
|
jQuery(document).on('click','#seluser_addall',function(e){
|
|||
|
|
jQuery('#seluser_select li').each(function(){
|
|||
|
|
addToRight(jQuery(this));
|
|||
|
|
});
|
|||
|
|
setCount();
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
/*jQuery(document).off('click','#seluser_remove');
|
|||
|
|
jQuery(document).on('click','#seluser_remove',function(e){
|
|||
|
|
jQuery('#seluser_selected li.selected').each(function(){
|
|||
|
|
removeToLeft(jQuery(this));
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
});*/
|
|||
|
|
jQuery(document).off('click','#seluser_removeall');
|
|||
|
|
jQuery(document).on('click','#seluser_removeall',function(e){
|
|||
|
|
jQuery('#seluser_selected li').each(function(){
|
|||
|
|
removeToLeft(jQuery(this));
|
|||
|
|
});
|
|||
|
|
setCount();
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
function setCount(){
|
|||
|
|
var i=0;
|
|||
|
|
var j=0;
|
|||
|
|
jQuery('#seluser_selected li').each(function(){
|
|||
|
|
i++;
|
|||
|
|
if(jQuery(this).find('.setmoderator').hasClass('glyphicon-user')){
|
|||
|
|
j++;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
jQuery('#member_sum').html(i);
|
|||
|
|
jQuery('#moderator_sum').html(j);
|
|||
|
|
}
|
|||
|
|
function removeToLeft(li){
|
|||
|
|
if(jQuery('#seluser_select li[uid='+li.attr('uid')+']').length>0){
|
|||
|
|
li.remove();
|
|||
|
|
}else{
|
|||
|
|
li.removeClass('selected').removeClass('hover')
|
|||
|
|
.find('.setmoderator').remove()
|
|||
|
|
.end()
|
|||
|
|
.find('.remove').replaceWith('<a class="pull-right add" href="javascript:;" title="{lang add}"><i class="glyphicon glyphicon-forward"></i></a>')
|
|||
|
|
.end()
|
|||
|
|
.appendTo('#seluser_select');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function addToRight(li){
|
|||
|
|
if(jQuery('#seluser_selected li[uid='+li.attr('uid')+']').length>0){
|
|||
|
|
li.remove();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
li.attr('class','')
|
|||
|
|
.find('img').before('<a href="javascript:;" class="setmoderator glyphicon" title="{lang set_administrator}"><i class="glyphicon glyphicon-ismoderator"></i></a> ')
|
|||
|
|
.end()
|
|||
|
|
.find('.add').replaceWith('<a class="pull-right remove" href="javascript:;" onclick="deleteMember(this,'+li.attr('uid')+');" title="{lang delete}"><i class="glyphicon glyphicon-remove"></i></a>')
|
|||
|
|
.end()
|
|||
|
|
.appendTo('#seluser_selected');
|
|||
|
|
}
|
|||
|
|
function deleteMember(obj,uid){
|
|||
|
|
removeToLeft(jQuery(obj).parent());
|
|||
|
|
setCount();
|
|||
|
|
}
|
|||
|
|
function fixTree_seluser(){
|
|||
|
|
jQuery('#drop-depart-menu .tree-heng1').each(function(){
|
|||
|
|
var tr=jQuery(this).parent().parent().parent();
|
|||
|
|
var dep=jQuery(this).parent().find('.tree-su').length;
|
|||
|
|
|
|||
|
|
tr.nextAll().each(function(){
|
|||
|
|
var child_org=jQuery(this).find('.child-org');
|
|||
|
|
var dep1=child_org.find('.tree-su').length;
|
|||
|
|
if(dep1<=dep) return false;
|
|||
|
|
else{
|
|||
|
|
child_org.find('.tree-su').eq(dep).removeClass('tree-su');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function selDepart(obj){
|
|||
|
|
var el=jQuery(obj);
|
|||
|
|
var orgid=jQuery(obj).attr('_orgid');
|
|||
|
|
if(orgid!=jQuery('#drop-org').attr('_orgid')){
|
|||
|
|
jQuery('#drop-org').attr('_orgid',orgid).html(el.find('.child-org').html().replace(/<span.+?<\/span>/g,'')+'<b class="caret"></b></a>');
|
|||
|
|
getUserList(orgid);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function getUserList(orgid){
|
|||
|
|
jQuery('#seluser_select').load('misc.php?mod=ajax&op=getuserlist&orgid='+orgid,function(){
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|