03 flowable节点的自定义属性扩展

项目地址：https://gitee.com/lwj/flowable.git 分支flowable-base
视频地址：https://www.bilibili.com/video/av79774697/
业务场景：
在实际业务中，我们有可能对一些节点做一些控制，比方说流程到这个节点的时候，可以编辑表单的某些字段，进而进一步的审批流转 。如何扩展系欸但的属性呢，请看效果和实际扩展代码。

效果如下：

新增一个节点属性

修改stencilset_bpmn.json 添加一个package；

{
      "name": "nodetypepackage",
      "properties": [
        {
          "id": "nodetype",
          "type": "dragon-nodetype-combobox",
          "title": "节点类型",
          "value": "",
          "description": "节点类型",
          "popular": true
        }
      ]
    }

在 stencilset_bpmn.json找到UserTask这个节点信息

{
“type” : “node”,
“id” : “UserTask”,
“title” : “\u7528\u6237\u4efb\u52a1”,
“description” : “\u4efb\u52a1\u624b\u52a8\u5206\u914d\u7ed9\u4e00\u4e2a\u7279\u5b9a\u7684\u4eba”,
“view” : “\n\n \n oryx:magnets\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \t\n \n \n\t\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\n \n\t\n\t\t\n\t\n\t\n\t\n\t\t\n\t\n\t\n\n\t\n\t\t\n\t\n \n",
“icon” : “activity/list/type.user.png”,
“groups” : [ “\u4efb\u52a1” ],
“propertyPackages” : [ “overrideidpackage”, “namepackage”, “documentationpackage”, “asynchronousdefinitionpackage”, “exclusivedefinitionpackage”, “executionlistenerspackage”, “multiinstance_typepackage”, “multiinstance_cardinalitypackage”, “multiinstance_collectionpackage”, “multiinstance_variablepackage”, “multiinstance_conditionpackage”, “isforcompensationpackage”, “usertaskassignmentpackage”, “formkeydefinitionpackage”, “formreferencepackage”, “duedatedefinitionpackage”, “prioritydefinitionpackage”, “formpropertiespackage”, “tasklistenerspackage”, “skipexpressionpackage”,“nodetypepackage” ],
“hiddenPropertyPackages” : [ ],
“roles” : [ “Activity”, “sequence_start”, “sequence_end”, “ActivitiesMorph”, “all” ]
}

编写angularJS脚本

在properties.js 配置模板；

 "dragon-nodetype-combobox": {
        "readModeTemplateUrl": "editor-app/configuration/properties/dragonnodetype-combobox-value-template.html",
        "writeModeTemplateUrl": "editor-app/configuration/properties/dragonnodetype-combobox-property-write-template.html"
    }

模板的内容

dragonnodetype-combobox-value-template.html 内容为：

<span>{{property.text}}</span>

dragonnodetype-combobox-property-write-template.html 内容为

 <div ng-controller="DragonNodetypeComboboxCtrl">
    <select ng-init="item = property.value" ng-model="item" ng-change="comboValueChanged(item)"
            ng-options="item.sn as item.name for item in nodeTypes">
    </select>
</div>

编写js控制器

properties-dragon-combobox-controller.js

angular.module('flowableModeler').controller('DragonNodetypeComboboxCtrl',
    [ '$scope', '$modal', '$http', function($scope, $modal, $http) {
        if ($scope.property.value == undefined && $scope.property.value == null) {
            $scope.property.value = '';
        }
        //请求数据
        //url 你可以请求你后台的rest接口来获取数据对象
        $http({
            method: 'GET',
            url: FLOWABLE.URL.getNodeProertyInfos('node_type')
        }).then(function successCallback(response) {
            $scope.nodeTypes = response.data.data;
        }, function errorCallback(response) {
            // 请求失败执行代码
        });
        $scope.comboValueChanged = function (item) {
            $scope.property.value = item;
            for (var i = 0; i < $scope.nodeTypes.length; i++) {
                if ($scope.nodeTypes[i].sn == item) {
                    $scope.property.text = $scope.nodeTypes[i].name;
                }
            }
            $scope.updatePropertyInModel($scope.property);
        };
    }]);

