Flowable 外置的 HTML 表單怎么玩？

篇文章我們一起學習了 Flowable 中的動態表單，動態表單說白了就是把變量打包定義，零存整取。但是小伙伴們可能很難實實在在 GET 到動態表單一些有創造性的功能，所以今天我們就來繼續看看 Flowable 中的外置表單怎么玩，這個跟動態表單有一些本質上的差別。

1. 外置表單

首先，所謂的外置表單，其實說白了，類似我們平時在 HTML 中寫的 form 表單。

現在的 flowable 中，我們既可以利用 JSON 的形式來定義 form 表單，也可以直接就使用 HTML 來定義，都是 OK 的。本文為了直觀，松哥這里采用 HTML 來定義表單。

現在假設我有如下一個請假流程：

在開始節點中，我們需要一個表單來輸入用戶提交的請假信息，在組長審批和經理審批這兩個節點中我們希望能夠看到用戶提交的請假信息，那么我們準備兩個表單文件，第一個是提交請假信息的表單文件 askleave.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <table>
        <tr>
            <td>請假天數：</td>
            <td><input type="text" name="days"></td>
        </tr>
        <tr>
            <td>請假理由：</td>
            <td><input type="text" name="reason"></td>
        </tr>
        <tr>
            <td>起始時間：</td>
            <td><input type="date" name="startTime"></td>
        </tr>
        <tr>
            <td>結束時間：</td>
            <td><input type="date" name="endTime"></td>
        </tr>
        <tr>
            <td><input type="submit" value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>

小伙伴們看到，這其實就是一個普通的 HTML 頁面，這里為了省事，我就沒寫 form 的 action 了。

還有一個是查看用戶提交的請假信息的表單 leader_approval.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <table>
        <tr>
            <td>請假天數：</td>
            <td><input type="text" name="days" value="${days}"></td>
        </tr>
        <tr>
            <td>請假理由：</td>
            <td><input type="text" name="reason" value="${reason}"></td>
        </tr>
        <tr>
            <td>起始時間：</td>
            <td><input type="date" name="startTime" value="${startTime}"></td>
        </tr>
        <tr>
            <td>結束時間：</td>
            <td><input type="date" name="endTime" value="${endTime}"></td>
        </tr>
        <tr>
            <td><input type="submit" value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>

和前面的 askleave.html 文件相比，leader_approval.html 文件中，各個表單屬性只是多了 value 屬性而已，value 給了一個預填的變量，其他都是一樣的。

兩個表單文件定義完成之后，接下來我們為我們的流程來配置這兩個表單文件，如下圖，為開始節點設置表單 key 為 askforleave.html，為組長審批和經理審批節點設置表單 key 為 leader_approval.html：

另：在 Spring Boot 項目中，外置表單默認放在 resources/forms 目錄下，也就是說，凡是放在這個目錄下的表單文件，會被自動部署（要求文件后綴為 .form）。

好啦，這樣我們的流程圖就準備完成了。

2. 流程部署

小伙伴們需要注意，外置表單的部署需要和流程圖一起部署，只有一起部署，他們才會有相同的 DEPLOYMENT_ID，否則兩者的 DEPLOYMENT_ID 不同，在后續的查找中就找不到對應的表單。

因此，我們來修改一下流程部署的接口：

@RestController
public class ProcessDeployController {

    @Autowired
    RepositoryService repositoryService;

    @PostMapping("/deploy")
    public RespBean deploy(MultipartFile[] files) throws IOException {
        System.out.println(new Date());
        DeploymentBuilder deploymentBuilder=repositoryService.createDeployment()
                .category("javaboy的工作流分類")
                .name("javaboy的工作流名稱")
                .key("javaboy的工作流key666");
        for (int i=0; i < files.length; i++) {
            MultipartFile file=files[i];
            deploymentBuilder.addInputStream(file.getOriginalFilename(), file.getInputStream());
        }
        Deployment deployment=deploymentBuilder
                .deploy();
        return RespBean.ok("部署成功", deployment.getId());
    }
}

小伙伴們看到，這里我將上傳文件改為了數組，也就是流程圖、form 表單等統統都以文件的形式上傳，然后在部署的時候，統一都調用 addInputStream 方法進行添加。

