group.component.html

<div nz-row class="breadcrumbs">
  <div nz-col nzSpan="16">
    <nz-breadcrumb class="padding-8-0">
      <nz-breadcrumb-item>
        首页
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>系统管理</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        组织用户
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
  <div nz-col nzSpan="8" class="text-right">
    <button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
    <smart-full-screen></smart-full-screen>
  </div>
</div>

<div nz-row class="search-form">
  <div nz-col nzSpan="16">
  </div>
  <div nz-col nzSpan="8" class="text-right">
    <input  style="width: 50%;" nz-input placeholder="姓名/手机号码" [(ngModel)]="name">
    <button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search"></i>搜索</button>
  </div>
</div>
<div nz-row [nzGutter]="12">
  <div nz-col nzSpan="6" >
    <div class="padding-15-0">
      <button (click)="showGroupModal()" nz-button nzType="primary">新增组织</button>
    </div>
    <nz-tree [(ngModel)]="nodes">
      <ng-template #nzTreeTemplate let-node>
        <span class="custom-node" draggable="true" aria-grabbed="true" [class.active]="node.isSelected">
          <span>
           <span (click)="getOrg(node)">{{node.title}} </span>
            <i (click)="showEditGroupModal(node)" style="margin:0 10px 0 20px;" class="anticon anticon-form"></i>
            <i (click)="deleteGroup(node)" class="anticon anticon-close-circle-o"></i>
          </span>
        </span>
      </ng-template>
    </nz-tree>
  </div>
  <div nz-col nzSpan="18">
    <div class="padding-15-0">
      <button (click)="showUserModal()" nz-button nzType="primary">新增用户</button>
      <button (click)="batchDelete()" nz-button nzType="default">批量删除</button>
      <!--<button nz-button nzType="default">批量修改</button>-->
      <button (click)="downLoad()" nz-button nzType="default">下载模版</button>
      <button (click)="showUploadModalOrg()" nz-button nzType="default">导入组织</button>
      <button (click)="showUploadModalUser()" nz-button nzType="default">导入用户</button>
    </div>
    <nz-table #basicTable [nzData]="dataSet" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageSize" (nzPageIndexChange)="changePage($event)">
      <thead>
      <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th>
        <th>姓名</th>
        <th>手机号码</th>
        <th>角色</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td nzShowCheckbox [(nzChecked)]="data.checked"></td>
        <td>{{data.name}}</td>
        <td>{{data.phoneNumber}}</td>
        <td>
          <span *ngFor="let item of data.roles">{{item.name}}  </span>
        </td>
        <td class="handle main-color">
          <span (click)="grantRole(data)">授权</span>
          <span (click)="showEditModal(data)">编辑</span>
          <span (click)="deleteUser(data)">删除</span>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</div>
<!--新增用户-->
<smart-user #smartUser (done)="getUser()"></smart-user>
<!--新增部门-->
<smart-group-modal #smartGroupModal (done)="getGroup()"></smart-group-modal>
<!--授予角色-->
<smart-select-role #smartSelectRole (done)="setRole($event)"></smart-select-role>
<!--导入文件-->
<smart-upload #smartUpload (done)="ngOnInit()"></smart-upload>