Flowable流程设计器扩展节点自定义属性

1. 一些前提

1. 设计器前后端分离。
2. 前端使用nginx进行代理访问，并增加转发的头部信息X-Authorization，其token值可以调用登录接口获取。保持接口登录状态
3. 后台接口以jar包的形式引入相关接口，屏蔽掉idm等模块功能和配置。具体配置参见FlowableModelerRestApiAutoConfiguration自动配置类。最后复制flowable源码中org.flowable.ui.common.security.SecurityUtils.java文件到项目中，保持路径不变，用于覆盖源码的工具类以实现使用自定义的SecurityContext。

2. 设计器实现原理简述

1. 设计器页面加载时访问后台接口，获取stencilset_bpmn.json文件内容，得到所有模具元素和相关属性配置。然后获取要编辑的流程的详情，最终完成页面渲染生成。
2. stencilset_bpmn.json文件主要包含四个部分的内容，如下图所示

• 基本信息：设计器的基本属性（编辑器名称，命名空间，描述）
• 属性包：定义流程图中所有节点的属性，可以组合成不同的“属性包”。
• 模型：流程设计可使用的模型，即界面左侧可拖动放置的模具元素。其中包含该模具在画布上放置时的样式，以及多个“属性包”，当拖动一个模具到画布时，下方属性面板将渲染属性包的相关属性。
• 规则：定义一些限制规则，例如空的启动事件不允许有输入流，结束事件不允许有输出流
  

3. 流程图编辑好以后，保存将调用后台创建/更新模型的接口，完成流程图的保存（流程图的详细信息转换为一个json串提交）

3. 详细步骤

了解了流程设计器的原理以后，接下来进行流程节点属性的自定义扩展，以UserTask为例。

1. 【后台】将flowable modeler源码中stencilset_bpmn.json文件拷贝一份，放置到resources下用于覆盖源码中的文件。（具体位置为：flowable-ui-modeler-logic.jar中的resources下。）
2. 【后台】在propertyPackages里增加一个属性包，包含两个属性：

{
  "name": "xt_assignnextpackage",
  "properties": [
    {
      "id": "xt_isassignnext",
      "type": "Boolean",
      "title": "指定下一节点执行人",
      "value": "",
      "description": "是否指定下一节点执行人",
      "popular": true
    },{
      "id": "xt_nextexecutor",
      "type": "xt-select-member",
      "title": "下一执行人",
      "description": "选择下一节点执行人，只有“指定下一节点执行人”设置为true时才生效",
      "popular": true
    }
  ]
}

3. 【后台】将该属性包添加到需要增加额外属性的节点模型里面。例如在UserTask节点下增加。
   
4. 【前端】static\editor-app\configuration\properties.js 文件增加“xt-select-member”定义，表明渲染该属性字段时需要用到的html模板文件位置。
   
5. 【前端】创建上一步中声明的html文件。指定对应需要处理的控制器名称。
   
   
6. 【前端】创建static\editor-app\configuration\properties-xtone-controller.js文件，创建上一步中申明的控制器。在控制器中编写弹窗页面相关逻辑。
   
7. 【前端】将上一步的js文件在static\index.html文件中引入。
8. 【后台】所有流程节点模具，后台都对应有一个转换器，提供json转bpmnModel，BpmnModel转json的功能。UserTask对应的转换器UserTaskJsonConverter未处理自定义属性，因此需要继承UserTaskJsonConverter实现一个自定义的UserTask的转换器，以实现扩展属性的保存，并想办法替换掉flowable框架初始化时设置的UserTask对应的转换器。因源码不方便公布，就只提及一下涉及到要调整的两个类：

org.flowable.editor.language.json.converter.CustomPropertyInit
com.stloven.oa.flow.conf.FlowableModelerRestApiAutoConfiguration

4. 备注

1. 改造自带流程设计器，需要简单了解bpmn协议，掌握设计器的实现原理，建议先断点调试一遍。后续改造步骤就很清晰
2. 上述步骤以UserTask这个类型的流程节点改造为例，掌握方法以后只需简单照搬，就可以实现完全自定义的节点。
3. 本文属历史笔记整理，Flowable版本大概是6.5左右。整个方法供参考。