1 - 布局控件
1.1 - 网格
1. 控件介绍
网格控件是一种布局控件,可以设置几行几列,对页面信息按行列布局。
2. 使用场景
当需要按行列整齐的展示内容时,可使用网格。 网格一般在详情页中展示表单内容。
2. 控件特性
2.1 设置表格的行列
将网格控件拖到画布区时,会弹出提示输入行数和列数,根据设置生成相应的网格。生成网格后,在右侧属性区可以看到行列信息, 但不可直接修改, 可选中单元格右键插入或删除行列。
2.2 插入和删除行或列
操作方法:选中单元格,鼠标右键,可以设置插入和删除行或列。
2.3 合并或拆分单元格
操作方法:选中要合并或拆分的单元格, 然后右键选择相应的操作
2.4 设置最小行高
一个单元格中可以拖入多个控件,行高是根据内容自适应的。当内容高度小于设置的最小行高时,行高会等于最小行高。
设置最小行高的主要场景: 当每一行的行高按内容自适应不一样高时,希望从视觉上使表格所有行的行高一样,可以将最小行高设置为最高那行的行高。
操作方法: 选中需要调整的行, 然后右键设置最小高度。
2.5 调整列宽
操作方法一:可在表格中拖动列边线调整列宽
操作方法二:选中单元格, 右键设置列宽
注意:表格的列宽是默认占满上层容器的宽度,表格整体是不会出现横向滚动条的。调整列宽会挤压相邻列的宽度,相邻列可能因为宽度不够,出现横向滚动条。
2.6 设置边距
内外边距设置详情请参考边距设置
行间距是指表格的行与行之间的距离,列间距是指表格的列与列之间的距离。
2.7 设置边框
在风格中设置表格控件背景图、背景色、圆角、边框线、边框线颜色、边框线样式、边框线宽度等。
设置边框线样式的步骤:
- 首先在画布中选中要设置边框的区域。
- 设置样式时,需要先选择设置哪些边线,再设置样式、宽度或颜色。
边框线设置示例:
1.2 - 容器
1. 控件介绍
容器是一种布局控件,支持弹性布局, 是目前业界前端的主流CSS布局方式,能实现复杂的布局。
2. 使用场景
(1)当页面区域需要进行分块划分, 比如左右两部分。
(2)希望对一组控件进行灵活布局。
3. 控件特性
3.1 设置宽高
宽度支持固定值或自适应。
高度支持固定值或自适应。
宽度自适应:
(1)当前容器为最底层容器(当前容器未嵌套在别的容器中,而是直接放到页面上或放到其他布局控件中):宽度自适应会自动取页面或其他布局容器的宽度。 比如页面宽度为1440px, 容器自适应宽度也是1440px
(2)当前容器是嵌套在其他容器控件中的 当前容器为子容器,宽度自适应是指根据容器中内容宽度自动调整容器的宽度。下图为容器嵌套容器,在子容器中放了单行文本控件。 子容器的宽度设置为自适应,即是单行文本的宽度。
3.2 容器弹性布局
3.2.1 容器主轴方向
容默存在两根轴:水平轴(横向的),垂直轴(纵向的), 将其中一个轴作为主轴,那另一个轴就是交叉轴。主轴的方向决定了控件的排列方向。 水平轴上控件的排列方向可以是从左到右,也可以从右到左,默认是从左到右;垂直轴上控件的排序方向可以是从上到下,也可以是从下到上,默认为从上到下。
3.2.2 控件的对齐方式
(1)当水平轴为主轴时:
主轴对齐方式有居左、居中、居右、每个控件两侧的间隔相等(控件之间的间隔比项目与边框的间隔大一倍)、两端对齐(控件之间的间隔都相等)。默认是居左对齐, 点击
可快速切换到居右对齐。配置属性界面如下图所示,每个图标hover都会显示相应的操作提示。
效果如下:
(2) 当垂直轴为主轴时:
主轴对齐方式有:居上、居中、居下、元素占满高度、根据元素的第一行文字的底线进行对齐。默认是居上对齐, 点击
可实现快速切换为居下对齐。配置属性界面如下图所示,每个图标hover都会显示相应的操作提示。
注意:调整控件对齐方式时,通常主轴方向和交叉轴方向是配合一起调整的。可参见演示示例。
3.2.3 控件换行或换列
(1)当水平轴为主轴时:
容器中的控件排在一条横线上,当如果一条线上排不下时(控件的宽度超过了容器的宽度),容器会出现横向滚动条。 如果希望不出现横向滚动条,可以设置换行,且可以设置列数,即一行分成多少列。
(2)当垂直轴为主轴时:
容器中的控件排在一条竖线上,当纵向排不下时(控件的高度超过了容器的高度),容器会出现纵向滚动条。如果希望不出现纵向滚动条,可以设置换列,且设置列数。
3.2.4 容器自动拉伸和缩小
(1) 自动拉伸:当父级容器主轴有剩余空间时,子控件可拉伸填满剩余空间。当子控件的内容超过剩余空间时,父级容器出现滚动条。
举例:如下图,父容器主轴垂直方向,子容器勾选了自动拉伸,会在垂直方向占满父容器的剩余控件。
(2) 自动缩小:当父级容器主轴剩余空间不够时,子控件自动缩小,子控件可能出现滚动条。
3.3 边距设置
内外边距设置详情请参考边距设置
行间距是指容器中行与行之间的距离,列间距是指容器中列与列之间的距离。
3.4 边框设置
在风格中设置容器控件背景图、背景色、圆角、边框线、边框线颜色、边框线样式、边框线宽度等。
边框线的设置步骤可参考表格边框线设置
1.3 - 分组
1. 控件介绍
分组控件顾名思义是将内容进行分组, 支持分组的展开收起效果。
2. 使用场景
页面内容可以分成多个独立模块时,比如录入人员信息时, 要分别录入个人信息、家庭信息、学历信息等,那么可以用分组控件,每个分组内信息是聚焦的。
3. 控件特性
3.1 头部设置
头部样式支持自定义或选择预置样式。自定义可配置标题展示图标或图片。预置样式可直接选择使用。
3.2 折叠设置
(1)可配置折叠图标的位置及折叠样式
折叠图标在头部:
折叠图标在内容区下:
(2)可配置打开页面时,分组默认是展开或收起状态,且可以设置不同条件下的状态。
3.3 设置高度
自适应高度:根据分组内的内容自适应,高度是动态的,分组控件自身不会出现纵向滚动条。
固定高度:高度固定,当分组内容超过固定高度时,分组控件自身将出现纵向滚动条。当父级容器小于控件高度时,父级容器出现纵向滚动条。
3.4 设置伸缩
分组控件也具备伸缩能力。
伸缩的详细介绍可参考容器自动拉伸和缩小
3.5 设置边距
内外边距设置详细介绍可参考边距设置
3.6 设置分割线
(1)可设置是否展示分割线。
(2)设置分割线的样式。
1.4 - 页签
1. 控件介绍
页签是一种布局类控件,每个页签的内容都是相对聚焦的。和分组控件的使用场景非常类似,只是交互形式不同。
2. 使用场景
页面内容可以分成多个独立模块时,比如录入人员信息时, 要分别录入个人信息、家庭信息、学历信息等,那么可以用页签控件,每个页签内容是聚焦的。
3. 控件特性
3.1 添加页签
根据实际场景,添加多个页签。可更改页签的名称标题,支持设置表达式。
3.2 设置页签排列方式
3.3 设置页签头样式
(1)可设置显示样式,系统提供卡片型、普通型、文字型、胶囊型4种样式。
普通样式:
卡片样式:
文字样式:
胶囊样式:
3.4 设置页签头位置
页签头可以在上方,也可以放到下方,满足不同的样式需求
3.5 设置页签图标
1.设置页签图标
2.打开图标开关,可设置图标位置、图标状态、图标颜色
(1)图标位置:可改变图标在页签标题的位置
(2)图标状态、图标颜色
可分别设置每个页签的图标显隐状态和图标颜色,支持配置表达式。
3.6 设置默认激活
使用场景:页面初始化时选中指定的页签。
功能说明:页面初始化时激活指定页签,也可配置激活条件。如果未配置,默认展示第一个有权限的页签。
3.7 设置激活规则
使用场景:当满足条件时切换相应页签
配置方法:
方式一:自动触发,当条件满足就激活对应页签。
注意:要先配置激活规则后才可设置自动触发激活规则。满足条件时切换到对应页签,之后仍然可以手动切换到其他页签,当条件再次满足时又会执行激活规则。
方法二:在事件中配置页签控件动作执行激活。比如点击某个按钮时,再按条件判断激活页签。
自动触发激活规则不开启时,需要配置控件动作才能执行激活规则;开启后,自动判断激活规则的条件,自动执行。
3.8 控制页签的显隐
使用场景:满足条件时才显示该页签,否则隐藏。
配置方法:每个页签可单独可以状态,如下图。
页签状态说明:
–正常状态:可切换到该页签
–只读状态:可切换到该页签,但页签中的内容是只读
–禁用状态:无法切换到该页签
–隐藏状态:隐藏该页签。
3.9 角色权限管控
使用场景:给不同角色授予页签不同权限。
配置方法:
(1)开启页签控件的功能权限
(2)开启单个页签的功能权限
(3)在角色权限中授权
3.9 设置高度
页签控件也可以设置自适应高度或固定值高度
详细介绍可参考分组设置高度。
3.10 设置伸缩
页签控件也具备伸缩能力。
详细介绍可参考容器自动拉伸和缩小。
1.5 - 面板
1. 控件介绍
面板属于布局控件的一种,通过配置面板显示方式可以实现全局弹窗、跟随某个控件的气泡以及侧边弹出抽屉等不同的功能。
2. 使用场景
当需要录入或查看更多数据,可以使用面板实现。
比如重复表录入控件中需要录入的数据列非常多,列表会非常宽,体验不好,这时可以考虑使用面板录入更多数据。
3. 控件特性
3.1 配置打开面板
运行态面板是默认不打开的,可通过以下两种方式打开面板。两种方式没有本质区别,只是配置方式不同。
方式一:在属性区中,配置触发控件及触发动作。
方式二:在事件中配置面板的控件动作,打开面板。
3.2 配置面板显示位置
面板的显示位置有三种:
(1)跟随触发控件:面板以气泡形式呈现,可配置跟随位置。
(2)固定在某个位置:面板以弹窗或抽屉的形式呈现。
(3)可拖动调整位置:面板以弹窗形式呈现,默认居中,可以拖动位置。
3.3 配置面板关闭方式
关闭方式:
(1)支持点击非面板区关闭。
(2)点击面板右上角的关闭按钮关闭。
(3)键盘按下esc键来关闭(移动端不支持esc键)。
3.4 注意事项
(1)面板只能拖入到页面顶层区域,不支持拖入到其它控件中(暂不支持在外框设计使用)。
(2)一个页面可以拖入多个面板,但画布区同时只能展示一个(总是优先展示最新拖入的面板)。可以点击面板工具条上的小眼睛图标来隐藏面板,如图:
(3)隐藏的面板可以通过点击大纲中的小眼睛图标再次打开,如下图:
1.6 - 子页面
1. 控件介绍
子页面控件也是布局控件的一种,属于页面中的一部分,运行态根据条件显示不同的子页面。
2. 使用场景
当页面中某块区域要根据条件显示不同的内容,可以使用子页面控件,每个内容是一个子页面。
3. 控件特性
3.1 添加子页面
属性区中点击添加子页面,选择想要加载的子页面。根据业务需求,如果该子页面有入参,则配置入参参数映射。
3.2 设置激活规则
使用场景:当满足条件时切换相应子页面。
配置方法:
方式一:自动触发,当条件满足就激活对应子页面。
方法二:在事件中配置子页面控件动作执行激活。比如点击某个按钮时,再按条件判断激活子页面。
自动触发激活规则不开启时,需要配置控件动作才能执行激活规则;开启后,自动判断激活规则的条件,自动执行。
2 - 数据控件
2.1 - 单一记录
1.控件简介
单一记录属于数据控件之一,具有数据收集、校验和提交等功能,是展示实体单条数据的起点,通常包含各种有输入值或选中值的组件,例如单行文本、日期选择、下拉框等。常用于调查问卷填写、基础资料填报、单据信息填写等场景。
在一些较复杂的业务场景中,经常会遇到需要管理单项主记录及其相关的子记录的情况。为了有效实现这种主从数据的录入和管理,在用户界面设计中,单一记录通常与重复表或重复节控件结合使用。这种设计允许用户在一个统一的视图中添加、修改或删除子记录,同时保持与主记录的关联。
2.属性
组件通用属性说明,请参见组件通用属性说明。
- 实体
单一记录展示数据的来源。实体属性具备与多种数据源建立关联的能力,其中最为普遍的是实体数据源。这种数据源可以绑定当前应用自定义的实体,或跨应用的实体。基于实体数据源,数据控件便能够在应用程序内执行全方位的数据操作,包括但不限于数据的检索、新增、修改以及删除等。
实体属性可以关联多种数据源,数据源详情信息,请参考:空链接。
- 隐藏字段
基于性能优化角度,数据控件在进行数据加载时,仅会检索页面中关联了录入控件或表格列的字段。然而,在实际业务中,有些字段数据可能用于页面逻辑处理,但又不希望在用户界面中展示。针对这种场景,平台引入了“隐藏字段”属性,该属性中勾选的字段,无需关联前端控件,但数据加载时仍会获取对应字段值。
- 条件
定义一组过滤规则的条件编辑器,以便在数据展示时仅显示满足特定条件的数据项。
单一记录中条件属性较为特殊,单一记录是用于精准展示实体中指定数据项的数据控件。在查看或编辑详情时,需明确该数据项的具体指向,平台中系统默认采用数据ID来唯一标识并定位每条数据,该设置是自动的,无需用户手动配置。但若需根据其他唯一字段来定位数据,设计师可自定义设置。然而,自定义设置时必须确保所选条件能够精确匹配到单一数据记录。如果所设置的条件对应了多条数据,系统将无法展示并会报错默认不加载。
- 分辨率设置
分辨率设置是确保用户界面元素在不同屏幕尺寸和分辨率下保持可用性和视觉一致性的过程。单一记录的分辨率设置支持自适应和固定宽度两种模式。
自适应:可以设置单一记录与视口或父容器的宽度占比,以及阈值宽度。
固定宽度:宽度可设置为特定的像素值,使得单一记录在不同设备屏幕上展现出统一的尺寸,不随视口或父容器大小调整而变化。
- 边距设置
边距设置是用于控制元素之间空间布局的属性,分为内部元素间隔、内边距、外边距三类配置。
内部元素间隔:是指组件内部元素之间的距离。分为行间隔和列间隔,单位为px。
内边距:是指组件内部元素与边框之间的距离。设置组件的内边距会在组件内边框周围创建一个空白区域,使内容与边框之间有一定的距离。单位为px,可设置上下左右四个方向。
外边距:是指组件与其他组件之间的距离。设置组件的外边距会在组件周围创建一个空白区域,使组件与其周围的组件产生一定的间距。单位为px,可设置上下左右四个方向。
3.事件
-
数据加载后:当数据控件数据加载完成后触发。
4.风格
- 高度
自适应:指高度根据内容自适应。
固定值:指设定固定高度,当内容超过固定高度时,控件内将出现纵向滚动条。当父级容器小于控件高度时,父级容器出现纵向滚动条。
- 伸缩
自动拉伸: 指父级容器主轴有剩余空间时,子控件可拉伸填满剩余空间,当子控件的内容超过剩余空间时,父级容器出现滚动条。
自动缩小:当父级容器主轴剩余空间不够时,子控件自动缩小,子控件可能出现滚动条。
5.场景示例
5.1场景描述
已有实体“供应商”,希望在表单验证通过后创建对应数据项。
5.2操作步骤
1、创建详情页面,页面名称“供应商详情页”,页面类型选择“详情页”,页面对应实体选择“供应商”,单击确定,创建页面。
2、控件库中选择“单一记录”,往画布区拖入控件,控件属性区中单击“实体”属性。
3、实体属性弹窗中,选择“供应商”实体,右侧选择需要展示的字段,设置控件生成逻辑,单击确定,完成配置。
4、查看自动生成内容,布局是否符合需求,不符合可自行调整。
5、设置字段页面校验:①必填:由于必填已在实体处设置,页面将自动设置;②手机号校验:选择“联系方式”字段,属性校验分组输入类型“手机号码”。
6、控件库中选择“工具栏”,往画布区拖入控件,控件属性区中设置对齐方式为居中。
7、设置“立即创建”按钮:操作1名称修改为“立即创建”,点击“编辑”图标,设置“保存记录”行为,实体选择“供应商[单一记录]”。
8、保存页面,完成详情页创建。
9、创建对应列表页,并创建与详情页关联关系,完成后测试发布应用。
5.3效果演示
2.2 - 重复表查询
1.控件简介
重复表查询控件属于数据控件之一,以二维表格形式呈现数据,通常包含行和列,适用于呈现和操作大量的结构化信息。使用该控件时需先绑定实体模型,随后便可根据需要配置其属性、响应事件,并定制其样式风格。此外,该控件提供了一系列高级功能,包括数据选择、排序、筛选、分页以及自定义操作等,以增强用户交互体验。
表格常用场景
- 当用户需要存储、组织和分析结构化数据时,重复表查询可以清晰地展示出数据的所有相关字段。
- 重复表查询具备行和列结构,当用户需要查找或整理数据时,可以轻松地进行数据过滤和排序,整合符合要求的数据并展示在表格中。
表格布局
2.属性
2.1表格属性
组件通用属性说明,请参见组件通用属性说明。
- 实体
展示数据的来源。实体属性具备与多种数据源建立关联的能力,其中最为普遍的是实体数据源。这种数据源可以绑定当前应用自定义的实体,或跨应用的实体。基于实体数据源,数据控件便能够在应用程序内执行全方位的数据操作,包括但不限于数据的检索、新增、修改以及删除等。
实体属性可以关联多种数据源,数据源详情信息,请参考:空链接。
- 隐藏字段
基于性能优化角度,数据控件在进行数据加载时,仅会检索页面中关联了录入控件或表格列的字段。然而,在实际业务中,有些字段数据可能用于页面逻辑处理,但又不希望在用户界面中展示。针对这种场景,平台引入了“隐藏字段”属性,该属性中勾选的字段,无需关联前端控件,但数据加载时仍会获取对应字段值。
- 条件
定义一组过滤规则的条件编辑器,以便在数据展示时仅显示满足特定条件的数据项。
- 排序
数据初始加载时的显示顺序,支持选择数据源中的某一字段为排序依据,配置默认排序规则,支持升序和降序。
支持多字段排序,首先按照第一个字段进行排序,当第一个字段相同时,再按照下一个规则进行排序。
控制显示条数
根据预设的排序规则,系统将默认展示排序后的前Top条数据。请注意,一旦配置了此选项,分页功能将不可用,所有符合条件的数据将一次性加载并展示。
- 实体变更订阅
一般用于弹窗页面数据变更后,控件自动刷新。弹窗“确认”操作需订阅父页面中操作的实体。
- 默认不加载
该属性勾选后,表格初始化时,不加载实体数据,需通过事件触发查询和刷新数据。
- 重复表默认初始化时自动加载实体数据,无需事件触发。
- 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。
- 表头显示
是否显示表格头。默认显示。
- 选择模式
表格项勾选模式,支持三种不同的选项:【无】、【单选】和【多选】。当启用【单选】模式时,列表将展示单选按钮,允许用户一次选择一个列表项。而启用【多选】模式后,列表将展示多选按钮,允许用户同时选择多个列表项。选择【无】模式时,则将不显示任何勾选按钮,用户无法通过勾选来选择列表项。三种模式互斥。
- 多级表头
表头呈多级展示,可表述表头信息层级包含关系。启用多级表头后,画布区可批量选择表头,右键添加上级分组;取消勾选后,将清空多级表头的配置。平台最多支持4级表头。
多级表头详细配置过程,请参见:空链接。
- 列字段
表格展示的字段。可添加实体模型中字段,或添加自定义列。
自定义列相关信息,请参见:空链接。
- 操作列
表格的一个特殊列,它包含对表格中每行数据可以执行的操作或命令,常见操作列操作:查看、编辑、删除等。
◇ 常用按钮数:默认为3,超过配置数的操作将收起至更多
◇ 显示位置:操作列位置支持列首、列尾两种,默认列尾
◇ 操作配置:支持配置操作的图标、名称、事件、状态和样式
- 顶部操作
位于表格最上方的一组操作工具,通常用于提供对整个表格数据或选定行的批量操作,如新增、删除、导入/导出。
- 行序号
启用后,逐一为每一行数据分配一个唯一的序号。
- 过滤能力
表格的快速搜索能力,启用后,允许设计师配置搜索字段,搜索区在表格上方。
搜索字段配置:单击搜索类型框后方的“设置”图标,可选择表格所关联实体的字段作为搜索字段,此外还可自定义配置搜索字段的显示样式等。
搜索字段的配置方式,与筛选控件中搜索设置相同,详情配置指南请参见:筛选控件-搜索字段配置空链接。
表格搜索模式:
◇ 条件下拉:允许用户针对指定的数据字段进行数据检索
◇ 条件平铺:多个搜索字段并排或垂直排列展示,用户可以在这些字段中输入不同的搜索条件
◇ 快捷搜索:提供单一搜索框,可在多个预设文本字段中进行搜索。仅文本支持快捷搜索,最多支持3个字段同时参与快捷搜索。
◇ 折叠按钮:提供折叠按钮,将所有搜索字段简洁地收纳于该按钮下,点击此按钮即可展开或隐藏搜索选项。
- 分页设置
是否展示分页组件
- 前端分页:所有数据一次性从后端获取,并存储在前端。前端通过控制显示的页数和每页显示的条目数量将数据进行分页展示,不需要与后端进行交互。
- 后端分页:数据分页处理在后端完成,只有用户请求的特定页面数据会被发送到前端,每次切换分页,均需发送后端请求。
- 数据源为实体数据源时,表格分页为后端分页,数据源为关系数据源时,表格分页均为前端分页。
◇ 分页条数:分页组件处展示每页显示条数的选择列表,需设置数组,如[5,10,20,50,100]。在"分页"属性开启时有效
◇ 默认分页条数:每页的数据条数。默认20条。在"分页"属性开启时有效。
◇ 对齐方式:分页组件的对齐模式,支持左、中、右
- 列宽可调整
运行态可根据个人需求拖拽调整表格中各列的宽度,该调整仅对当前会话有效,重新加载页面将恢复到默认的列宽设置。
- 固定列
当表格横向滚动时,某些列被锁定并始终显示在屏幕的指定侧,而其他列则随滚动条移动。
- 总有一行选中
勾选后始终存在选中行,默认为当前页第一行。
2.2列属性
单击列看属性的列字段,即可在右侧查看并修改列属性。
- 列宽、最小列宽
支持配置每列的列宽和最小列宽,列宽>最小列宽时,实际列宽=列宽;列宽<最小列宽时,实际列宽=最小列宽。
- 隐藏列
开启后,该数据列不可见。默认关闭。
- 显示排序
开启后该列可按照值字段进行运行态动态排序,升序或倒序。默认关闭。
- 列对齐
当前字段列的表头和内容对齐方式。
◇ 列对齐:列内容对齐模式,支持居左、居中、居右
◇ 表头对齐:表头对齐模式,支持跟随、居左、居中、居右。默认跟随,设置跟随后,表头跟随列对齐
- 描述信息
允许设计师对字段列进行详细说明。
- 图标设置
允许设计师在表格的指定列中使用图标来提供额外的视觉提示或信息。
◇ 图标:支持多图标显示,支持不同条件下显示不同图标
◇ 图标位置:文字前、文字后,支持配置各个图标的位置
◇ 图标状态:不同条件下控制图标显隐
◇ 图标样式:不同条件下控制图标颜色
- 溢出交互
表格列中的数据显示不完整,超出了列宽限制时,用户与这些数据项的交互方式
◇ 展示…:列内容超出列宽度时,在数据项后面显示省略号(…),鼠标hover时浮层展示全部内容
◇ 换行:列内容超出列宽度时,将换行进行展示
- 格式设置
配置重复表中不同类型字段的显示样式。如日期可配置日期格式“年-月-日”或“年-月”等,数字可配置为百分比格式,并支持以进度条形式展示。
详见各类型录入控件的格式设置:录入控件。
3.事件
3.1表格事件
- 点击行时:点击某一行时触发。
- 双击行时:双击某一行时触发。
- 勾选行时:表格产生勾选动作时触发。
- 取消勾选行时:表格产生取消勾选动作时触发。
- 勾选行改变时:勾选行产生改变时触发,包含新增勾选和取消勾选,
- 全选时:表格产生全选动作时触发。
- 取消全选时:表格产生取消全选动作时触发。
- 数据加载后:当数据控件数据初始化加载完成后触发。
- 分页改变时:分页发生改变时触发。
3.2列事件
- 单击单元格:点击当前列中单元格数据时触发。
- 双击单元格:双击当前列中单元格数据时触发。
- 单击标题格:点击当前列中表头时触发。
- 双击标题格:双击当前列中表头时触发。
4.风格
4.1表格风格
- 内框线:表格内部各个单元格之间的分隔线,支持横线和纵线设置。
- 表格高度:表格高度设置,数据项过多超出预定义的高度时,表格将产生纵向滚动条。支持px设置和行数设置。
自适应:表格高度根据内容自适应。
最大值:设定表格最大高度,当内容超过最大高度时,表格将出现纵向滚动条。
- 伸缩:表格放到页面上时,可以伸缩占满剩余空间。
自动拉伸:当父级容器主轴有剩余空间时,子控件可以拉伸填满剩余空间,当子控件的内容超过剩余空间时,父级控件出现滚动条。
自动缩小:当父级容器主轴剩余空间不够时,子控件自动缩小,子控件可能出现滚动条。
- 行背景色:表格内容区颜色设置,支持条件表达式。
4.2列风格
- 背景色:列内容背景色设置,支持条件表达式。
- 字体颜色:列内容字体颜色设置,支持条件表达式。
- 字体效果:列内容字体效果设置,支持条件表达式。
4.3列对齐和表格对齐
可分别设置表头对齐和列对齐。
5.场景示例
5.1场景描述
搭建一个具有增删改查功能的供应商基础查询列表,需要包含以下几个功能:
1、数据展示:以表格形式展示供应商的基本信息
2、排序 :①默认按照名称排序;②用户可以根据不同的字段(如名称、评级等)进行实时排序
3、分页功能:支持分页显示
4、搜索功能 :允许用户通过供应商名称、联系人搜索供应商
5、固定名称列和操作列
6、新增功能:点击新增按钮,新开录入详情页面
7、编辑操作:点击操作列中编辑按钮,新开页面,修改当前项数据
8、删除操作:①单项删除:点击操作列中删除,二次确认后删除当前数据项;②批量删除:勾选删除项,点击“删除”按钮,批量删除所有勾选项
5.2操作步骤
5.2.1数据展示
1、控件库中选择“重复表查询”,往画布区拖入控件,控件属性区中单击“实体”属性,设置数据源。
2、实体属性弹窗中,选择“供应商”实体,右侧选择欲展示的字段,单击确定,完成配置。
3、查看表格字段效果。
5.2.2条件、排序
1、选中“重复表查询”控件,点击右侧控件属性区中“条件”属性,配置条件“启用状态 = 是”。
2、点击右侧控件属性区中“排序”属性,配置排序规则“供应商名称 升序”。
5.2.3分页功能
1、选中“重复表查询”控件,勾选右侧控件属性区常规分组中“启用分页”,设置分页条数和默认分页条数。
2、勾选右侧“启用跳转”,在分页后增加跳转输入框,可自定义输入跳转页码。
5.2.4搜索功能
1、选中“重复表查询”控件,勾选右侧控件属性区常规分组中“启用过滤”属性。
2、搜索字段会遵循实体字段处所配置的默认显示自动生成,点击“搜索类型”属性右侧“设置”图标,可调整搜索字段。
3、按需选择搜索类型,此处选用“条件下拉”即可。
5.2.5固定列
1、选择右侧控件属性区常规分组中“固定列”属性,配置固定列(前)=1,固定列(后)=1,即设置第一列和最后一列固定。
5.2.6新增功能
1、勾选右侧控件属性区顶部操作分组中“显示顶部操作”属性。
2、添加操作,名称为“新增”,点击“设置”图标,配置按钮样式。
3、点击“编辑”图标,配置按钮事件动作“打开页面”,页面选择“供应商详情页”,入参中页面打开模式选择“新增”即可,其余入参字段无需配置。
5.2.7编辑操作
1、勾选右侧控件属性区操作列分组中“启用操作列”属性。
2、添加操作,名称为“新增”,点击“设置”图标,配置按钮样式。
3、点击“编辑”图标,配置按钮事件动作“打开页面”,页面选择“供应商详情页”,入参中ID选择“列表当前行ID”,页面打开模式选择“编辑”,其余入参字段无需配置。
5.2.8删除操作
单项删除:
1、操作列分组中添加操作,名称为“删除”,点击“设置”图标,配置按钮样式,启用“危险状态”属性。
2、点击“编辑”图标,配置按钮事件动作“实体-删除记录”,选择“供应商实体[重复表查询]”。
批量删除:
1、顶部操作分组中添加操作,样式配置和事件配置同单项删除,顶部操作会自动匹配删除勾选项数据。
5.3效果演示
2.3 - 重复表录入
控件简介
重复表录入控件是为简化数据输入流程而设计的组件,这种控件主要适用于数据字段较少且格式统一的录入场景,避免了为每个数据条目单独构建录入页面的需要,显著提升了数据录入的效率。
作为重复表控件的一种,重复表录入控件也集成了一系列高级功能,包括但不限于数据选择、排序、筛选、分页以及自定义操作等。
属性
表格属性
组件通用属性说明,请参见组件通用属性说明。
- 实体
展示数据的来源。实体属性具备与多种数据源建立关联的能力。重复表录入控件最常用的是实体数据源和关系数据源。
实体属性可以关联多种数据源,数据源详情信息,请参考:空链接。
实体数据源允许绑定当前应用自定义的实体,或跨应用的实体。基于实体数据源,数据控件便能够在应用程序内执行全方位的数据操作,包括但不限于数据的检索、新增、修改以及删除等。
而关系数据源主要用于处理具有主子聚合关系的数据,如物资领用单和领用明细,领用明细依赖于领用单,无法独立进行数据的新增、更新和删除操作,这种情况下,关系数据源可以清晰的表明领用明细和领用单之间的依赖的关系。关系数据源通常需要与单一记录嵌套使用。
- 隐藏字段
基于性能优化角度,数据控件在进行数据加载时,仅会检索页面中关联了录入控件或表格列的字段。然而,在实际业务中,有些字段数据可能用于页面逻辑处理,但又不希望在用户界面中展示。针对这种场景,平台引入了“隐藏字段”属性,该属性中勾选的字段,无需关联前端控件,但数据加载时仍会获取对应字段值。
- 条件
定义一组过滤规则的条件编辑器,以便在数据展示时仅显示满足特定条件的数据项。
- 排序
数据初始加载时的显示顺序,支持选择数据源中的某一字段为排序依据,配置默认排序规则,支持升序和降序。
支持多字段排序,首先按照第一个字段进行排序,当第一个字段相同时,再按照下一个规则进行排序。
控制显示条数
根据预设的排序规则,系统将默认展示排序后的前Top条数据。请注意,一旦配置了此选项,分页功能将不可用,所有符合条件的数据将一次性加载并展示。
- 实体变更订阅
一般用于弹窗页面数据变更后,控件自动刷新。弹窗“确认”操作需订阅父页面中操作的实体。
- 默认不加载
该属性勾选后,表格初始化时,不加载实体数据,需通过事件触发查询和刷新数据。
- 重复表默认初始化时自动加载实体数据,无需事件触发。
- 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。
- 选择模式
表格项勾选模式,支持三种不同的选项:【无】、【单选】和【多选】。当启用【单选】模式时,列表将展示单选按钮,允许用户一次选择一个列表项。而启用【多选】模式后,列表将展示多选按钮,允许用户同时选择多个列表项。选择【无】模式时,则将不显示任何勾选按钮,用户无法通过勾选来选择列表项。三种模式互斥。
- 多级表头
表头呈多级展示,可表述表头信息层级包含关系。启用多级表头后,画布区可批量选择表头,右键添加上级分组;取消勾选后,将清空多级表头的配置。平台最多支持4级表头。
多级表头详细配置过程,请参见:空链接。
- 列字段
表格展示的字段。可添加实体模型中字段,或添加自定义列。
自定义列相关信息,请参见:空链接。
- 操作列
表格的一个特殊列,它包含对表格中每行数据可以执行的操作或命令,常见操作列操作:查看、编辑、删除等。
◇ 常用按钮数:默认为3,超过配置数的操作将收起至更多
◇ 显示位置:操作列位置支持列首、列尾两种,默认列尾
◇ 操作配置:支持配置操作的图标、名称、事件、状态和样式
- 顶部操作
位于表格最上方的一组操作工具,通常用于提供对整个表格数据或选定行的批量操作,如新增、删除、导入/导出。
重复表录入控件作为全表编辑型控件,会频繁执行插入、删除等操作,为了提升操作便利性,平台预置了三种录入的常规操作:
◇ 插入操作:插入一个空白行
◇ 复制操作:复制当前行或勾选行
◇ 删除操作:删除当前行或勾选行
- 行浮层操作
重复表录入控件的行操作类型之一,位于重复表录入控件侧边的快捷操作,鼠标hover行时展示,仅支持三种预置操作:新增行、复制行、删除行。预置操作的功能与顶部预置操作一致。
行浮层操作支持三种显示样式:
◇ 联动显示:默认,与顶部操作中同类型预置操作状态同步,如顶部操作中的[删除]操作隐藏,则浮层操作中[删除行]操作联动隐藏
◇ 独立显示:行浮层操作显示状态独立控制
◇ 不显示:不显示行浮层操作
- 行序号
启用后,逐一为每一行数据分配一个唯一的序号。
- 过滤能力
表格的快速搜索能力,启用后,允许设计师配置搜索字段,搜索区在表格上方。
搜索字段配置:单击搜索类型框后方的“设置”图标,可选择表格所关联实体的字段作为搜索字段,此外还可自定义配置搜索字段的显示样式等。
搜索字段的配置方式,与筛选控件中搜索设置相同,详情配置指南请参见:筛选控件-搜索字段配置空链接。
表格搜索模式:
◇ 条件下拉:允许用户针对指定的数据字段进行数据检索
◇ 条件平铺:多个搜索字段并排或垂直排列展示,用户可以在这些字段中输入不同的搜索条件
◇ 快捷搜索:提供单一搜索框,可在多个预设文本字段中进行搜索。仅文本支持快捷搜索,最多支持3个字段同时参与快捷搜索。
◇ 折叠按钮:提供折叠按钮,将所有搜索字段简洁地收纳于该按钮下,点击此按钮即可展开或隐藏搜索选项。
- 分页设置
是否展示分页组件
- 前端分页:所有数据一次性从后端获取,并存储在前端。前端通过控制显示的页数和每页显示的条目数量将数据进行分页展示,不需要与后端进行交互。
- 后端分页:数据分页处理在后端完成,只有用户请求的特定页面数据会被发送到前端,每次切换分页,均需发送后端请求。
- 数据源为实体数据源时,表格分页为后端分页,数据源为关系数据源时,表格分页均为前端分页。
◇ 分页条数:分页组件处展示每页显示条数的选择列表,需设置数组,如[5,10,20,50,100]。在"分页"属性开启时有效
◇ 默认分页条数:每页的数据条数。默认20条。在"分页"属性开启时有效。
◇ 自定义输入跳转页码:勾选“启用跳转”,在分页后增加跳转输入框,可自定义输入跳转页码。
◇ 对齐方式:分页组件的对齐模式,支持左、中、右
- 列宽可调整
运行态可根据个人需求拖拽调整表格中各列的宽度,该调整仅对当前会话有效,重新加载页面将恢复到默认的列宽设置。
- 固定列
当表格横向滚动时,某些列被锁定并始终显示在屏幕的指定侧,而其他列则随滚动条移动。
- 最小条数
保存时系统会自动检查输入的数据条目,若数据条数未达到预设定的最小条数要求,将无法保存。
- 默认条数
初始化时若尚无任何数据项时,控件会自动添加一定数量的空白数据项,以便可以便捷的输入信息。
- 总有一行选中
勾选后始终存在选中行,默认为当前页第一行。
列属性
单击欲查看属性的列字段,即可在右侧查看并修改列属性。
具体字段的设置,需点击列内子控件进行设置,配置详情请参见:空链接。
- 隐藏列
开启后,该数据列不可见。默认关闭。
- 列对齐
当前字段列的表头和内容对齐方式。
◇ 列对齐:列内容对齐模式,支持居左、居中、居右
◇ 表头对齐:表头对齐模式,支持跟随、居左、居中、居右。默认跟随,设置跟随后,表头跟随列对齐
- 描述信息
允许设计师对字段列进行详细说明。
事件
表格事件
- 点击行时:点击某一行时触发。
- 双击行时:双击某一行时触发。
- 勾选行时:表格产生勾选动作时触发。
- 取消勾选行时:表格产生取消勾选动作时触发。
- 勾选行改变时:勾选行产生改变时触发,包含新增勾选和取消勾选,
- 全选时:表格产生全选动作时触发。
- 取消全选时:表格产生取消全选动作时触发。
- 数据加载后:当数据控件数据初始化加载完成后触发。
- 分页改变时:分页发生改变时触发。
列事件
- 单击单元格:点击当前列中单元格数据时触发。
- 双击单元格:双击当前列中单元格数据时触发。
- 单击标题格:点击当前列中表头时触发。
- 双击标题格:双击当前列中表头时触发。
风格
表格风格
- 内框线:表格内部各个单元格之间的分隔线,支持横线和纵线设置。
- 表格高度:表格高度设置,数据项过多超出预定义的高度时,表格将产生纵向滚动条。支持px设置和行数设置。
自适应:表格高度根据内容自适应。
最大值:设定表格最大高度,当内容超过最大高度时,表格将出现纵向滚动条。
- 伸缩:表格放到页面上时,可以伸缩占满剩余空间。
自动拉伸:当父级容器主轴有剩余空间时,子控件可以拉伸填满剩余空间,当子控件的内容超过剩余空间时,父级控件出现滚动条。
自动缩小:当父级容器主轴剩余空间不够时,子控件自动缩小,子控件可能出现滚动条。
- 行选中效果:选中行时,支持高亮效果。
可分别设置列对齐和表头对齐
2.4 - 树控件
适用于大量、具有层级关系的数据展示场景中,并且利用组件的展开收起和关联选中等交互可以方便地对数据进行操作处理。常用于左树右表或左树右详情的业务场景。
- 使用过程
- 拖入【树】控件至画布区
- 在控件属性栏中选择数据来源,树控件作为展示性数据控件,支持多种数据来源(实体、选项集、枚举),选择具体数据来源
- 根据业务需求,配置控件属性、事件、风格
- 控件特性
- 树控件属性
参数名 | 说明 |
---|---|
标题 | 树控件标题设置,支持条件 |
数据来源 | 树控件支持多种数据来源 l 实体:最常用的数据来源,支持树实体和非树实体,若选择非树实体,则层级为1 l 选项集:以选项集为数据来源,层级为1 l 枚举:以枚举为数据来源,层级根据枚举类型不同而不同,级联枚举和多级枚举为多层级展示,平级枚举层级为1 |
条件 | 实体数据来源特有属性,数据满足过滤条件才显示。注:不满足条件的节点数据不展示当前节点及所有下属节点 |
排序 | 实体数据来源特有属性,数据初始加载时的显示顺序。 |
根节点名称 | 根节点的名称设置。根节点默认不绑定数据。 |
节点名称 | 节点的名称设置,支持选择数据字段或输入固定字符作为显示名称。 |
节点连接线 | 可选是否开启连接线,开启后节点之间增加连接线,常用于文件目录结构展示。 |
搜索 | 树的搜索定位能力,输入关键字,可快速搜索定位数据。
|
顶部操作 | 树控件的顶部操作,位于树的顶部,通常用于新建、刷新以及批量操作的设置。默认支持平铺展示两个操作,超出的操作将收起至更多。 |
节点复选 | 可选是否开启复选框。 |
总有一行选中 | 勾选后始终存在选中行,默认为根节点。 |
节点操作 | 树控件的节点操作,位于节点的右侧,通常用于删除、编辑等节点操作的设置。默认支持平铺展示一个操作,超出的操作将收起至更多。 |
2.5 - 树表查询
在显示大量结构化数据时,我们可以使用【重复表控件】,但在处理树形的数据时,重复表无法很好地表现出数据的层级结构,那么针对这种大量、具有层级关系的数据展示和录入场景,我们提供一个新的控件【树表】,来完美展示数据的信息和层级结构。
树表也属于数据表格控件,基础能力与重复表类似,但仅支持PC端,使用时也需要先通过数据绑定来绑定实体模型,再设置控件属性、事件和风格。同时支持对数据列表进行选择、筛选、分页、自定义操作等复杂功能。
- 使用过程
- 拖入【树表查询】控件至画布区
- 在控件属性栏中绑定数据源,选择需要展示的实体字段,树表只支持绑定【树形档案】类型实体
- 根据业务需求,配置控件属性、事件、风格
- 控件特性
- 树表查询控件属性
参数名 | 说明 |
---|---|
标题显示 | 树表标题设置,是否显示标题。 |
实体 | 树表控件仅支持绑定树实体。 |
条件 | 条件编辑器,数据满足过滤条件才显示。注:配置条件后,将不展示不满足条件的节点数据及所有下属节点数据 |
排序 | 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段值相同时,再按照下一个规则进行排序。 |
实体变更订阅 | 一般用于弹窗页面数据变更后自动更新该控件。需订阅实体,默认订阅当前实体。 |
默认不加载 | 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。 注: 1. 重复表默认初始化时自动加载实体数据,无需事件触发。 2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。 |
选择模式 | 列表项勾选模式,支持【无】【单选】【多选】,启用【单选】后,显示单选按钮,启用【多选】后,显示多选按钮,三种模式互斥。 |
多级表头 | 表头呈多级展示,可表述表头信息层级包含关系启用多级表头后,画布区可批量选择表头,右键添加上级分组; 取消勾选后,将清空多级表头的配置 画布区配置: l 批量选择单元格,右键可添加上级分组 l 单选分组单元格,右键可编辑分组内容、删除当前分组 l 最多支持4级表头 |
操作列 | 启用操作列后,将在树表列中配置单独的操作列。可以根据业务需求,通过操作的事件自定义配置执行动作。 l 常用按钮数:默认为3,超过配置数的操作将收起至更多 l 显示位置:操作列位置支持列首、列尾两种,默认列尾 l 操作配置:支持配置操作的图标、名称、事件、状态和样式 |
顶部操作 | 表格顶部操作,位于树表顶部,通常用于新建、刷新以及批量操作的设置。支持添加操作和操作组。 |
启用过滤 | 树表过滤查询能力,在树表上方添加查询条件,以便快速查询数据。查询结果将以平铺形式(非树结构)进行展示。 |
启用分页 | 可选择是否启用分页 l 支持自定义设置每页显示条数l 支持设置默认分页条数 l 支持设置分页对齐方式(左、中、右) |
固定列 | 配置表格前后列的固定。当横向内容过多时可以配置固定前侧或者固定后侧。 |
总有一行选中 | 勾选后始终存在选中行,默认为当前页第一行。 |
表格列 | 树表生成后,单击列,可以进行列的属性配置。支持配置列隐藏、排序、列宽、对齐方式、列图标、格式设置等。 列属性详见(2)树表查询控件列属性。 |
- 树表查询控件列属性
树表生成后,单击列,可以进行列的属性配置。
参数名 | 说明 |
---|---|
标题 | 当前列标题设置。 |
隐藏列 | 可选择是否隐藏列。支持隐藏列的添加表达式,当满足条件时,隐藏当前列。 |
列对齐 | 当前列的对齐方式:居左、居中、居右。 |
列宽 | 列的宽度,单位为%,支持输入或画布区手动拖拽改变列宽。 |
列样式 | 支持设置列背景色、字体颜色、字体效果(加粗、斜体、下划线)以及各种样式的条件表达式,满足不同条件,设置不同列格式。 |
图标显示 | 支持设置列图标。 l 图标:支持多图标显示,支持不同条件下显示不同图标 l 图标位置:文字前、文字后,支持配置各个图标的位置 l 图标状态:不同条件下控制图标显隐l 图标样式:不同条件下控制图标颜色 |
格式设置 | 配置树表中不同类型字段的显示样式。 如日期可配置日期格式“年-月-日”或“年-月”等,数字可配置为百分比格式,并支持以进度条形式展示。详见各类型录入控件的格式设置。 |
2.6 - 树表录入
树表录入属于树表控件的一种,主要用于数据字段较少的树形结构数据录入场景,无需单独再搭建录入页面。
- 使用过程
- 拖入【树表录入】控件至画布区
- 在控件属性栏中绑定数据源,选择需要展示的实体字段,树表只支持绑定【树形档案】类型实体
- 根据业务需求,配置控件属性、事件、风格
- 控件特性
- 树表录入控件属性
参数名 | 说明 |
---|---|
标题显示 | 树表标题设置,是否显示标题。 |
实体 | 树表控件仅支持绑定树实体。 |
条件 | 条件编辑器,数据满足过滤条件才显示。注:不满足条件的节点数据不展示当前节点及所有下属节点 |
排序 | 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段相同时,再按照下一个规则进行排序。 |
实体变更订阅 | 一般用于弹窗页面数据变更后自动更新该控件。需订阅实体,默认订阅当前实体。 |
默认不加载 | 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。注:1. 重复表默认初始化时自动加载实体数据,无需事件触发。2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。 |
选择模式 | 列表项勾选模式,支持【无】【单选】【多选】,启用【单选】后,显示单选按钮,启用【多选】后,显示多选按钮,三种模式互斥。 |
多级表头 | 表头呈多级展示,可表述表头信息层级包含关系启用多级表头后,画布区可批量选择表头,右键添加上级分组; 取消勾选后,将清空多级表头的配置 画布区配置: l 批量选择单元格,右键可添加上级分组 l 单选分组单元格,右键可编辑分组内容、删除当前分组 l 最多支持4级表头 |
操作列 | 启用操作列后,将在树表列中配置单独的操作列。可以根据业务需求,通过操作的事件自定义配置执行动作。 l 常用按钮数:默认为3,超过配置数的操作将收起至更多 l 显示位置:操作列位置支持列首、列尾两种,默认列尾 l 操作配置:支持配置操作的图标、名称、事件、状态和样式 |
顶部操作 | 表格顶部操作,位于树表顶部,通常用于新建、刷新以及批量操作的设置。支持添加操作和操作组。 树表录入控件预置有三种操作,且不支持删除和修改事件。 l 插入行:当前下方插入行 l 复制行:复制当前行或选中行 l 删除行:删除当前行或选中行 |
启用过滤 | 树表过滤查询能力,在树表上方添加查询条件,以便快速查询数据。 查询结果将以平铺形式(非树结构)进行展示。 注:搜索过程中无法进行录入操作。 |
启用行序号 | 可选择是否显示行序号 |
启用分页 | 可选择是否启用分页 l 支持自定义设置每页显示条数 l 支持设置默认分页条数 l 支持设置分页对齐方式(左、中、右) |
固定列 | 配置表格前后列的固定。当横向内容过多时可以配置固定前侧或者固定后侧。 |
表格列 | 树表生成后,单击列,可以进行列的属性配置。支持配置列隐藏、列宽、对齐方式等。列属性详见(2)树表录入控件列属性。 |
- 树表录入控件列属性及列事件
树表生成后,单击列,可以进行列的属性配置
注:列单元事件仅对只读状态生效
参数名 | 说明 |
---|---|
标题 | 当前列标题设置。 |
隐藏列 | 可选择是否隐藏列。支持隐藏列的添加表达式,当满足条件时,隐藏当前列。 |
列对齐 | 当前列的对齐方式:居左、居中、居右。 |
列宽 | 列的宽度,单位为%,支持输入或画布区手动拖拽改变列宽。 |
2.7 - 重复节
重复节属于多记录数据控件之一,是一种卡片式的列表展示,可承载文字、列表、图片、段落等,常用于后台数据展示页面。每个节代表一条数据记录,设计师可以在单一节中灵活组合节内容,并且根据实例化数据进行动态展示。
- 使用过程
- 拖入【重复节】控件至画布区
- 在控件属性栏中绑定数据源,可选需要展示的实体字段,数据源的详细说明见文档【2.4.12】
- 针对单一节,灵活拖拽控件至节中,进行组合布局
- 根据业务需求,配置重复节控件以及节内控件的属性、风格和事件
- 控件特性
- PC端重复节控件属性
参数名 | 说明 |
---|---|
标题 | 重复节标题设置。 |
条件 | 条件编辑器,数据满足过滤条件才显示。 |
排序 | 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段相同时,再按照下一个规则进行排序。 |
控制显示条数 | 按照排序规则,默认显示的top条数。配置后分页将无法启用。 |
实体变更订阅 | 一般用于弹窗页面数据变更后自动更新该控件,比如物料列表页弹窗或新页签的方式打开单条物料数据详情页,保存详情页数据后,列表页数据自动更新。配置方法:(1)首先物料列表数据控件需要在实体变更订阅中,订阅列表绑定的实体,即物料实体。(2)详情页面中保存按钮配置实体行为保存,需要配置行为执行后刷新页面数据,也配置物料实体。即实现保存详情数据后,自动刷新列表数据。 |
默认不加载 | 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。注:1. 重复表默认初始化时自动加载实体数据,无需事件触发。2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。 |
样式 | 卡片式、列表式。l 卡片式:节以卡片形式排列,支持设置每行可固定卡片个数, 也可根据设置的卡片宽度自适应个数l 列表式:重复节以列表形式进行自由布局,支持每一列放置多个控件,可以使用容器控件进行灵活布局 |
卡片排列 | 卡片式可以设置单行卡片个数,固定个数或单行自适应显个数。 |
多级表头 | 表头呈多级展示,可表述表头信息层级包含关系 列表式专有属性,启用多级表头后,画布区可批量选择表头,右键添加上级分组; 取消勾选后,将清空多级表头的配置 画布区配置: - 批量选择单元格,右键可添加上级分组 - 单选分组单元格,右键可编辑分组内容、删除当前分组 最多支持4级表头 |
列 | 列表式专有属性,可以设置列,每列内自动生成一个布局容器。 |
顶部操作 | 表格顶部操作,位于重复节顶部,通常用于新建、刷新以及批量操作的设置。支持添加操作和操作组。 |
总有一节选中 | 勾选后始终存在选中节,默认为当前页第一节。 |
显示顶部操作 | 在重复节的上方显示的操作 |
显示节标题 | 可选是否显示节标题。 |
显示节操作 | 单个节的顶部操作,位于节顶部。可选是否显示节操作。 |
节操作位置 | 支持设置节操作位置(左、右),与节标题位置互斥,当节操作位置设置为左时,节标题位置默认为右,当节操作位置设置为右时,节标题位置默认为左。 - 节操作位置:左 - 节操作位置:右 |
节操作 | 支持添加操作和操作组,同时重复节控件的节预置有三种操作,无法删除和修改事件。 l 添加节:最后一节后添加节 l 复制节:复制当前节 l 删除行:删除当前节 |
启用分页 | 可选择是否启用分页 l 支持自定义设置每页显示条数 l 支持设置默认分页条数 l 支持设置分页对齐方式(左、中、右) |
滚动翻页 | 仅卡片样式支持配置滚动翻页,仅重复节只读态时生效, 非只读态时按正常分页栏的方式分页。 开启分页后可配置每页几行,因为卡片样式是配置了单行个数, 所以可以算出每页有多少条数据。 滚动翻页的效果如下图:以左右滑动形式翻页 |
显示排序 | 运行态是否开启排序功能。例如打开排序开关,排序字段效果为 |
最小条数 | 保存时会校验录入的数据条数不能小于最小条数。 |
默认条数 | 页面初始化时,当未录入数据时, 默认添加的空数据条数。 |
- 移动端重复节控件属性
参数名 | 说明 |
---|---|
标题显示 | 重复节标题设置,是否显示标题。 |
条件 | 条件编辑器,数据满足过滤条件才显示。 |
排序 | 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段相同时,再按照下一个规则进行排序。 |
控制显示条数 | 按照排序规则,默认显示的top条数。配置后分页将无法启用。 |
实体变更订阅 | 一般用于弹窗页面数据变更后自动更新该控件。需订阅实体,默认订阅当前实体。 |
默认不加载 | 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。注:1. 重复表默认初始化时自动加载实体数据,无需事件触发。该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。 |
显示样式 | 重复节在运行态的显示样式l 卡片:以卡片形式区分节l 分割线:以分割线形式区分节可配置单行列数,一列或两列 |
非批量操作 | 在重复节可以添加非批量操作,作可以配置放到重复节头部或底部 |
批量操作 | 批量操作中可配置是否开启默认勾选模式。 默认勾选模式:开启后,无需点击批量操作触发,直接是可以勾选数据的状态。 批量操作可配置单选或多选 |
启用节标题 | 可选是否显示节标题。 |
节操作 | 预置插入、复制、删除节操作, 节操作可配置不同的交互效果:固定显示、动作面板、侧滑 |
显示排序 | 当重复节绑定的主表时,可配置在运行态是否有排序功能,可配置排序字段。 |
总有一节选中 | 勾选后始终存在选中节,默认为当前页第一节。 |
启用分页 | 可选择是否启用分页,启用分页后,运行态以[加载更多]的形式触发页数切换,点击[加载更多],将记载下一页数据 l 支持设置默认分页条 |
最小条数 | 保存时会校验录入的数据条数不能小于最小条数。 |
默认条数 | 当页面初始化时,控件未录入数据时, 默认添加的空数据条数。 |
3 - 录入控件
3.1 - 单行文本
1. 控件介绍
录入单行文本数据。需要绑定实体字段。
2. 控件特性
2.1 绑定字段
可绑定字段数据类型:文本、流水号、长整数。
注意:如果绑定的是长整数类型字段,该控件默认是只读状态,不能录入数据,因为正常情况下长整数对应的是ID,ID是系统生成的且不允许修改。
、
2.2 校验内容
对输入的内容可以进行是否文本、身份证号码、手机号码、邮箱的校验。
也可以自定义正则表达式、自定义错误提示。
2.3 字数统计
当绑定的文字类型字段时, 可开启显示字数统计,可实时统计录入的字数。
3.2 - 多行文本
1. 控件介绍
录入多行文本数据,需要绑定实体字段。
2. 控件特性
2.1 绑定字段
可绑定字段数据类型:多行文本。
2.2 校验内容
对输入的内容可以进行是否文本、身份证号码、手机号码、邮箱的校验。
也可以自定义正则表达式、自定义错误提示。
2.3 字数统计
当绑定的文字类型字段时, 可开启显示字数统计,可实时统计录入的字数。
2.4 设置文本框高度
(1)设置固定高度,可配置固定行数。 当内容超过固定高度时,文本框出现滚动条。
(2)动态适应文本高度,可配置最小高度和最大高度。
- 当实际内容小于最小高度时,有有最小高度的行高占位
- 当实际内容大于最小高度小于最大高度,超出部分自适应
- 当实际内容大于最大高度,内部出现滚动条
- 例如,设置最小高度为4行,最大高度为7行。当输入内容小于4行时,仍然会有4行的占位;当输入内容大于4行小于7行,实际高度会自适应;当输入内容大于启航,实际高度为7行,文本框内出现滚动条。
2.5 设置文本内容的行数
默认情况下不限制文本内容的行数,也可限制文本内容的行数。
如果要限制文本内容的字数,可以通过设置最大长度或最小长度。
3.3 - 数字
1. 控件介绍
录入整数和小数,需要绑定实体字段。
2. 控件特性
2.1 绑定字段
可绑定字段数据类型:小数、整数、长整数。
2.2 设置显示格式
如果绑定的是小数,可配置显示格式:百分号、千分号、千位分隔符
如果绑定的是整数, 可配置显示格式:千位分隔
2.3 设置小数位数
可设置页面上控件的小数位数。
注意:实体中可设置字段的小数位数,页面上可设置控件的小数位数,保存后,数据库会按实体的小数保存数据,当控件小数位数超过实体小数位数时,会截断后保存,不会做四舍五入。但渲染页面时,会按控件的小数位数显示,即当后端数据位数小于控件位数时,控件渲染时会自动补零。
2.4 值为0时不显示
使用场景:
(1)当录入数字是0时,希望查看或编辑数据时显示为空
(2)当未录入数据,保存数据,希望查看或编辑数据时显示为空。
以上两个场景,可以开启“值为0时不显示"。
2.5 进度条样式
数字控件还可以展示成进度条的样式,
注意:使用进度条样式,需要设置最小和最大值,进度条在最小值和最大值的区间内拖动。
2.6 设置单位
当展示样式为数值,支持输入单位。
3.4 - 货币
1. 控件介绍
录入金额数据,需要绑定实体字段。
2. 控件特性
2.1 绑定字段
可绑定字段数据类型:货币
2.2 显示大写金额
录入数字后,失焦将显示为金额大写
2.3 设置小数位数
可设置页面上控件的小数位数。
注意:实体中可设置字段的小数位数,页面上可设置控件的小数位数,保存后,数据库会按实体的小数保存数据,当控件小数位数超过实体小数位数时,会截断后保存,不会做四舍五入。但渲染页面时,会按控件的小数位数显示,即当后端数据位数小于控件位数时,控件渲染时会自动补零。
2.4 值为0时不显示
使用场景:
(1)当录入数字是0时,希望查看或编辑数据时显示为空
(2)当未录入数据,保存数据,希望查看或编辑数据时显示为空。
以上两个场景,可以开启“值为0时不显示"。
3.5 - 日期
3.6 - 时间
3.7 - 日期区间
3.8 - 参照
1. 控件介绍
参照控件用于在当前页面中引用实体数据。控件需要绑定实体类型的字段,参照控件只能引用这个实体字段关联实体的数据。
2. 使用场景
场景举例:在费控应用中,成本中心、费用报销单是两个实体,在填写费用报销单时需要选择成本中心, 选择后在控件中回显成本中心名称。 选择成本中心就是使用参照控件。
3. 控件特性
3.1 绑定字段
可绑定字段数据类型:实体
参照单选或多选:绑定的字段如果是多选,那么该参照控件可选择多条数据,否则只能单选。可在实体的字段列表中确认配置的是否多选。
3.2 选择参照方案
3.2.1 选择参照方案
参照方案实质是数据查询方案。参照控件绑定参照方案,运行态可以选择该参照方案查询的数据。
每个实体可以创建多个参照方案。请查看参照方案的详细介绍
参照控件只能选择绑定字段关联的实体的参照方案。比如参照控件绑定了字段“采购物品",该字段关联了实体"物品",那么参照控件可选到实体“物品"的参照方案。
当关联实体创建了多个参照方案,此处会默认使用第一个参照方案,可以手动选择其他方案。也可以点击”新建"跳转到实体中创建参照方案。
3.2.2 页面自定义参照方案
点击选择参照方案旁边的
,可以修改该参照方案的配置,确定修改后会新生成一个页面自定义参照方案,该参照方案仅当前参照控件可以使用。自定义参照方案说明:
- 自定义参照方案仅当前参照控件可用,而实体中创建的参照方案是整个应用中都可以使用。
- 生成自定义参照方案,并不会对原实体的参照方案产生影响。
- 参照方案名称后有”自定义"标识,表示是自定义参照方案。
- 在PC转移动时,自定义参照方案不会转换。
- 在属性区修改参照显示字段、参照下拉字段,实际和进入弹窗修改是一样的,该参照方案会自动变成自定义参照方案。
3.3 参照显示字段
参照显示字段是指选择了参照数据后,回写到控件中的字段。
默认使用该参照方案中配置的显示字段,也可以在控件中自定义。
3.4 参照下拉字段
参照下拉字段是指选择参照数据时,下拉框中显示的数据。未设置时默认使用参照显示字段。
举例:下图中,设计态参照控件的下拉字段配置的是商品编号、商品名称两个字段。
运行态,可以看到下拉框中显示的是商品编号和商品名称。
3.5 参照携带
3.5.1 使用场景
参照携带是指将关联实体的某些数据带到页面控件中。
场景举例1:报销单中选择报销人,希望在其他控件中展示报销人的所属部门和所属岗位。
场景举例2:请购单中选择请购物品,希望在其他控件中展示物品编号和物品分类。
3.5.2 配置说明
(1)选择携带到控件
携带到控件是指将数据携带到当前页面中的哪个数据控件中。
可选范围:当前参照控件所在的数据控件和下一级数据控件(不是绑的孙实体及以下实体)。
举例说明:页面中有单一记录绑定主表,有重复表绑定子表,重复表就算是下一级数据控件。如果参照控件在单一记录中,那么可以往单一记录和重复表中携带数据; 如果参照控件在重复表中,那么只能往重复表中携带数据。
(2)携带映射
左侧:关联实体、关联实体的上级实体、关联实体的下一级实体的字段。
右侧:携带到数据控件中的子控件
将左侧数据携带到右侧控件中。比如将物品信息实体中的编码,携带到页面中的物品编码[单行文本]。
(3)携带映射匹配规则
参照映射时,左右值类型必须匹配,平台已做了自动过滤:
- 右侧可选项必须匹配左侧的数据类型,平台已经做了自动过滤。
- 左侧枚举、选项集、实体类型字段只能映射给右侧绑定了相同枚举、选项集、实体的控件。
- 左侧数据多选的字段不能映射给右侧数据单选的控件。
- 当前参照控件多选且要同级携带(同级携带是指参照控件在要携带到的数据控件中),左侧字段类型只能是文本、实体、长整数。
(4)携带映射条件
参照携带支持条件配置,当满足条件时才会执行。
如下图:携带到控件这里可配置映射条件,单条映射也可以配置条件。前者是前置条件,如果都无法满足,不会执行后面的单条映射。
(5)自动映射
当需要携带的控件很多时, 我们提供了自动映射功能,会根据左右值类型匹配规则做自动映射。
自动映射时,需要选择映射来源实体(关联实体、关联实体的上级实体、关联实体的下一级实体), 默认是关联实体。
自动映射时,如果发现右值的控件已经配置了映射,可以选择保留已有的映射或者覆盖已有的映射。
3.6 选多个插入多行
使用场景:参照单选,且在重复表中。运行态支持选择多条数据,在重复表中插入多行,插入时可复制上一行的内容。
前置条件:参照单选,且在列表中。
配置方式:开启属性“允许选多个插入多行",如果插入行时复制当前行其他列的数据,可以开启属性“插入行时复制当前行"。
运行态效果:
3.7 清空携带
使用场景:主表中选择参照,并携带数据到子表的多记录控件中。
开启“清空携带":表示修改参照,清空之前携带到多记录控件的数据。
不开启“清空携带":表示修改参照,不清空之前携带到多记录控件的数据,继续追加携带数据。
注意:清空携带是前端行为,如果携带数据已经保存,修改参照是不会清空携带数据的。
运行态效果如下:修改进货商品,删除之前已经携带的内容。
3.8 删除标识
当开启后,参照控件已选项后有“X"删除图标;如果不开启, 可通过快捷键delete删除
3.9 仅显示参照图标
参照控件配置中,可以设置开启仅显示参照图标,打开后,参照控件隐藏,仅图标显示。
3.9 - 下拉
使用场景
主要用于选择数据项。
数据源
只能绑定枚举、选项集类型字段。
下拉选择是单选还是多选,是根据绑定的字段的属性决定的,如下图,如果在实体中枚举类型字段勾选了多选, 则绑定了该字段的下拉控件就可以多选。
控件特性
标签显示
仅当控件绑定的数据源是选项集类型字段时可设置。
必须选择末级节点
仅当控件绑定的数据源是枚举类型字段时可设置,只能选择末级节点。
显示路径
仅当控件绑定的数据源是枚举类型字段,且为多级枚举时可设置,比如选择高新区时,显示效果为:四川省/ 成都市/高新区
自定义范围
1.支持自定义选择范围,全部可选,或自定义可选范围或不可选范围,支持表达式。不可选的选项在运行态是默认隐藏不显示, 也可以配置为显示但禁用效果。
2.下拉控件在值操作节点中自定义可选或不可选范围时,支持选择前序节点出参, 支持表达式。
(1)枚举支持的前序节点出参数据结构为:文本、文本list、长整数、长整数list ,实体对象中的枚举。
选项集支持的前序节点出参数据结构为:实体对象中的选项集。
(2)支持表达式
(3)当前序节点传入的选项和正常选项有差异时,不可选范围不受影响, 可选范围是传入选项和正常选项取交集
3.10 - 开关
3.11 - 单选
使用场景
主要用于数据项单选。
数据源
只能绑定枚举、选项集类型字段。
控件特性
设置多种显示样式
横向排列、纵向排列、胶囊按钮(移动端无该样式)
自定义选择范围
1.属性设置中可自定义选择范围,全部可选,或自定义可选范围或不可选范围,支持表达式。不可选的选项在运行态是默认隐藏不显示,也可以配置为显示但禁用效果。
2.单选控件在值操作节点中自定义可选或不可选范围时,支持选择前序节点出参, 支持表达式。
详细请看下拉控件值操作自定义范围。
一键全选
开启后,支持一键全选,可一键勾选所有可选项。
3.12 - 多选
使用场景
主要用于数据项多选。
数据源
只能绑定枚举、选项集类型字段。
控件特性
设置显示样式
横向排列、纵向排列。
自定义可选范围
1.属性设置中可自定义选择范围,全部可选,或自定义可选范围或不可选范围,支持表达式。不可选的选项在运行态是默认隐藏不显示,也可以配置为显示但禁用效果。
2.单选控件在值操作节点中自定义可选或不可选范围时,支持选择前序节点出参, 支持表达式。
详细请看下拉控件值操作自定义范围。
3.13 - 附件
1. 控件介绍
附件控件主要用于文件上传、下载、预览等。需要绑定实体字段。
2. 控件特性
2.1 基础
2.1.1 绑定字段
可绑定字段数据类型:附件
绑定的字段如果是多选,那么该附件控件可上传多个文件, 否则只能上传一个。
可在实体的字段列表中确认配置的是否多选。
2.1.2 设置控件样式
附件控件提供4种样式:上传按钮、照片墙式、拖拽区域式、照片列表式。 还可以修改上传按钮的文字、图标、按钮样式。
设计态效果如下:
运行态效果如下:
补图
2.1.3 控件样式适配列表
使用场景:在列表中,希望附件控件只占单行。
配置:开启适配列表
样式效果:
2.2 设置
2.2.1 设置附件表格样式
使用场景:希望上传后的文件展示成表格样式。
在表格样式中会展示上传附件的附件名称、附件大小、上传时间、上传人、上传人部门,最后一列为附件的操作列,比如预览、下载、删除等操作,操作列可配置显示为仅文字、仅图标、文字+图标。
配置如下:
设计态效果:
2.2.2 设置附件个数和大小
当绑定的附件字段是多选时,可以配置上传附件的个数上限,在运行态上传文件时会做校验提示。
可以配置单个附件文件的大小。配置如下:
2.2.3 设置附件文件类型
可以限制可上传文件的类型, 图片、视频、文件,也支持自定义格式。
以下是各种类型支持文件格式。
图片:.jpg,.jpeg,.png,.gif
视频:.mp4,.rmvb,.avi,.wmv,.mov
文件:.docx,.doc,.pptx,.ppt,.pdf,.txt,.xlsx,.ofd
配置如下:
2.2.4 设置附件模板
使用场景: 设计态搭建应用时上传附件文件,终端用户只是下载和查看文件。
配置如下:
小技巧:在属性区上传附件模板文件,选中文件可以拖动调整文件排序。
设计态配合了附件模板后的效果:
运行态效果:
补图
2.2.5 设置隐藏内容
隐藏文件信息课勾选隐藏附件大小、上传时间、上传人、上传部门,勾选后运行态隐藏对应信息。
2.3 附件操作
2.3.1 附件下载支持水印
水印范围可选择跟随系统和无水印。
跟随系统:跟随平台的水印设置,包括场景、水印内容和样式。
2.3.2 设置附件批量操作
(1)批量上传:
- 本地选中多个文件,批量上传
- 开启上传文件夹,本地选中文件夹,批量上传文件夹中的文件。
(2)批量删除:开启批量删除的开关,可选中多个已上传的文件进行批量删除。
(3)批量下载:开启批量下载的开关,可选中多个已上传的文件进行批量下载。如果文件是多个,会打包下载,可设置打包文件的文件名。
(4)批量设置密级:开启批量设置密级的开关,可选中多个已上传的文件进行批量设置密级。
2.3.3 转PDF下载
附件支持转PDF下载,输入需要转PDF下载的文件格式,多个以英文逗号分隔(如doc,txt,docx),在文档下载时会将指定格式的文档转为PDF下载。
2.3.4 预览时可复制
开启预览时可复制后,运行态文件预览时支持复制内容。
2.3.5 附件重命名
开启后,对于运行态上传的附件文件,上传人可以对已上传的附件进行重命名操作。
2.4 附件操作控制
针对附件文件,可执行扫码上传、本地上传、下载、预览、删除、编辑、设置密级等操作。
可根据实际业务需求,控制这些操作的状态(正常、禁用、隐藏),支持条件表达式。
注意:目前只有WPS(V6)通道可编辑文件。
2.4.1 操作权限控制
开启后,在【角色权限】中可以给角色授权附件“扫码上传、本地上传、下载文件、预览文件、删除文件”等操作权限。
注意:角色权限中授权仍然会遵循控件状态优先级比较。
2.4.2 附件编辑
集成平台提供通道支持,对授予了文档编辑权限的附件,支持在线编辑。
设计态编辑文件默认隐藏,点击改为正常即可在运行态进行附件在线编辑。
运行态:
2.4.3 密级设置
附件开启了密级设置,在运行态上传附件,可以设置密级属性
运行态附件使用时,根据系统三员的总体规则配置,控制那些用户最终权限,如:低密级人员不允许查看高密级附件
运行态:
2.5 设置附件控件状态
附件的控件状态实际控制的是附件操作,对应关系如下表:
附件控件状态 | 操作状态 |
---|---|
附件正常 | –操作项正常:预览、下载、删除、设置密级 –操作项隐藏:编辑 |
附件只读 | –操作项正常:预览、下载 –操作项隐藏:删除、上传、编辑、设置密级 |
附件禁用 | 所有操作项禁用 |
附件隐藏 | 整个控件隐藏 |
注意:附件的操作状态是可以单独配置状态的,在2.7中已经说明。那么最终运行态的操作究竟是什么状态呢?
前文中我们已经说明过,当控件嵌套控件时,当前控件会受上级控件状态的影响,两种会比较状态的优先级(正常<只读<禁用<隐藏),决定当前控件最终运行时是什么状态。
所以,附件控件状态下对应操作的状态, 会和该操作本身配置的状态做比较,决定该操作最后运行时的状态。
比如:附件控件只读时,预览和下载默认是正常的。 如果设计态单独将预览和下载设置为禁用, 因为禁用优先级高于正常,所以,在运行态看到的效果是预览和下载是禁用的。
特别说明:以上只是为了给大家介绍背后的逻辑, 实际搭建时,只需要调整附件控件的状态,该状态下操作的状态是满足绝大多数场景的,不用单独再去配置某个操作的状态。只有不满足场景需求时,再单独调整操作的状态。
- 功能权限:开启后,在【角色权限】中可以给角色授权该控件
2.6 附件预览打印
运行态附件支持预览打印。