Flowable 外置的 HTML 表單怎么玩？

篇文章我們一起學(xué)習(xí)了 Flowable 中的動(dòng)態(tài)表單，動(dòng)態(tài)表單說白了就是把變量打包定義，零存整取。但是小伙伴們可能很難實(shí)實(shí)在在 GET 到動(dòng)態(tài)表單一些有創(chuàng)造性的功能，所以今天我們就來繼續(xù)看看 Flowable 中的外置表單怎么玩，這個(gè)跟動(dòng)態(tài)表單有一些本質(zhì)上的差別。

1. 外置表單

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

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

現(xiàn)在假設(shè)我有如下一個(gè)請(qǐng)假流程：

在開始節(jié)點(diǎn)中，我們需要一個(gè)表單來輸入用戶提交的請(qǐng)假信息，在組長(zhǎng)審批和經(jīng)理審批這兩個(gè)節(jié)點(diǎn)中我們希望能夠看到用戶提交的請(qǐng)假信息，那么我們準(zhǔn)備兩個(gè)表單文件，第一個(gè)是提交請(qǐng)假信息的表單文件 askleave.html：

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

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

還有一個(gè)是查看用戶提交的請(qǐng)假信息的表單 leader_approval.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <table>
        <tr>
            <td>請(qǐng)假天數(shù)：</td>
            <td><input type="text" name="days" value="${days}"></td>
        </tr>
        <tr>
            <td>請(qǐng)假理由：</td>
            <td><input type="text" name="reason" value="${reason}"></td>
        </tr>
        <tr>
            <td>起始時(shí)間：</td>
            <td><input type="date" name="startTime" value="${startTime}"></td>
        </tr>
        <tr>
            <td>結(jié)束時(shí)間：</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 文件中，各個(gè)表單屬性只是多了 value 屬性而已，value 給了一個(gè)預(yù)填的變量，其他都是一樣的。

兩個(gè)表單文件定義完成之后，接下來我們?yōu)槲覀兊牧鞒虂砼渲眠@兩個(gè)表單文件，如下圖，為開始節(jié)點(diǎn)設(shè)置表單 key 為 askforleave.html，為組長(zhǎng)審批和經(jīng)理審批節(jié)點(diǎn)設(shè)置表單 key 為 leader_approval.html：

另：在 Spring Boot 項(xiàng)目中，外置表單默認(rèn)放在 resources/forms 目錄下，也就是說，凡是放在這個(gè)目錄下的表單文件，會(huì)被自動(dòng)部署（要求文件后綴為 .form）。

好啦，這樣我們的流程圖就準(zhǔn)備完成了。

2. 流程部署

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

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

@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());
    }
}

小伙伴們看到，這里我將上傳文件改為了數(shù)組，也就是流程圖、form 表單等統(tǒng)統(tǒng)都以文件的形式上傳，然后在部署的時(shí)候，統(tǒng)一都調(diào)用 addInputStream 方法進(jìn)行添加。

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

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

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

3. 流程開啟與執(zhí)行

在流程開啟之前，我們首先可以通過如下方式查詢啟動(dòng)節(jié)點(diǎn)上的表單內(nèi)容：

@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);
}

控制臺(tái)輸出的內(nèi)容如下：

可以看到，表單的內(nèi)容就被輸出來了。

如果我們這里是一個(gè) Web 工程，那么可以通過 Ajax 來請(qǐng)求到這個(gè)表單數(shù)據(jù)，并動(dòng)態(tài)渲染到前端，然后在前端輸入對(duì)應(yīng)的值，點(diǎn)擊提交按鈕，就可以在服務(wù)端開啟一個(gè)流程了。

服務(wù)端開啟流程方式如下：

@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);
}

調(diào)用 submitStartFormData 方法來開啟一個(gè)流程，我這里參數(shù)直接硬編碼了。

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

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

小伙伴們注意，這個(gè) getRenderedTaskForm 方法只有外置表單才有，動(dòng)態(tài)表單調(diào)用這個(gè)方法是沒有東西的，因?yàn)閯?dòng)態(tài)表單單純的就只是變量的傳遞，不涉及到渲染問題，我們來看下這里打印出來的結(jié)果：

