line.component.html

<!--进出口流量-->
<nz-modal [nzWidth]="780" [(nzVisible)]="isLine" nzTitle="流量配置" (nzOnCancel)="handleLineCancel()" (nzOnOk)="handleLineOk()">
  <form  nz-form>
    <nz-tabset>
      <nz-tab nzTitle="进流量">
        <div class="padding-10">
          <input (keyup.enter)="getInList()" name="inSearchName" style="width: 200px;" type="text" nz-input [(ngModel)]="inSearchName" placeholder="输入名称">
          <button (click)="getInList()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
        </div>
        <nz-table #basicTable1 [nzData]="inList"
                  [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="inPageNum" [nzPageSize]="inPageCount"
                  (nzCurrentPageDataChange)="incurrentPageDataChange($event)"
                  (nzPageIndexChange)="changePageIn($event)">
          <thead>
          <tr>
            <th></th>
            <th>名称</th>
            <th>主机名</th>
            <th>键值</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of basicTable1.data">
            <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="inselectItem(data,$event)"></td>
            <td>{{data.name}}</td>
            <td>{{data.hostName}}</td>
            <td>{{data.key}}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-tab>
      <nz-tab nzTitle="出流量">
        <div class="padding-10">
          <input name="outSearchName" (keyup.enter)="getOutList()" style="width: 200px;" type="text" nz-input [(ngModel)]="outSearchName" placeholder="输入名称">
          <button (click)="getOutList()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
        </div>
        <nz-table #basicTable2 [nzData]="outList"
                  [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="outPageNum" [nzPageSize]="outPageCount"
                  (nzCurrentPageDataChange)="outcurrentPageDataChange($event)"
                  (nzPageIndexChange)="changePageOut($event)">
          <thead>
          <tr>
            <th></th>
            <th>名称</th>
            <th>主机名</th>
            <th>键值</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of basicTable2.data">
            <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="outselectItem(data,$event)"></td>
            <td>{{data.name}}</td>
            <td>{{data.hostName}}</td>
            <td>{{data.key}}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-tab>
    </nz-tabset>
  </form>
</nz-modal>