Jinan_project/src/app/home/system-management/user/user.component.html

<div class="box">
    <div class="header">
        <span>
            用户管理
        </span>
    </div>
    <div class="searchbox">
        <div class="search">
            <input type="text" nz-input placeholder="用户姓名" [(ngModel)]="searchForm.name" />
            <nz-tree-select [nzExpandedKeys]="expandKeys" [nzNodes]="nodes" nzShowSearch nzPlaceHolder="所属机构"
                [(ngModel)]="searchForm.or" [nzExpandedIcon]="multiExpandedIconTpl"
                [nzDropdownClassName]="'maxHeightTreeSelect'" [nzAllowClear]="false"></nz-tree-select>
            <ng-template #multiExpandedIconTpl let-node let-origin="origin">
                <ng-container *ngIf="node.children.length == 0; else elseTemplate">

                </ng-container>
                <ng-template #elseTemplate>
                    <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
                        class="ant-tree-switcher-line-icon"></i>
                </ng-template>
            </ng-template>
            <button (click)="search()" nz-button nzType="primary"><i nz-icon nzType="search"
                    nzTheme="outline"></i>查询</button>
            <button (click)="reset()" nz-button nzType="default"><i nz-icon nzType="reload"
                    nzTheme="outline"></i>重置</button>
        </div>

        <button nz-button nzType="primary" (click)="addUser()"><i nz-icon nzType="plus-circle"
                nzTheme="outline"></i>创建用户</button>
    </div>
    <div class="content">
        <div class="tablebox">
            <nz-table nzBordered #basicTable [nzLoading]="isLoading" [nzData]="userList" [nzShowPagination]='false'
                [nzPageSize]='16'>
                <thead>
                    <tr>
                        <th>登陆账号</th>
                        <th>真实姓名</th>
                        <th>所属机构</th>
                        <th>角色</th>
                        <th>职位</th>
                        <th>创建时间</th>
                        <th [width]="'20%'">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of basicTable.data">
                        <td>
                            {{item.username}}
                        </td>
                        <td>
                            {{item.name}}
                        </td>
                        <td>
                            {{item.organizationName}}
                        </td>
                        <td>
                            <span *ngFor="let i of item.roles">
                                {{i.name}}
                            </span>
                        </td>
                        <td>
                            <span *ngFor="let i of item.posts">
                                {{i}}
                            </span>
                        </td>
                        <td>
                            {{item.creationTime | date:"yyyy-MM-dd"}}
                        </td>
                        <td class="operation">
                            <a (click)="editUser(item)">编辑</a>
                            <a (click)="resetPassword(item)">重置密码</a>
                            <!-- <a *ngIf="!item.enabled" class="green" (click)="cancel(item,true)">启用</a>
                            <a *ngIf="item.enabled" class="redColor" (click)="cancel(item,false)">禁用</a> -->
                            <a class="red" (click)="delete(item)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
        <div class="pagination">
            <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="totalCount" [nzPageSize]="16"
                [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
            </nz-pagination>
            <ng-template #totalTemplate let-total> 16条/页,共{{totalCount}}条 </ng-template>
        </div>
    </div>
</div>