处理结果
IMPORT MODULE

结果页用于对用户进行的一系列任务处理结果进行反馈。

代码演示

提交成功
提交结果页用于反馈一系列操作任务的处理结果,如果仅是简单操作,使用 Message 全局提示反馈即可。本文字区域可以展示简单的补充说明,如果有类似展示x“单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。
项目 ID: 23421
负责人: 曲丽丽
生效时间: 2016-12-12 ~ 2017-12-12
创建项目
曲丽丽
2016-12-12 12:32
部门初审
周毛毛
财务复核
完成
Classic

典型结果页面。

expand codeexpand code
import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'components-result-classic',
  template: `
    <result
      type="success"
      [title]="'提交成功'"
      description="提交结果页用于反馈一系列操作任务的处理结果,如果仅是简单操作,使用 Message 全局提示反馈即可。本文字区域可以展示简单的补充说明,如果有类似展示x“单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。"
      [extra]="resultExtra"
    >
      <ng-template #resultExtra>
        <div nz-row [nzGutter]="16" class="mb-md">
          <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="12" [nzLg]="12" [nzXl]="6">
            <span class="text-grey-darker">项目 ID:</span>
            23421
          </div>
          <div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="12" [nzLg]="12" [nzXl]="6">
            <span class="text-grey-darker">负责人:</span>
            曲丽丽
          </div>
          <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12">
            <span class="text-grey-darker">生效时间:</span>
            2016-12-12 ~ 2017-12-12
          </div>
        </div>
        <nz-steps [nzCurrent]="1" nzProgressDot>
          <nz-step [nzTitle]="'创建项目'" [nzDescription]="createDesc">
            <ng-template #createDesc>
              <div style="font-size: 14px; position: relative; left: 38px; text-align: left;">
                <div style="margin-top: 8px; margin-bottom: 4px;">曲丽丽<i nz-icon nzType="dingding" class="ml-sm"></i></div>
                <div style="margin-top: 8px; margin-bottom: 4px;">2016-12-12 12:32</div>
              </div>
            </ng-template>
          </nz-step>
          <nz-step [nzTitle]="'部门初审'" [nzDescription]="checkedDesc">
            <ng-template #checkedDesc>
              <div style="font-size: 14px; position: relative; left: 38px; text-align: left;">
                <div style="margin-top: 8px; margin-bottom: 4px;">
                  周毛毛<i nz-icon nzType="dingding" class="ml-sm" style="color: #00a0e9;"></i>
                </div>
                <div style="margin-top: 8px; margin-bottom: 4px;">
                  <a (click)="msg.success('click')">催一下</a>
                </div>
              </div>
            </ng-template>
          </nz-step>
          <nz-step [nzTitle]="'财务复核'"></nz-step>
          <nz-step [nzTitle]="'完成'"></nz-step>
        </nz-steps>
      </ng-template>
      <button nz-button [nzType]="'primary'">返回列表</button>
      <button nz-button>查看项目</button>
      <button nz-button>打 印</button>
    </result>
  `,
})
export class ComponentsResultClassicComponent {
  constructor(public msg: NzMessageService) {}
}
提交失败
请核对并修改以下信息后,再重新提交。
您提交的内容有如下错误:
您的账户已被冻结 立即解冻
您的账户还不具备申请资格 立即升级
Failed

提交失败。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-result-fail',
  template: `
    <result type="error" [title]="'提交失败'" description="请核对并修改以下信息后,再重新提交。" [extra]="resultExtra">
      <ng-template #resultExtra>
        <div class="mb-md text-lg">您提交的内容有如下错误:</div>
        <div class="mb-md">
          <i nz-icon nzType="close-circle" class="text-error pr-sm"></i>您的账户已被冻结
          <a class="ml-md">立即解冻<i nz-icon nzType="right" class="pl-sm"></i></a>
        </div>
        <div>
          <i nz-icon nzType="close-circle" class="text-error pr-sm"></i>您的账户还不具备申请资格
          <a class="ml-md">立即升级<i nz-icon nzType="right" class="pl-sm"></i></a>
        </div>
      </ng-template>
      <button nz-button [nzType]="'primary'">返回修改</button>
    </result>
  `,
})
export class ComponentsResultFailComponent {}
标题
结果描述
其他补充信息,自带灰底效果
操作建议,一般放置按钮组
Structure

结构包含 处理结果补充信息 以及 操作建议 三个部分,其中 处理结果提示图标标题结果描述 组成。

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-result-structure',
  template: `
    <result type="success" [title]="title" [description]="description" extra="其他补充信息,自带灰底效果">
      <ng-template #title><div style="background:#7dbcea; color: #fff;">标题</div></ng-template>
      <ng-template #description><div style="background:rgba(16, 142, 233, 1); color: #fff;">结果描述</div></ng-template>
      <div style="background: #3ba0e9; color:#fff">操作建议,一般放置按钮组</div>
    </result>
  `,
})
export class ComponentsResultStructureComponent {}

API

result

成员说明类型默认值
[type]类型,不同类型自带对应的图标string-
[title]标题string,TemplateRef<void>-
[description]结果描述string,TemplateRef<void>-
[extra]补充信息,有默认的灰色背景string,TemplateRef<void>-
ng-content操作建议,推荐放置跳转链接,按钮组等ng-content-