@

• 1. Flowable-UI
• 2. 安裝方式2.1 運(yùn)行 war 包2.2 Docker 安裝2.3 訪問(wèn)
• 3. 身份管理（IDM）3.1 用戶管理3.2 組管理3.3 權(quán)限控制
• 4. 流程圖繪制
• 5. 創(chuàng)建應(yīng)用
• 6. 體驗(yàn)報(bào)賬

其實(shí)松哥之前已經(jīng)寫過(guò)文章和大家介紹了 flowable-ui 的玩法了，這是官方提供的一個(gè)工具，這個(gè)工具不僅可以用來(lái)繪制流程圖，還可以用來(lái)部署一個(gè)流程應(yīng)用，通過(guò)這個(gè)流程應(yīng)用我們可以體驗(yàn)一把 flowable 流程引擎到底是干嘛的，解決了我們的哪些問(wèn)題，并且這個(gè)體驗(yàn)是不需要寫代碼的，對(duì)于一些對(duì) flowable 沒(méi)有基礎(chǔ)的小伙伴而言，我覺(jué)得這個(gè)很好。

所以今天我想再帶大家體驗(yàn)一把 flowable 的功能，可能有小伙伴說(shuō)，我們上次不是已經(jīng)體驗(yàn)過(guò)了么，上次體驗(yàn)的比較簡(jiǎn)單，沒(méi)有表單功能，今天我想結(jié)合表單功能來(lái)和大家捋一捋 flowable-ui 的功能，特別好玩。

1. Flowable-UI

Flowable-UI 說(shuō)白了就是一堆 Web 應(yīng)用，提供了四方面的功能：

• Flowable IDM: 身份管理應(yīng)用。為所有 Flowable UI 應(yīng)用提供單點(diǎn)登錄認(rèn)證功能，并且為擁有 IDM 管理員權(quán)限的用戶提供了管理用戶、組與權(quán)限的功能。
• Flowable Modeler: 讓具有建模權(quán)限的用戶可以創(chuàng)建流程模型、表單、選擇表與應(yīng)用定義。
• Flowable Task: 運(yùn)行時(shí)任務(wù)應(yīng)用，這個(gè)提供了啟動(dòng)流程實(shí)例、編輯任務(wù)表單、完成任務(wù)，以及查詢流程實(shí)例與任務(wù)的功能。
• Flowable Admin: 管理應(yīng)用。讓具有管理員權(quán)限的用戶可以查詢 BPMN、DMN、Form 及 Content 引擎，并提供了許多選項(xiàng)用于修改流程實(shí)例、任務(wù)、作業(yè)等。管理應(yīng)用通過(guò) REST API 連接至引擎，并與 Flowable Task 應(yīng)用及 Flowable REST 應(yīng)用一同部署。

簡(jiǎn)單來(lái)說(shuō)：

• 創(chuàng)建用戶、分配角色用 Flowable IDM。
• 畫流程圖用戶 Flowable Modeler。
• 測(cè)試、體驗(yàn)流程用 Flowable Task。
• 后臺(tái)管理相關(guān)的用 Flowable Admin。

2. 安裝方式

在之前的版本中，前面說(shuō)的這幾個(gè)應(yīng)用都是不同的 war 包，部署和訪問(wèn)都非常麻煩，不過(guò)現(xiàn)在，官方將之前的 5 個(gè) war 整合成一個(gè)了，所以現(xiàn)在訪問(wèn)就非常容易了。

2.1 運(yùn)行 war 包

由于這些應(yīng)用是基于 Spring Boot2.0 開發(fā)的，因此也可以直接作為獨(dú)立應(yīng)用來(lái)直接運(yùn)行，通過(guò)執(zhí)行 Java -jar xxx.war 的方式來(lái)啟動(dòng)這些應(yīng)用。

這個(gè)需要大家首先去 GitHub 上下載最新的 Flowable：

下載成功之后解壓，里邊有一個(gè) wars 文件夾，該文件夾中就有我們需要的 war 包，如下：

然后進(jìn)入到該目錄中，執(zhí)行如下命令啟動(dòng)該 war 文件：

java -jar flowable-ui.war

從啟動(dòng)到日志中我們就可以看出來(lái)這是一個(gè) Spring Boot：

既然是一個(gè) Spring Boot，那么如果又一些參數(shù)想改，就可以直接在啟動(dòng)命令中修改，例如默認(rèn)的端口號(hào)是 8080，現(xiàn)在想改為 8088，那么就在啟動(dòng)命令中添加參數(shù) –server.port=8088 即可。

