|
|
|
<div class="content">
|
|
|
|
<div class="header">
|
|
|
|
<form #form="ngForm">
|
|
|
|
<div class="queryBox">
|
|
|
|
|
|
|
|
<div class="queryField">
|
|
|
|
<label style="margin-right: 10px;">用户姓名:</label>
|
|
|
|
<input type="text" [(ngModel)]="name" name="name" autocomplete="off" placeholder="请输入用户姓名">
|
|
|
|
</div>
|
|
|
|
<div class="queryField">
|
|
|
|
<label style="margin-right: 10px;">身份证号:</label>
|
|
|
|
<input type="text" [(ngModel)]="identityCard" name="identityCard" autocomplete="off" placeholder="请输入身份证号">
|
|
|
|
</div>
|
|
|
|
<div class="queryField" style="position: relative;">
|
|
|
|
<label style="margin-right: 10px;">消防救援站:</label>
|
|
|
|
<input type="text" [(ngModel)]="organizationName" name="organizationName" readonly autocomplete="off" placeholder="请选择消防救援站" (click)='showTree()'>
|
|
|
|
<mat-icon class="closeTree" *ngIf="isShowTree" (click)='hideTree()'>highlight_off</mat-icon>
|
|
|
|
<div class="treeDiv searchTree" *ngIf="isShowTree">
|
|
|
|
<mat-tree [dataSource]="dataSources" [treeControl]="treeControl">
|
|
|
|
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)='selectTree(node)'>
|
|
|
|
<button type="button" mat-icon-button disabled ></button>
|
|
|
|
<li>{{node.name}}</li>
|
|
|
|
</mat-tree-node>
|
|
|
|
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)='selectTree(node)'>
|
|
|
|
<button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
|
|
|
|
<mat-icon mat-icon class="mat-icon-rtl-mirror">{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
|
|
|
</button>
|
|
|
|
<li>{{node.name}}</li>
|
|
|
|
</mat-tree-node>
|
|
|
|
</mat-tree>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="queryField">
|
|
|
|
<button mat-raised-button (click)='initData()' style="background-color: #07CDCF;">查询</button>
|
|
|
|
<button mat-raised-button (click)='empty()' style="margin-left: 10px; background-color: #FF8678;">重置</button>
|
|
|
|
</div>
|
|
|
|
<div class="queryField">
|
|
|
|
<button mat-raised-button (click)='open()' style="background-color: #07CDCF;">新增用户</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<table mat-table [dataSource]="dataSource">
|
|
|
|
|
|
|
|
<ng-container matColumnDef="name">
|
|
|
|
<th mat-header-cell *matHeaderCellDef>用户姓名</th>
|
|
|
|
<td mat-cell *matCellDef="let element">{{element.realName}}</td>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container matColumnDef="identitycard">
|
|
|
|
<th mat-header-cell *matHeaderCellDef>身份证号</th>
|
|
|
|
<td mat-cell *matCellDef="let element">{{element.identityCard}}</td>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container matColumnDef="post">
|
|
|
|
<th mat-header-cell *matHeaderCellDef>消防救援站</th>
|
|
|
|
<td mat-cell *matCellDef="let element">{{element.organizationName}}</td>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container matColumnDef="tel">
|
|
|
|
<th mat-header-cell *matHeaderCellDef>手机号</th>
|
|
|
|
<td mat-cell *matCellDef="let element">{{element.phone}}</td>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container matColumnDef="time">
|
|
|
|
<th mat-header-cell *matHeaderCellDef>创建时间</th>
|
|
|
|
<td mat-cell *matCellDef="let element">{{element.creationTime | date:'yyyy-MM-dd'}}</td>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<ng-container matColumnDef="operation">
|
|
|
|
<th mat-header-cell *matHeaderCellDef>操作</th>
|
|
|
|
<td mat-cell *matCellDef="let element">
|
|
|
|
<span class="operationSpan"><span class="spanbtn green" (click)="reset(element)">重置密码</span></span>
|
|
|
|
<span class="operationSpan"><span class="spanbtn green" (click)="edit(element)">编辑</span></span>
|
|
|
|
<span *ngIf="element.enabled" class="operationSpan"><span class="spanbtn red" (click)="noEnabled(element)">禁用</span></span>
|
|
|
|
<span *ngIf="!element.enabled" class="operationSpan"><span class="spanbtn gray" (click)="enabled(element)">启用</span></span>
|
|
|
|
<span class="operationSpan"><span class="spanbtn red" (click)="delete(element)">删除</span></span>
|
|
|
|
</td>
|
|
|
|
</ng-container>
|
|
|
|
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
|
|
</table>
|
|
|
|
<mat-paginator [length]="length"
|
|
|
|
[pageSize]="pageSize"
|
|
|
|
[pageSizeOptions]="pageSizeOptions"
|
|
|
|
(page)="chagePage($event)">
|
|
|
|
</mat-paginator>
|
|
|
|
|
|
|
|
</div>
|