flowable-ui

原创已于 2023-03-23 23:43:18 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

于 2023-03-23 23:18:24 首次发布

工作流引擎专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了Flowable UI的安装过程，包括拉取镜像、启动服务及访问方式。同时，文章深入讲解了用户管理、授权、创建流程模型的步骤，涉及用户、组、权限控制，并展示了如何新建业务流程模型、添加事件和任务，以及设置网关条件。最后，介绍了如何下载工作流程图和导入已有的流程。

一、介绍

flowable-ui主要用于画流程图，之后再使用flowable整合Spring Boot。Flowable提供了一个web UI应用程序来演示和利用Flowable项目提供的功能。

flowable-ui的官网文档地址为：

https://www.flowable.com/open-source/docs/bpmn/ch14-Applications/

二、安装flowable-ui

第一步：使用下述命令拉取flowable-ui最新的镜像

docker pull flowable/flowable-ui

第二步：使用下述命令启动该服务

docker run -id -p 8080:8080 flowable/flowable-ui

第三步：访问flowable-ui，在浏览器输入 http://ip:8080/flowable-ui/ (默认账号：admin，密码：test)

默认情况下flowable中的数据是存储在容器中，如果有必要后续再修改其数据存储配置。

下面简单介绍下这4个模块：

任务应用程序：这个模块主要进行流程相关的操作，比如发起、审核等，发布后的应用程序会显示在这里。
建模器应用程序：这个模块是核心，主要用来创建流程、发布流程等等。
管理员应用程序：这个模块就是管理发布的应用程序，可以上传/删除应用程序等等。
身份管理应用程序：这个模块就是用户管理模块，包括用户的创建、权限分配等等。

三、用户管理与授权

3.1 用户

使用管理员账号登录以后，我们可以进入到 “身份管理应用程序” 模块中：

创建几个不同的用户：

3.2 组

首次查看组的情况这里是没有任何分组的，如下图所示：

我们可以创建一个分组，如下所示：

接着再为该分组新增一个组员“lisi”，如下图所示：

3.3 权限控制

创建了用户以后，我们为不同的用户分配权限，否则用户在登陆到flowable-ui后就什么也使用不了，如下所示：

当前为某一个用户 wangwu 分配了 “访问workflow应用” 的权限，如下图所示：

接着该用户再次登录后就可以使用“任务应用程序”模块的功能：

访问idm应用：身份管理应用程序

访问admin应用：管理员应用程式

访问modeler应用：建模器应用程序

访问workflow应用：任务应用程序

访问Rest API： 这个权限暂时不知道干什么用的

四、创建流程模型

4.1 新建业务流程模型

找到 “建模器应用程序” 并点击进去，如下图所示：

接着再点击“创建流程”，如下图所示：

接着就会弹出一个如下图所示的界面：

模型名称：这个是是可以随便取的，并且可以命名为中文。

模型key：建议取英文+数字+下划线，模型key是唯一的，不能跟其它的模型key重复。

描述：就是对所创建模型的一些详细说明。

为了和官网提供的one-task-process.bpmn20.xml 示例保持一致，因此上述三个参数的配置如下：

创建成功后，会进入到下面的界面中

4.2 添加开始事件

4.3 添加用户任务（主管审批）

添加用户任务，也就是用户审批，指的是这个环节由谁来处理这个任务

可以看到上面所创建的“用户任务”的名称为空，对此我们可以直接选中该组件然后再双击就可以编辑名称，如下图所示：

4.4 添加排他网关（主管审批判断）

4.5 添加结束事件（主管审批不通过）

主管审批如果不通过的话，则该流程就需要结束，因此需要在排他网关这里添加一个结束事件。

4.6 添加用户任务（主管审批通过，需经理审批）

主管审批如果通过的话，那么该流程需要流转到经理审批，因此需要在排他网关后面添加经理审批。

下面的操作都差不多，最终一口气将所有的流程图画完，如下所示：

“同意” 和 “拒绝” 这两个名称也是通过在这种实流线中双击进行编辑配置即可。

4.7 设置【网关】的条件

同意的条件

连线条件的输入框是支持 EL 表达式，因此可以使用 ${}
【同意的条件】：这里填写了 ${executeType=='YES'} 的意思是主管审批的时候传递一个 executeType 变量，并且 executeType 变量的值为 YES 的时候，则走到下一步（经理审批）