所以直接啟動(dòng)這些應(yīng)用并不是麻煩事，反而是比較簡(jiǎn)單的。

2.2 docker 安裝

我看了下他這個(gè)還支持 Docker 安裝，所以我還是用 Docker 吧，更省事，將來(lái)不想要了刪除也方便（對(duì) Docker 不熟悉的小伙伴可以在微信公眾號(hào)后臺(tái)回復(fù) docker，有松哥寫的入門教程）。

docker 安裝的話，直接如下命令即可：

docker run -d --name flowableui -p 8086:8080 flowable/flowable-ui

沒(méi)什么特別需要配置的地方，指定一下容器名字和端口映射即可。

2.3 訪問(wèn)

無(wú)論是直接運(yùn)行還是 Docker 運(yùn)行，運(yùn)行成功之后，瀏覽器輸入 http://localhost:端口/flowable-ui 進(jìn)行訪問(wèn)，此時(shí)會(huì)彈出來(lái)如下頁(yè)面：

默認(rèn)情況下，登錄的用戶名是 admin，密碼是 test，注意別把密碼寫錯(cuò)了。

登錄成功之后，如果看到如下頁(yè)面，就表示安裝成功了（一般來(lái)說(shuō)應(yīng)該不會(huì)有安裝問(wèn)題）：

裝好之后，接下來(lái)我們就來(lái)逐步體驗(yàn)這里的功能，因?yàn)橹昂托』锇閭冎v過(guò)這里的大部分功能了，所以今天我主要和大家講講這里的身份管理和流程體驗(yàn)功能（因?yàn)榱鞒腆w驗(yàn)中要用到身份管理）。

3. 身份管理（IDM）

身份管理就是用戶、用戶組的管理，我們點(diǎn)進(jìn)到身份管理頁(yè)面之后，可以看到如下內(nèi)容：

可以看到，默認(rèn)只有一個(gè) admin 用戶，也就是我們剛剛登錄時(shí)候的用戶。

3.1 用戶管理

接下來(lái)點(diǎn)擊左邊的創(chuàng)建用戶按鈕，我們可以創(chuàng)建新的用戶出來(lái)：

填入用戶的基本信息和密碼即可。

我一共創(chuàng)建了四個(gè)用戶，最終結(jié)果如下：

3.2 組管理

接下來(lái)點(diǎn)擊上面的組，我們可以創(chuàng)建用戶組，這個(gè)用戶組相當(dāng)于我們?cè)?vhr 中所說(shuō)的角色，給用戶分組，相當(dāng)于給用戶分配一個(gè)角色。

默認(rèn)情況下，沒(méi)有任何組，組是空的：

我們點(diǎn)擊創(chuàng)建組按鈕，先來(lái)創(chuàng)建一個(gè)經(jīng)理組：

組添加成功之后，點(diǎn)擊添加用戶按鈕，為用戶組中添加用戶：

假設(shè) zhangsan 是經(jīng)理，最終添加結(jié)果如下：

利用相同的方式，我再創(chuàng)建一個(gè)主管的組，并為之添加兩個(gè)用戶 lisi 和 wangwu。

3.3 權(quán)限控制

我們前面創(chuàng)建的用戶現(xiàn)在是沒(méi)有任何權(quán)限的，例如現(xiàn)在如果使用 zhangsan/123 進(jìn)行登錄，登錄成功后頁(yè)面是空的，沒(méi)有任何東西：

所以我們要為用戶添加相應(yīng)的權(quán)限。點(diǎn)擊頂部的權(quán)限控制一欄，如下：

我們可以為這五種訪問(wèn)分別設(shè)置對(duì)應(yīng)的用戶/用戶組：

