# 新增流程节点

目前系统内置了6种节点，基本能覆盖日常所需业务，如果需要新增业务节点可以参考本章节

# 前端

# 1、新增流程节点组件

在 src\views\common\process\nodes 目录下按照xxxNode风格命名新增一个新的流程节点组件，如果您新增的节点类型是如下类型样式

那么直接可以参考审批和发起人等节点的设置方式进行新增，修改节点的颜色和图标配置

# 2、新增添加节点的选项

点击 + 时，会弹出要插入的节点选项，我们从 src\views\common\InsertButton.vue 组件进行添加，参考其他项设置及数据命名风格

# 3、新增节点props属性设置

如果该节点存在设置项，那么就要定义它的设置项有哪些字段信息，在 DefaultNodeProps.js 里面，参考其他项设置

# 4、让节点在流程图上显示

流程图渲染的核心文件是 src\views\admin\layout\process\ProcessTree.vue，自定义节点要想显示出来，必须在该组件内进行声明 import 进来

# 5、新增节点的配置面板

当点击节点时，右侧会弹出该节点的配置面板，这个面板也是一个组件，如果我们新增了节点，那么就要新增对应设置面板组件，在 src\views\common\process\config 目录，根据自己的需求去构建该面板设置内容，该面板主要是构造 DefaultNodeProps.js 里面的该类型节点的设置信息，然后后台流程到达改节点时，根据节点设置项去做相应操作。

# 后端

# 1、新增流程节点

我们新增了一个业务节点，那么该节点需要有bpmn标准节点与之对应

**例如：**审批人节点对应UserTask，抄送节点对应 ServiceTask，大家自定义的节点也需要有一个这种转换目标对应，具体该节点是哪种根据自身业务来

wflow 流程设计器的json，需要转换成对应的bpmn模型，该转换器核心类为 com.wflow.workflow.WFlowToBpmnCreator

/**
* 递归加载所有流程树
* @param node 起始节点
*/
public void loadProcess(ProcessNode<?> node){
    switch (node.getType()){
        case ROOT:
            break;
        case APPROVAL:
            break;
        case CC:
            break;
        case DELAY:
            break;
        case CONDITIONS:
            break;
}

找到上方所示该方法，添加一个case项（注意同时添加节点类型的枚举），然后参考其他项创建该节点类型对应的bpmn节点，注意普通节点与带多路分支的节点处理方式不相同，参考并行及条件网关处理。

📌处理节点转换的逻辑是，先创建节点，再去给这个节点向上连线！！！