菜单页面
- 1: 菜单管理
- 2: 新建页面
- 3: 页面设计
- 3.1: 快捷创建和调整页面的方法
- 4: 页面配置
- 5: 页面模板
- 6: 组件通用属性
- 7: 组件通用样式
- 8: pc端组件
- 9: 控件与数据源
- 10: 事件交互
- 11: 子页面
- 12: 外框
- 13: PC转移动
1 - 菜单管理
1. PC端菜单&页面
1.1 菜单和页面的关系
在实际业务应用中,菜单表示一个完整的功能模块,可能由一个或多个有业务关联的页面组成。比如菜单【商品管理】,包括了商品详情页和商品列表页。
在实际搭建前,需要先梳理业务,明确业务应用的功能模块,创建相应的菜单。
1.2 创建多级菜单
菜单是终端用户访问应用的入口,通过新建菜单及子菜单可以实现多级菜单。
操作方法:
(1)点击文件夹的图标,新建一级菜单;
(2)hover到某个菜单,更多设置中可在当前菜单的下方或上方添加平级菜单,或添加子菜单。
如下图所示:
1.3 设置菜单跳转页面
默认页面是指运行态点击该菜单默认进入的页面。每个菜单必须有默认页面,且只能有一个默认页面。
系统会将该菜单下的第一个页面自动设置为默认页面,设计师可以调整。
操作方法:hover到某个页面,在更多操作中选择“设置默认页面",如下图所示。
1.4 调整菜单层级和顺序
hover到某个菜单,在更多设置中,可对菜单进行上下移动,或升级降级。 调整菜单层级或顺序,菜单下的页面会跟随一并调整。
tips: 可在菜单列表中,直接拖动菜单进行顺序调整。
2. 移动端分组&页面
2.1 新建分组
移动端提供分组管理页面的能力,实际搭建时可以将相同场景的页面放到一个组中,分组不支持多层级。
注意:分组并不代表移动端应用的导航, 仅作为设计态页面的一种管理方法,如需设置导航,详情请参考移动端应用导航设置。
操作方法:点击“文件夹"图标添加分组,如下图所示。
2.2 调整分组顺序
操作方法:hover到某个分组,在更多设置中,可对分组进行上下移动调整顺序。调整分组顺序,分组下的页面会跟随一并调整。如下图所示。
tips: 可在分组列表中,直接拖动分组进行顺序调整。
3. 预置菜单&页面
平台会预置部分菜单及页面,比如导入导出模板管理、流水号规则设置、枚举管理等。主要满足运行态的业务个性化需求,比如在运行态增加流水号规则,增加枚举项、增加导入导出模板。一般是应用管理员会被分配权限查看这些页面。权限分配详情可参考角色权限
预置菜单和页面也可以删除, 删除后可以在引用页面中重新添加。如下图所示。
4. 引用页面
适用场景:引用已有的页面,比如有费用报销和发票管理两个应用, 在费用报销应用中想查看发票, 这时可以直接引用发票管理中的页面。
可被引用的页面类型包括:当前应用创建的所有页面、系统预置页面、依赖应用的页面、当前应用的BI报表、外部链接。
注意:
(1) 如果要引用其他应用的页面,需要先建立应用依赖, 详情请参考应用依赖。
(2) 如果引用当前应用的页面,引用页面和原页面是一份数据,任一一处修改,其他地方将同步生效。
(3)引用依赖应用的页面、引用报表、引用链接都只能查看,不可修改原页面。
2 - 新建页面
新建页面
新建页面入口,如下图
页面信息:
(1) 页面名称:页面的显示名称。
(2) 页面标识:每个页面有唯一标识,页面新建成功后不可修改。
(3) 页面类型:详情页、列表页、全表编辑页、其他。 详情请参考页面类型
(4) 自定义页面:勾选后,表示该页面为手工开发的页面,不能通过可视化组件拖拽的方式搭建页面。创建的自定义页面会生成页面唯一标识, 在手动开发时会用到该标识。详情请参考自定义页面
(5) 页面对应实体:
✓ 页面对应实体可选择主子孙实体。
✓ 页面中需至少一个数据控件绑定“页面对应实体",否则无法保存页面。
(6) 适配终端:同时勾选PC和移动端,会在移动端也生成相应页面,移动端页面可以通过“转移动”由PC端转成移动端。详情请参考PC转移动
(7) 页面模板:根据选择的页面类型,系统提供相应的页面模板,可分别选择PC端和移动端模板,将会基于模板生成页面。详情请参考页面模板
3 - 页面设计
功能概述
页面是应用呈现给用户浏览内容和交互操作的界面,可视化设计器提供了编辑页面的能力,设计师可以直接拖拽组件到画布中,进行页面布局、属性设置、样式调整等操作,快速高效地完成页面设计。
功能介绍
页面类型
(1)详情页:用于数据的录入、编辑、查看,可通过参数设置页面的打开模式:新建、编辑、查看。详情页预置页面入参ID, 当以编辑或查看模式打开详情页时,需要设置入参ID的值,说明打开的是哪一条数据。详情页需使用到数据控件单一记录,详情请参考单一记录。
详情页举例如下:
(2)列表页:用于数据的查询。一般搭建方法是:PC端使用重复表查询搭配筛选控件、移动端重复节(需配置控件状态为只读)搭配筛选控件。详情请参考重复表查询、重复节、筛选控件。
列表页举例如下:
(3)全表编辑页:用于在列表中直接录入数据并展示数据,不需要单独做详情页和列表页,常用于数据字段较少时录入和展示数据。一般是使用重复表录入、树表录入控件进行搭建。详情请参考重复表录入、树表录入。
全表编辑页举例如下:
(4)其他页面:主要用于搭建流程表单的辅助信息页。该类型的页面可以不绑定页面对应实体。详情请参考流程中辅助信息页配置方法
页面设计的基本流程
1、新建页面
进入【菜单】模块,选中Web端或移动端, 添加页面。
注意:PC端页面需要挂在菜单下, 移动端页面需要放到分组下。在新建页面时“适配终端"选择菜单或分组。
2、页面分区布局
根据实际业务页面,在页面设计器中对页面进行分区布局。
(1)在页面属性中,开启页面布局,PC端页面可被分为上、下、左、右、中五个区域,移动端页面可被分为上、中、下三个区域。可根据实际业务开启或关闭某个区域。
注意:如果页面绑定了外框,页面布局将不可用。
(2)使用布局控件对页面进行二次布局。
3、拖入数据控件绑定数据源
(1)如果搭建详情页面, 就拖入单一记录数据控件,在右侧属性中”实体"绑定数据源。
(2)如果搭建列表查询页面,就拖入重复表查询或重复节控件,在右侧属性中”实体"绑定数据源。
绑定数据源后会自动生成子控件。
4、控件配置
每个控件可配置属性、事件、风格。 属性为该组件基本配置; 事件为该组件的交互配置; 风格为该组件的样式配置。详情可参考组件介绍
5、页面保存
设计好页面后,需保存页面,或保存为草稿。为了保证页面能正常运行,保存页面时会对页面和控件配置进行校验, 如有报错,可根据提示信息修改后再保存。
3.1 - 快捷创建和调整页面的方法
基于模板创建页面
新建页面时,先选择页面类型,然后在该类型的模板中,选择合适的模板,基于模板快速生成页面。
基于实体快速生成页面
新建实体后,点击“生成页面", 可选择生成列表页和详情页,将会基于模板快速生成相应的页面。
PC页面一键转移动
搭建步骤:
1、新建页面时,适配终端同时勾选web端和移动端,将会同时创建两端页面,且两端页面建立了关联。
2、设计页面时,切换到移动端,点击”转移动",可将PC端内容直接转换到移动端。可选择全部转换,或仅选择PC端的部分内容进行转换。
注意:
1、PC转移动时,全部转换将会清除当前移动端页面已有内容(控件、页面规则)及外框占位内容。
2、移动端未绑定外框时,如果存在PC外框对应的移动外框(新建外框时同时勾选了PC和移动), 转换时,会加上对应移动外框。 如果不存在对应移动外框,只转PC端的内容区。
3、移动端已绑定外框,PC页面转移动,按占位的名称去匹配,匹配不到的放到中间区的上方。
选择单一记录生成详情页
在页面设计器中选中 单一记录
,在实体的 选择数据源
弹窗中选中字段,快速生成详情页。
可以指定生成几列的布局,同时在实体字段中创建的分组也能起到作用,按分组划分字段的区域。
从数据面板拖拽字段
除了拖拽控件进行设计之外,还可以从数据面板直接拖拽字段,省去绑定字段和配置标题等环节。
4 - 页面配置
页面绑定外框
当页面需要绑定一个外框时,可在页面属性中配置。 当页面绑定外框后,画布上页面内容区域会比较小,不方便设计,可配置将外框在设计态隐藏,这样可以专注地设计页面内容。
外框的详情介绍可参考外框
开启页面布局
适用场景:将页面划分为多个区域,每个区域独立的横向或纵向滚动。
开启页面布局后,PC端页面可被分为上、下、左、右、中五个区域,移动端页面可被分为上、中、下三个区域。可根据实际业务开启或关闭某个区域。
在画布中,选中每个分区,可设置分区的属性。
上下侧区域可设置高度;左右侧区域可设置宽度,运行态支持拖拽调整宽度和折叠展开区域;中间区域可设置最小高度,中间区域的高度为浏览器页面可视区域减去上下侧区域的高度。
注意:当内容高度超过区域高度时,区域出现纵向滚动条;当内容宽度超过区域宽度时,区域出现横向滚动条。
每个分区可设置分区的风格样式:背景、边框、边距、阴影、滚动条等。
页面风格设置
页面风格中可以配置页面背景、页面边距。
页面事件
页面提供页面初始化、页面关闭、参数变化时3个事件,可根据实际业务场景进行配置。
其中参数变化时指的是任意一个页面入参的值发生变化。
页面参数
- 页面入参
页面初始化时,由外部传入的参数,页面打开的整个过程中,不可变更。特殊类型页面在创建时会预置对应的入参,如详情页会预置参数"ID"、参数"页面打开模式"等。
典型场景:列表当前行数据,以弹窗形式查看或编辑详情,需要传入当前行的数据id,弹窗页面的打开模式等。
- 页面出参
弹窗页面关闭时,向父页面返回的参数,参数数据来源于当前页面数据,在主页面定义弹窗事件时,可以设置弹窗页面的出参映射。
典型场景:如填写表单时,需要选择另一实体中数据,作为表单内容,并将所选数据的值回显在表单中。
页面变量
(1)适用场景:适用于页面内的数据临时承载和数据传递。常用于组件值和属性的设置中,或变量变化后触发事件。
(2)变量定义:支持基本数据类型和选项集、枚举、实体、自定义对象、列表等。
(3)变量赋值:页面生命过程中可以对页面变量进行赋值,调整值内容
- 参照携带赋值:参照内容支持携带至指定页面变量
- 页面规则赋值:通过【修改变量】和【修改列表】节点可以修改变量值
(4)变量使用:页面规则、表达式里可以使用页面变量
公开访问
关闭:用户登录后有访问权限才可访问
开启:无需登录即可访问。页面有单据或档案类型时不支持公开访问。
若页面有单据或档案类型且设置了公开访问,则在页面整体保存时会提示阻断并明确冲突。
5 - 页面模板
新建页面、外框时支持通过模板创建页面和外框。
模板来源有两种:预制模板和自定义模板。
使用页面模板生成页面效果示例如下:
-
列表页
-
表格列表:
- 模板生成的页面是示例页面:物料领用单查询列表页面,列表字段是物料领用单实体对应字段。
-
模板 模板生成的页面
-
卡片列表
- 模板生成的页面是示例页面:问题上报列表页面,卡片中内容与模板对应卡片中内容一致。
模板 模板生成的页面
-
详情页
- 详情页面-容器布局效果(无子表明细):模板生成的页面是示例页面:物品领用详情,无明细信息,对比模板,新生成的物品领用详情中多了自动生成了对应的领用信息。
模板 模板生成的页面
- 详情页面-网格布局效果(无子表明细):模板生成的页面是示例页面:物品领用详情,无明细信息,对比模板,新生成的物品领用详情中多了自动生成了对应的领用信息。
模板 模板生成的页面
- 详情页面-(子表明细),多子表平铺效果:模板生成的页面是示例页面:采购付款单详情,明细信息:采购明细、发票明细,对比模板,自动生成了对应的付款信息、采购明细、发票明细。
模板 模板生成的页面
- 详情页面-(子表明细),多子表页签展示效果:模板生成的页面是示例页面:采购付款单详情,明细信息:采购明细、发票明细,对比模板,自动生成了对应的付款信息、采购明细、发票明细。
模板 模板生成的页面
- 详情页面-列表详情,模板生成的页面是示例页面:供应商列表详情页面,左侧卡片效果保持原样与页面模板一致,右侧详情自动生成了供应商更多业务字段。
模板 模板生成的页面
-
全表编辑页
- 模板生成的页面是示例页面:供应商全表编辑维护页面,可维护列是供应商维护字段
模板 模板生成的页面
- 其他页面:原样复制模板中内容。
【模板自动生成规则】
列表页、详情页、全表编辑页:
-
因为页面选择了对应实体,模板中数据控件绑定的实体,会按照页面对应实体与模板对应,进行对应替换。
-
控件(包括表格控件对应列):
-
自动生成:
-
单一记录、重复节:模板中内容首先原样复制,字段分组对应页面分组控件,分组下字段属性按照模板中录入控件属性一致进行自动生成,且是能够找到两个有规律兄弟控件。比如示例页面:详情页面-(子表明细)
-
重复表录入、重复表查询、树表录入、树表查询控件:
- 重复表录入、重复节控件:模板中有主子关系控件(实体设置是关系数据源),则会按照当前页面对应实体关系子表自动生成。
- 列:按照实体字段设置的显示列勾选,则自动按序生成。
-
-
原样复制:无规律,比如卡片需要多层容器嵌套效果等。
-
自定义模板说明:
如想要自定义可自动生成的页面模板,可按照预制模板效果制作模板。
其它页面:原样复制,即生成的页面与模板页面控件一致,原模板中绑定的实体、字段不做处理,需要生成页面后手动修改。
【新建页面选择模板】
1)支持Web端和移动端模板分开选择,如果选择的模板有Web端和移动端对应关系,则会提示:存在对应移动端模板,是否同步选择?
2)公开模板为当前租户可使用的页面模板(跨应用的模板)(公开但是关联外框的页面模板不支持跨应用使用),自定义模板是当前应用中自定义且未公开的模板,自定义模板仅当前应用使用。
6 - 组件通用属性
1. 功能概述
组件通用属性是每个组件中都包含的一组基本属性。
属性 | 说明 |
---|---|
标题 | 设置控件的显示名称。 |
标题显示 | 设置标题是否显示及显示位置。 |
标题宽度 | 设置标题的宽度。 |
标题对齐 | 设置标题的对齐方式:左、中、右、两端。 |
占位提示 | 有输入框的录入类控件可以设置占位提示文字。 |
计算值 | 可通过表达式设置控件的值,一般设置了计算值的控件都会设置为只读状态,即不允许手动输入。 |
默认值 | 可通过表达式设置控件的默认值,默认值仅初始加载时生效。 |
必填校验 | 设置控件是否需要必填,保存数据时会做校验提示。 |
功能权限 | 开启功能权限表示将该控件注册到权限中心,然后在角色权限中可以给不同角色授予该控件不同的权限。 |
状态 | 控件在运行态呈现的效果。 正常:运行态正常显示, 控件基本功能正常使用 只读:运行态不可编辑, 仅展示控件的数据 禁用:运行态不可编辑,呈现禁用的UI样式 隐藏:运行态不显示,隐藏时不会影响该控件的数据 状态的优先级为正常<只读<禁用<隐藏。当控件嵌套控件时,运行态是按控件状态优先级来呈现的。 比如分组控件中添加单行文本控件,分组控件设置为隐藏,单行文本控件设置为正常,因为隐藏状态的优先级最大,所以运行态单行文本控件是隐藏状态。 |
控件名称 | 默认显示控件标题。在页面大纲、表达式等其他引用控件的地方,都是使用的控件名称。 |
唯一标识 | 每个控件在该页面中都有唯一标识,通过PC转移动生成页面,PC端的控件和移动对应控件的唯一标识是相同的。 |
描述信息 | 控件tips提示,填写后将在控件固定位置生成提示图标,鼠标hover展示描述信息。 |
2、功能介绍
2.1 编辑表达式
当需要输入属性值时,可以直接在输入框中手动输入,实现内容的静态展示。也可以通过编辑表达式,实现内容的动态展示。
还可以通过设置条件表达式,实现满足不同条件时,显示不同的值,值可以手动输入或表达式输入。表达式详细介绍请参考XXXXXX
2.2 控件属性批量设置
批量选中组件时,可在顶部对控件属性进行批量设置。
3、操作示例
3.1 实现控件动态显隐
3.1.1 场景描述
当已婚时,需填写配偶信息,否则隐藏配偶信息。
3.1.2 准备工作
已有页面,页面有两个控件:是否已婚[布尔]、配偶姓名[单行文本]
3.1.3 具体操作
(1) 选中配偶姓名[单行文本],在右侧属性中,“状态"点击fx,进入条件表达式设置。
(2) 在条件表达式设置中,点击"如果"后的输入框,弹出表达式
(3) 条件设置如下图所示
3.1.4 效果展示
3.2 控件数据自动计算
3.2.1 场景描述
自动计算剩余金额,剩余金额=总金额-已消费金额
3.2.2 准备工作
已有页面,页面上3个货币控件,分别是总金、消费金额、剩余金额
3.2.3 具体操作
(1)选中剩余金额控件, 在右侧属性中,“计算值"点击fx, 编辑表达式
(2)编辑表达式
3.2.4 效果展示
7 - 组件通用样式
1. 功能概述
组件通用风格是每个组件中都包含的一组基本风格。
属性 | 说明 |
---|---|
控件大小 |
设置控件的大中小。以单行文本为例,调整控件大小会同时影响控件标题和输入框的大小。 |
标题设置 |
设置标题的字体、字体颜色、字体效果、背景色、行数上限,支持表达式。 |
内容设置 |
一般录入类控件会内容的样式设置。该设置在控件只读态时生效。 |
边距设置 |
设置控件的内外边距。一般布局类控件会有该设置。 |
容器内样式 |
当控件放在容器中时,可以设置在容器中的样式,比如容器分成了几列,可设置当前控件的宽度占容器的几列,且是否自动拉伸或缩小以适应容器。 |
2. 功能介绍
2.1 边距设置
可分别设置控件上下左右的内外边距。
外边距是指当前控件嵌套在一个容器中, 当前控件与底层容器的间距。
内边距是指当前控件中嵌套了其他控件, 当前控件与内部其他控件的间距。
行间距是指当前控件中嵌套了其他控件,其他控件行与行之间的间距。
举例如下:
当分组控件的内外边距、行间距都是0, 效果如下:
当给分组控件设置内外边距、行间距,效果如下:
2.2 容器内样式
前置条件: 当前控件放到了容器中,当前控件的才可配置容器中样式。
高度:指控件在容器中的高度。
自适应:指高度根据内容自适应。
固定值:指设定固定高度,当内容超过固定高度时,控件内将出现纵向滚动条。当父级容器小于控件高度时,父级容器出现纵向滚动条。
自动拉伸: 指父级容器主轴有剩余空间时,子控件可拉伸填满剩余空间,当子控件的内容超过剩余空间时,父级容器出现滚动条。
自动缩小:当父级容器主轴剩余空间不够时,子控件自动缩小,子控件可能出现滚动条。
注意:当配置了自动拉伸或自动缩小时, 高度配置将不生效。
在2.1的示例基础上,配置了自动拉伸和自动缩小,可以看到分组控件在垂直方向做了自动拉伸,占满了外层容器。
2.3 字体设置
设置的字体在控件正常、只读、禁用状态均生效。适用于政务等对字体格式有要求的场景。
①支持录入控件、文字标签字体设置,预制常用高频字体,可直接选择,自定义字体可直接输入
②运行时本地系统有安装字体则生效
③可按顺序依次设置多个字体,按照顺序依次生效
2.4 溢出交互设置
前提:当控件只读时,该设置才会生效。
说明:带输入框的控件,比如单行文本控件, 如果内容超过单行,可配置是否换行展示,或者单行展示并显示省略号,鼠标hover可显示全部内容。
效果展示:
8 - pc端组件
8.1 - 布局控件
8.1.1 - 网格
1. 控件介绍
网格控件是一种布局控件,可以设置几行几列,对页面信息按行列布局。
2. 使用场景
当需要按行列整齐的展示内容时,可使用网格。 网格一般在详情页中展示表单内容。
2. 控件特性
2.1 设置表格的行列
将网格控件拖到画布区时,会弹出提示输入行数和列数,根据设置生成相应的网格。生成网格后,在右侧属性区可以看到行列信息, 但不可直接修改, 可选中单元格右键插入或删除行列。
2.2 插入和删除行或列
操作方法:选中单元格,鼠标右键,可以设置插入和删除行或列。
2.3 合并或拆分单元格
操作方法:选中要合并或拆分的单元格, 然后右键选择相应的操作
2.4 设置最小行高
一个单元格中可以拖入多个控件,行高是根据内容自适应的。当内容高度小于设置的最小行高时,行高会等于最小行高。
设置最小行高的主要场景: 当每一行的行高按内容自适应不一样高时,希望从视觉上使表格所有行的行高一样,可以将最小行高设置为最高那行的行高。
操作方法: 选中需要调整的行, 然后右键设置最小高度。
2.5 调整列宽
操作方法一:可在表格中拖动列边线调整列宽
操作方法二:选中单元格, 右键设置列宽
注意:表格的列宽是默认占满上层容器的宽度,表格整体是不会出现横向滚动条的。调整列宽会挤压相邻列的宽度,相邻列可能因为宽度不够,出现横向滚动条。
2.6 设置边距
内外边距设置详情请参考边距设置
行间距是指表格的行与行之间的距离,列间距是指表格的列与列之间的距离。
2.7 设置边框
在风格中设置表格控件背景图、背景色、圆角、边框线、边框线颜色、边框线样式、边框线宽度等。
设置边框线样式的步骤:
- 首先在画布中选中要设置边框的区域。
- 设置样式时,需要先选择设置哪些边线,再设置样式、宽度或颜色。
边框线设置示例:
8.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 边框设置
在风格中设置容器控件背景图、背景色、圆角、边框线、边框线颜色、边框线样式、边框线宽度等。
边框线的设置步骤可参考表格边框线设置
8.1.3 - 分组
1. 控件介绍
分组控件顾名思义是将内容进行分组, 支持分组的展开收起效果。
2. 使用场景
页面内容可以分成多个独立模块时,比如录入人员信息时, 要分别录入个人信息、家庭信息、学历信息等,那么可以用分组控件,每个分组内信息是聚焦的。
3. 控件特性
3.1 头部设置
头部样式支持自定义或选择预置样式。自定义可配置标题展示图标或图片。预置样式可直接选择使用。
3.2 折叠设置
(1)可配置折叠图标的位置及折叠样式
折叠图标在头部:
折叠图标在内容区下:
(2)可配置打开页面时,分组默认是展开或收起状态,且可以设置不同条件下的状态。
3.3 设置高度
自适应高度:根据分组内的内容自适应,高度是动态的,分组控件自身不会出现纵向滚动条。
固定高度:高度固定,当分组内容超过固定高度时,分组控件自身将出现纵向滚动条。当父级容器小于控件高度时,父级容器出现纵向滚动条。
3.4 设置伸缩
分组控件也具备伸缩能力。
伸缩的详细介绍可参考容器自动拉伸和缩小
3.5 设置边距
内外边距设置详细介绍可参考边距设置
3.6 设置分割线
(1)可设置是否展示分割线。
(2)设置分割线的样式。
8.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 设置伸缩
页签控件也具备伸缩能力。
详细介绍可参考容器自动拉伸和缩小。
8.1.5 - 面板
1. 控件介绍
面板属于布局控件的一种,通过配置面板显示方式可以实现全局弹窗、跟随某个控件的气泡以及侧边弹出抽屉等不同的功能。
2. 使用场景
当需要录入或查看更多数据,可以使用面板实现。
比如重复表录入控件中需要录入的数据列非常多,列表会非常宽,体验不好,这时可以考虑使用面板录入更多数据。
3. 控件特性
3.1 配置打开面板
运行态面板是默认不打开的,可通过以下两种方式打开面板。两种方式没有本质区别,只是配置方式不同。
方式一:在属性区中,配置触发控件及触发动作。
方式二:在事件中配置面板的控件动作,打开面板。
3.2 配置面板显示位置
面板的显示位置有三种:
(1)跟随触发控件:面板以气泡形式呈现,可配置跟随位置。
(2)固定在某个位置:面板以弹窗或抽屉的形式呈现。
(3)可拖动调整位置:面板以弹窗形式呈现,默认居中,可以拖动位置。
3.3 配置面板关闭方式
关闭方式:
(1)支持点击非面板区关闭。
(2)点击面板右上角的关闭按钮关闭。
(3)键盘按下esc键来关闭(移动端不支持esc键)。
3.4 注意事项
(1)面板只能拖入到页面顶层区域,不支持拖入到其它控件中(暂不支持在外框设计使用)。
(2)一个页面可以拖入多个面板,但画布区同时只能展示一个(总是优先展示最新拖入的面板)。可以点击面板工具条上的小眼睛图标来隐藏面板,如图:
(3)隐藏的面板可以通过点击大纲中的小眼睛图标再次打开,如下图:
8.1.6 - 子页面
1. 控件介绍
子页面控件也是布局控件的一种,属于页面中的一部分,运行态根据条件显示不同的子页面。
2. 使用场景
当页面中某块区域要根据条件显示不同的内容,可以使用子页面控件,每个内容是一个子页面。
3. 控件特性
3.1 添加子页面
属性区中点击添加子页面,选择想要加载的子页面。根据业务需求,如果该子页面有入参,则配置入参参数映射。
3.2 设置激活规则
使用场景:当满足条件时切换相应子页面。
配置方法:
方式一:自动触发,当条件满足就激活对应子页面。
方法二:在事件中配置子页面控件动作执行激活。比如点击某个按钮时,再按条件判断激活子页面。
自动触发激活规则不开启时,需要配置控件动作才能执行激活规则;开启后,自动判断激活规则的条件,自动执行。
8.2 - 数据控件
8.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效果演示
8.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效果演示
8.2.3 - 重复表录入
控件简介
重复表录入控件是为简化数据输入流程而设计的组件,这种控件主要适用于数据字段较少且格式统一的录入场景,避免了为每个数据条目单独构建录入页面的需要,显著提升了数据录入的效率。
作为重复表控件的一种,重复表录入控件也集成了一系列高级功能,包括但不限于数据选择、排序、筛选、分页以及自定义操作等。
属性
表格属性
组件通用属性说明,请参见组件通用属性说明。
- 实体
展示数据的来源。实体属性具备与多种数据源建立关联的能力。重复表录入控件最常用的是实体数据源和关系数据源。
实体属性可以关联多种数据源,数据源详情信息,请参考:空链接。
实体数据源允许绑定当前应用自定义的实体,或跨应用的实体。基于实体数据源,数据控件便能够在应用程序内执行全方位的数据操作,包括但不限于数据的检索、新增、修改以及删除等。
而关系数据源主要用于处理具有主子聚合关系的数据,如物资领用单和领用明细,领用明细依赖于领用单,无法独立进行数据的新增、更新和删除操作,这种情况下,关系数据源可以清晰的表明领用明细和领用单之间的依赖的关系。关系数据源通常需要与单一记录嵌套使用。
- 隐藏字段
基于性能优化角度,数据控件在进行数据加载时,仅会检索页面中关联了录入控件或表格列的字段。然而,在实际业务中,有些字段数据可能用于页面逻辑处理,但又不希望在用户界面中展示。针对这种场景,平台引入了“隐藏字段”属性,该属性中勾选的字段,无需关联前端控件,但数据加载时仍会获取对应字段值。
- 条件
定义一组过滤规则的条件编辑器,以便在数据展示时仅显示满足特定条件的数据项。
- 排序
数据初始加载时的显示顺序,支持选择数据源中的某一字段为排序依据,配置默认排序规则,支持升序和降序。
支持多字段排序,首先按照第一个字段进行排序,当第一个字段相同时,再按照下一个规则进行排序。
控制显示条数
根据预设的排序规则,系统将默认展示排序后的前Top条数据。请注意,一旦配置了此选项,分页功能将不可用,所有符合条件的数据将一次性加载并展示。
- 实体变更订阅
一般用于弹窗页面数据变更后,控件自动刷新。弹窗“确认”操作需订阅父页面中操作的实体。
- 默认不加载
该属性勾选后,表格初始化时,不加载实体数据,需通过事件触发查询和刷新数据。
- 重复表默认初始化时自动加载实体数据,无需事件触发。
- 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。
- 选择模式
表格项勾选模式,支持三种不同的选项:【无】、【单选】和【多选】。当启用【单选】模式时,列表将展示单选按钮,允许用户一次选择一个列表项。而启用【多选】模式后,列表将展示多选按钮,允许用户同时选择多个列表项。选择【无】模式时,则将不显示任何勾选按钮,用户无法通过勾选来选择列表项。三种模式互斥。
- 多级表头
表头呈多级展示,可表述表头信息层级包含关系。启用多级表头后,画布区可批量选择表头,右键添加上级分组;取消勾选后,将清空多级表头的配置。平台最多支持4级表头。
多级表头详细配置过程,请参见:空链接。
- 列字段
表格展示的字段。可添加实体模型中字段,或添加自定义列。
自定义列相关信息,请参见:空链接。
- 操作列
表格的一个特殊列,它包含对表格中每行数据可以执行的操作或命令,常见操作列操作:查看、编辑、删除等。
◇ 常用按钮数:默认为3,超过配置数的操作将收起至更多
◇ 显示位置:操作列位置支持列首、列尾两种,默认列尾
◇ 操作配置:支持配置操作的图标、名称、事件、状态和样式
- 顶部操作
位于表格最上方的一组操作工具,通常用于提供对整个表格数据或选定行的批量操作,如新增、删除、导入/导出。
重复表录入控件作为全表编辑型控件,会频繁执行插入、删除等操作,为了提升操作便利性,平台预置了三种录入的常规操作:
◇ 插入操作:插入一个空白行
◇ 复制操作:复制当前行或勾选行
◇ 删除操作:删除当前行或勾选行
- 行浮层操作
重复表录入控件的行操作类型之一,位于重复表录入控件侧边的快捷操作,鼠标hover行时展示,仅支持三种预置操作:新增行、复制行、删除行。预置操作的功能与顶部预置操作一致。
行浮层操作支持三种显示样式:
◇ 联动显示:默认,与顶部操作中同类型预置操作状态同步,如顶部操作中的[删除]操作隐藏,则浮层操作中[删除行]操作联动隐藏
◇ 独立显示:行浮层操作显示状态独立控制
◇ 不显示:不显示行浮层操作
- 行序号
启用后,逐一为每一行数据分配一个唯一的序号。
- 过滤能力
表格的快速搜索能力,启用后,允许设计师配置搜索字段,搜索区在表格上方。
搜索字段配置:单击搜索类型框后方的“设置”图标,可选择表格所关联实体的字段作为搜索字段,此外还可自定义配置搜索字段的显示样式等。
搜索字段的配置方式,与筛选控件中搜索设置相同,详情配置指南请参见:筛选控件-搜索字段配置空链接。
表格搜索模式:
◇ 条件下拉:允许用户针对指定的数据字段进行数据检索
◇ 条件平铺:多个搜索字段并排或垂直排列展示,用户可以在这些字段中输入不同的搜索条件
◇ 快捷搜索:提供单一搜索框,可在多个预设文本字段中进行搜索。仅文本支持快捷搜索,最多支持3个字段同时参与快捷搜索。
◇ 折叠按钮:提供折叠按钮,将所有搜索字段简洁地收纳于该按钮下,点击此按钮即可展开或隐藏搜索选项。
- 分页设置
是否展示分页组件
- 前端分页:所有数据一次性从后端获取,并存储在前端。前端通过控制显示的页数和每页显示的条目数量将数据进行分页展示,不需要与后端进行交互。
- 后端分页:数据分页处理在后端完成,只有用户请求的特定页面数据会被发送到前端,每次切换分页,均需发送后端请求。
- 数据源为实体数据源时,表格分页为后端分页,数据源为关系数据源时,表格分页均为前端分页。
◇ 分页条数:分页组件处展示每页显示条数的选择列表,需设置数组,如[5,10,20,50,100]。在"分页"属性开启时有效
◇ 默认分页条数:每页的数据条数。默认20条。在"分页"属性开启时有效。
◇ 自定义输入跳转页码:勾选“启用跳转”,在分页后增加跳转输入框,可自定义输入跳转页码。
◇ 对齐方式:分页组件的对齐模式,支持左、中、右
- 列宽可调整
运行态可根据个人需求拖拽调整表格中各列的宽度,该调整仅对当前会话有效,重新加载页面将恢复到默认的列宽设置。
- 固定列
当表格横向滚动时,某些列被锁定并始终显示在屏幕的指定侧,而其他列则随滚动条移动。
- 最小条数
保存时系统会自动检查输入的数据条目,若数据条数未达到预设定的最小条数要求,将无法保存。
- 默认条数
初始化时若尚无任何数据项时,控件会自动添加一定数量的空白数据项,以便可以便捷的输入信息。
- 总有一行选中
勾选后始终存在选中行,默认为当前页第一行。
列属性
单击欲查看属性的列字段,即可在右侧查看并修改列属性。
具体字段的设置,需点击列内子控件进行设置,配置详情请参见:空链接。
- 隐藏列
开启后,该数据列不可见。默认关闭。
- 列对齐
当前字段列的表头和内容对齐方式。
◇ 列对齐:列内容对齐模式,支持居左、居中、居右
◇ 表头对齐:表头对齐模式,支持跟随、居左、居中、居右。默认跟随,设置跟随后,表头跟随列对齐
- 描述信息
允许设计师对字段列进行详细说明。
事件
表格事件
- 点击行时:点击某一行时触发。
- 双击行时:双击某一行时触发。
- 勾选行时:表格产生勾选动作时触发。
- 取消勾选行时:表格产生取消勾选动作时触发。
- 勾选行改变时:勾选行产生改变时触发,包含新增勾选和取消勾选,
- 全选时:表格产生全选动作时触发。
- 取消全选时:表格产生取消全选动作时触发。
- 数据加载后:当数据控件数据初始化加载完成后触发。
- 分页改变时:分页发生改变时触发。
列事件
- 单击单元格:点击当前列中单元格数据时触发。
- 双击单元格:双击当前列中单元格数据时触发。
- 单击标题格:点击当前列中表头时触发。
- 双击标题格:双击当前列中表头时触发。
风格
表格风格
- 内框线:表格内部各个单元格之间的分隔线,支持横线和纵线设置。
- 表格高度:表格高度设置,数据项过多超出预定义的高度时,表格将产生纵向滚动条。支持px设置和行数设置。
自适应:表格高度根据内容自适应。
最大值:设定表格最大高度,当内容超过最大高度时,表格将出现纵向滚动条。
- 伸缩:表格放到页面上时,可以伸缩占满剩余空间。
自动拉伸:当父级容器主轴有剩余空间时,子控件可以拉伸填满剩余空间,当子控件的内容超过剩余空间时,父级控件出现滚动条。
自动缩小:当父级容器主轴剩余空间不够时,子控件自动缩小,子控件可能出现滚动条。
- 行选中效果:选中行时,支持高亮效果。
可分别设置列对齐和表头对齐
8.2.4 - 树控件
适用于大量、具有层级关系的数据展示场景中,并且利用组件的展开收起和关联选中等交互可以方便地对数据进行操作处理。常用于左树右表或左树右详情的业务场景。
- 使用过程
- 拖入【树】控件至画布区
- 在控件属性栏中选择数据来源,树控件作为展示性数据控件,支持多种数据来源(实体、选项集、枚举),选择具体数据来源
- 根据业务需求,配置控件属性、事件、风格
- 控件特性
- 树控件属性
参数名 | 说明 |
---|---|
标题 | 树控件标题设置,支持条件 |
数据来源 | 树控件支持多种数据来源 l 实体:最常用的数据来源,支持树实体和非树实体,若选择非树实体,则层级为1 l 选项集:以选项集为数据来源,层级为1 l 枚举:以枚举为数据来源,层级根据枚举类型不同而不同,级联枚举和多级枚举为多层级展示,平级枚举层级为1 |
条件 | 实体数据来源特有属性,数据满足过滤条件才显示。注:不满足条件的节点数据不展示当前节点及所有下属节点 |
排序 | 实体数据来源特有属性,数据初始加载时的显示顺序。 |
根节点名称 | 根节点的名称设置。根节点默认不绑定数据。 |
节点名称 | 节点的名称设置,支持选择数据字段或输入固定字符作为显示名称。 |
节点连接线 | 可选是否开启连接线,开启后节点之间增加连接线,常用于文件目录结构展示。 |
搜索 | 树的搜索定位能力,输入关键字,可快速搜索定位数据。
|
顶部操作 | 树控件的顶部操作,位于树的顶部,通常用于新建、刷新以及批量操作的设置。默认支持平铺展示两个操作,超出的操作将收起至更多。 |
节点复选 | 可选是否开启复选框。 |
总有一行选中 | 勾选后始终存在选中行,默认为根节点。 |
节点操作 | 树控件的节点操作,位于节点的右侧,通常用于删除、编辑等节点操作的设置。默认支持平铺展示一个操作,超出的操作将收起至更多。 |
8.2.5 - 树表查询
在显示大量结构化数据时,我们可以使用【重复表控件】,但在处理树形的数据时,重复表无法很好地表现出数据的层级结构,那么针对这种大量、具有层级关系的数据展示和录入场景,我们提供一个新的控件【树表】,来完美展示数据的信息和层级结构。
树表也属于数据表格控件,基础能力与重复表类似,但仅支持PC端,使用时也需要先通过数据绑定来绑定实体模型,再设置控件属性、事件和风格。同时支持对数据列表进行选择、筛选、分页、自定义操作等复杂功能。
- 使用过程
- 拖入【树表查询】控件至画布区
- 在控件属性栏中绑定数据源,选择需要展示的实体字段,树表只支持绑定【树形档案】类型实体
- 根据业务需求,配置控件属性、事件、风格
- 控件特性
- 树表查询控件属性
参数名 | 说明 |
---|---|
标题显示 | 树表标题设置,是否显示标题。 |
实体 | 树表控件仅支持绑定树实体。 |
条件 | 条件编辑器,数据满足过滤条件才显示。注:配置条件后,将不展示不满足条件的节点数据及所有下属节点数据 |
排序 | 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段值相同时,再按照下一个规则进行排序。 |
实体变更订阅 | 一般用于弹窗页面数据变更后自动更新该控件。需订阅实体,默认订阅当前实体。 |
默认不加载 | 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。 注: 1. 重复表默认初始化时自动加载实体数据,无需事件触发。 2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。 |
选择模式 | 列表项勾选模式,支持【无】【单选】【多选】,启用【单选】后,显示单选按钮,启用【多选】后,显示多选按钮,三种模式互斥。 |
多级表头 | 表头呈多级展示,可表述表头信息层级包含关系启用多级表头后,画布区可批量选择表头,右键添加上级分组; 取消勾选后,将清空多级表头的配置 画布区配置: l 批量选择单元格,右键可添加上级分组 l 单选分组单元格,右键可编辑分组内容、删除当前分组 l 最多支持4级表头 |
操作列 | 启用操作列后,将在树表列中配置单独的操作列。可以根据业务需求,通过操作的事件自定义配置执行动作。 l 常用按钮数:默认为3,超过配置数的操作将收起至更多 l 显示位置:操作列位置支持列首、列尾两种,默认列尾 l 操作配置:支持配置操作的图标、名称、事件、状态和样式 |
顶部操作 | 表格顶部操作,位于树表顶部,通常用于新建、刷新以及批量操作的设置。支持添加操作和操作组。 |
启用过滤 | 树表过滤查询能力,在树表上方添加查询条件,以便快速查询数据。查询结果将以平铺形式(非树结构)进行展示。 |
启用分页 | 可选择是否启用分页 l 支持自定义设置每页显示条数l 支持设置默认分页条数 l 支持设置分页对齐方式(左、中、右) |
固定列 | 配置表格前后列的固定。当横向内容过多时可以配置固定前侧或者固定后侧。 |
总有一行选中 | 勾选后始终存在选中行,默认为当前页第一行。 |
表格列 | 树表生成后,单击列,可以进行列的属性配置。支持配置列隐藏、排序、列宽、对齐方式、列图标、格式设置等。 列属性详见(2)树表查询控件列属性。 |
- 树表查询控件列属性
树表生成后,单击列,可以进行列的属性配置。
参数名 | 说明 |
---|---|
标题 | 当前列标题设置。 |
隐藏列 | 可选择是否隐藏列。支持隐藏列的添加表达式,当满足条件时,隐藏当前列。 |
列对齐 | 当前列的对齐方式:居左、居中、居右。 |
列宽 | 列的宽度,单位为%,支持输入或画布区手动拖拽改变列宽。 |
列样式 | 支持设置列背景色、字体颜色、字体效果(加粗、斜体、下划线)以及各种样式的条件表达式,满足不同条件,设置不同列格式。 |
图标显示 | 支持设置列图标。 l 图标:支持多图标显示,支持不同条件下显示不同图标 l 图标位置:文字前、文字后,支持配置各个图标的位置 l 图标状态:不同条件下控制图标显隐l 图标样式:不同条件下控制图标颜色 |
格式设置 | 配置树表中不同类型字段的显示样式。 如日期可配置日期格式“年-月-日”或“年-月”等,数字可配置为百分比格式,并支持以进度条形式展示。详见各类型录入控件的格式设置。 |
8.2.6 - 树表录入
树表录入属于树表控件的一种,主要用于数据字段较少的树形结构数据录入场景,无需单独再搭建录入页面。
- 使用过程
- 拖入【树表录入】控件至画布区
- 在控件属性栏中绑定数据源,选择需要展示的实体字段,树表只支持绑定【树形档案】类型实体
- 根据业务需求,配置控件属性、事件、风格
- 控件特性
- 树表录入控件属性
参数名 | 说明 |
---|---|
标题显示 | 树表标题设置,是否显示标题。 |
实体 | 树表控件仅支持绑定树实体。 |
条件 | 条件编辑器,数据满足过滤条件才显示。注:不满足条件的节点数据不展示当前节点及所有下属节点 |
排序 | 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段相同时,再按照下一个规则进行排序。 |
实体变更订阅 | 一般用于弹窗页面数据变更后自动更新该控件。需订阅实体,默认订阅当前实体。 |
默认不加载 | 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。注:1. 重复表默认初始化时自动加载实体数据,无需事件触发。2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。 |
选择模式 | 列表项勾选模式,支持【无】【单选】【多选】,启用【单选】后,显示单选按钮,启用【多选】后,显示多选按钮,三种模式互斥。 |
多级表头 | 表头呈多级展示,可表述表头信息层级包含关系启用多级表头后,画布区可批量选择表头,右键添加上级分组; 取消勾选后,将清空多级表头的配置 画布区配置: l 批量选择单元格,右键可添加上级分组 l 单选分组单元格,右键可编辑分组内容、删除当前分组 l 最多支持4级表头 |
操作列 | 启用操作列后,将在树表列中配置单独的操作列。可以根据业务需求,通过操作的事件自定义配置执行动作。 l 常用按钮数:默认为3,超过配置数的操作将收起至更多 l 显示位置:操作列位置支持列首、列尾两种,默认列尾 l 操作配置:支持配置操作的图标、名称、事件、状态和样式 |
顶部操作 | 表格顶部操作,位于树表顶部,通常用于新建、刷新以及批量操作的设置。支持添加操作和操作组。 树表录入控件预置有三种操作,且不支持删除和修改事件。 l 插入行:当前下方插入行 l 复制行:复制当前行或选中行 l 删除行:删除当前行或选中行 |
启用过滤 | 树表过滤查询能力,在树表上方添加查询条件,以便快速查询数据。 查询结果将以平铺形式(非树结构)进行展示。 注:搜索过程中无法进行录入操作。 |
启用行序号 | 可选择是否显示行序号 |
启用分页 | 可选择是否启用分页 l 支持自定义设置每页显示条数 l 支持设置默认分页条数 l 支持设置分页对齐方式(左、中、右) |
固定列 | 配置表格前后列的固定。当横向内容过多时可以配置固定前侧或者固定后侧。 |
表格列 | 树表生成后,单击列,可以进行列的属性配置。支持配置列隐藏、列宽、对齐方式等。列属性详见(2)树表录入控件列属性。 |
- 树表录入控件列属性及列事件
树表生成后,单击列,可以进行列的属性配置
注:列单元事件仅对只读状态生效
参数名 | 说明 |
---|---|
标题 | 当前列标题设置。 |
隐藏列 | 可选择是否隐藏列。支持隐藏列的添加表达式,当满足条件时,隐藏当前列。 |
列对齐 | 当前列的对齐方式:居左、居中、居右。 |
列宽 | 列的宽度,单位为%,支持输入或画布区手动拖拽改变列宽。 |
8.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 支持设置默认分页条 |
最小条数 | 保存时会校验录入的数据条数不能小于最小条数。 |
默认条数 | 当页面初始化时,控件未录入数据时, 默认添加的空数据条数。 |
8.3 - 录入控件
8.3.1 - 单行文本
1. 控件介绍
录入单行文本数据。需要绑定实体字段。
2. 控件特性
2.1 绑定字段
可绑定字段数据类型:文本、流水号、长整数。
注意:如果绑定的是长整数类型字段,该控件默认是只读状态,不能录入数据,因为正常情况下长整数对应的是ID,ID是系统生成的且不允许修改。
、
2.2 校验内容
对输入的内容可以进行是否文本、身份证号码、手机号码、邮箱的校验。
也可以自定义正则表达式、自定义错误提示。
2.3 字数统计
当绑定的文字类型字段时, 可开启显示字数统计,可实时统计录入的字数。
8.3.2 - 多行文本
1. 控件介绍
录入多行文本数据,需要绑定实体字段。
2. 控件特性
2.1 绑定字段
可绑定字段数据类型:多行文本。
2.2 校验内容
对输入的内容可以进行是否文本、身份证号码、手机号码、邮箱的校验。
也可以自定义正则表达式、自定义错误提示。
2.3 字数统计
当绑定的文字类型字段时, 可开启显示字数统计,可实时统计录入的字数。
2.4 设置文本框高度
(1)设置固定高度,可配置固定行数。 当内容超过固定高度时,文本框出现滚动条。
(2)动态适应文本高度,可配置最小高度和最大高度。
- 当实际内容小于最小高度时,有有最小高度的行高占位
- 当实际内容大于最小高度小于最大高度,超出部分自适应
- 当实际内容大于最大高度,内部出现滚动条
- 例如,设置最小高度为4行,最大高度为7行。当输入内容小于4行时,仍然会有4行的占位;当输入内容大于4行小于7行,实际高度会自适应;当输入内容大于启航,实际高度为7行,文本框内出现滚动条。
2.5 设置文本内容的行数
默认情况下不限制文本内容的行数,也可限制文本内容的行数。
如果要限制文本内容的字数,可以通过设置最大长度或最小长度。
8.3.3 - 数字
1. 控件介绍
录入整数和小数,需要绑定实体字段。
2. 控件特性
2.1 绑定字段
可绑定字段数据类型:小数、整数、长整数。
2.2 设置显示格式
如果绑定的是小数,可配置显示格式:百分号、千分号、千位分隔符
如果绑定的是整数, 可配置显示格式:千位分隔
2.3 设置小数位数
可设置页面上控件的小数位数。
注意:实体中可设置字段的小数位数,页面上可设置控件的小数位数,保存后,数据库会按实体的小数保存数据,当控件小数位数超过实体小数位数时,会截断后保存,不会做四舍五入。但渲染页面时,会按控件的小数位数显示,即当后端数据位数小于控件位数时,控件渲染时会自动补零。
2.4 值为0时不显示
使用场景:
(1)当录入数字是0时,希望查看或编辑数据时显示为空
(2)当未录入数据,保存数据,希望查看或编辑数据时显示为空。
以上两个场景,可以开启“值为0时不显示"。
2.5 进度条样式
数字控件还可以展示成进度条的样式,
注意:使用进度条样式,需要设置最小和最大值,进度条在最小值和最大值的区间内拖动。
2.6 设置单位
当展示样式为数值,支持输入单位。
8.3.4 - 货币
1. 控件介绍
录入金额数据,需要绑定实体字段。
2. 控件特性
2.1 绑定字段
可绑定字段数据类型:货币
2.2 显示大写金额
录入数字后,失焦将显示为金额大写
2.3 设置小数位数
可设置页面上控件的小数位数。
注意:实体中可设置字段的小数位数,页面上可设置控件的小数位数,保存后,数据库会按实体的小数保存数据,当控件小数位数超过实体小数位数时,会截断后保存,不会做四舍五入。但渲染页面时,会按控件的小数位数显示,即当后端数据位数小于控件位数时,控件渲染时会自动补零。
2.4 值为0时不显示
使用场景:
(1)当录入数字是0时,希望查看或编辑数据时显示为空
(2)当未录入数据,保存数据,希望查看或编辑数据时显示为空。
以上两个场景,可以开启“值为0时不显示"。
8.3.5 - 日期
8.3.6 - 时间
8.3.7 - 日期区间
8.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 仅显示参照图标
参照控件配置中,可以设置开启仅显示参照图标,打开后,参照控件隐藏,仅图标显示。
8.3.9 - 下拉
使用场景
主要用于选择数据项。
数据源
只能绑定枚举、选项集类型字段。
下拉选择是单选还是多选,是根据绑定的字段的属性决定的,如下图,如果在实体中枚举类型字段勾选了多选, 则绑定了该字段的下拉控件就可以多选。
控件特性
标签显示
仅当控件绑定的数据源是选项集类型字段时可设置。
必须选择末级节点
仅当控件绑定的数据源是枚举类型字段时可设置,只能选择末级节点。
显示路径
仅当控件绑定的数据源是枚举类型字段,且为多级枚举时可设置,比如选择高新区时,显示效果为:四川省/ 成都市/高新区
自定义范围
1.支持自定义选择范围,全部可选,或自定义可选范围或不可选范围,支持表达式。不可选的选项在运行态是默认隐藏不显示, 也可以配置为显示但禁用效果。
2.下拉控件在值操作节点中自定义可选或不可选范围时,支持选择前序节点出参, 支持表达式。
(1)枚举支持的前序节点出参数据结构为:文本、文本list、长整数、长整数list ,实体对象中的枚举。
选项集支持的前序节点出参数据结构为:实体对象中的选项集。
(2)支持表达式
(3)当前序节点传入的选项和正常选项有差异时,不可选范围不受影响, 可选范围是传入选项和正常选项取交集
8.3.10 - 开关
8.3.11 - 单选
使用场景
主要用于数据项单选。
数据源
只能绑定枚举、选项集类型字段。
控件特性
设置多种显示样式
横向排列、纵向排列、胶囊按钮(移动端无该样式)
自定义选择范围
1.属性设置中可自定义选择范围,全部可选,或自定义可选范围或不可选范围,支持表达式。不可选的选项在运行态是默认隐藏不显示,也可以配置为显示但禁用效果。
2.单选控件在值操作节点中自定义可选或不可选范围时,支持选择前序节点出参, 支持表达式。
详细请看下拉控件值操作自定义范围。
一键全选
开启后,支持一键全选,可一键勾选所有可选项。
8.3.12 - 多选
使用场景
主要用于数据项多选。
数据源
只能绑定枚举、选项集类型字段。
控件特性
设置显示样式
横向排列、纵向排列。
自定义可选范围
1.属性设置中可自定义选择范围,全部可选,或自定义可选范围或不可选范围,支持表达式。不可选的选项在运行态是默认隐藏不显示,也可以配置为显示但禁用效果。
2.单选控件在值操作节点中自定义可选或不可选范围时,支持选择前序节点出参, 支持表达式。
详细请看下拉控件值操作自定义范围。
8.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 附件预览打印
运行态附件支持预览打印。
9 - 控件与数据源
数据源是应用设计中的一个重要概念,它提供了页面所需的数据,并允许对数据进行增删查改操作。
- 控件与数据源关系:
1、可绑定实体的控件:数据控件。可承载的数据是一条或者多条记录。
2、可绑定字段的控件:录入控件等。可承载的是一条记录中的一个字段。
实体数据源
例如:费用报销单列表查询页面,绑定的是实体数据源。
再例如:全表编辑页面,全表编辑数据源配置需要是根实体:
关系数据源
例如:费用报销单详情页面,费用明细录入需要绑定关系数据源,以便明细可以与报销单主信息一起提交处理。
控件数据源
例如:以报销单的列表详情页面为例,左侧列表选择的选中一个报销单,右侧展示对应的报销单详情信息,右侧的详情需要使用控件数据源,达到左右联动的效果。
运行效果:
数据源配置:
1)左侧列表配置:实体数据源。
2)右侧详情:单一记录配置数据源是控件数据源。
参数数据源
参数数据源支持子页面使用。在主页面嵌套子页面,子页面的数据来源或者处
理提交需要与主页面一致且为同一实体时需要用到参数数据源。
首先,子页面中新建数据源类型的参数,选择对应的实体,如数据源是一条记录则列表属性不开启,否则开启;
然后,在子页面上,对应数据控件绑定数据源时,选择参数数据源,见附图;
2.8版本之前约束限制:主页面上需要设置当前实体的全部字段,因为是主页面加载处理数据。2.8及其以后版本无此约束限制。
最后,如果运行态主子页面数据联动保持一致,需要从主页面中建立参数映射到子页面上,在子页面控件上,参数配置中,建立映射关系,如下图。
隐藏字段
隐藏字段用于不需要在页面上拖入控件,但是需要使用隐藏字段的场景。
隐藏字段设置入口:所有的数据控件实体属性后面有个图标,我们点击图标按钮,打开隐藏字段设置即可。
隐藏字段使用:隐藏字段除了在页面上没有控件展示外,其他所有的比如页面规则中值操作、控件属性中调用表达式设置能力,及其可作为事件行为的参数传递来源都无差异。
10 - 事件交互
事件介绍
页面中控件的事件交互通常由两部分组成:触发事件和执行动作。
触发事件是指用户与页面交互时发生的行为,如鼠标点击、键盘输入、页面滚动等,当这些行为发生时,会触发相应的动作,平台可以通过JavaScript等技术来监听这些事件并做出相应的响应,例如单击按钮控件,打开指定详情页面,其中【单击】属于按钮控件的触发事件,【打开指定页面】属于对应的执行动作。
平台提供通用的事件管理机制,预置有多种常见的触发事件和执行动作,支持配置不同的控件事件,执行不同的动作,满足不同场景下的页面交互的多样性。
事件触发
系统内预置了多种常用的事件触发,如下表所示。
类型 | 涉及控件 | 触发事件 |
---|---|---|
页面 | PC、移动页面 | 页面初始化: 页面初始化加载时,执行对应动作 参数变化时: 针对外框和子页面,入参变化时,执行对应动作 页面关闭前: 页面关闭时会触发该事件,执行对应动作后,关闭页面 |
移动页面 | 顶部下划: 仅移动端有该事件,当移动页面已划动至顶部,再次下划,执行对应动作,常用于页面刷新,或数据控件刷新 底部上划: 仅移动端有该事件,当移动页面已划动至底部,再次上划,执行对应动作,常用于数据控件加载更多 |
|
布局控件 | 页签 | 切换到某页签: 当切换至指定页签时,执行对应动作 |
容器 | 单击: 鼠标点击时,执行对应动作 双击: 仅PC端有该事件,鼠标双击时,执行对应动作 右键: 仅PC端有该事件,鼠标右键点击时,执行对应动作 鼠标移入: 仅PC端有该事件,鼠标移入容器区域时,执行对应动作 鼠标移出: 仅PC端有该事件,鼠标移出容器区域时,执行对应动作 |
|
面板 | 面板初始化: 面板初始化加载时,,执行对应动作 面板关闭: 面板关闭时,执行对应动作 双击: 鼠标双击面板区域时,执行对应动作 右键: 鼠标右键点击面板区域时,执行对应动作 |
|
数据控件 | 单一记录 | 数据加载后: 当数据控件数据加载完成后,执行对应动作 |
多记录数据控件 (重复表录入/查询、 树表录入/查询、 重复节、树) |
点击行/节时: 单击行时,执行对应动作 双击行/节时: 双击行时,执行对应动作 勾选行/节时: 表格产生勾选动作时,执行对应动作 全选时: 表格产生全选动作时,执行对应动作 取消全选时: 表格产生取消全选动作时,执行对应动作 勾选行改变时: 勾选行产生改变时,包含新增勾选和取消勾选,执行对应动作 数据加载后: 当数据控件数据加载完成后,执行对应动作 分页改变时: 分页发生改变时,执行对应动作 自定义列/顶部操作: 多记录数据控件支持自定义添加按钮操作,点击操作时,执行对应动作 |
|
录入控件 | 单行文本、数字、货币、多行文本、OCR、 日期、时间、参照、下拉、开关、单选、多选 |
获取焦点: 录入控件获取焦点时,执行对应动作, 如光标移至输入框即获取焦点 焦点离开: 录入控件失去焦点时,执行对应动作, 如光标从输入框移开即失去焦点 值发生改变: 控件值发生改变时,执行对应动作,如下拉的选项改变时被触发 |
附件 | 附件上传后: 附件上传完成后,执行对应动作 | |
展示控件 | 文字标签、按钮、图标、图片、图文 | 单击: 鼠标点击时,执行对应动作 双击: 鼠标双击时,执行对应动作 右键: 鼠标右键点击时,执行对应动作 |
平台支持设置条件事件,即满足不同条件,执行不同的事件。
事件行为
实体类行为
系统中,实体作为表单应用的核心,是数据库表的可视化表示形式,所有数据控件均需要绑定对应实体,而实体类动作就是针对数据控件进行的数据类操作,包括对于实体数据进行添加、编辑、删除、导入导出等操作。实体类动作均需要有承载实体数据的页面或数据控件,不同控件也支持不同的实体类动作。
- 存为草稿
动作描述:系统中单据和档案类型实体,预置有状态字段(草稿、待提交、提交中、已生效),该动作将保存单条数据,并变更状态为【草稿】。
适用范围:单一记录且实体为单据或档案类型
参数配置:
- 实体:选择执行该动作的数据控件
- 行为执行之后:动作执行完成后连带执行的动作。
- 无操作
- 刷新当前页面
- 关闭当前页面
- 关闭并刷新父页面
- 保存记录
动作描述:用于数据的保存。
适用范围:数据控件(树暂不支持)。
参数配置:
- 实体:选择执行该动作的数据控件
- 行为执行之后:动作执行完成后连带执行的动作,同【存为草稿】
- 保存并新增
动作描述:用于单条数据的连续新增,保存后将重置对应数据控件数据。
适用范围:单一记录控件,若控件绑定实体为单据或档案类型,将同步变更状态为【待提交】。
参数配置:
- 实体:选择执行该动作的数据控件
- 保存并复制
动作描述:用于单条数据的连续复制新增,保存后将复制对应数据控件数据。
适用范围:单一记录控件,复制的范围同当前人新增填写页面可操作数据范围一致。
参数配置:
- 实体:选择执行该动作的数据控件
- 提交记录
动作描述:该动作将保存单条数据,并触发执行对应流程,变更当前数据的状态为提交中。
适用范围:单一记录且实体为单据或档案类型。
参数配置:
- 实体:选择执行该动作的数据控件
- 行为执行之后:动作执行完成后连带执行的动作,同【存为草稿】
- 撤回记录
动作描述:。
适用范围:单一记录且实体为单据或档案类型。
参数配置:
- 实体:选择执行该动作的数据控件
- 刷新记录
动作描述:该动作将重新获取对应数据控件的数据。
适用范围:数据控件(单一记录、重复表录入/查询、树表录入/查询、重复节、树)。
参数配置:
- 实体:选择执行该动作的数据控件
- 删除记录
动作描述:该动作将删除指定数据项,删除后不可找回。
适用范围:数据控件(单一记录、重复表录入/查询、树表录入/查询、重复节)。
参数配置:
- 实体:选择执行该动作的数据控件
- 行为执行之后:动作执行完成后连带执行的动作,同【存为草稿】
注:
1)单一记录为删除当前记录
2)多记录数据控件中列操作配置该动作,为删除选中行数据
3)多记录数据控件中顶部操作(批量操作)配置该动作,为删除勾选行数据
- 导入
动作描述:列表页面,从本地文件表格中批量导入数据,例如批量导入人员信息、批量导入数据记录等。
适用范围:多记录数据控件(重复表录入/查询、树表录入/查询、重复节)。
参数配置:
- 实体:选择执行该动作的数据控件
- 导入模板管理
1)支持设置默认导入模板
2)支持编辑和删除已有模板
3)支持新建导入模板:可选择对应实体所有数据项作为导入字段(必填字段为必选项)
- 导入事件
- 导入模板设置
- 导出
动作描述:列表页面,从列表导出数据到本地,例如批量导出人员信息、批量导出数据记录等。
适用范围:多记录数据控件(重复表录入/查询、树表录入/查询、重复节)。
参数配置:
- 实体:选择执行该动作的数据控件
- 导出模板管理
1)支持设置默认导出模板
2)支持编辑和删除已有模板
3)支持新建导出模板:可选择对应实体所有数据项作为导出字段
- 打印
动作描述:该动作支持打印当前页面。
注:打印内容可在页面属性中选择需打印的组件。
流程类行为
当表单需要多方参与、且按一定顺序提交数据时,就需要用到流程。流程类动作用于配置流程各节点中节点负责人处理节点时可以进行的特定操作,通常用于按钮控件、工具栏控件的事件配置。
- 处理提交
审批节点的操作之一,保存在此节点中的操作,数据流转到下一节点。
- 同意提交
同意申请,保存在此节点中的操作,数据流转到下一节点。
- 已阅提交
已知晓表单内容,保存节点操作,数据继续流转。
- 不同意处理
不同意申请,处理后执行特定动作,如回退上一节点。
- 暂存代办
保存在此节点中的操作,并且流程数据保留在我的待办中。
- 保存内容
保存在此节点中的数据,暂不向往下一节点流转。
- 回退
当流程已办节点(不一定是上一节点)处理有误或者上一节点指定错人员时,相关人员需要退回到相应节点由其重新处理。
- 终止
相当于流程提前结束,当前节点后的其它节点不再执行。
- 撤销
与"终止"类似,由发起人执行。
- 移交
当流程实际并非由当前处理人处理或当前处理人因故不能审批时,支持将该条流程待办数据转交给其他成员进行处理。
- 加签
审批时,可以征求另一人或多人的意见,加签将出现在流程中。
- 减签
当加签人数大于等于 1 时,可以移除被加签的审批人,对方无需再审批。例如加签有误时,可以通过减签来操作。
- 咨询
流程审批过程中,审批人需要与流程外的人员进行沟通才能做出审批决策时,可进行流程外人员的咨询,且不会出现在流程中,也不影响流程流转。
- 知会
告知指定人员知道有该流程,支持查看。
- 取回
参与者提交任务后,发现自己办理此任务有误或不应该立刻提交等情况,可将此已办理完成的任务取回重新办理或稍后再提交。主要针对本人的"已办任务"。
- 催办
当流程超期或紧急时,相关人员需要对流程进行催办,从而加速流程执行。
- 查看流程
查看当前页面所属的流程。
- 辅助页面
以右侧抽屉的弹窗形式打开辅助信息页面。辅助页面支持在流程设计时指定。
注:1.流程动作选择发送、处理提交、同意提交、不同意处理时,显示参数:“是否弹下一节点弹窗”
2.流程动作选择加签、会签、知会、回退时,可选该类型的标准操作和封装操作
页面行为
- 打开页面
动作描述:打开当前应用内的指定页面。
参数配置:
- 目标页面:当前应用已创建好的页面
- 打开方式:
- 新开浏览器页签
- 新开系统页签
- 当前页打开
- 打开弹窗:以弹窗的形式打开指定页面,支持设置弹窗的标题、类型、大小
- 入参映射规则:当前页面控件数据可做为被打开页面的入参参数
- 出参映射规则:页面打开模式为弹窗时可配置,被打开页面的出参可以作为返回值,映射为当前页面中某控件数据
- 刷新页面
动作描述:触发后刷新指定页面。
参数配置:
- 页面:支持刷新当前页面或父页面
- 打开链接
动作描述:触发后打开指定地址的链接。
参数配置:
- 链接地址:支持输入固定地址或通过表达式拼接动态地址
- 打开方式
- 新开浏览器页签
- 新开系统页签
- 当前页打开
- 链接参数
- 锚点跳转
动作描述:用于页面内容过长时,快捷跳转到页面内指定位置。
参数配置:
- 定位控件:用于明确定位跳转点
- 取消关闭页面
动作描述:关闭当前页面,且不携带返回值。
- 确定关闭页面
动作描述:关闭当前页面,关闭页面为弹窗页面时,在关闭页面之后出参映射生效。
控件行为
行为 | 动作描述 | 附图 |
---|---|---|
值操作 | 支持对控件设置值、清空值 | |
高级属性操作 | 支持对控件高级属性:比如标题、占位提示等进行值设置 | |
控件状态 | 支持设置控件状态 | |
控件动作 | 见控件动作详细 | |
必填 | 支持设置必填控件和非必填控件有哪些 | |
提示信息 | 支持设置全局提示和跟随控件的提示信息 | |
清空提示 | 可设置清空提示信息,包括全局和跟随控件的提示 |
控件动作详细
控件 | 控件动作 |
---|---|
单一记录 | 新增:保存并新增记录编辑:编辑指定记录查看:只读状态查看指定记录删除:删除指定记录 |
支持数据录入的多记录控件(重复表录入、重复节、树表录入) | 插入行/节:当前行/节下方插入行/节复制行/节:复制当前行/节或选中行/节删除行/节:删除当前行/节或选中行/节 |
页签 | 激活规则:会重新执行页签设置的激活规则,适用于发生的事件执行后激活规则执行后,当前激活页签发生变化的情况。 |
附件 | 上传附件:调用附件控件的上传能力,支持上传附件下载附件:下载对应附件控件下所有附件内容预览附件:查看指定附件,预览附件内容 |
参照 | 打开参照弹窗:打开指定参照控件的内容选择弹窗 |
…… |
执行页面规则
页面规则是一种可视化的页面逻辑编排工具,可以帮助设计师实现较复杂页面业务逻辑。页面中支持通过事件触发,执行指定的页面规则。
参数配置:
- 选择页面规则:当前页面中已创建的页面规则
- 执行前校验:支持规则执行前进行实体校验
执行生单规则
在应用搭建的过程中,存在上下游实体间的数据流转和映射,在系统中通常会使用生单规则来进行配置上下游实体间的数据流程规则,生单规则的触发方式分为两种,自动触发和手动触发,其中手动触发是指在页面中通过事件配置将控件的触发事件和生单规则进行绑定。事件触发后将执行对应的生单规则。
- 执行生单规则(推单):上游单据驱动生成下游单据。
- 执行生单规则(拉单):下游单据驱动拉取上游单据,生成下游单据,单据为草稿状态。
其他
- 扫码:移动端支持配置扫码事件,可设置二维码与条形码事件执行。
- 附件下载:下载对应附件控件下所有附件内容
- 附件预览:查看指定附件,预览附件内容
- 附件上传:调用附件控件的上传能力,支持上传附件
- 单据转文档:可将实体数据转换为附件
- 批量标签打印:可将实体中所有标签进行批量打印
11 - 子页面
子页面介绍
应用搭建过程中经常遇到两个问题,一是页面部分内容结构相同,二是同一页面区域中,不同条件下需要展示不同内容;为了解决该类问题,支持条件性展示内容的场景,同时降低内容的重复构建率,平台引入组件【子页面】,即支持在主页面中嵌入另一组子页面内容。
子页面的能力是指在主页面下,一块页面组成内容可以独立出来的能力。
子页面相比外框,其组成内容更加具体,通常与主页面有较强的业务关联。比如发票列表与发票详情,发票列表的数据项决定了发票详情的内容,同时由于不同发票类型,详情区展示的票据样式不同,那么我们可以将发票详情区做成子页面。
子页面基础使用
子页面的使用分为三个部分:子页面、子页面控件、触发器。
- 子页面:子页面具体内容,通过页面设计器可以构建子页面内容,一次搭建可反复使用。
- 子页面控件:由于子页面以组件形式承载了主页面一部分内容,子页面不可独立访问。需借助子页面控件进行展示,一个子页面控件可承载多个子页面,同时能够按照激活规则切换子页面。
- 触发器:主页面中所有控件均可作为子页面切换的触发器,触发后,执行子页面控件的控件动作【切换子页面】。
创建子页面
子页面在主页面中以组件形式存在,不能单独访问的,在组件模块中可以进行子页面的创建,创建时可使用子页面模板。
在子页面列表可执行复制、编辑、删除子页面的操作。
子页面与主页面数据交互
- 场景1:主页面的数据传递给子页面。
搭建逻辑:子页面定义入参, 主页面绑定子页面时做将主页面内容映射给入参。
搭建方法:
(1)在子页面的属性中,定义页面入参(实际是子页面的参数,我们设计子页面时把子页面也当做页面看)。
如上,配置了子页面入参后,在子页面设计中任意表达式都可以使用入参的值,实现自身业务逻辑。
(2)页面中子页面控件绑定子页面后,在设置中配置子页面的入参映射,可将主页面的内容映射给子页面的入参。
- 场景2:子页面的数据传递给主页面。
当子页面需要将数据传递给页面时, 需要用到子页面抛事件。
搭建逻辑:子页面定义事件,在合理的时机将事件抛出,如果主页面订阅了子页面事件,就可以通过参数映射,将事件数据映射到主页面中。
搭建方法:
(1)子页面定义事件
(2)子页面抛出事件
事件抛出:一般由当前子页面内的控件事件触发,也可以由页面规则抛出。
(3)主页面订阅子页面事件,通过参数映射,将事件数据映射到主页面中。
在主页面中,选中子页面控件(需要先绑定子页面),事件选择订阅某个子页面抛出的事件,在行为中选择事件参数映射,就能将子页面的抛出的数据映射给主页面。当然选择其他行为,实现自身的业务逻辑。
子页面页面变量、打印
和页面的使用方式一致,请参考页面。
12 - 外框
1. 外框介绍
一种可以快速复用的布局组合能力,通过外框可以将页面公共部分沉淀为可复用的布局,使用外框的页面通过占位、入参映射,可以实现布局的复用,快速灵活的搭建有业务共性的页面。外框最常见使用场景是审批外框。
2. 新建外框
外框是不能单独访问的,只能由页面启用外框。所以要先进入页面设计器,找到外框页签,点击新建
3. 外框分区
PC端外框分为 上、下、左、右、中间五个分区。
移动端外框分为上、中、下三个分区。
其中中间区预置了一个占位"内容区"。“内容区"不可删除和编辑,当页面绑定外框后,该页面的内容就会显示在此占位中。除了中间区, 其他区可以开启和关闭。每个分区都可以单独设置属性、风格。
其中左右分区可额外设置:
拖拽调整宽度:运行态时可以拖拽分区线调整左右分区宽度
折叠:运行态可以点击图标展开收起分区
4. 占位控件
占位控件只有在外框中才可以使用,任一分区都可以拖入占位控件。
拥有占位控件的外框,在被页面绑定后,页面除了可以把控件拖入中间区,还可以把控件拖入其他区的占位控件。所以,如果页面有个性化的需求,在外框中要预留占位控件。
5. 页面绑定外框
主页面绑定外框支持绑定当前应用外框和依赖应用外框
6. 外框与页面数据交互
- 场景1:页面的数据传递给外框。
搭建逻辑:外框定义入参, 主页面绑定外框时做将主页面内容映射给入参。
搭建方法:
(1)在外框的属性中,定义页面入参(实际是外框的参数,我们设计外框时把外框也当做页面看到)。 默认已添加了一个入参"流程实例ID"。
(2)页面绑定外框后,选中外框(在主页面可以通过下方的控件路径选中外框),在右侧属性中可以看到外框已经定义的参数,此时可以配置参数映射。 可以将当前页面的数据通过参数映射传递给外框的入参。
如果当前页面绑定的是单据或档案实体, 系统会自动将当前页面的流程实例ID传递给外框的入参,无需手动配置。
- 场景2:外框的数据传递给页面。
当外框需要将数据传递给页面时, 需要用到外框抛事件。
搭建逻辑:外框定义事件,在合理的时机将事件抛出,如果主页面订阅了外框事件,就可以通过参数映射,将事件数据映射到主页面中。
搭建方法:
(1)首先定义外框事件,即该事件包含了哪些数据。
(2)在外框事件中,设置某个时机抛出事件。
(3)页面绑定外框后, 选中外框(在主页面可以通过下方的控件路径选中外框), 通过事件配置订阅外框事件数据, 并通过事件参数映射,将外框数据传递给页面。
13 - PC转移动
适用场景:先搭建好PC页面, 然后移动页面由PC页面转,再做微调,快速搭建移动页面。
前提:新建页面时要同时勾选PC和移动端,形成页面对应关系。
配置:进入移动页面,点击"转移动"按钮, 选择转换方式
(1)全部转换:覆盖当前移动页面内容(控件、页面规则)及外框占位内容,用PC的页面内容及外框占位内容进行转换
(2)部分转换:不覆盖当前移动页面内容, 选择PC端的部分控件,转换到当前移动页面中。如果移动端已经存在PC端对应控件(控件唯一标识相同),转换时会再生成一个新的控件,而不是替换原控件。
注意:
(1)当原移动端页面未绑定外框时,PC端绑定了外框,且PC外框有对应的移动外框,转换时移动端页面会添加对应移动外框。 如果不存在对应移动外框,就只转PC的内容区。
(2)当原移动端页面已绑定外框时,PC页面转移动,按占位的名称去匹配,即PC外框的占位和移动端外框占位名称一致时,对应转换占位中的内容, 如果未找到匹配的占位, PC外框占位内容会转到移动端内容区的上方。