• 訪問(wèn) idm 應(yīng)用：這個(gè)就是訪問(wèn)身份管理應(yīng)用，如果用戶沒(méi)有訪問(wèn)這個(gè)的權(quán)限，那么用戶在登錄成功的后的首頁(yè)上就看不到身份管理應(yīng)用程序這個(gè)菜單項(xiàng)。
• 訪問(wèn) admin 應(yīng)用：這個(gè)是訪問(wèn)管理員應(yīng)用程式，如果沒(méi)有沒(méi)有這個(gè)的訪問(wèn)權(quán)限，那么用戶在登錄成功之后的首頁(yè)上就看不到管理員應(yīng)用程式這個(gè)菜單項(xiàng)。
• 訪問(wèn) modeler 應(yīng)用：這個(gè)是訪問(wèn)建模器應(yīng)用程序，如果沒(méi)有沒(méi)有這個(gè)的訪問(wèn)權(quán)限，那么用戶在登錄成功之后的首頁(yè)上就看不到建模器應(yīng)用程序這個(gè)菜單項(xiàng)。
• 訪問(wèn) workflow 應(yīng)用：這個(gè)是訪問(wèn)任務(wù)應(yīng)用程序，如果沒(méi)有沒(méi)有這個(gè)的訪問(wèn)權(quán)限，那么用戶在登錄成功之后的首頁(yè)上就看不到任務(wù)應(yīng)用程序這個(gè)菜單項(xiàng)。
• 訪問(wèn) REST API：這個(gè)是指用戶通過(guò) REST API 訪問(wèn)工作流的權(quán)限。

以訪問(wèn) idm 應(yīng)用為例，在設(shè)置的時(shí)候，我們可以直接設(shè)置用戶，也可以設(shè)置用戶組，設(shè)置用戶組的話，則這個(gè)組中的所有用戶都能訪問(wèn)這個(gè)菜單項(xiàng)。

我這里設(shè)置的是經(jīng)理和 javaboy 可以訪問(wèn)所有應(yīng)用，而主管只可以訪問(wèn) workflow 應(yīng)用。

好啦，準(zhǔn)備工作完成后，接下來(lái)我們就來(lái)繪制一個(gè)報(bào)銷的流程圖，這個(gè)流程圖稍微復(fù)雜一些，并且?guī)в斜韱危@是松哥之前從未寫過(guò)的內(nèi)容。

4. 流程圖繪制

我先大致上用文字描述下我們的報(bào)銷流程：

1. 啟動(dòng)一個(gè)流程。
2. 員工填寫報(bào)銷單，然后進(jìn)行提交。
3. 如果報(bào)銷金額小于等于 1000 元，則主管審批，主管審批通過(guò)后，流程結(jié)束；主管審批拒絕，則回到步驟 2 中員工重新填寫報(bào)銷單。
4. 如果報(bào)銷金額大于 1000 元，則先由經(jīng)理進(jìn)行審批，經(jīng)理審批通過(guò)后，再由 CEO 審批，兩者都審批通過(guò)，則流程結(jié)束；經(jīng)理和 CEO 任意一個(gè)審批不通過(guò)，則流程重新回到步驟 2 中。

好啦，這就是我們一個(gè)大致的流程描述，接下來(lái)我們就在 Flowable-UI 中來(lái)繪制這樣一個(gè)流程圖我們來(lái)看下。

首先點(diǎn)擊建模器應(yīng)用程序，我們開始繪制：

點(diǎn)擊右上角創(chuàng)建流程，創(chuàng)建一個(gè)流程：

然后就開始繪制。

首先第一步是用戶提交報(bào)銷材料，報(bào)銷材料需要填寫一個(gè)表單，所以我們?cè)谙旅娴膶傩灾?，找到表單引用，為這個(gè)用戶任務(wù)設(shè)置一個(gè)外部表單：

如果有提前繪制好的表單，這里就會(huì)顯示出來(lái)，那么直接引用即可，如果沒(méi)有提前繪制好的表單，那么大家看到的就如同上圖那樣。

現(xiàn)在我們點(diǎn)擊新表單，創(chuàng)建一個(gè)新表單：

為新表單設(shè)置名稱、key 等內(nèi)容：

創(chuàng)建成功之后，我們就可以看到表單設(shè)計(jì)頁(yè)面了：

左邊是表單組件區(qū)域，右邊是表單繪制區(qū)域。思考用戶需要提交哪些信息來(lái)報(bào)銷，直接將相應(yīng)的表單拖過(guò)來(lái)即可。

其實(shí)大家看最上面一欄的頂部菜單，也自動(dòng)切換到表單菜單了，這也就意味著，當(dāng)我們想要?jiǎng)?chuàng)建一個(gè)表單的時(shí)候，也可以不用從流程繪制那個(gè)入口進(jìn)來(lái)，可以直接提前繪制好表單，然后在畫流程的時(shí)候直接引用即可。

例如我首先拖一個(gè)文本框過(guò)來(lái)，作為用戶名，然后點(diǎn)擊右邊的編輯按鈕進(jìn)行編輯，如下：

有如下屬性：