我們來看下使用 POSTMAN 部署的方式：

部署成功之后，我們來看下 ACT_GE_BYTEARRAY 表中的記錄，如下：

小伙伴們看到，四條記錄具有相同的 DEPLOYMENT_ID，這一點尤為重要。

3. 流程開啟與執行

在流程開啟之前，我們首先可以通過如下方式查詢啟動節點上的表單內容：

@Test
void test05() {
    ProcessDefinition pd=repositoryService.createProcessDefinitionQuery().latestVersion().processDefinitionKey("FormDemo02").singleResult();
    String startFormKey=formService.getStartFormKey(pd.getId());
    String renderedStartForm=(String) formService.getRenderedStartForm(pd.getId());
    System.out.println("startFormKey=" + startFormKey);
    System.out.println("renderedStartForm=" + renderedStartForm);
}

控制臺輸出的內容如下：

可以看到，表單的內容就被輸出來了。

如果我們這里是一個 Web 工程，那么可以通過 Ajax 來請求到這個表單數據，并動態渲染到前端，然后在前端輸入對應的值，點擊提交按鈕，就可以在服務端開啟一個流程了。

服務端開啟流程方式如下：

@Test
void test02() {
    ProcessDefinition pd=repositoryService.createProcessDefinitionQuery().processDefinitionKey("FormDemo02").latestVersion().singleResult();
    Map<String, String> vars=new HashMap<>();
    vars.put("startTime", "2022-10-10 10:10");
    vars.put("endTime", "2022-10-12 10:10");
    vars.put("reason", "玩兩天");
    vars.put("days", "3");
    ProcessInstance pi=formService.submitStartFormData(pd.getId(), vars);
}

調用 submitStartFormData 方法來開啟一個流程，我這里參數直接硬編碼了。

流程開啟之后，接下來組長 zhangsan 要來審批這個流程，審批之前他需要先查看一下用戶提交的表單信息，查看方式如下：

@Test
void test06() {
    Task task=taskService.createTaskQuery().taskAssignee("zhangsan").singleResult();
    String renderedTaskForm=(String) formService.getRenderedTaskForm(task.getId());
    System.out.println("renderedTaskForm=" + renderedTaskForm);
}

小伙伴們注意，這個 getRenderedTaskForm 方法只有外置表單才有，動態表單調用這個方法是沒有東西的，因為動態表單單純的就只是變量的傳遞，不涉及到渲染問題，我們來看下這里打印出來的結果：

小伙伴們看到，和前面的表單相比，這里的表單都渲染出來了對應的值。如果這是一個 Web 項目，那么我們就可以使用 Ajax 請求這個渲染后的表單，并展示在前端頁面。當然實際審批中，這里可以有更多的字段，組長填完之后，進入到下一個環節。

zhangsan 進行流程審批的代碼如下：

@Test
void test08() {
    Task task=taskService.createTaskQuery().taskAssignee("zhangsan").singleResult();
    Map<String, String> vars=new HashMap<>();
    vars.put("startTime", "2022-10-30 10:10");
    vars.put("endTime", "2022-12-30 10:10");
    vars.put("reason", "玩十天");
    vars.put("days", "10");
    formService.submitTaskFormData(task.getId(),vars);
}

可以使用 formService#submitTaskFormData 方法進行審批，也可以使用 taskService.complete 方法進行審批。

剩下的玩法就和普通流程一樣了。

好啦，這就是和大家介紹的外置表單。

arsley.js

Parsley.js是一個輕量級且功能豐富的庫，它使用DOM中嵌入的數據屬性來實現相同的功能，而不是使用Javascript驗證表單。令人驚訝的易于配置的插件還使您可以覆蓋幾乎所有默認行為，使其符合您的表單要求。

quickValidation.js

quickValidation.js的工作原理類似于上面的Parsley。它沒有在Javascript中定義規則，而是通過使用data-validateinput標簽中的屬性直接分配規則。它將諸如required,number,range=0-99之.quickValidate類的規則串在一起，然后添加類，添加data-name屬性以為錯誤命名字段，然后就可以開始工作了。

jQuery番茄醬插件

