文章目錄

• • • • • 新增一個節點屬性
        • • 新增一個package；
          • 把我們新增的這個package添加節點屬性中
        • 編寫angularJS腳本
        • • 在properties.js 配置模板；
          • 編寫js控制器
          • 配置引用
        • 后臺配置解析我們的節點屬性
        • • 編寫一個自定義的解析器
          • bean的初始化
          • spring定義bean

項目地址：https://gitee.com/lwj/flowable.git 分支flowable-base
視頻地址：https://www.bilibili.com/video/av79774697/
業務場景：
在實際業務中，我們有可能對一些節點做一些控制，比方說流程到這個節點的時候，可以編輯表單的某些字段，進而進一步的審批流轉 。如何擴展系欸但的屬性呢，請看效果和實際擴展代碼。

效果如下：

flowable節點的自定義屬性擴展

新增一個節點屬性

新增一個package；

{"name": "nodetypepackage","properties": [{"id": "nodetype","type": "dragon-nodetype-combobox","title": "節點類型","value": "","description": "節點類型","popular": true}]}

把我們新增的這個package添加節點屬性中

{ “type” : “node”, “id” : “UserTask”, “title” : “\u7528\u6237\u4efb\u52a1”, “description” : “\u4efb\u52a1\u624b\u52a8\u5206\u914d\u7ed9\u4e00\u4e2a\u7279\u5b9a\u7684\u4eba”, “view” : “<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg\n xmlns=“http://www.w3.org/2000/svg”\n xmlns:svg=“http://www.w3.org/2000/svg”\n xmlns:oryx=“http://www.b3mn.org/oryx”\n xmlns:xlink=“http://www.w3.org/1999/xlink”\n\n width=“102”\n height=“82”\n version=“1.0”>\n \n oryx:magnets\n \t<oryx:magnet oryx:cx=“1” oryx:cy=“20” oryx:anchors=“left” />\n \t<oryx:magnet oryx:cx=“1” oryx:cy=“40” oryx:anchors=“left” />\n \t<oryx:magnet oryx:cx=“1” oryx:cy=“60” oryx:anchors=“left” />\n \t\n \t<oryx:magnet oryx:cx=“25” oryx:cy=“79” oryx:anchors=“bottom” />\n \t<oryx:magnet oryx:cx=“50” oryx:cy=“79” oryx:anchors=“bottom” />\n \t<oryx:magnet oryx:cx=“75” oryx:cy=“79” oryx:anchors=“bottom” />\n \t\n \t<oryx:magnet oryx:cx=“99” oryx:cy=“20” oryx:anchors=“right” />\n \t<oryx:magnet oryx:cx=“99” oryx:cy=“40” oryx:anchors=“right” />\n \t<oryx:magnet oryx:cx=“99” oryx:cy=“60” oryx:anchors=“right” />\n \t\n \t<oryx:magnet oryx:cx=“25” oryx:cy=“1” oryx:anchors=“top” />\n \t<oryx:magnet oryx:cx=“50” oryx:cy=“1” oryx:anchors=“top” />\n \t<oryx:magnet oryx:cx=“75” oryx:cy=“1” oryx:anchors=“top” />\n \t\n \t<oryx:magnet oryx:cx=“50” oryx:cy=“40” oryx:default=“yes” />\n </oryx:magnets>\n <g pointer-events=“fill” oryx:minimumSize=“50 40”>\n\t<rect id=“text_frame” oryx:anchors=“bottom top right left” x=“1” y=“1” width=“94” height=“79” rx=“10” ry=“10” stroke=“none” stroke-width=“0” fill=“none” />\n\t<rect id=“bg_frame” oryx:resize=“vertical horizontal” x=“0” y=“0” width=“100” height=“80” rx=“10” ry=“10” stroke=”#bbbbbb" stroke-width=“1” fill="#f9f9f9" />\n\t\t<text \n\t\t\tfont-size=“12” \n\t\t\tid=“text_name” \n\t\t\tx=“50” \n\t\t\ty=“40” \n\t\t\toryx:align=“middle center”\n\t\t\toryx:fittoelem=“text_frame”\n\t\t\tstroke="#373e48">\n\t\t\n\t\n\t<g id=“userTask” transform=“translate(3,3)”>\n\t\t<path oryx:anchors=“top left”\n \t\tstyle=“fill:#d1b575;stroke:none;”\n \t\t d=“m 1,17 16,0 0,-1.7778 -5.333332,-3.5555 0,-1.7778 c 1.244444,0 1.244444,-2.3111 1.244444,-2.3111 l 0,-3.0222 C 12.555557,0.8221 9.0000001,1.0001 9.0000001,1.0001 c 0,0 -3.5555556,-0.178 -3.9111111,3.5555 l 0,3.0222 c 0,0 0,2.3111 1.2444443,2.3111 l 0,1.7778 L 1,15.2222 1,17 17,17” \n />\n\t\t\n\t\n \n\t<g id=“parallel”>\n\t\t<path oryx:anchors=“bottom” fill=“none” stroke="#bbbbbb" d=“M46 70 v8 M50 70 v8 M54 70 v8” stroke-width=“2” />\n\t\n\t\n\t<g id=“sequential”>\n\t\t<path oryx:anchors=“bottom” fill=“none” stroke="#bbbbbb" stroke-width=“2” d=“M46,76h10M46,72h10 M46,68h10”/>\n\t\n\t\n\n\t<g id=“compensation”>\n\t\t<path oryx:anchors=“bottom” fill=“none” stroke="#bbbbbb" d=“M 62 74 L 66 70 L 66 78 L 62 74 L 62 70 L 58 74 L 62 78 L 62 74” stroke-width=“1” />\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

后臺配置解析我們的節點屬性

編寫一個自定義的解析器

記住一定要繼承UserTaskJsonConverter

public class BruceUserTaskJsonConverter extends UserTaskJsonConverter {public static void fillTypes(Map<String, Class<? extends BaseBpmnJsonConverter>> convertersToBpmnMap,Map<Class<? extends BaseElement>, Class<? extends BaseBpmnJsonConverter>> convertersToJsonMap) {fillJsonTypes(convertersToBpmnMap);fillBpmnTypes(convertersToJsonMap);}public static void setCustomTypes(Map<String, Class<? extends BaseBpmnJsonConverter>> convertersToBpmnMap,Map<Class<? extends BaseElement>, Class<? extends BaseBpmnJsonConverter>> convertersToJsonMap) {removeTypes(convertersToBpmnMap,convertersToJsonMap);fillTypes(convertersToBpmnMap,convertersToJsonMap);}public static void removeTypes(Map<String, Class<? extends BaseBpmnJsonConverter>> convertersToBpmnMap,Map<Class<? extends BaseElement>, Class<? extends BaseBpmnJsonConverter>> convertersToJsonMap) {convertersToJsonMap.remove(UserTask.class);convertersToBpmnMap.remove(StencilConstants.STENCIL_TASK_USER);}public static void fillJsonTypes(Map<String, Class<? extends BaseBpmnJsonConverter>> convertersToBpmnMap) {convertersToBpmnMap.put(STENCIL_TASK_USER, BruceUserTaskJsonConverter.class);}public static void fillBpmnTypes(Map<Class<? extends BaseElement>, Class<? extends BaseBpmnJsonConverter>> convertersToJsonMap) {convertersToJsonMap.put(UserTask.class, BruceUserTaskJsonConverter.class);}@Overridepublic 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);}@Overrideprotected FlowElement convertJsonToElement(JsonNode elementNode, JsonNode modelNode,Map<String, JsonNode> shapeMap) {UserTask flowElement = (UserTask) super.convertJsonToElement(elementNode, modelNode, shapeMap);List<CustomProperty> 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<? extends BaseElement>, Class<? extends BaseBpmnJsonConverter>> convertersToJsonMap = BpmnJsonConverter.convertersToJsonMap;Map<String, Class<? extends BaseBpmnJsonConverter>> convertersToBpmnMap = BpmnJsonConverter.convertersToBpmnMap;//添加自定義的任務json轉化器BruceUserTaskJsonConverter.setCustomTypes(convertersToBpmnMap, convertersToJsonMap);}}

spring定義bean

/*** 自定義節點屬性初始化*/@Beanpublic CustomPropertyInit createCustomPropertyInit() {return new CustomPropertyInit();}

總結

以上是生活随笔為你收集整理的flowable节点的自定义属性扩展_03的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。