德州建设信息网站,网站优化推广seo,房屋室内设计,网站开发人员薪酬文章目录新增一个节点属性新增一个package#xff1b;把我们新增的这个package添加节点属性中编写angularJS脚本在properties.js 配置模板#xff1b;编写js控制器配置引用后台配置解析我们的节点属性编写一个自定义的解析器bean的初始化spring定义bean项目地址#xff1a;h…
文章目录新增一个节点属性新增一个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\?\nsvg\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 \toryx:magnet oryx:cx“1” oryx:cy“20” oryx:anchors“left” /\n \toryx:magnet oryx:cx“1” oryx:cy“40” oryx:anchors“left” /\n \toryx:magnet oryx:cx“1” oryx:cy“60” oryx:anchors“left” /\n \t\n \toryx:magnet oryx:cx“25” oryx:cy“79” oryx:anchors“bottom” /\n \toryx:magnet oryx:cx“50” oryx:cy“79” oryx:anchors“bottom” /\n \toryx:magnet oryx:cx“75” oryx:cy“79” oryx:anchors“bottom” /\n \t\n \toryx:magnet oryx:cx“99” oryx:cy“20” oryx:anchors“right” /\n \toryx:magnet oryx:cx“99” oryx:cy“40” oryx:anchors“right” /\n \toryx:magnet oryx:cx“99” oryx:cy“60” oryx:anchors“right” /\n \t\n \toryx:magnet oryx:cx“25” oryx:cy“1” oryx:anchors“top” /\n \toryx:magnet oryx:cx“50” oryx:cy“1” oryx:anchors“top” /\n \toryx:magnet oryx:cx“75” oryx:cy“1” oryx:anchors“top” /\n \t\n \toryx:magnet oryx:cx“50” oryx:cy“40” oryx:default“yes” /\n /oryx:magnets\n g pointer-events“fill” oryx:minimumSize“50 40”\n\trect 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\trect 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\ttext \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\tg id“userTask” transform“translate(3,3)”\n\t\tpath 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\tg id“parallel”\n\t\tpath 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\tg id“sequential”\n\t\tpath oryx:anchors“bottom” fill“none” stroke#bbbbbb stroke-width“2” d“M46,76h10M46,72h10 M46,68h10”/\n\t\n\t\n\n\tg id“compensation”\n\t\tpath 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-controllerDragonNodetypeComboboxCtrlselect ng-inititem property.value ng-modelitem ng-changecomboValueChanged(item)ng-optionsitem.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(MapString, Class? extends BaseBpmnJsonConverter convertersToBpmnMap,MapClass? extends BaseElement, Class? extends BaseBpmnJsonConverter convertersToJsonMap) {fillJsonTypes(convertersToBpmnMap);fillBpmnTypes(convertersToJsonMap);}public static void setCustomTypes(MapString, Class? extends BaseBpmnJsonConverter convertersToBpmnMap,MapClass? extends BaseElement, Class? extends BaseBpmnJsonConverter convertersToJsonMap) {removeTypes(convertersToBpmnMap,convertersToJsonMap);fillTypes(convertersToBpmnMap,convertersToJsonMap);}public static void removeTypes(MapString, Class? extends BaseBpmnJsonConverter convertersToBpmnMap,MapClass? extends BaseElement, Class? extends BaseBpmnJsonConverter convertersToJsonMap) {convertersToJsonMap.remove(UserTask.class);convertersToBpmnMap.remove(StencilConstants.STENCIL_TASK_USER);}public static void fillJsonTypes(MapString, Class? extends BaseBpmnJsonConverter convertersToBpmnMap) {convertersToBpmnMap.put(STENCIL_TASK_USER, BruceUserTaskJsonConverter.class);}public static void fillBpmnTypes(MapClass? 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,MapString, JsonNode shapeMap) {UserTask flowElement (UserTask) super.convertJsonToElement(elementNode, modelNode, shapeMap);ListCustomProperty 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(){MapClass? extends BaseElement, Class? extends BaseBpmnJsonConverter convertersToJsonMap BpmnJsonConverter.convertersToJsonMap;MapString, Class? extends BaseBpmnJsonConverter convertersToBpmnMap BpmnJsonConverter.convertersToBpmnMap;//添加自定义的任务json转化器BruceUserTaskJsonConverter.setCustomTypes(convertersToBpmnMap, convertersToJsonMap);}}
spring定义bean
/*** 自定义节点属性初始化*/Beanpublic CustomPropertyInit createCustomPropertyInit() {return new CustomPropertyInit();}