• 標(biāo)簽：這個(gè)文本框?qū)?lái)展示的信息。
• 覆蓋 id：勾上這個(gè)，就可以自定義 id 了，否則 id 和標(biāo)簽是一樣的。
• id：這個(gè)是這個(gè)組件的唯一名稱，將來(lái)在代碼中，如果我們想要獲取這個(gè)表單的值，就需要通過(guò)這個(gè) id 去訪問(wèn)。
• 設(shè)置表單是否只讀或者必填。
• 默認(rèn)值：這個(gè)相當(dāng)于是這個(gè)表單的 placeholder。

好了，理解了這個(gè)，我們?cè)賮?lái)隨便加兩個(gè)組件，按照相同的思路進(jìn)行配置：

報(bào)銷金額，這是一個(gè)小數(shù)組件：

報(bào)銷用途是一個(gè)多行文本組件：

最終設(shè)計(jì)結(jié)果如下：

標(biāo)簽后面有一個(gè) * 表示這是一個(gè)必填項(xiàng)。

繪制完成后，點(diǎn)擊左上角的保存按鈕，保存成功后，會(huì)自動(dòng)回到流程繪制頁(yè)面。

接下來(lái)，我們還需要設(shè)置這個(gè)用戶任務(wù)由誰(shuí)來(lái)處理，如下：

很明顯，這個(gè)流程是誰(shuí)發(fā)起的，誰(shuí)就來(lái)填寫這個(gè)表單，所以，配置如下：

好了，這個(gè)用戶任務(wù)就配置完成了，接下來(lái)要根據(jù)報(bào)銷金額進(jìn)行劃分了，我一口氣畫完吧，再來(lái)和大家逐步分析：

先來(lái)看報(bào)銷金額小于等于 1000 的那條線。

首先，我們要為這條線設(shè)置條件，也就是流程從互斥網(wǎng)關(guān)中出來(lái)之后，什么情況下會(huì)進(jìn)入到主管審批這個(gè)節(jié)點(diǎn)中，選中這條出線，配置流條件，配置如下：

這里的 money 就是我們剛剛在表單中填寫的 money，表單中各個(gè)字段的值，都會(huì)被映射成為一個(gè)流程變量，我們可以直接訪問(wèn)。

接下來(lái)配置主管審批，首先我們?cè)O(shè)置分配用戶，即由誰(shuí)來(lái)執(zhí)行這個(gè)用戶任務(wù)：

我們?cè)O(shè)置候選組為主管，也就是所有的主管都可以審批這個(gè)節(jié)點(diǎn)：

主管審批的時(shí)候，無(wú)非就是同意或者拒絕，通過(guò)表單我們可以定義出同意或者拒絕這兩個(gè)按鈕。配置方式如下，首先為主管審批設(shè)置表單引用：

給這個(gè)新建的表單取一個(gè)名字和 id，這個(gè) id 大家要記牢了，將來(lái)我們會(huì)用到：

在表單設(shè)計(jì)的頁(yè)面，有一個(gè)結(jié)果選項(xiàng)卡，這個(gè)表示表單的輸出內(nèi)容，這個(gè)結(jié)果選項(xiàng)卡決定了這個(gè)表單上的最終按鈕，默認(rèn)情況下，只有一個(gè)完成按鈕，我們可以自定義配置：

我們?yōu)檫@個(gè)表單設(shè)置同意和拒絕兩個(gè)按鈕，方式如下：

這塊也有其他設(shè)置方式，我就先以這種方式來(lái)和大家演示，將來(lái)在視頻中再來(lái)和大家聊一聊其他方式。

表單配置完成后，保存即可，保存之后，就會(huì)回到流程繪制頁(yè)面。

接下來(lái)為同意這條出線設(shè)置條件：

大家注意這個(gè)表單的命名規(guī)則，是 form_表單名稱_outcome 這個(gè)就表示表單的輸出結(jié)果，也就是我們剛剛在表單中配置的結(jié)果選項(xiàng)卡中的內(nèi)容：

配置完成后，相同的方式，將同意改為拒絕，再來(lái)配置一下拒絕那條線。

好啦，上面這條線配置好之后，接下來(lái)相同的方式配置下面大于 1000 的情況，其中經(jīng)理這個(gè)用戶任務(wù)就由經(jīng)理這個(gè)組來(lái)處理，CEO 審批這個(gè)用戶任務(wù)就由指定用戶 javaboy 來(lái)審批即可，具體細(xì)節(jié)我就不多說(shuō)了，都跟上面一樣。

繪制完成后，記得點(diǎn)一下左上角的勾，看下流程有沒(méi)有漏洞，如下圖：

至此，我們的流程圖就畫好了。

