本篇介绍 O2OA 平台流程平台在表单能力上的多项升级,包括全新表单组件与样式、组件级权限配置、草稿模式上传附件、选项显示值保存、发起时间调整及流程启动接口增强。文中还说明新组件的拖放顺序与外观类型选择方式,并对接口参数与脚本方法的用法给出示例,便于开发人员在实际项目中参照配置,减少重复调试与返工,提升项目整体的交付效率。
O2OA 的表单组件基于浏览器传统 UI 设计,具有较强适配能力,能够满足多样化风格的表单设计需求,也支持与外部 UI 组件集成,灵活性较好。但这种模式在一定程度上提高了开发门槛,默认表单样式较为单一,缺乏视觉美感,因此需要具备一定前端经验的开发者参与。新版重新开发了一套表单 UI 组件,并结合统一的页面样式规范,以系统化方式解决上述问题,提供更加美观且一致的设计体验。
打开某个流程应用,在“表单配置”界面新建表单,选择“简洁表单模板”。
这样就可以创建一个全新样式的表单了。表单设计界面:
表单展示界面:
创建表单之后,将组件列表切换到“O2OA 组件”,就可以添加新的组件到表单了。
创建空白表单,选择表单样式为“v10”:
将组件列表切换到“O2OA 组件”。将操作条组件拖动到表单:再拖入一个容器,将容器的外观类型选择为“表单主体”。
再拖动一个容器到“表单主体”内,并容器的外观类型选择为“表单内容”。
再拖动一个容器到“表单内容”内,然后在此容器内创建一个文本组件,文本组件的外观样式选择为“区段标题”,文本组件下面创建一个容器,外观样式为“区段内容”。
然后就可在“区段内容”中创建输入框等组件了。
在 O2OA 的开发流程设计中,每个活动节点均可绑定不同表单,以便按业务环节展示和填写特定内容,灵活性较高。但当活动节点较多、又需精细控制数据读写权限时,往往会出现表单数量激增、依赖脚本复杂化的问题,开发效率随之下降。
为解决上述问题,本次升级引入表单组件级别的权限配置:可按活动节点与组织架构元素,为每个组件分别设置读取、编辑或隐藏权限,从而提升灵活性与开发效率。下面介绍具体用法。
现在每一个表单组件的属性面板,增加了一个“权限”选项卡,如下图:
在此选项卡,可以配置组件是否可读,是否可编辑,以及是否需要隐藏。
如果在一个容器组件上配置权限,则会影响到容器内的所有权限。
在门户页面中也可使用此功能,但门户页面不能指定活动。
内容管理表单也可使用此功能,但内容管理表单的活动只有“草稿"和“已发布”。
在先前的版本中,流程采用草稿模式时,用户在创建新流程文档但尚未进入正式流转状态的情况下,由于流程实例尚未生成,导致无法上传附件。此问题已在本次更新中得到有效解决。
表单中的单选框、复选框、下拉菜单等组件,其每个选项通常包含两个关键信息:值(value)和显示文本(display text)。在数据保存时,系统仅存储实际值,显示文本并未保留;视图展示或查询结果呈现时,需将存储的值重新映射为显示文本,这一过程增加了设计复杂度。本次更新对这一机制做了优化:除保存实际值外,还会把显示文本同步保存至一个新增的字段,该字段以“字段标识$text”命名,可简化数据展示时的处理逻辑,提升易用性与效率。
如一个单选组件,标识为:“type”,可选值为:类型一|1,类型二|2,类型三|3。
在选择了“类型二”保存后,可以看到保存后的数据中,有一个“type$text”字段,其值为:“类型二”。
在脚本中,相关的组件也增加了 getText()方法,以获取组件的显示文本。以上述为例:
const module = this.form.get('type');
return module.getText(); //返回 "类型二"
对于已经完成的流程工作,在一些特殊情况下需要调整流程的发起时间。本此更新增加了此功能。
对于已经完成的流程工作,只有流程管理员才能进行更新发起时间的操作。流程管理员进入流程实例维护界面,进入已完成工作视图,选择要更新发起时间的流程实例,再点击“修改时间”按钮:
选择一个发起时间,点击“确定”即可。
此时系统将依据您选择的时间与原时间的差值,同步平移发起时间、结束时间,以及相关记录(已办/待阅/已阅/工作日志)的开始与结束时间等,保证相对时长不变。
优化了新建流程实例的接口,新增了attachmentList和correlationTargetList两个参数。其中,attachmentList参数接收对象数组,支持将内容管理或流程中的附件复制到当前待创建的流程实例中;correlationTargetList参数同样接收对象数组,可将指定的流程实例或内容管理文档设置为当前待创建流程实例的关联目标。此改进提升了接口的功能性和灵活性,满足了更复杂的业务场景需求。
在流程模块(x_processplatform_assemble_surface)的 WorkAction(工作接口)中的 create 方法:
attachmentList参数是一个对象数组,对象格式如下:
{ 'id':'源附件id', 'name':'附件名称', 'site':'附件组件的site', 'isSoftCopy':'是否软拷贝,默认false,true表示不拷贝真实存储附件,共用附件,仅支持流程附件', 'copyFrom':'附件来源(cms或processPlatform)'}correlationTargetList参数是一个对象数组,对象格式如下:
{ 'type':'关联目标类型(cms或processPlatform)', 'bundle':'关联目标标识', 'site':'关联文档组件的site', 'view':'来源视图'}同时也更新了 API 脚本的 this.form.startProcess 方法,在传入 data 参数时,如果需要传递附件可以添加 $attachmentList, 如果需要传递关联文档可以添加 $correlationTargetList:
const data = { "subject": "某某标题", //业务数据字段 "count": 123, //业务数据字段 "$attachmentList": [ //传递$attachmentList,会把附件拷贝到新工作,不会放在业务数据中。(没有copyFrom则放在业务数据中) { 'id':'源附件id', 'name':'附件名称', 'site':'附件组件的site', 'isSoftCopy':'是否软拷贝,默认false,true表示不拷贝真实存储附件,共用附件,仅支持流程附件', 'copyFrom':'附件来源(cms或processPlatform)' } ], "$correlationTargetList": [ //传递$correlationTargetList,会把文档关联到新工作,不会放在业务数据中 { 'type':'关联目标类型(cms或processPlatform)', 'bundle':'关联目标标识', 'site':'关联文档组件的site', 'view':'来源视图' } ]};this.form.startProcess("公文管理", "发文管理", data, "张三@kfb_zhangsan@I");在流程模块(x_processplatform_assemble_surface)的 AttachmentAction(附件接口)中的 copyToWork 和 copyToWorkCompleted 方法支持拷贝内容管理文档中的附件
组件的 addRelatedDisplay 方法用于将当前组件的显示状态与一个或多个业务数据项进行关联。
举例说明,表单上有个单选框(标识为 type),其可选择值是:“年假”、“病假”、“事假”,当选择为“事假”时,需要填写“事由”,而其他选项就隐藏“事由”输入框。
在这样的要求下,我们一般想到的方法是:
1) 监听单选框(type)的 change 事件,在事件中判断其值,在通过 dom 操作隐藏或显示“事由”输入框2) 在表单的 load 事件中做相同的事情,以确保表单在打开就可以正确的显示。
这看上去是一个简单的逻辑,但当这个“事由”的显示逻辑关联到更多的组件时,就会变得复杂。而使用 addRelatedDisplay 方法可以简化这个过程。
我们只需要在“事由”组件的 load 事件中添加以下代码即可:
this.target.addRelatedDisplay('type', ()=>{ return this.data.type==='事假'});/**
* 给当前组件增加一个或多个显示关联数据,当这个数据改变时,刷新当前组件的可见状态.
* @param {String|Array<String>} [path] 要关联的数据路径。
* @param {Function} [cb] 提供一个返回布尔值的函数,用于检查当前组件是否可显示,返回true表示当前组件可见,返回false则隐藏当前组件
*/
module.addRelatedDisplay(path, fn)
组件的 addRelatedValue 方法旨在实现当前组件的值与一个或多个业务数据之间的关联。其逻辑与 addRelatedDisplay 方法类似,但 addRelatedValue 的核心关注点在于对组件值的关联操作。
举例说明:表单上有单价(标识为 price)和数量(标识为 count)两个输入框,输入框总价(标识为 totalPrice)字段的值是:单价 * 数量。
我们只需要在“总价”组件的 load 事件中添加以下代码即可:
this.target.addRelatedValue(['price', 'count'], ()=>{ return this.data.count * this.data.count;});当单价或数量任意一个值发生改变时,就会自动更新总价的值。
/**
* 给当前组件增加一个或多个值关联数据,当这个数据改变时,刷新当前组件的值.
* @param {String|Array<String>} [path] 要关联的数据路径。
* @param {Function} [cb] 提供一个函数,当关联数据发生改变时,执行此函数,返回的值更新为当前组件的值。
*/
module.addRelatedValue(path, fn)
将脚本命名以".css";结尾,就表示这个脚本是一个样式表文件,在表单中使用 o2.loadCss 方法可将其引用。现在只需要在表单或页面上选择一下就可以了:
1) 流程表单中嵌入视图和查询视图组件支持使用脚本计算了现在嵌入视图和查询视图可以使用脚本动态加载了。
2) 表单手写组件增加区段配置3) ElementUI 组件增加禁用选项配置4) 为附件控制器组件增加 afterUpload 事件,在上传后执行5) 关联文档组件优化,将已关联的文档显示在选择页面的顶部
流程设计中流程维护人配置支持混合配置人员、角色、职务和群组。配置更加灵活。
视图选择文档的时候已选的数据放在顶部
全选的时候全选框上加上✔
视图如果第一列分类的话,这个功能无效,是否可以做到分类内选择的数据也在该分类的顶部?
在流程中,数据发布活动不仅会将流程实例发布至内容管理系统,同时还会同步复制关联文档信息,以确保数据的完整性和一致性。
相关问题讨论
相关内容