airport-chengdu-web/src/app/pages/system-management/user-management/user-management.component.html

<div class="system-main-container"> 
	<div class="user-manage">
		<div class="tree-box" id="tree-box">
			<app-request-status [statusParams]='statusParamsTree'></app-request-status>
			<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
		</div>
		<div class="system-main-content card" id="main-box">
			<div class="search-box">
				<div nz-row>
					<div nz-col nzSpan="8">
						<nz-form-item >
							<nz-form-label class="left">姓名</nz-form-label>
							<nz-form-control nzSpan="17">
							  <input nz-input [(ngModel)]='search.real_name'  placeholder="请输入姓名">
							</nz-form-control>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="8">
						<nz-form-item >
							<nz-form-label nzSpan="8">用户名</nz-form-label>
							<nz-form-control nzSpan="15">
							  <input nz-input [(ngModel)]='search.login_name'  placeholder="请输入用户名">
							</nz-form-control>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="8">
						<nz-form-item >
							<nz-form-control nzSpan="24">
								<button class="mr10" nz-button nzType="primary"  (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
								<button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button>
							</nz-form-control>
						</nz-form-item>
					</div>
				</div>
				<div class="table-operation-box">
					<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
				</div>
			</div>
			<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
			<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
				<nz-table [nzShowPagination]='false'  #dataSet [nzData]="tableData">
					<thead>
						<tr>
							<th>姓名</th>
							<th>用户名</th>
							<th>电话</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr *ngFor="let item of dataSet.data">
							<td><a (click)='open(item)' href="javascript:;">{{item.real_name}}</a></td>
							<td>{{item.login_name}}</td>
							<td>{{item.mobile}}</td>
							<td>
								<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
								<nz-divider nzType="vertical"></nz-divider>
								<i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
							</td>
						</tr>
					</tbody>
				</nz-table>
				<div class="page-box" *ngIf="statusParamsTable.status==3">
					<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
				</div>
			</div>	
			
		</div>
	</div>
</div>
<!-- 详情 -->
<div class="user-detail-box">
	<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"[nzMaskClosable]="true" [nzWidth]="500" [nzVisible]="visible" nzTitle="用户详情" (nzOnClose)="close()">
		<app-request-status  [statusParams]='statusParamsDetail'></app-request-status>
		<form class="user-detail" *ngIf='statusParamsDetail.status==3' nz-form [nzLayout]="'inline'">
		<div nz-row nzGutter="8">
		  <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>姓名</nz-form-label>
				<span class="detail-item-text">{{userDetail.real_name}}</span>
				<span *ngIf='!userDetail.real_name'>无</span>
		    </nz-form-item>
		  </div>
		   <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>系统账号</nz-form-label>
				<span class="detail-item-text">{{userDetail.login_name}}</span>
				<span *ngIf='!userDetail.login_name'>无</span>
		    </nz-form-item>
		  </div>
		</div>
		<div nz-row nzGutter="8">
		   <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>系统密码</nz-form-label>
				<span class="detail-item-text">{{userDetail.password}}</span>
				<span *ngIf='!userDetail.password'>无</span>
		    </nz-form-item>
		  </div>
		   <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>所属机构</nz-form-label>
				<span *ngFor="let option of userDetail.orgList" class="detail-item-text">{{option.organization}}</span>
				<span *ngIf="userDetail.orgList.length<=0">无</span>
		    </nz-form-item>
		  </div>
		</div>
		<div nz-row nzGutter="8">
		  <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>所属角色</nz-form-label>
				<ng-container *ngFor="let option of userDetail.roleList;let i=index">
					<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
				</ng-container>
				<span *ngIf="userDetail.roleList.length<=0">无</span>
		    </nz-form-item>
		  </div>
		  <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>描述</nz-form-label>
				<span class="detail-item-text">{{userDetail.remark}}</span>
				<span *ngIf='!userDetail.remark'>无</span>
		    </nz-form-item>
		  </div>
		</div>
		<div nz-row nzGutter="8">
		   <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>身份证号</nz-form-label>
				<span class="detail-item-text">{{userDetail.identify_num}}</span>
				<span *ngIf='!userDetail.identify_num'>无</span>
		    </nz-form-item>
		  </div>
		   <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>邮箱</nz-form-label>
				<span class="detail-item-text">{{userDetail.email}}</span>
				<span *ngIf='!userDetail.email'>无</span>
		    </nz-form-item>
		  </div>
		</div>
		<div nz-row nzGutter="8">
		   <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>电话</nz-form-label>
				<span class="detail-item-text">{{userDetail.mobile}}</span>
				<span *ngIf='!userDetail.mobile'>无</span>
		    </nz-form-item>
		  </div>
		  <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>状态</nz-form-label>
				<span class="detail-item-text" *ngIf='userDetail.status==1'>已激活</span>
				<span class="detail-item-text" *ngIf='userDetail.status==0'>未激活</span>
				<span *ngIf='!userDetail.status'>无</span>
		    </nz-form-item>
		  </div>
		</div>
		<div nz-row nzGutter="8">
		  <div nz-col nzSpan="24">
		    <nz-form-item>
		      <nz-form-label>性别</nz-form-label>
				<span class="detail-item-text" *ngIf='userDetail.sex=="m"'>男</span>
				<span class="detail-item-text" *ngIf='userDetail.sex=="f"'>女</span>
				<span *ngIf='!userDetail.sex'>无</span>
		    </nz-form-item>
		  </div>
		</div>
		</form>
	</nz-drawer>
</div>