NG-ALAIN- CURD
st 表格 sv 查看 se 编辑 cell 单元格数据 sf 动态表单 LIB
- 基础
hotkey 热键 let 定义 media HTML5媒体 reuse-tab 路由复用标签 loading 加载指示符 pdf Pdf qr 二维码 lodop Lodop打印 xlsx Excel 操作 Observers 观察者 onboarding 用户引导流程 zip Zip 操作 图表 G2 LIB avatar-list 用户头像列表 count-down 倒计时 down-file 下载文件 主题系统 LIB 工具集 LIB
- 表单
range-picker 日期范围 error-collect 表单异常消息采集器
- 布局
sg 简易栅格 ellipsis 文本自动省略号 exception 异常 footer-toolbar 底部工具栏 full-content 全屏工作区 global-footer 全局页脚 page-header 页头 result 处理结果 tag-select 标签选择器
- 业务
用户认证 LIB notice-icon 通知菜单 quick-menu 快速菜单 访问控制列表 LIB 缓存 LIB Mock模拟数据 LIB
- 其它
auto-focus 自动获得焦点 highlight 高亮
结果页用于对用户进行的一系列任务处理结果进行反馈。
代码演示
提交成功
提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，使用 Message 全局提示反馈即可。本文字区域可以展示简单的补充说明，如果有类似展示x“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。
项目 ID： 23421
负责人： 曲丽丽
生效时间： 2016-12-12 ~ 2017-12-12
创建项目
曲丽丽
2016-12-12 12:32
部门初审
周毛毛
财务复核
完成
典型结果页面。
import { Component, inject } from '@angular/core';
import { ResultModule } from '@delon/abc/result';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzStepsModule } from 'ng-zorro-antd/steps';
@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 [nzTitle]="'完成'" />
</nz-steps>
</ng-template>
<button nz-button [nzType]="'primary'">返回列表</button>
<button nz-button>查看项目</button>
<button nz-button>打 印</button>
</result>
`,
standalone: true,
imports: [ResultModule, NzGridModule, NzStepsModule, NzIconModule, NzButtonModule]
})
export class ComponentsResultClassicComponent {
readonly msg = inject(NzMessageService);
}提交失败。
import { Component } from '@angular/core';
import { ResultModule } from '@delon/abc/result';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
@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>
`,
standalone: true,
imports: [ResultModule, NzIconModule, NzButtonModule]
})
export class ComponentsResultFailComponent {}标题
结果描述
其他补充信息，自带灰底效果
操作建议，一般放置按钮组
结构包含 处理结果，补充信息 以及 操作建议 三个部分，其中 处理结果 由 提示图标，标题 和 结果描述 组成。
import { Component } from '@angular/core';
import { ResultModule } from '@delon/abc/result';
@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>
`,
standalone: true,
imports: [ResultModule]
})
export class ComponentsResultStructureComponent {}