1. 说明

自定义表单用于客户不使用在线设计表单，自己通过开发的方式开发表单，数据的保存由自己实现的场景。主要用于一些业务特别复杂的场景。

实现方法是：

  1. 用户自己按照标准开发表单
  2. 用户按照标准处理业务数据保存逻辑。

这里介绍的是自定义表单的设计，主要从表生成代码，自定义表单配置，流程定义配置表单，流程启动审批等整个流程讲解。

当然我们这里使用代码生成器来生成表单，用户可以自定义开发表单的，只不过需要按照我们定义的标准来开发。

本例子以在jpaas-user模块下的表：os_user_form_test 进行整个过程的举例说明。

CREATE TABLE Untitled os_user_form_test (
ID_ varchar(64) NOT NULL COMMENT ‘主键’,
NAME_ varchar(64) NULL DEFAULT NULL COMMENT ‘姓名’,
AGE_ int(10) NULL DEFAULT NULL COMMENT ‘年龄’,
TENANT_ID_ varchar(64) NULL DEFAULT NULL COMMENT ‘租用用户Id’,
CREATE_DEP_ID_ varchar(64) NULL DEFAULT NULL COMMENT ‘创建部门ID’,
CREATE_BY_ varchar(64) NULL DEFAULT NULL COMMENT ‘创建人ID’,
CREATE_TIME_ datetime(0) NULL DEFAULT NULL COMMENT ‘创建时间’,
UPDATE_BY_ varchar(64) NULL DEFAULT NULL COMMENT ‘更新人ID’,
UPDATE_TIME_ datetime(0) NULL DEFAULT NULL COMMENT ‘更新时间’,
PRIMARY KEY (ID_) USING BTREE
) ;

2. 实现过程

2.1 代码生成

代码生成器文件配置：codegenconfig.xml

代码生成跟以数据库表生成代码的配置一样，需要再配置多一行生成表单组件的数据：

<file refTemplate="bpmForm" filename="{class}BpmForm.vue" dir="{frontProject}\src\views\modules\{system}\{package}" sub="false"  override="true"/>

配置及生成代码效果如下：

生成表单组件的bpmForm.ftl模板可以自己修改，但是必须要保证生成的代码文件中有两个获取数据和校验数据的方法：getData()和valid()，主要作用是获取当前组件是数据对象和进行数据校验（例如某字段是否必填等）

2.2 、根据表单组件配置自定义表单

菜单路径：【单据中心】–【单据管理】–【新建单据】–【自定义表单】

其中【表单组件】就是OsUserFormTestBpmForm.vue对应的代码路径：

modules/user/org/OsUserFormTestBpmForm.vue

2.3、流程定义配置自定义表单



如上图所示，这里以一个只有一个节点的流程为例子，全局表单只选择上面的自定义表单，同时在【编程扩展】–【启动后置处理器】选择处理器，处理器代码在往后流程使用时讲解。



同理，节点也可选择自定义表单，同时选择对应的处理器

2.4、流程启动

2.4.1、启动页面动态加载表单组件：BpmInstStart.vue

流程定义配置好后，则可进行流程的启动，草稿保存，流程任务审批等系列操作。

如上图所示，启动流程时会判断是否自定义表单来加载自定义表单。代码：

<div class="contents">
          <rx-forms ref="rxForms" v-if="processConfig.formType=='online'"> </rx-forms>
          <component ref="customForm" :is="formComponent" :pk="pk" v-else></component>
        </div>

2.4.2、启动页面保存数据：ProcessToolBar.vue

点击右上角【启动流程】、【保存】按钮，则对当前表单组件的数据进行校验和保存。分别调用以下方法，取到的数据后，设置非系统处理参数【data.systemHand=false】

this.customForm.valid()
this.customForm.getData();

对应代码截图：


保存

启动流程

2.4.3、后端数处理开发：jpaas-bpm

以流程启动后台代码接口为例



从上面的截图可知，需要配置流程启动后的处理器，该处理器为接口，我们实现这个接口即可，本文的实现接口例子为：
DemoProcessHandler.java

该处理器就是我们上面流程定义选择的处理器。在实现方法里面可以开发自己的处理逻辑，本例子以ifrem调用jpaas-user模块进行数据的处理，数据保存完成，返回该数据的busKey值，绑定到流程实例表数据

JSONObject formData = cmd.getFormData();
        String pkId =userService.saveUserFormData(formData);
        bpmInst.setBusKey(pkId);



2.5、流程审批

2.5.1、审批页面动态加载表单组件：BpmTaskStart.vue

与上面的流程启动页面动态加载自定义表单组件实现一样，代码如下所示。


2.5.2、页面保存数据：TaskToolBar.vue，BpmTaskCheck.vue

点击右上角【审批】、【保存】按钮，则对当前表单组件的数据进行校验和保存。分别调用以下方法，取到的数据后，设置非系统处理参数【data.systemHand=false】

this.customForm.valid()
this.customForm.getData();

对应代码截图：

2.5.3、后端数据保存代码：jpaas-bpm

以流程审批后台代码接口为例



从上面的截图可知，需要配置流程启动后的处理器，该处理器为接口，我们实现这个接口即可，本文的实现接口例子为：
DemoProcessHandler.java

该处理器就是我们上面流程定义选择的处理器。在实现方法里面可以开发自己的处理逻辑，本例子以ifrem调用jpaas-user模块进行数据的处理，数据保存完成，实现逻辑参考上面的流程启动完成后的处理器逻辑

文档更新时间: 2022-01-24 18:05   作者：zyg