组件介绍

1. 简介

本文将介绍 自定义详情页 中各个组件的功能及设置方式。

2. 组件介绍

2.1 简报卡片

「简报卡片」组件用于展示当前数据中的关键信息，包括标题、副标题以及简报字段，通常放置在详情页顶部，便于快速查阅核心内容。如下图所示：

具体设置如下：

2.1.1 简报标题

1）标题

开启「标题」后的开关，可以将标题展示在组件中，且标题内容为当前数据的 数据标题。还可点击「设置数据标题」，前往「数据协作」页面进行数据标题设置。

2）副标题

在「副标题」处的下拉框中选择表单字段作为副标题，支持选择的字段类型包括：单行文本、单选按钮组、下拉框、流程状态、单选按钮组。

2.1.2 简报字段

点击「+」按钮即可添加所需字段，且最多支持添加 8 个简报字段。

2.1.3 简报布局

对于添加的简报字段，提供「横向」和「纵向」两种布局方式，便于按需选用。效果分别如下所示：

2.2 阶段条

「阶段条」组件可以直观展示当前数据所处的业务阶段（如项目阶段、商机阶段等），并支持阶段的快速切换。

具体设置如下：

2.2.1 阶段字段

支持选择下拉框、单选按钮组类型的字段作为「阶段字段」。组件会将字段中设置的选项（不包含其他选项），顺序展示在阶段条中，并根据当前数据的选项值默认选中对应阶段。

2.2.2 允许直接编辑

开启后，成员在查看数据详情时，可以直接点击「阶段条」切换阶段、同时更新数据中的阶段字段值，无需再进入数据编辑页面。效果如下所示：

2.2.3 风格设置

在「风格」处可以切换阶段条的展示样式、设置阶段条颜色，包括：跟随主题色、自定义颜色。

2.3 多标签页

「多标签页」组件内支持添加多个标签页，用于分类展示不同内容，提升数据的可读性。

具体设置如下：

2.3.1 设置风格

在「组件属性 >> 风格」处可以切换标签页的展示样式、设置标签页颜色，包括：跟随主题色、自定义颜色。

2.3.2 设置标签页

点击「+」按钮即可按需添加标签页，并支持排序、重命名、复制标签页。其中：

1）复制标签页

复制标签页时会一同复制标签页内的组件。如下图所示：

2）删除标签页

删除单个标签页时，可以选择是否同步删除该标签页内的组件，如下图所示：

2.3.3 添加组件

点击标签页内的「+」按钮即可添加组件。或将鼠标悬停至标签页内的已有组件，点击组件下方的「+」按钮来添加组件。支持添加除「多标签页」以外的所有类型组件。

2.4 表单字段

「表单字段」组件可以将表单中的字段展示在自定义详情页中，用于成员查看。具体设置如下：

2.4.1 显示字段

添加组件时，「显示字段」处会默认勾选除以下类型外的所有表单字段，管理员可在添加组件后，按需调整字段。

2.4.2 字段自由布局

显示字段的布局默认跟随表单属性设置。若想自定义调整以下内容，需要开启「字段自由布局」。

2.5 数据表格

「数据表格」组件可以展示关联表中相关联的数据内容。成员在查看数据详情时，可以直接进行关联表的数据操作，如添加、导出、筛选等。具体设置如下：

2.5.1 数据源

在「数据源」处的下拉框中选择当前表单的关联表：

2.5.2 表格内显示内容

1）显示字段

选择关联表后，需要添加显示字段，将关联表中的字段内容展示在组件中。

2）排序规则

同时，还可添加排序规则，按特定顺序展示关联表数据。支持选择的字段类型包括：单行文本、数字、日期时间、单选按钮组、下拉框、流水号、聚合计算、提交时间、更新时间、成员/部门单选。

2.5.2 数据操作

以下开关可以控制成员在组件中的数据操作。关闭开关时，即使成员有相应的操作权限，也无法在表格上方看到相应按钮，无法进行操作；开启时，则不会对成员操作产生影响。

2.6 数据填报

「数据填报」组件可以让成员在查看详情时，直接向指定表单中填报数据，实现边看边填。

具体设置如下：

2.6.1 填报表单

选择需要填报的表单，支持选择当前表单、以及本应用的其他表单。

2.6.2 字段默认值

选定填报表单后，可以为表单的主字段设置默认值。成员填报时，系统会自动根据默认值设置为其自动填好相应内容，且允许修改。点击「设置默认值」，并进行如下设置：

全部设置完成后，点击「确定」。

2.7 图片

「图片」组件用于在详情页中展示图片，并支持自动轮播、多图滚动轮播、点击跳转等功能。具体设置如下：

2.7.1 数据源

数据源支持设置为以下 2 种类型：

1）当前数据的图片字段

选择当前表单中的图片字段即可。如下图所示：

2）手动上传图片

切换到「手动上传」，点击「上传图片」按钮即可添加图片。上传后，可按需对图片进行设置：

以显示文本为例，添加后的效果如下所示：

2.7.2 轮播设置

在数据源为「当前数据图片字段」或手动上传了多张图片时，可见「轮播设置」。支持设置的内容包括：

1）自动轮播

开启后，将会自动播放图片，并支持设置轮播时间间隔。

自动轮播的同时，还支持手动切换图片：

2）轮播方式

支持选择以下 2 种轮播方式：

在多图轮播方式下，支持设置以下参数：

以设置「同时展示数量」为 2，「每次滑动数量」为 2，在有 5 张图片 A、B、C、D、E 的情况下，自动轮播效果如下：

2.7.3 填充方式

1）支持设置图片的填充方式，包括：

2）不同的填充效果如下所示：

2.8 富文本

「富文本」组件可在详情页中展示图文内容（包括文字、图片和链接），供成员查看。并支持自由排版内容，适用于公告、使用说明等需要丰富格式的场景。具体如下：

1）编辑内容

管理员添加「富文本」组件后，按需输入内容并进行格式设置即可。如下图所示：

2）工具介绍

管理员在富文本中编辑内容时，可以使用以下工具：

2.9 流程动态

当前表单为流程表单时，可以使用「流程动态」组件，在详情页中展示如下信息：

2.10 数据评论

「数据评论」组件可以对普通表单或者流程表单进行评论，并@相关成员进行提醒、查看或者确认。

2.11 数据日志

「数据日志」组件用于记录表单数据的修改情况。使成员在访问数据详情时，可以查看数据的修改记录。

2.12 嵌入页面

「嵌入页面」组件可以在详情页中嵌入其他网页。通过以下方式设置链接地址后，系统将自动显示相应网页内容。

3. 组件样式

选中组件后，可在右侧「样式」处进行以下配置：

1）组件样式

提供卡片和无框 2 种组件样式：

卡片样式效果如下所示：

无框样式效果如下所示：

2）背景

组件样式设置为「卡片」时，可以自定义卡片的背景颜色或图片。效果如下所示：

其中，设置卡片背景为「图片」时，可以选择图片的填充方式，包括：

不同的填充效果如下所示：