首先选中实连线，就可以看到该组件的一些信息，如下图所示：

接着再点击流条件，就会弹出下面这么一个操作框，其表达式的值为 “${executeType=='YES'}”，如下图所示：

拒绝的条件

这里填写了 ${executeType=='NO'} 的意思是主管审批的时候传递一个 executeType 变量，并且 executeType 变量的值为 NO 的时候，则结束流程。

4.8 设置【主管审批】的相关属性

主键ID：可以结合业务需求，业务可以根据不同步骤执行不同的业务操作。
分配用户：表示由谁来处理这个任务。

对于分配用户操作，这里为了方便，直接选择了固定值。另外也可以通过设置候选组这种方式来分配任务，这里的候选组是具体的业务系统的角色ID从而实现不同角色审批不同流程的效果。

点击上图中的分配用户后就会弹出下述这么一个界面，我们直接进行操作即可（指定任务处理者）。

确认好业务流程模型的话，通过下方的保存按钮保存即可。

五、下载工作流程图

建模器应用程序 -> 选择对应的流程模型，如下图所示：

通过下图中的下载按钮就可以将该工作流程图下载下来：

六、导入流程

对于一个已经存在的业务流程xxx.bpmn20.xml，该文件里面的内容如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
             xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
             typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath"
             targetNamespace="http://www.flowable.org/processdef">
    <process id="Expense" name="ExpenseProcess" isExecutable="true">
        <documentation>报销流程</documentation>
        <startEvent id="start" name="开始"></startEvent>
        <userTask id="fillTask" name="出差报销" flowable:assignee="${taskUser}">
            <extensionElements>
                <modeler:initiator-can-complete xmlns:modeler="http://flowable.org/modeler">
                    <![CDATA[false]]></modeler:initiator-can-complete>
            </extensionElements>
        </userTask>
        <exclusiveGateway id="judgeTask"></exclusiveGateway>
        <userTask id="directorTak" name="经理审批">
            <extensionElements>
                <flowable:taskListener event="create"
                                       class="com.haiyang.flowable.listener.ManagerTaskHandler"></flowable:taskListener>
            </extensionElements>
        </userTask>
        <userTask id="bossTask" name="老板审批">
            <extensionElements>
                <flowable:taskListener event="create"
                                       class="com.haiyang.flowable.listener.BossTaskHandler"></flowable:taskListener>
            </extensionElements>
        </userTask>
        <endEvent id="end" name="结束"></endEvent>
        <sequenceFlow id="directorNotPassFlow" name="驳回" sourceRef="directorTak" targetRef="fillTask">
            <conditionExpression xsi:type="tFormalExpression"><![CDATA[${outcome=='驳回'}]]></conditionExpression>
        </sequenceFlow>
        <sequenceFlow id="bossNotPassFlow" name="驳回" sourceRef="bossTask" targetRef="fillTask">
            <conditionExpression xsi:type="tFormalExpression"><![CDATA[${outcome=='驳回'}]]></conditionExpression>
        </sequenceFlow>
        <sequenceFlow id="flow1" sourceRef="start" targetRef="fillTask"></sequenceFlow>
        <sequenceFlow id="flow2" sourceRef="fillTask" targetRef="judgeTask"></sequenceFlow>
        <sequenceFlow id="judgeMore" name="大于500元" sourceRef="judgeTask" targetRef="bossTask">
            <conditionExpression xsi:type="tFormalExpression"><![CDATA[${money > 500}]]></conditionExpression>
        </sequenceFlow>
        <sequenceFlow id="bossPassFlow" name="通过" sourceRef="bossTask" targetRef="end">
            <conditionExpression xsi:type="tFormalExpression"><![CDATA[${outcome=='通过'}]]></conditionExpression>
        </sequenceFlow>
        <sequenceFlow id="directorPassFlow" name="通过" sourceRef="directorTak" targetRef="end">
            <conditionExpression xsi:type="tFormalExpression"><![CDATA[${outcome=='通过'}]]></conditionExpression>
        </sequenceFlow>
        <sequenceFlow id="judgeLess" name="小于500元" sourceRef="judgeTask" targetRef="directorTak">
            <conditionExpression xsi:type="tFormalExpression"><![CDATA[${money <= 500}]]></conditionExpression>
        </sequenceFlow>
    </process>
    <bpmndi:BPMNDiagram id="BPMNDiagram_Expense">
        <bpmndi:BPMNPlane bpmnElement="Expense" id="BPMNPlane_Expense">
            <bpmndi:BPMNShape bpmnElement="start" id="BPMNShape_start">
                <omgdc:Bounds height="30.0" width="30.0" x="285.0" y="135.0"></omgdc:Bounds>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape bpmnElement="fillTask" id="BPMNShape_fillTask">
                <omgdc:Bounds height="80.0" width="100.0" x="405.0" y="110.0"></omgdc:Bounds>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape bpmnElement="judgeTask" id="BPMNShape_judgeTask">
                <omgdc:Bounds height="40.0" width="40.0" x="585.0" y="130.0"></omgdc:Bounds>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape bpmnElement="directorTak" id="BPMNShape_directorTak">
                <omgdc:Bounds height="80.0" width="100.0" x="735.0" y="110.0"></omgdc:Bounds>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape bpmnElement="bossTask" id="BPMNShape_bossTask">
                <omgdc:Bounds height="80.0" width="100.0" x="555.0" y="255.0"></omgdc:Bounds>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNShape bpmnElement="end" id="BPMNShape_end">
                <omgdc:Bounds height="28.0" width="28.0" x="771.0" y="281.0"></omgdc:Bounds>
            </bpmndi:BPMNShape>
            <bpmndi:BPMNEdge bpmnElement="flow1" id="BPMNEdge_flow1">
                <omgdi:waypoint x="315.0" y="150.0"></omgdi:waypoint>
                <omgdi:waypoint x="405.0" y="150.0"></omgdi:waypoint>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge bpmnElement="flow2" id="BPMNEdge_flow2">
                <omgdi:waypoint x="505.0" y="150.16611295681062"></omgdi:waypoint>
                <omgdi:waypoint x="585.4333333333333" y="150.43333333333334"></omgdi:waypoint>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge bpmnElement="judgeLess" id="BPMNEdge_judgeLess">
                <omgdi:waypoint x="624.5530726256983" y="150.44692737430168"></omgdi:waypoint>
                <omgdi:waypoint x="735.0" y="150.1392757660167"></omgdi:waypoint>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge bpmnElement="directorNotPassFlow" id="BPMNEdge_directorNotPassFlow">
                <omgdi:waypoint x="785.0" y="110.0"></omgdi:waypoint>
                <omgdi:waypoint x="785.0" y="37.0"></omgdi:waypoint>
                <omgdi:waypoint x="455.0" y="37.0"></omgdi:waypoint>
                <omgdi:waypoint x="455.0" y="110.0"></omgdi:waypoint>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge bpmnElement="bossPassFlow" id="BPMNEdge_bossPassFlow">
                <omgdi:waypoint x="655.0" y="295.0"></omgdi:waypoint>
                <omgdi:waypoint x="771.0" y="295.0"></omgdi:waypoint>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge bpmnElement="judgeMore" id="BPMNEdge_judgeMore">
                <omgdi:waypoint x="605.4340277777778" y="169.56597222222223"></omgdi:waypoint>
                <omgdi:waypoint x="605.1384083044983" y="255.0"></omgdi:waypoint>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge bpmnElement="directorPassFlow" id="BPMNEdge_directorPassFlow">
                <omgdi:waypoint x="785.0" y="190.0"></omgdi:waypoint>
                <omgdi:waypoint x="785.0" y="281.0"></omgdi:waypoint>
            </bpmndi:BPMNEdge>
            <bpmndi:BPMNEdge bpmnElement="bossNotPassFlow" id="BPMNEdge_bossNotPassFlow">
                <omgdi:waypoint x="555.0" y="295.0"></omgdi:waypoint>
                <omgdi:waypoint x="455.0" y="295.0"></omgdi:waypoint>
                <omgdi:waypoint x="455.0" y="190.0"></omgdi:waypoint>
            </bpmndi:BPMNEdge>
        </bpmndi:BPMNPlane>
    </bpmndi:BPMNDiagram>
</definitions>

如果直接通过上述xml内容得到一个流程定义的信息，这个还是比较花时间的。因此针对这种问题，我们可以通过 “导入流程” 这么一个功能将其导入到flowable-ui，如下图所示：