配置引用

在index.html中加入自定的js

<script src="editor-app/configuration/properties-dragon-combobox-controller.js" type="text/javascript"></script>

后台配置解析我们的节点属性

编写一个自定义的解析器

记住一定要继承UserTaskJsonConverter

public class BruceUserTaskJsonConverter extends UserTaskJsonConverter {

    public static void fillTypes(Map> convertersToBpmnMap,
                                 Map, Class> convertersToJsonMap) {
        fillJsonTypes(convertersToBpmnMap);
        fillBpmnTypes(convertersToJsonMap);
    }

    public static void setCustomTypes(Map> convertersToBpmnMap,
                                 Map, Class> convertersToJsonMap) {
        removeTypes(convertersToBpmnMap,convertersToJsonMap);
        fillTypes(convertersToBpmnMap,convertersToJsonMap);
    }

    public static void removeTypes(Map> convertersToBpmnMap,
                                   Map, Class> convertersToJsonMap) {
        convertersToJsonMap.remove(UserTask.class);
        convertersToBpmnMap.remove(StencilConstants.STENCIL_TASK_USER);
    }

    public static void fillJsonTypes(Map> convertersToBpmnMap) {
        convertersToBpmnMap.put(STENCIL_TASK_USER, BruceUserTaskJsonConverter.class);
    }

    public static void fillBpmnTypes(
            Map, Class> convertersToJsonMap) {
        convertersToJsonMap.put(UserTask.class, BruceUserTaskJsonConverter.class);
    }

    @Override
    public void convertToJson(BaseElement baseElement, ActivityProcessor processor, BpmnModel model, FlowElementsContainer container, ArrayNode shapesArrayNode, double subProcessX, double subProcessY){
        super.convertToJson(baseElement, processor, model, container, shapesArrayNode, subProcessX, subProcessY);
    }

    @Override
    protected FlowElement convertJsonToElement(JsonNode elementNode, JsonNode modelNode,
                                               Map shapeMap) {
        UserTask flowElement = (UserTask) super.convertJsonToElement(elementNode, modelNode, shapeMap);
        List customProperties = new ArrayList<>();
        // 扩展 节点类型
        String nodetype = getPropertyValueAsString(FlowConstant.NODE_TYPE, elementNode);
        if (StringUtils.isNotBlank(nodetype)) {
            CustomProperty nodeType = this.createProperty(FlowConstant.NODE_TYPE, nodetype);
            customProperties.add(nodeType);
        }
        if (CollectionUtils.isNotEmpty(customProperties)) {
            flowElement.setCustomProperties(customProperties);
        }
        return flowElement;
    }

    /**
     * 创建自定义属性
     *
     * @param propertyName  属性名称
     * @param propertyValue 属性值
     */
    private CustomProperty createProperty(String propertyName, String propertyValue) {
        CustomProperty customProperty = new CustomProperty();
        customProperty.setId(propertyName);
        customProperty.setName(propertyName);
        customProperty.setSimpleValue(propertyValue);
        return customProperty;
    }
}

bean的初始化

public class CustomPropertyInit {

    public CustomPropertyInit(){
        Map, Class> convertersToJsonMap = BpmnJsonConverter.convertersToJsonMap;
        Map> convertersToBpmnMap = BpmnJsonConverter.convertersToBpmnMap;
        //添加自定义的任务json转化器
        BruceUserTaskJsonConverter.setCustomTypes(convertersToBpmnMap, convertersToJsonMap);
    }

}

spring定义bean

/**
     * 自定义节点属性初始化
     */
    @Bean
    public CustomPropertyInit createCustomPropertyInit() {
        return new CustomPropertyInit();
    }