EOS Low-Code Platform 8 EOS Low-Code Platform 8
  • 8.3.2 (opens new window)
  • 8.3.1 (opens new window)
  • 8.3LA1 (opens new window)
  • 8.2GA (opens new window)
产品简介
学习指南
更新说明
安装与集成
初见EOS
低代码开发手册
专业代码开发手册
专题场景实战
公共服务框架
应用运行治理
升级手册
常见问题
  • 1 适用场景
  • 2 基础功能
  • 2.1 数据来源
  • 2.1.1 字典
  • 2.1.2 数据实体
  • 2.1.3 自定义
  • 2.2 步骤条样式
  • 2.3 文字是否居中
  • 2.4 结束状态
  • 2.5 是否简洁风格
  • 2.6 步骤条间隔
  • 3 设置默认值

步骤条

# 1 适用场景

通常用于表示多步骤流程的进度,帮助用户了解当前任务或操作的进展情况。

# 2 基础功能

拥有设置数据来源、步骤条样式、文字是否居中、结束状态、是否简洁风格、步骤条间隔等功能;

# 2.1 数据来源

# 2.1.1 字典

可以选择AFC平台中在业务字典菜单中定义的字典类型;步骤条会显示此字典类型下定义的字典项;

说明:当选择选择数据源为字典时;步骤条数据会按照字典项设置的排序升序排列,步骤条标题显示值是字典项的名称;image-20240109094337441

效果展示:

image-20241118154514048

# 2.1.2 数据实体

可以选择已有的数据实体,可配置值字段和显示字段。步骤条数据会把此实体数据展示出来;还可以对字段进行过滤、排序功能;

image-20241118155427319

  • 过滤条件

    可以对实体数据根据字段进行设置过滤条件,会按照过滤条件显示满足结果的数据;

  • 排序

    可以选择字段进行排序;然后实体数据会按所选排序字段进行排序,默认是是降序;

# 2.1.3 自定义

可以自定义步骤条显示的数据;可以绑定变量选择常量,添加code 和 name 对应值,然后会自动生成一个变量,或者直接定义一个变量;

说明:选择数据源为自定义数据时;步骤条标题显示值是name,描述显示值是description

自定义数据格式如下:

[
  {"code":"step1","name":"步骤1","description":"描述1"},
  {"code":"step2","name":"步骤2","description":"描述2"}
]

# 2.2 步骤条样式

步骤条样式可设置横项和竖项;

效果展示:

image-20241118161036580

# 2.3 文字是否居中

开启后步骤条标题将居中。

# 2.4 结束状态

可以设置结束状态显示风格;可选择wait/process/finish/error/success。

效果如下:

image-20241118165018657

# 2.5 是否简洁风格

开启简洁模式后 align-center / description / direction / space 都将失效;

效果如下:

image-20241118165156201

# 2.6 步骤条间隔

可以设置步骤条之间的间隔;有自适应 和自定义间隔。

  • 自适应:会自动将每个步骤条在一行或一列的可用空间内均匀分配,保证每个步骤条在容器内的整体平均布局。
  • 自定义间隔:可以通过自定义间隔设置步骤条之间的间距。当一行中的空间不足以容纳所有步骤时,步骤条会根据设定的间隔自动换行,将剩余的步骤分配到下一行,保证每个步骤条按照所设置的间隔进行分布。

效果如下:

image-20241118171526986

# 3 设置默认值

步骤条中的每个步骤值会按顺序自动编号,第一个步骤值为 1,第二个步骤值为 2,依此类推;

例如设置默认在第一个步骤条,默认值设置 1

image-20241118172813376

← 导航树 HTML →