Ketchup是一個輕量級（最小3.4KB）插件，附帶18種基本驗證，但是確實允許您輕松編寫自己的驗證并覆蓋任何默認行為。

默認情況下，插件將檢查data-validate表單字段的屬性，以查看是否可以找到任何匹配的驗證。驗證的默認指標是validate()，所有驗證都進入該位置，并以逗號分隔。驗證也可以帶有參數（也用逗號分隔）。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

jQuery驗證插件

jQuery Validation是一個“插件”插件，使客戶端表單驗證非常容易。它附帶了一組有用的驗證方法，同時還提供了一個API，可輕松編寫您自己的API。

開始使用此插件所需要做的就是僅一行jQuery以選擇表單并應用該插件，并在每個元素上加上一些注釋以指定驗證規則。

IV.js – Javascript輸入驗證

IV.js是一個jQuery庫，它提供了一種使用驗證過濾器和處理用戶輸入的直觀方法。為了使用IV.js，您需要將IValidate類添加到表單中。

jQuery驗證引擎

當涉及到jQuery Validation Engine時，您不必擔心表單的結構，因為該插件會創建一個錯誤，DIV并將其放置在指定輸入的右上角，從而使表單代碼和驗證分開。Phis可能是本文中最簡單的驗證解決方案。

BootstrapValidator

BootstrapValidator是一個用于驗證Bootstrap表單的jQuery插件。

監護人

Guardian是一個靈活且易于擴展的通用表單驗證jQuery插件。

驗證碼

Validatr使用HTML5輸入屬性來執行驗證，以支持color，date，email，number和range。輸入類型text，checkbox，radio...。支持，但不需要相同級別的驗證。

在可能的情況下，Validatr將使用本機驗證，并使用Modernizr來測試支持。如果不支持輸入類型，它將使用它自己的規則集來補充本機驗證。在兩種情況下，都會顯示驗證消息。

Formance.js

Formance.js是一個基于Stripe的jQuery.payment庫并受其啟發的用于格式化和驗證表單字段的庫。

Fields.js

Fields.js帶有MIT許可證，并提供了與字段進行交互的抽象方式。

jQuery驗證

jQuery Validate是一個jQuery插件，可幫助您使用數據屬性輕松而快速地完成表單驗證。

jQuery表單驗證

jQuery Form Validate是另一個jQuery插件，可讓您通過從應用于每個輸入的HTML 5數據屬性中獲取驗證規則來驗證HTML表單。

一審

單驗證是用于一般驗證目的的正則表達式的集合。為了進行驗證，它將正則表達式分成模式的語義部分。

Validarium

Validarium是一個基于jQuery Validate的簡單直接的jQuery驗證插件。

驗證準系統驗證

從名稱本身可以明顯看出，Validate Barebones Validation是一個可配置和可擴展的準系統jQuery驗證插件。

nextVal

nextVal是jQuery的客戶端表單驗證插件。

jQuery Super Labels插件

在jQuery的超級標貼插件獲得焦點淡出輸入一個值時，當使整個油田的標簽幻燈片。

作者：游X魚
鏈接：https://www.jianshu.com/p/d1519bacf66a

單標簽

常見的語句：

form：表單標簽格式

作用：用來收集用戶輸入信息如：登入、注冊、搜索商品等
action：開始網址
method：get和post等等
text （明文）：用戶名格式
password ：（密文）密碼
radio ：單選框性別格式性別是單選,單選類型是radio,注意name要加上sex
checkbox：復選框
textarea：文本框
file：上傳文件
select：下拉選擇框
button：按鈕
reset：重置
submit：提交

詳解：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<input type="radio" name="sex" id="" />男

<input type="radio" name="sex" id="" />女

</p>

<p>

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />mysql

<input type="checkbox" name="" id="" value="" />html

<input type="checkbox" name="" id="" value="" />python

</p>

<p>學歷

<option value="">請選擇學歷</option>

</select>

</p>

</p>

</form>

</body>

</html>

在線咨詢

上一篇：pc端思維導圖軟件，“高顏值”創意腦圖就是它
下一篇：帶翻轉特效的會員登錄注冊html頁面源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Flowable 外置的 HTML 表單怎么玩？

1. 外置表單

2. 流程部署

3. 流程開啟與執行

您的項目需求