O2OA（v9.5）开发平台更新说明（一）：流程平台

一、流程平台

(一) 增加一组全新的表单组件和表单样式

　　O2OA的表单组件基于浏览器传统UI设计，具有较强的适配能力，能够满足多样化风格样式的表单设计需求。同时，该组件支持与外部UI组件的集成，从而实现更加灵活和丰富的表单设计效果。然而，这种设计模式在一定程度上提高了开发的技术门槛。由于默认表单样式较为单一，缺乏视觉美感，因此需要具备一定前端开发经验的开发者参与，以实现更具吸引力和专业感的表单界面。
　　在新版设计中，我们全新开发了一套表单UI组件，并结合统一的页面样式规范，旨在通过系统化的方式有效解决上述问题，为用户提供更加美观且一致的表单设计体验。

1. 快速创建新样式表单

打开某个流程应用，在“表单配置”界面新建表单，选择“简洁表单模板”。

这样就可以创建一个全新样式的表单了。表单设计界面：

表单展示界面：

创建表单之后，将组件列表切换到“O2OA组件”，就可以添加新的组件到表单了。

2. 从空白表单开始创建

创建空白表单，选择表单样式为“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参数同样接收对象数组，可将指定的流程实例或内容管理文档设置为当前待创建流程实例的关联目标。此改进提升了接口的功能性和灵活性，满足了更复杂的业务场景需求。

1、服务端接口　　

在流程模块（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方法

同时也更新了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");

3、流程附件拷贝接口支持来源于内容管理文档中的附件

在流程模块（x_processplatform_assemble_surface）的AttachmentAction（附件接口）中的copyToWork 和 copyToWorkCompleted方法支持拷贝内容管理文档中的附件

(七) 其他更新内容

1. 表单组件增加 addRelatedDisplay方法

　　组件的 addRelatedDisplay 方法用于将当前组件的显示状态与一个或多个业务数据项进行关联。

　　举例说明，表单上有个单选框（标识为 type），其可选择值是：“年假”、“病假”、“事假”，，当选择为“事假”时，需要填写“事由”，而其他选项就隐藏“事由”输入框。

　　在这样的要求下，我们一般想到的方法是：

１) 监听单选框（type）的change事件，在事件中判断其值，在通过dom操作隐藏或显示“事由”输入框

２) 在表单的 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)

2. 表单组件增加 addRelatedValue 方法

　　组件的 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)

3. 表单和门户页面增加css脚本库引用

　　将脚本命名以".css"结尾，就表示这个脚本是一个样式表文件，在表单中使用o2.loadCss方法可将其引用。现在只需要在表单或页面上选择一下就可以了：

4. 增加表单组件配置属性

１) 流程表单中嵌入视图和查询视图组件支持使用脚本计算了

现在嵌入视图和查询视图可以使用脚本动态加载了。

２) 表单手写组件增加区段配置

３) ElementUI组件增加禁用选项配置

４) 为附件控制器组件增加afterUpload事件，在上传后执行

５) 关联文档组件优化，将已关联的文档显示在选择页面的顶部

5. 优化流程设计中流程维护人配置

流程设计中流程维护人配置支持混合配置人员、角色、职务和群组。配置更加灵活。

6. 关联文档组件优化

　　视图选择文档的时候已选的数据放在顶部

全选的时候全选框上加上✔

视图如果第一列分类的话，这个功能无效，是否可以做到分类内选择的数据也在该分类的顶部？

7. 优化数据发布活动

　　在流程中，数据发布活动不仅会将流程实例发布至内容管理系统，同时还会同步复制关联文档信息，以确保数据的完整性和一致性。