work-handle.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 [nzGutter]="4" class="search-form">
  <div nz-col nzSpan="3">
    <button (click)="showAddModal()" nz-button nzType="default"><i class="anticon anticon-plus-circle-o"></i>新增事件</button>
  </div>
  <div nz-col nzSpan="2">
    <nz-select nzAllowClear style="width: 100%;" [(ngModel)]="obj.type" nzPlaceHolder="事件分类">
      <ng-container *ngFor="let item of eventTypeList">
        <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
      </ng-container>
    </nz-select>
  </div>
  <div nz-col nzSpan="2">
    <nz-select nzAllowClear style="width: 100%;"  [(ngModel)]="obj.status" nzPlaceHolder="事件状态">
        <nz-option nzLabel="待处理" nzValue="0"></nz-option>
        <nz-option nzLabel="已结束" nzValue="1"></nz-option>
    </nz-select>
  </div>
  <div nz-col nzSpan="3">
    <nz-select nzAllowClear style="width: 100%;" [(ngModel)]="obj.source" nzPlaceHolder="事件来源">
        <nz-option nzLabel="系统警告" nzValue="0"></nz-option>
        <nz-option nzLabel="手动新增" nzValue="1"></nz-option>
    </nz-select>
  </div>
  <div nz-col nzSpan="8">
    <nz-date-picker
            [nzFormat]="timeFormat"
            [(ngModel)]="startTime"
            nzPlaceHolder="开始时间"></nz-date-picker>
    <nz-date-picker
            [nzFormat]="timeFormat"
            [(ngModel)]="endTime"
            nzPlaceHolder="结束时间"></nz-date-picker>
  </div>
  <div nz-col nzSpan="4">
    <input type="text" nz-input [(ngModel)]="obj.searchStr" placeholder="事件编号/处理人">
  </div>
  <div nz-col nzSpan="2">
    <button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
  </div>
</div>

<nz-table #nzTable [nzData]="eventList" [nzLoading]="isLoading" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)">
  <thead>
  <tr>
    <th>事件编号</th>
    <th>标题</th>
    <th>时间</th>
    <th>事件来源</th>
    <th>事件分类</th>
    <th nzWidth="15%">处理人</th>
    <th>状态</th>
    <th style="text-align: center">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of eventList">
    <td class="round-tag tag-form">
      {{data.id}}
    </td>
    <td>
    {{data.title}}
    </td>
    <td>{{data.createTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
    <td>
      <span *ngIf="data.source == 0">系统告警</span>
      <span *ngIf="data.source == 1">手动新增</span>
    </td>
    <td>{{data.typeName}}</td>
    <td>
      <span style="margin-right: 5px;" *ngFor="let item of data?.operators">
        {{item.username}}
      </span>
    </td>
    <td>
      <span *ngIf="data.status == 0">待处理</span>
      <span *ngIf="data.status == 1">已结束</span>
    </td>
    <td class="handle text-center main-color">
      <span *ngIf="data.status == 1" (click)="lookEvent(data)">查看</span>
      <span *ngIf="data.status == 0" (click)="goToHandle(data)">处理</span>
      <span *ngIf="data.status == 0" (click)="showTransforModal(data)">转派</span>
      <span (click)="deleteHandle(data)">删除</span>
    </td>
  </tr>
  </tbody>
</nz-table>
<!--转派-->
<smart-transfor #smartTransfor (done)="getList()"></smart-transfor>
<!--新增事件-->
<smart-event #smartEvent (done)="getList()"></smart-event>