视图组件

1. 简介

视图组件用于在展示业务明细数据。可根据数据的结构特征、业务使用场景灵活选择适配的视图类型，帮助成员更高效地查看和理解数据：

本文将介绍各个视图组件的功能及设置方式。

2. 通用配置

无论使用哪种视图，首先需要配置数据源，包括选择数据源、设置数据过滤和排序（选做）。具体如下：

2.1 选择数据源

支持为组件设置以下 2 类数据来源：

2.2 展示哪些数据

1）数据过滤

选择数据来源后，可通过过滤条件来限定组件中展示的数据范围。如下图所示：

2）数据排序

支持设置排序规则，将组件中的数据按特定顺序展示，便于成员查看。如下图所示：

3. 各类视图介绍

3.1 数据表格

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

1）显示字段

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

2）数据排序

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

3）分组

管理员可为成员预设分组规则，添加分组字段，将表格中的数据按字段值分组展示。支持添加多个分组字段，并设定分组的展示顺序。如下图所示：

成员查看时可根据需要，临时调整分组规则。点击组件右上角的「分组」按钮，调整分组字段和排序即可。

4）数据汇总

管理员可为成员预设汇总规则，添加汇总字段并设定汇总方式，对字段列进行汇总统计，如求和、求最大值等。

成员查看时可根据需要，临时调整汇总规则。将鼠标悬停至字段列底部，点击出现的「数据汇总」按钮，选择所需的汇总方式即可。如下图所示：

3.2 卡片列表

「列表」组件以卡片形式展示相关联的数据，能够突出展示关键内容，并支持单列、多列、图文混排等排布方式。

具体设置如下：

3.2.1 列表布局

1）布局方式

组件支持单列、多列 2 种布局方式。其中，在多列布局下，可以设置卡片的排布密度，包括：

2）卡片样式

组件提供 4 种卡片样式，包括图文混排、纯文本样式等，可按需选用。

3.2.2 列表内容

完成布局设置后，需要设置每张卡片中展示的数据内容，以及卡片间的展示顺序。

1）图片（选做）

卡片样式包含图片时，需要设置图片来源。此处可以选择表单中的图片字段，并可设置图片的填充方式，包括：

2）数据标题

如需通过 数据标题 标识每张卡片，方便识别。可以开启「数据标题」后的开关，将数据标题展示在卡片中。

同时，还可点击「设置数据标题」，前往「数据协作」页面调整数据标题设置。

3）显示字段

按需添加显示字段，将数据内容展示在卡片中。如下图所示：

添加的显示字段，默认同时显示其字段名，方便查阅，并支持调整字段名的显示位置（放在字段上方或左侧）。若无需显示字段名，取消勾选「显示标题」即可。

4）数据排序

卡片内容设置完成后，可以添加排序规则，按特定顺序展示卡片。点击「添加排序规则」，选择字段，按需设置为「升序」或「降序」即可：

3.3 层级表格

层级表格组件，可层次化展示已通过 关联本表 构建出层级结构的数据，清晰展示业务数据间的上下级关系。同时，支持按层级展开/折叠来查看数据的不同层级。具体设置如下：

3.3.1 层级的构建来源于

该来源会被固定设置为表单中的「关联数据」字段，不支持修改。系统会通过「关联本表」字段来识别每条数据的上一级，并据此生成层级结构。

例如，在子任务表中，「关联本表」字段为「所属父任务」，系统会根据该字段确定每个子任务的上级。此时，「层级的构建来源于」显示为「所属父任务」。如下图所示：

3.3.2 显示字段

在「显示字段」中勾选需要展示的字段，将其字段内容显示在层级表格中。

3.3.3 展开与折叠层级

1）展开至特定层级

成员查看层级表格时，可以点击表格下方的「展开至特定层级」，选择需要展示的层级数，以便查看和管理不同层级的数据。如下图所示：

2）展开/收起全部

成员查看层级表格时，可以对分组及数据执行「展开全部」或「收起全部」操作。如下图所示：

4. 其他操作

4.1 数据操作

所有视图组件上均支持进行数据操作。其中，对于有数据操作权限的成员，支持通过「数据操作」处的开关/勾选配置控制成员在组件中的操作。下述以数据表格为例，进行演示说明：

1）添加/导入/导出操作

2）批量打印操作

支持成员进行批量打印操作，开启「批量打印」开关，点击「设置」按钮并要选择开放的 自定义打印模板 即可。

3）自定义按钮

支持将数据源表中的自定义按钮展示在组件上，供成员使用，在下拉框中选择需要提供的 自定义按钮 即可（仅支持选择显示位置包含「视图数据列表」和「批量操作工具栏」的按钮）。

点击「管理」按钮，可跳转至数据源表的自定义按钮设置页面，进行自定义按钮的编辑、新增等管理操作。

4.2 自动调整列宽

成员在表格、层级视图中查看时，可点击页面底部的「自动调整列宽」按钮，一键将表格列宽调整至合适的宽度。