template.component.html

<div nz-row class="breadcrumbs">
  <div nz-col nzSpan="12">
    <nz-breadcrumb class="padding-8-0">
      <nz-breadcrumb-item>
        首页
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>综合监控</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a (click)="backList()">模版配置</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item *ngIf="searchStatus">
        搜索结果
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
  <div nz-col nzSpan="10" class="search-input text-right"></div>
  <div nz-col nzSpan="2" 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 tag-form">
  <div nz-col nzSpan="12">
    <input style="width: 250px" (keyup.enter)="search()" type="text" nz-input [(ngModel)]="searchName" placeholder="输入资源名称">
    <button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
    <button (click)="download()" [nzLoading]="isDownload" nz-button nzType="default"><i class="anticon anticon-download"></i>下载模版</button>
    <button (click)="showUploadModal()"  nz-button nzType="default"><i class="anticon anticon-upload"></i>导入文件</button>
  </div>
  <div nz-col nzSpan="12" class="text-right">
    <button nz-button nzType="default" (click)="showGroupModal()">
      <i class="anticon anticon-plus-circle-o"></i>添加模版组
    </button>
    <button (click)="batchDeleteConfirm()" nz-button nzType="default"><i class="anticon anticon-close-circle-o"></i>删除模版
    </button>
  </div>
</div>
<nz-table #nzTable [nzData]="dataSet" nzSingleSort [nzLoading]="isLoading" [nzShowPagination]="frontPagination">
  <thead>
  <tr>
    <th [nzChecked]="allChecked"></th>
    <th nzWidth="30%">名称</th>
    <th nzWidth="20%">描述</th>
    <th>自动发现</th>
    <th>监控项</th>
    <th>阈值</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>

  <!--正常-->
  <ng-container *ngIf="!searchStatus">
    <ng-template ngFor let-data [ngForOf]="nzTable.data">
      <ng-template ngFor let-item [ngForOf]="expandDataCache[data.host]">
        <tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
          <!--父级-->
          <ng-container *ngIf="!item.level">
            <td></td>
            <td class="cursor" [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand'
                (nzExpandChange)="getChildren(item)">
              <span>{{item.name}}</span> <span class="host-number">模版数量：{{item.templatescount}}</span>
            </td>
            <td>{{item.description}}</td>
            <td></td>
            <td></td>
            <td></td>
          </ng-container>
          <!--子集-->
          <ng-container *ngIf="item.level">
            <td nzShowCheckbox [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
            <td class="cursor" [nzIndentSize]="item.level*20">
              <span>{{item.name}}</span>
            </td>
            <td>{{item.description}}</td>
            <td class="main-color cursor">
              <span (click)="goToDiscovery(item)">{{item.discoveriesCount}}</span>
            </td>
            <td class="main-color cursor">
              <span (click)="goToItem(item)"> {{item.itemsCount}}</span>
            </td>
            <td class="main-color cursor">
              <span (click)="goToTri(item)">{{item.triggersCount}}</span>
            </td>
          </ng-container>

          <td class="handle main-color">
            <ng-container *ngIf="!item.level">
              <span (click)="showTempAddModal(item)">添加模版</span>
              <span (click)="updateGroup(item)">编辑</span>
              <span (click)="showDeleteGroupConfirm(item)">删除</span>
            </ng-container>
            <ng-container *ngIf="item.level">
              <span (click)="cloneTemp(item)">克隆</span>
              <span (click)="showTempEditModal(item)">编辑</span>
              <span (click)="showDeleteConfirm(item)">删除</span>
            </ng-container>
          </td>
        </tr>
      </ng-template>
    </ng-template>
  </ng-container>

  <!--搜索-->
  <ng-container *ngIf="searchStatus">
    <ng-container *ngFor="let item of nzTable.data">
      <tr>
        <td nzShowCheckbox [nzIndeterminate]="indeterminate" (nzCheckedChange)="selectChecked($event,item)"
            [(nzChecked)]="item.checked"></td>
        <td class="cursor">
          <span >{{item.name}}</span>
        </td>
        <td>{{item.description}}</td>
        <td class="main-color cursor">
          <span (click)="goToDiscovery(item)">{{item.discoveriesCount}}</span>
        </td>
        <td class="main-color cursor">
          <span (click)="goToItem(item)"> {{item.itemsCount}}</span>
        </td>
        <td class="main-color cursor">
          <span (click)="goToTri(item)">{{item.triggersCount}}</span>
        </td>
        <td class="handle main-color">
          <span (click)="cloneTemp(item)">克隆</span>
          <span (click)="showTempEditModal(item)">编辑</span>
          <span (click)="showDeleteConfirm(item)">删除</span>
        </td>
      </tr>
    </ng-container>
  </ng-container>
  </tbody>
</nz-table>

<nz-spin style="position: absolute;top: 35%;left: 50%;" [nzIndicator]="indicatorTemplate" nzTip='克隆中...' [nzSpinning]="isClone"></nz-spin>
<ng-template #indicatorTemplate><i class="anticon anticon-spin anticon-loading" style="font-size: 24px;"></i></ng-template>

<!-- 添加资源-->
<smart-basic-edit #basicEdit (done)="handleOk($event)"></smart-basic-edit>
<!--添加监测点-->
<smart-basi-check #smartCheck></smart-basi-check>
<!--添加分组-->
<smart-create-group #smartCreateGroup (add)="handleOk($event)"></smart-create-group>
<!--临时暂停-->
<smart-pause #smartPause (done)="handleOk($event)"></smart-pause>
<!--添加告警-->
<smart-alarm-modal #smartAlarmModal (done)="handleOk($event)"></smart-alarm-modal>
<!--自动发现-->
<smart-discovery #smartDiscovery (done)="handleOk($event)"></smart-discovery>
<!--监控策略-->
<smart-strategy #smartStrategy (done)="handleOk($event)"></smart-strategy>
<!--导入文件-->
<smart-upload #smartUpload></smart-upload>