小伙伴們看到，和前面的表單相比，這里的表單都渲染出來了對(duì)應(yīng)的值。如果這是一個(gè) Web 項(xiàng)目，那么我們就可以使用 Ajax 請(qǐng)求這個(gè)渲染后的表單，并展示在前端頁面。當(dāng)然實(shí)際審批中，這里可以有更多的字段，組長(zhǎng)填完之后，進(jìn)入到下一個(gè)環(huán)節(jié)。

zhangsan 進(jìn)行流程審批的代碼如下：

@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 方法進(jìn)行審批，也可以使用 taskService.complete 方法進(jìn)行審批。

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

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

arsley.js

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

quickValidation.js

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

jQuery番茄醬插件

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

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

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

jQuery驗(yàn)證插件

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

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

IV.js – Javascript輸入驗(yàn)證

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

jQuery驗(yàn)證引擎

當(dāng)涉及到j(luò)Query Validation Engine時(shí)，您不必?fù)?dān)心表單的結(jié)構(gòu)，因?yàn)樵摬寮?huì)創(chuàng)建一個(gè)錯(cuò)誤，DIV并將其放置在指定輸入的右上角，從而使表單代碼和驗(yàn)證分開。Phis可能是本文中最簡(jiǎn)單的驗(yàn)證解決方案。

BootstrapValidator

BootstrapValidator是一個(gè)用于驗(yàn)證Bootstrap表單的jQuery插件。

監(jiān)護(hù)人

Guardian是一個(gè)靈活且易于擴(kuò)展的通用表單驗(yàn)證jQuery插件。

驗(yàn)證碼

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

在可能的情況下，Validatr將使用本機(jī)驗(yàn)證，并使用Modernizr來測(cè)試支持。如果不支持輸入類型，它將使用它自己的規(guī)則集來補(bǔ)充本機(jī)驗(yàn)證。在兩種情況下，都會(huì)顯示驗(yàn)證消息。

Formance.js

Formance.js是一個(gè)基于Stripe的jQuery.payment庫并受其啟發(fā)的用于格式化和驗(yàn)證表單字段的庫。

Fields.js

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

jQuery驗(yàn)證

jQuery Validate是一個(gè)jQuery插件，可幫助您使用數(shù)據(jù)屬性輕松而快速地完成表單驗(yàn)證。

jQuery表單驗(yàn)證

jQuery Form Validate是另一個(gè)jQuery插件，可讓您通過從應(yīng)用于每個(gè)輸入的HTML 5數(shù)據(jù)屬性中獲取驗(yàn)證規(guī)則來驗(yàn)證HTML表單。

一審

單驗(yàn)證是用于一般驗(yàn)證目的的正則表達(dá)式的集合。為了進(jìn)行驗(yàn)證，它將正則表達(dá)式分成模式的語義部分。

Validarium

Validarium是一個(gè)基于jQuery Validate的簡(jiǎn)單直接的jQuery驗(yàn)證插件。

驗(yàn)證準(zhǔn)系統(tǒng)驗(yàn)證

從名稱本身可以明顯看出，Validate Barebones Validation是一個(gè)可配置和可擴(kuò)展的準(zhǔn)系統(tǒng)jQuery驗(yàn)證插件。

nextVal

nextVal是jQuery的客戶端表單驗(yàn)證插件。

jQuery Super Labels插件

在jQuery的超級(jí)標(biāo)貼插件獲得焦點(diǎn)淡出輸入一個(gè)值時(shí)，當(dāng)使整個(gè)油田的標(biāo)簽幻燈片。

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

單標(biāo)簽

常見的語句：

form：表單標(biāo)簽格式

作用：用來收集用戶輸入信息如：登入、注冊(cè)、搜索商品等
action：開始網(wǎng)址
method：get和post等等
text （明文）：用戶名格式
password ：（密文）密碼
radio ：?jiǎn)芜x框性別格式性別是單選,單選類型是radio,注意name要加上sex
checkbox：復(fù)選框
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>學(xué)歷

</select>

</p>

</p>

</form>

</body>

</html>

在線咨詢

上一篇：pc端思維導(dǎo)圖軟件，“高顏值”創(chuàng)意腦圖就是它
下一篇：帶翻轉(zhuǎn)特效的會(huì)員登錄注冊(cè)html頁面源碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

Flowable 外置的 HTML 表單怎么玩？

1. 外置表單

2. 流程部署

3. 流程開啟與執(zhí)行

您的項(xiàng)目需求