# erupt-flow-camunda

**Repository Path**: PPLINGHUFEI/erupt-flow-camunda

## Basic Information

- **Project Name**: erupt-flow-camunda
- **Description**: 开源camunda适配erupt工作流引擎
- **Primary Language**: Java
- **License**: GPL-2.0
- **Default Branch**: erupt-flow-camunda
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 4
- **Created**: 2024-11-01
- **Last Updated**: 2025-06-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 工作流, erupt, camunda, flow

## README


<h1 align="center">erupt-flow-camunda 工作流</h1>
<h2 align="center">该开源项目目前处于开发阶段，还未完善</h2>

### 👩联系作者
|                             微信                             |       QQ       |
| :----------------------------------------------------------: | :------------: |
|     搜索 `Misakimashino` 加我微信，备注 `flow`     | 加QQ `884700965` |



### erupt-flow-camunda

#### 新增功能

- 组件库全面支持`PC + 移动端 (ElementUI)`，一次表单设计，分别渲染成两种效果，即时预览
- 表单支持权限控制，每个节点可以看到不一样的表单，且支持动态设置表单内容字段只读、可编辑、隐藏，审批时能动态修改表单，改变后续流程走向
##### 1.组件库新增组件
![](https://pic.imgdb.cn/item/66f13a04f21886ccc0acbaa0.png)
- 高级选择器
- 更多组件后续增加。。。
- 计划开发组件
- 地理位置选择，高德地图选位置
- 计算公式，配置一个计算公式，根据其他字段值自动计算本字段结果
- Vue容器，能够在线编写Vue代码，生成自定义的组件
- Iframe容器，嵌入一个URL页面
>高级选择器使用
> 
>远程加载（前端执行，可使用打印等前端api）
> 
>数据接收格式，不是该格式请用后处理调整
>暴露ctx，系统token，rsp变量

```json
    {
      "code": "200",
      "data": [
        {
          "value": "xxx1",
          "label": "选项x1"
        },
        {
          "value": "xxx2",
          "label": "选项x2"
        }
        //...
      ]
    //...
    }
```
```js
//前置处理：
function preHandler(ctx,token)
{
    //发起请求前做一些处理
    ctx.headers['token']=token
}

//后置处理：
function aftHandler(rsp)
{
    //获取到结果后做一些处理
    rsp.data.code=(rsp.data.code==1?200:1)
}
```

##### 2.支持流程打印
- 系统模板（支持`扫码查看流程`，防篡改功能）
  - 系统模板自动生成无需编辑模板
  - 系统模板支持`扫码功能`
  - 系统模板支持审批编号前缀`自定义功能`
    ![](https://pic.imgdb.cn/item/670e38a9d29ded1a8c11614b.jpg)
- 可使用自定义模板
  ![](https://pic.imgdb.cn/item/670e38a9d29ded1a8c11617e.jpg)
- 新增打印管理（可查看已打印的系统模板）
  ![](https://pic.imgdb.cn/item/670e3a86d29ded1a8c13c62e.jpg)

###### 实际应用
>使用富文本编辑器，右侧存有系统变量和表单变量，点击即可插入到富文本中，如：
```
${currentDate} //当前日期
${currentTime} //当前时间
${printerName} //打印人
${sponsorName} //发起人
...
${表单变量} //表单变量
```
![](https://pic.imgdb.cn/item/670e38a8d29ded1a8c1160bc.jpg)
--------



##### 3.新增流程节点

> 流程节点，新增办理人等，
> 后续计划增加触发器节点、延时节点、子流程节点等
![](https://pic.imgdb.cn/item/66f13a04f21886ccc0acba82.png)

---------
##### 4.新增电子签名
- 流程可使用`电子签名`功能，审批可开启审批需签字通过

##### 5.新增流程监听
流程监听可以使用无动作，java语言，js语言，http请求等
包含以下监听
- 全局监听
    - 流程启动成功时
    - 流程审批通过时
    - 流程审批拒绝时
      ![](https://pic.imgdb.cn/item/66f13a04f21886ccc0acba56.png)
- 节点监听
    - 当流程进入本节点时
    - 当流程离开本节点时
      ![](https://pic.imgdb.cn/item/66f13a04f21886ccc0acba71.png)
- 作用
  主要用于流程审批时，自动触发一些事件，如：发送邮件、发送短信、发送http请求、调用java方法、调用js方法等

###### 1.java语言使用springel表达式
>可以使用 `@bean名.方法名(#表单变量)` 等方法，详细搜索 `springel表达式` 使用方法
###### 实际应用
1. 选择调用Java
2. 输入如下代码：
```js
@myBean.greet(#field7892038987210) //myBean为bean名，greet为方法名，#field7892038987210为表单变量名
```
###### 2.js语言
js语言通过后台运行（不能使用`前端部分js、api`  ）
js可以使用java的服务端内部类，如:
```java
var s = Java.type('类路径')
s.方法名(参数)  
```
js内置变量`ctx`可获取表单数据，
- 表单变量获取方式：
>查看：`表单ID`即`表单字段变量`
> 
  ![](https://pic.imgdb.cn/item/670f790cd29ded1a8c080a08.jpg)
如：
```js  
ctx.formName;
ctx.formId;
ctx.表单ID;
ctx.CreatorName;
ctx.FinishDate;
ctx.token;
//...
```  
例：发送http请求，如：
```js
var http = Java.type('cn.hutool.http.HttpRequest');  
var res = http.get('http://localhost:xxx/xxx').timeout(20000).execute().body();//http请求(详情参照hutool等相应的类库文档)  
java.lang.System.out.println(res);//打印请求结果
java.lang.System.out.println(ctx);//打印系统默认提供变量
```
>详情参照相应的类
###### 实际应用
1. 选择调用JS
2. 输入如下代码：
```js
var http = Java.type('cn.hutool.http.HttpRequest');//type获取文本特定内容
var data ={
    'page':1,
    'size':10
}
var result = http.get('http://192.168.0.1:5859/getXXX').form(data).header('token', ctx.token).execute(); //form请求数据，header请求头，execute执行请求并返回结果
java.lang.System.out.println(result);//java打印控制台
```
###### 3.http请求
http请求使用，支持get、post、delete、put等请求方式  
form表单、url地址、header可使用`${变量}`取值（可使用变量：token/表单ID），如：
>http://localhost:8080/${变量名}
> 
>key:xxx,value:${变量}

- 使用前处理(`暴露body,headers,connection系统参数`）
>
>  暴露`表单变量`，使用ctx.xxxxx可获取表单变量值，使用ctx.token可获取token
> 
>body.参数更改，如：
>body.xxx=ctx.xxx
>body.xxx=xxx

>headers参数修改，如：
> 
> headers.xxxx=ctx.xxxx
> 
> headers.xxxx=xxxx

- 使用后处理（`暴露response、connection系统参数`）
>暴露表单变量，使用`ctx.xxxxx`可获取表单变量值，使用`ctx.token`可获取token
> 
>response.参数更改（主要用于处理请求结果数据），如：
>
>response.xxxx=ctx.xxxx
>response.xxxx=xxxx


- 实际应用
1. 选择发送Http请求
2. 将前缀选项换成GET、POST、DELETE、PUT等请求方式
3. 输入如下：http:/xxxx:xxxx/xxxx
```js
`前处理:`
//发起请求前做一些处理
headers.token=ctx.token;
body.xxx="xxxx";
`后置处理:`
//获取到结果后做一些处理
response.code=(response.code==1?200:1)
```
###### 4.无动作

##### 项目结构

```
├─api 接口
├─assets
│  └─image
├─components 通用组件
│  └─common
├─router 路由
├─store vuex，设计器数据存储
├─utils
└─views 主要页面及视图
    ├─admin
    │  └─layout
    │      ├─form 表单设计
    │      └─process 流程设计
    ├─common
    │  ├─form 表单
    │  │  ├─components 表单组件
    │  │  ├─config 表单组件配置
    │  │  ├─expand 扩展组件
    │  │  └─settings 设置
    │  └─process 流程
    │      ├─config 流程节点设置
    │      └─nodes 流程节点
    └─workspace 工作区
```



##### 设计器数据

> 设计器的数据都存在Vuex中，需要传递到后端时，直接取出提交到接口

```json
{
    "formId":"37289743892", //表单ID，由后端生成
    "formName":"补卡申请", //表单名称
    "logo":{ //图标
        "icon":"图标/图片base64",
        "background":"#FEFEFE" //如果是图片则不生效
    },
    //表单权限及其他属性设置
    "settings":{
        "commiter": [], //哪些人可以提交发起表单
    	"admin":[], //表单管理员，可以编辑及导出数据
        "singn": false, //全局设置审批时是否需要签字
        "notify":{
            "type": "APP", //通知类型 APP QQ WX DING EMAIL
            "title": "消息通知标题"
        }
    },
    "group":20, //所在分组
    "formItems":[],//表单设计数据
    "process":{}, //流程数据
    "remark":"备注说明"
}
```
>前端开源项目来自:`wflow`
> 
> 后端开源使用`erupt-flow`
#### 支持作者

**开发不易，需要鼓励，如果觉得这个项目有帮助到了你请我喝杯咖啡吧！**