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 nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
    <button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
    <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
  </div>
</div>

<div nz-row class="search-form">
  <div nz-col nzSpan="16">
    <button (click)="selectRoleModal()" nz-button nzType="default"><i class="anticon anticon-search"></i>选择角色</button>
    <button (click)="showModal()" nz-button nzType="default"><i class="anticon anticon-search"></i>选择部门</button>
  </div>
  <div nz-col nzSpan="8" class="text-right">
    <input nz-input placeholder="姓名/手机号码">
    <button 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>
           {{node.title}}
            <i (click)="editGroup(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 nz-button nzType="default">导出模版</button>
      <button nz-button nzType="default">导入组织</button>
      <button nz-button nzType="default">导入用户</button>
    </div>
    <nz-table #basicTable [nzData]="dataSet"
              (nzCurrentPageDataChange)="currentPageDataChange($event)"
              (nzPageIndexChange)="refreshStatus()"
              (nzPageSizeChange)="refreshStatus()">
      <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" (nzCheckedChange)="selectItem(data,$event)"></td>
        <td>{{data.name}}</td>
        <td>{{data.phoneNumber}}</td>
        <td>
          <span *ngFor="let item of data.roles">{{item.name}}  </span>
        </td>
        <td class="handle">
          <span (click)="grantRole(data)">授权</span>
          <span>查看</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>