@angular-jz/jz
Version:
jim jz
111 lines (110 loc) • 6.42 kB
HTML
<div class="modal-header">
<button type="button" class="close" (click)="cancel()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">请选择用户</h4>
</div>
<div class="modal-body">
<table style="width:100%;">
<tr>
<td style="width:33%; padding: 0px 10px;" valign="top">
<div class="tabs-container">
<div class="input-group">
<input #keyword type="text" class="form-control" [(ngModel)]="criteria.keyword" (keyup.enter)="searchKeyword()" placeholder="请输入账号姓名搜索">
<div class="input-group-btn">
<button class="btn btn-primary" (click)="searchKeyword()">
搜索
</button>
</div>
</div>
<ul class="nav nav-tabs" style="margin-top:10px;">
<li [class.active]="tabIndex==0"><a (click)="activeTab(0)">部门</a></li>
<li [class.active]="tabIndex==1"><a (click)="activeTab(1)">角色</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" [class.active]="tabIndex==0">
<div class="panel-body">
<!--<div class="ibox">
<div class="ibox-title">
<div>
</div>
</div>
<div class="ibox-content">-->
<div style="height:305px;">
<tree-root #orgTree (event)="onOrgTreeEvent($event)" [nodes]="dics.orgs" [options]="{displayField: 'orgName', useVirtualScroll: true, animateExpand: true, animateSpeed: 30, animateAcceleration: 1.2, nodeHeight: 30, dropSlotHeight: 3}"></tree-root>
</div>
<!--</div>
</div>-->
</div>
</div>
<div class="tab-pane" [class.active]="tabIndex==1">
<div class="panel-body">
<!--<div class="ibox">
<div class="ibox-title">
<div>
</div>
</div>
<div class="ibox-content">-->
<div style="height:305px;">
<table class="table table-hover">
<tr *ngFor="let role of dics['roles']" style="cursor:pointer;" [style.backgroundColor]="role.id==criteria.roleId?'rgb(190, 235, 255)':''" (click)="selectRole(role)">
<td>
{{role.roleName}}
</td>
</tr>
</table>
</div>
<!--</div>
</div>-->
</div>
</div>
</div>
</div>
</td>
<td style="width:33%; padding: 0px 10px;" valign="top">
<div class="ibox">
<div class="ibox-title">
可选择用户({{totalCount}})
</div>
<div class="ibox-content" style="height:380px;">
<table class="table table-stripped table-hover" style="width:100%;">
<tbody>
<tr *ngFor="let user of items" style="cursor:pointer;" (click)="selectUser(user, isSelected(user))">
<td>{{user.userName}}({{user.userCode}})</td>
<td style="width:30px;"><span><i style="color:#c4c4c4;" class="fa" [ngClass]="isSelected(user)? 'fa-check': ''"></i></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<ngb-pagination *ngIf="totalCount>this.criteria.page.pageSize" class="pull-right" [collectionSize]="totalCount" [page]="criteria.page.pageNo" [maxSize]="5" [rotate]="true" [ellipses]="false" [boundaryLinks]="true" (pageChange)="pageChange($event)"></ngb-pagination>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</td>
<td style="width:50px; padding: 0px 0px;" align="center" valign="middle">
<span><i class="fa fa-angle-right" style="font-size:28px;color:#c4c4c4;"></i></span>
</td>
<td style="width:33%; padding: 0px 10px;" valign="top">
<div class="ibox">
<div class="ibox-title">
已选择用户({{selectedTotalCount}})
</div>
<div class="ibox-content" style="height:380px;">
<table class="table table-stripped table-hover" style="width:100%;">
<tr *ngFor="let user of selectedUsers">
<td>{{user.userName}}({{user.userCode}})</td>
<td style="width:30px;"><span><i class="fa fa-close" style="cursor:pointer;color:#c4c4c4;" (click)="unSelectUser(user)"></i></span></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" (click)="cancel()">关闭</button>
<button type="button" class="btn btn-primary" (click)="ok()">确定</button>
</div>