在企业版工程中进行如下配置,然后重新生成该工程,即可获取在线表单模块的全部功能源码。源码位于工程的common/common-online目录内。在默认生成的工程中,微服务的upms服务,单体的application-webadmin服务,以及多租户的tenant-admin服务,会自动引用该模块。
数据为例,其他需要手动补偿的权限数据,可在该脚本文件中搜索下图红框圈住的文字即可定位。
首先需要配置数据库链接,点击菜单进入数据库链接管理页面。这里我们还会给出目前已经支持的六种数据库MySQL、PostgreSQL、Oracle、达梦、人大金仓和华为高斯的配置示例。具体信息见如下截图。
common-online模块的配置项,请仔细阅读配置项上的注释说明。
点击菜单进入在线表单字典管理页面,目前已支持数据表字典、URL字典、静态字典、全局编码字典和自定义字典五种类型,如下图。
数据表字典,从已经配置的数据库链接中选择字典表,并指定字典ID和字典名称字段。
配置过滤参数后,可在字典的使用过程中,通过为过滤参数赋值的方式进行字典的数据过滤,具体使用方式,可参考后面表单管理的组件设置小节。
通过指定的URL获取字典数据,具体配置信息见下图。
静态字典通常会在橙单代码生成器中配置后生成,生成后的前端代码位于staticDict->index.js文件中,具体见下图。
静态字典的配置信息如下图所示。
自定义字典可直接输入字典数据,具体配置如下。
在线表单的全局编码字典,可从当前系统中,已经配置的全局编码字典中直接选择。
点击菜单,进入报表页面管理,如下图。
点击上图的「新建」或「编辑」按钮,可以进入页面编辑页面。
这里需要输入包含包名在内的完整类名,如com.orangeforms.webadmin.app.util.OnlineExtendExampleExecutor,同时该类必须是继承自BaseOnlineExtendExecutor的Bean对象,具体配置如下图所示。
在调用以下在线表单和在线表单工作流的接口时,会触发上图配置的后台扩展执行方法。
点击「新增数据表」按钮添加当前在线表单所依赖的数据表,其中添加的第一张数据表为当前在线表单的主表。
目前橙单在线表单仅支持添加「一对一」和「一对多」的关联从表。
点击「字段管理」操作按钮,进入如下页面。在该页面可以为主从表字段,设置必要的字段属性。
在进行列表查询页面设计时,过滤组件可以绑定的候选字段。换句话说,这里没有配置支持过滤的字段,不能被查询页面过滤组件所依赖。
橙单通过JSON格式存储文件的上传信息,因此只有字符型字段才能选择该类别。另外,如果存储类型为「本地存储」,上传的文件将存储到配置项common-online.uploadFileBaseDir指定的子目录内。对于「分布式存储」,将会存储到minio/阿里云OSS/腾讯云COS/华为云OBS。具体的分布式存储类型,是在橙单代码生成器中配置的,见下图。
为指定字段添加前端验证规则,同一个字段可以配置多个规则。
和路由表单的规则一样,都是只有「字符型」字段才能配置为脱敏字段,内置的脱敏规则也和路由表单完全一致。
可以在表单设计页面,设置此表单哪些字段需要脱敏。主要注意的是,只有查询类型的表单支持脱敏字段选择,编辑和详情等二级表单页面,脱敏规则与查询页面设置一致,如下图所示。
与路由表单不同,在线表单不支持为不同的脱敏字段提供不同的自定义脱敏规则处理器对象。
为数据主表添加基于聚合计算的虚拟字段。添加后的虚拟字段,可以在列表中被正常显示,在详情页,也可以被组件绑定后显示。与普通数据表字段的差别是,虚拟字段不能编辑,也不会存入数据表,仅为查询过程中动态计算后的显示。
新增聚合计算虚拟字段。
添加过滤条件,用于过滤参与计算的一对多从表数据。
以上两图的配置,会生成如下SQL,用于计算基于聚合计算的虚拟字段。
--sumOfTotalAcount上面定义的虚拟字段别名。SELECTcontract_id,SUM(total_count)sumOfTotalAmount--一对多关联从表。FROMzz_test_flow_contract_detail--上面定义的过滤条件,多个条件用AND连接。WHEREtotal_count>100--分组字段,一对多从表中与主表关联的字段。GROUPBYcontract_id表单设计这里我们以独立小节的形式专门介绍「表单设计」操作。在上一小节中,我们介绍了表单的「基础信息」和「数据模型」的配置。在「数据模型」的配置页面,点击「下一步」即可进入表单设计页面,在这里可以设计线表单的页面布局以及前端交互逻辑,见下图。
这里可以创建多个表单,最典型的场景是先创建一个「数据管理」的列表页面,再配置一个「数据增删」的编辑页面。其中「列表页面」与菜单绑定,点击该页面的「操作」按钮,即可触发「数据增删」页面的显示。
从左侧拖拽组件到中间的表单设计区域,点击组件后可在右侧的属性框中编辑组件属性,点击表单空白区域可设置表单属性。
目前只有「查询类型」的表单和任何类型表单的「表格组件」支持添加「操作」。
我们提供了一些内置操作,如「新建」、「编辑」、「删除」、「导出」等,默认为禁用状态,既不在页面中显示,需要时可以启用。
添加「自定义操作」。
仅当支持打印报表模块时,该功能可用!
在生成器中配置工程时,如果同时选择支持「在线表单」和「报表打印」模块,那么在生成后工程的业务服务中,就会包含用于在线表单打印的处理器类MyOnlinePrintHandler。之所以这样设计,是为了让「在线表单」模块不会直接依赖「报表打印」模块,从而实现模块间的最大化解耦,具体说明见下图。
本小节只是简单介绍脚本的基本用法,更多示例可参考后面的「实例讲解」小节。现在我们切换到「脚本」标签页,可以通过脚本来控制表单的行为,内置提供了十二种不同事件的脚本,通过脚本的组合可以实现复杂的功能定制,如下图所示。
在编辑脚本窗口左侧是表单数据展示,右侧是脚本编辑区域,可以通过脚本类型来切换脚本,目前支持的脚本类型如下。
本小节主要介绍在线表单在使用过程中的常见问题。
因为在线表单的所有代码都位于common-online的通用模块中,这其中也包括Controller接口的请求地址。但是在很多场景中,不同工程的不同服务在引用在线表单时,URL地址前缀也可能是不同的,因此我们提供了配置项,见如下截图。
所有在线表单的CURD数据接口都来自于OnlineOperationController中包含的接口方法,由于所有表单使用单一接口,所以就无法进行表单级别的权限划分。为了解决这一问题,我们使用PathVariable的方式,在接口URL中包含了数据源的变量名信息,这样不同的数据源接口就可以通过权限的方式,进行精确的控制了,见下图。
所有入口参数均为数据源ID、数据源关联ID和Java的字段名映射,并没有对外直接暴露数据表名和字段名。在Controller的代码中,会根据请求参数的数据源ID和数据源关联ID,自动获取本次查询的表名和字段名,而并非直接使用前端的请求参数数据,这样就从机制上彻底消除了SQL注入的风险。而对于有些必须包含SQL信息的参数,如OrderBy,Controller中的makeOrderBy方法,会根据输入字段值与关联表字段进行对比,只有完全匹配,才会视为正常的OrderBy字段,否则直接报错。
对于请求参数中的数据值数据,我们直接使用了SQL中绑定变量,这样也从机制上消除了SQL注入的风险。
使用「表单创建完毕」脚本,可以初始化页面的数据,如DEMO中的「报销申请表单」,我们初始化了报销总金额以及报销类别组件的默认值。
/***表单页面创建完毕,可用于初始化表单数据*@paramsthis表单组件*/this.formData.dsFlowSubmit.total_amount=0;this.formData.dsFlowSubmit.submit_kind=1;表格操作禁用使用操作是否禁用脚本,可以控制操作是否禁用,如DEMO中「合同管理页面」,禁用了生产合同的详情操作。
/***操作是否禁用*@paramsrowData表格行内操作当前行数据*@paramsthis表单组件*/returnrowDatarowData.contract_type==1:false;组件联动使用组件数据改变脚本,可以在某组件数据改变时,修改其他组件的数据,如DEMO中「新建合同审批」表单,当合同类型切换到生产合同的时候,会将提成比例设置为10%,并且灰化。
/***组件数据改变时触发*@paramsval组件当前值*@paramsthis表单组件*/if(val==1){this.formData.dsFlowContract.commission_rate=10;}/***组件是否禁用*@paramsthis*/returnthis.formData.dsFlowContract.contract_type==1;综合运用这里我们以DEMO中的「商品管理表单」为例,通过运用多个脚本的组合,来实现较为复杂的前端交互功能。在「商品管理表单」中,可以按照价格范围过滤商品,在使用价格范围时,希望加入快捷选项,如:低价、高价以及自定义。在线示例入口可参考下图。