Flowable自定义表单组件｜胡萝虎记录个人日常,NAS

最近在使用Flowable做工作流相关的项目，其中涉及到流程表单的设计。Flowable自带的表单设计器支持的组件类型只有常用的几个Input组件和一些样式组件，而在具体项目中需要用的特殊组件就不支持了，需要进行自定义。

Flowable

准备

自定义表单组件主要涉及Modeler设计器中的页面，具体包含以下文件：

scripts/controllers/form-bulder.js
views/templates/form-builder-element-template.html
i18n/zh-CN.js (这个是国际化文件，可以根据自己使用的语言进行选择)
scripts/services/editor-directives.js
views/popover/formfield-edit-popover.html
images目录

开始

以下以自定义订单详情组件为例进行演示：

首选，打开scripts/controllers/form-bulder.js文件，找到$scope.palletteElements代码的地方，在数组的最后增加一项:
{'type': 'order-detail', 'title': $translate.instant('FORM-BUILDER.PALLETTE.ORDER-DETAIL'), 'icon': 'images/form-builder/order-detail.png', 'width':1}
其中，type表示组件类型，icon表示图标，需要先把图片放到images目录中；'title': $translate.instant('FORM-BUILDER.PALLETTE.ORDER-DETAIL')表示组件在页面中显示的名称，需要在i18n文件中配置

打开views/templates/form-builder-element-template.html，在最后增加一个div，可以参考上面的进行修改

<div ng-switch-when="order-detail" class="form-group">
       <label class="control-label form-field-label">{{formElement.name}} <span class="marker" ng-if="formElement.required">*</span></label>
       <div class="input-group">
           <span class="input-group-addon"></span>
           <input type="text" class="form-control" style="cursor:default;background-color:#fff;" placeholder="{{'FORM-BUILDER.LABEL.ORDER' | translate}}" value="{{formElement.placeholder}}" disabled>
       </div>
   </div>

其中，ng-switch-when="order-detail"表示组件的类型，placeholder="{{'FORM-BUILDER.LABEL.ORDER' | translate}}"表示组件的placeholder值，需要在i18n文件中配置，其他的元素按需配置。

接下来就是配置i18n文件，由于我使用的是中文，所以配置zh-CN.json文件
- 在FORM-BUILDER–PALLETTE增加一个节点：ORDER-DETAIL:"订单详情"
- 在FORM-BUILDER–LABEL增加一个节点：ORDER:"选择订单..."
- 将订单详情组件的icon图片文件放到images目录

如果需要对组件增加选项，比如是否选择多个等，需要在以下文件里配置：

1）打开 views/popover/formfield-edit-popover.html，参考其他组件，在其下面增加以下代码

<div ng-if="activeTab.id == 'custom-option' && formElement.type === 'order'">
                   <div class="form-group">
                       <div class="checkbox">
                           <label>
                               <input type="checkbox" ng-model="formElement.params.multiple">
                               {{'FORM-BUILDER.COMPONENT.SELECT-ALLOW-MULTIPLE' | translate}}
                           </label>
                       </div>
                   </div>
               </div>