一個(gè)流程圖只能有一個(gè)開始，但是可以有多個(gè)結(jié)束。

5. 創(chuàng)建應(yīng)用

流程圖畫好之后，接下來(lái)我們可以下載這個(gè)流程圖對(duì)應(yīng)的 XML 文件，然后去開發(fā)自己的 Java 代碼。但是，這不是我們本文的工作，本文的工作是直接在 Flowable-UI 這個(gè)工具中，創(chuàng)建一個(gè)應(yīng)用，然后發(fā)布這個(gè)流程。

點(diǎn)擊上面的應(yīng)用程序菜單，然后點(diǎn)擊右上角的創(chuàng)建應(yīng)用程序按鈕，如下：

接下來(lái)可以為你的應(yīng)用設(shè)置圖標(biāo)、主題啥的：

然后點(diǎn)擊編輯包含的模型按鈕，為這個(gè)應(yīng)用選擇一個(gè)流程：

然后點(diǎn)擊左上角的保存按鈕，保存并發(fā)布這個(gè)應(yīng)用，如下：

發(fā)布成功之后，回到首頁(yè)，就可以看到這個(gè)應(yīng)用了，如下：

6. 體驗(yàn)報(bào)賬

接下來(lái)我們就來(lái)體驗(yàn)一把這個(gè)報(bào)賬流程，我們目前的身份是 admin，也就是說(shuō) admin 這個(gè)用戶現(xiàn)在要報(bào)賬了。

首先點(diǎn)擊應(yīng)用圖標(biāo)，進(jìn)入到應(yīng)用中，任務(wù)是空的，也就是目前沒(méi)有 admin 需要審批的任務(wù)：

然后我們點(diǎn)擊上方的流程菜單，如下：

首先點(diǎn)擊左邊的啟動(dòng)流程，然后點(diǎn)擊右邊的啟動(dòng)流程，流程啟動(dòng)之后，我們可以點(diǎn)擊右上角的顯示圖按鈕，查看流程目前走到哪一步了：

可以看到，流程目前走到用戶提交報(bào)銷材料這一步了：

用戶提交報(bào)銷材料這一步是由流程的發(fā)起人完成的，也就是 admin 自己完成，此時(shí)我們回到任務(wù)菜單，就可以看到 admin 有需要完成的任務(wù)了：

填入報(bào)銷資料，然后點(diǎn)擊完成按鈕。

接下來(lái)再點(diǎn)擊流程菜單，查看流程圖，可以看到，此時(shí)進(jìn)入到主管審批這一步了：

按照我們第 3 小節(jié)的配置，lisi 和 wangwu 是主管，所以，我們先注銷登錄，然后重新以 lisi 或者 wangwu 的身份登錄，假設(shè)我這里以 lisi 的身份登錄，登錄成功之后，進(jìn)入到這個(gè)應(yīng)用中，進(jìn)來(lái)之后，首先將篩選規(guī)則改為我是其中一個(gè)候選人的任務(wù)：

然后在任務(wù)中就可以看到自己需要處理的任務(wù)了：

對(duì)于這種候選人或者候選組的任務(wù)，需要先點(diǎn)擊右上角的認(rèn)領(lǐng)，然后再處理（如果是直接分配給某一個(gè)用戶的，就不需要認(rèn)領(lǐng)了，可以直接處理了），認(rèn)領(lǐng)之后，就可以選擇同意或者拒絕了，如下圖：

假設(shè)我們點(diǎn)擊拒絕按鈕，拒絕之后，我們點(diǎn)擊流程菜單，查看流程圖，如下：

可以看到，流程在進(jìn)入到主管審批這個(gè)節(jié)點(diǎn)之后，被拒絕了，然后回到了用戶提交報(bào)銷材料這個(gè)節(jié)點(diǎn)上，現(xiàn)在 admin 要重新登錄，登錄之后，在自己的任務(wù)中又可以看到提交報(bào)銷材料了，如下：

隨便改一下，然后繼續(xù)提交。

切換到 wangwu 登錄，同意報(bào)銷，流程結(jié)束。

好啦，下面那條超過(guò) 1000 塊錢的線，小伙伴們可以自行測(cè)試，我就不演示啦～

今天這個(gè)文章的目的是讓大家體驗(yàn)一把流程引擎，看看流程引擎是干嘛的，都有啥功能，松哥在未來(lái)的文章中，會(huì)逐步教大家如何用 Spring Boot Vue 實(shí)現(xiàn)這一套功能。

完結(jié)撒花～