关于继续做好网站建设得通知,政务公开和网站建设,大学生做网站和做app,docker实际企业解决方案概述 由于工作需要给flowable工作流设计器添加自定义属性#xff0c;以满足功能实现。所以这篇文章介绍下用flowable 开源的的flowable-ui 前端添加自定义属性#xff0c;后端解析属性值的例子。
技术栈
序号技术点名称版本1Flowable6.8.0
使用的是flowable6.8.0 版的代码…概述 由于工作需要给flowable工作流设计器添加自定义属性以满足功能实现。所以这篇文章介绍下用flowable 开源的的flowable-ui 前端添加自定义属性后端解析属性值的例子。
技术栈
序号技术点名称版本1Flowable6.8.0
使用的是flowable6.8.0 版的代码
GitHub - flowable/flowable-engine at flowable-release-6.8.0https://github.com/flowable/flowable-engine/tree/flowable-release-6.8.0然后依照下面链接启动flowable-ui项目
手把手教大家编译 flowable 源码-腾讯云开发者社区-腾讯云松哥最近正在录制 TienChin 项目视频采用 Spring BootVue3 技术栈里边会涉及到各种好玩的技术小伙伴们来和松哥一起做一个完成率超 90% 的项目戳戳戳这里--TienChin 项目配套视频来啦。----要说这个编译源码其实没什么技术含量但是由于国内的网络问题Spring 等各种常...https://cloud.tencent.com/developer/article/2108059
添加flowable-ui前端属性
添加boolean 属性
找到flowable-engine-flowable-6.8.0\modules\flowable-ui\flowable-ui-modeler-logic\src\main\resources\stencilset_bpmn.json 路径文件 这个json 就是设计器的所有内容
\flowable-engine-flowable-6.8.0\modules\flowable-ui\flowable-ui-modeler-frontend\src\main\resources\static\modeler\i18n\zh-CN.json 文件是汉化文件
下面是stencilset_bpmn.json 的文件格式
{title: BPMN 2.0标准工具,namespace: http://b3mn.org/stencilset/bpmn2.0#,description: BPMN process editor,propertyPackages: [{name: overrideidpackage,properties: [{id: overrideid,type: String,title: Id,value: ,description: 元素的唯一标识.,popular: true}]}, {name: namepackage,properties: [{id: name,type: String,title: 名称,value: ,description: BPMN元素的描述名称.,popular: true,refToView: text_name}]}],stencils: [{type: node,id: UserTask,title: 用户活动,description: 分配给特定人的任务 ,view: 此处代码已省略请查看本书配套资源内容,groups: [活动列表],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],hiddenPropertyPackages: [],roles: [Activity, sequence_start, sequence_end, ActivitiesMorph, all]}]
}
从以上配置文件内容中可以看出最顶层有五个元素title,namespace,description,
propertyPackages和stencils分别代表标题命名空间描述属性集合节点属性其中
propertyPackages表示的是设计器下栏的各个属性。通过propertyPackages 可以设置属性的名称样式字段类型。 type 对应的是当前属性的类型和flowable-engine-flowable-6.8.0\modules\flowable-ui\flowable-ui-modeler-frontend\src\main\resources\static\modeler\editor-app\configuration\properties.js
里面的内容一一对应
stencils.propertyPackages 的值可以表示哪些活动使用哪些属性。
第一步添加允许催办属性 第二步将允许催办属性添加到用户属性下 第三步重启服务
就可以看到用户任务下有允许催办属性了。 添加下拉框样式属性
上面我们完成了通过设置type 为boolean添加允许催办属性那么string,text属性大家也都可以在properties.js 文件中看到按需添加即可。
如果是添加下拉框属性我们可以仿照多实例的下拉框属性实现。 第一步在stencilset_bpmn.json 文件的propertyPackages 下添加下拉属性的内容
,{name : usertaskovertimehandlertypepackage,properties : [{id :overtimehandlertype,type : fd-overtimehandlertype,title : 逾期处理方式,value : 0,description : 逾期处理方式,popular : true}]}
注意id 和type 我们去properties.js 文件下添加该类
第二步在properties.js 文件下添加类型
注意1properties.js 文件下的自定义名称为: oryx-上面的id-上面的type
注意2不要用驼峰格式命名。 第三步定义html
这些步骤我都是抄多实例怎么实现的。 下面是html 的下拉框格式ng-controller 是用的angular.js 语言 下面红框里的内容我们自己定义 第四步定义js 文件
在 flowable-engine-flowable-6.8.0\modules\flowable-ui\flowable-ui-modeler-frontend\src\main\resources\static\modeler\index.html 文件下设置自定义的js路径 下面图片是js的内容注意除默认值外其他两个字段需要和第二步html 里的值保持一致。 第五步重启服务
重启服务就可以看到flowable-ui 界面上出现下拉框的属性了。如果是其他样式的属性可以借鉴flowable-ui 中相同的样式是如何实现的。
后端添加自定义属性解析处理类
第一步定义UserTaskJsonConverter实现类
package org.flowable.ui.application.converter;import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.node.ObjectNode;
import org.flowable.bpmn.constants.BpmnXMLConstants;
import org.flowable.bpmn.model.*;
import org.flowable.editor.language.json.converter.BaseBpmnJsonConverter;
import org.flowable.editor.language.json.converter.BpmnJsonConverterContext;
import org.flowable.editor.language.json.converter.UserTaskJsonConverter;import java.util.List;
import java.util.Map;/*** author admin*/
public class CustomUserTaskJsonConverter extends UserTaskJsonConverter {/*** 用户任务类型*/public static final String ACTIVE_TYPE activetype;/*** 允许撤回*/public static final String ALLOW_RECALL allowrecall;/*** 允许终止*/public static final String ALLOW_STOP allowstop;/*** 允许跳过*/public static final String ALLOW_SKIP allowskip;/*** 允许修改下一个节点参与者*/public static final String ALLOW_UPDATE_NEXT_ONE allowupdatenextone;/*** 允许修改后续节点参与者*/public static final String ALLOW_UPDATE_NEXT_ALL allowupdatenextall;/*** 允许上传附件*/public static final String ALLOW_UPLOAD allowupload;/*** 工作期限单位:天*/public static final String LIMIT_TIME limittime;/*** 逾期处理方式*/public static final String OVER_TIME_HANDLER_TYPE overtimehandlertype;/*** 预警提醒逾期前天数*/public static final String OVER_TIME_WARN_TIME overtimewarntime;/*** 预警提醒逾期前天数*/public static final String CIRCULATION_WARN_TIME circulationwarntime;Overrideprotected void convertElementToJson(ObjectNode propertiesNode, BaseElement baseElement, BpmnJsonConverterContext converterContext) {super.convertElementToJson(propertiesNode, baseElement, converterContext);UserTask userTask (UserTask) baseElement;//解析MapString, ListExtensionElement extensionElements userTask.getExtensionElements();if(extensionElements ! null extensionElements.containsKey(ACTIVE_TYPE)){ExtensionElement e extensionElements.get(ACTIVE_TYPE).get(0);setPropertyValue(ACTIVE_TYPE, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(ALLOW_RECALL)){ExtensionElement e extensionElements.get(ALLOW_RECALL).get(0);setPropertyValue(ALLOW_RECALL, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(ALLOW_STOP)){ExtensionElement e extensionElements.get(ALLOW_STOP).get(0);setPropertyValue(ALLOW_STOP, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(ALLOW_SKIP)){ExtensionElement e extensionElements.get(ALLOW_SKIP).get(0);setPropertyValue(ALLOW_SKIP, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(ALLOW_UPDATE_NEXT_ONE)){ExtensionElement e extensionElements.get(ALLOW_UPDATE_NEXT_ONE).get(0);setPropertyValue(ALLOW_UPDATE_NEXT_ONE, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(ALLOW_UPDATE_NEXT_ALL)){ExtensionElement e extensionElements.get(ALLOW_UPDATE_NEXT_ALL).get(0);setPropertyValue(ALLOW_UPDATE_NEXT_ALL, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(ALLOW_UPLOAD)){ExtensionElement e extensionElements.get(ALLOW_UPLOAD).get(0);setPropertyValue(ALLOW_UPLOAD, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(LIMIT_TIME)){ExtensionElement e extensionElements.get(LIMIT_TIME).get(0);setPropertyValue(LIMIT_TIME, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(OVER_TIME_HANDLER_TYPE)){ExtensionElement e extensionElements.get(OVER_TIME_HANDLER_TYPE).get(0);setPropertyValue(OVER_TIME_HANDLER_TYPE, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(OVER_TIME_WARN_TIME)){ExtensionElement e extensionElements.get(OVER_TIME_WARN_TIME).get(0);setPropertyValue(OVER_TIME_WARN_TIME, e.getElementText(), propertiesNode);}if(extensionElements ! null extensionElements.containsKey(CIRCULATION_WARN_TIME)){ExtensionElement e extensionElements.get(CIRCULATION_WARN_TIME).get(0);setPropertyValue(CIRCULATION_WARN_TIME, e.getElementText(), propertiesNode);}}Overrideprotected FlowElement convertJsonToElement(JsonNode elementNode, JsonNode modelNode, MapString, JsonNode shapeMap, BpmnJsonConverterContext converterContext) {FlowElement flowElement super.convertJsonToElement(elementNode, modelNode, shapeMap, converterContext);UserTask userTask (UserTask) flowElement;//解析自定义扩展属性this.addExtansionPropertiesElement(userTask,elementNode,ACTIVE_TYPE);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_RECALL);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_STOP);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_SKIP);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_UPDATE_NEXT_ONE);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_UPDATE_NEXT_ALL);this.addExtansionPropertiesElement(userTask,elementNode,ALLOW_UPLOAD);this.addExtansionPropertiesElement(userTask,elementNode,LIMIT_TIME);this.addExtansionPropertiesElement(userTask,elementNode,OVER_TIME_HANDLER_TYPE);this.addExtansionPropertiesElement(userTask,elementNode,OVER_TIME_WARN_TIME);this.addExtansionPropertiesElement(userTask,elementNode,CIRCULATION_WARN_TIME);return userTask;}private void addExtansionPropertiesElement(UserTask userTask, JsonNode elementNode, String name) {ExtensionElement extensionElement new ExtensionElement();extensionElement.setName(name);//BpmnXMLConstants.FLOWABLE_EXTENSIONS_PREFIXextensionElement.setNamespacePrefix(model);extensionElement.setNamespace(BpmnXMLConstants.FLOWABLE_EXTENSIONS_NAMESPACE);String customProperties getPropertyValueAsString(name, elementNode);extensionElement.setElementText(customProperties);userTask.addExtensionElement(extensionElement);}public static void fillTypes(MapString, Class? extends BaseBpmnJsonConverterconvertersToBpmnMap, MapClass? extends BaseElement, Class? extendsBaseBpmnJsonConverter convertersToJsonMap) {fillJsonTypes(convertersToBpmnMap);fillBpmnTypes(convertersToJsonMap);}public static void fillJsonTypes(MapString, Class? extends BaseBpmnJsonConverterconvertersToBpmnMap) {convertersToBpmnMap.put(STENCIL_TASK_USER, CustomUserTaskJsonConverter.class);}public static void fillBpmnTypes(MapClass? extends BaseElement, Class? extendsBaseBpmnJsonConverter convertersToJsonMap) {convertersToJsonMap.put(UserTask.class, CustomUserTaskJsonConverter.class);}}
第二步定义BpmnJsonConverter实现类
package org.flowable.ui.application.converter;import org.flowable.editor.language.json.converter.BpmnJsonConverter;/*** author admin*/public class CustomBpmnJsonConverter extends BpmnJsonConverter {static {//这里可以加入所有自定义的属性内容convertersToBpmnMap.put(STENCIL_TASK_USER, CustomUserTaskJsonConverter.class);}}
第三步解析json 转成Bpmn
package org.flowable.ui.application;import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.extern.slf4j.Slf4j;
import org.flowable.bpmn.converter.BpmnXMLConverter;
import org.flowable.bpmn.model.BpmnModel;
import org.flowable.bpmn.model.ExtensionElement;
import org.flowable.bpmn.model.FlowElement;
import org.flowable.bpmn.model.Process;
import org.flowable.bpmn.model.UserTask;
import org.flowable.editor.language.json.converter.BpmnJsonConverter;
import org.flowable.editor.language.json.converter.util.CollectionUtils;
import org.flowable.ui.application.converter.CustomBpmnJsonConverter;
import org.junit.jupiter.api.Test;import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;Slf4j
public class RunCustomJsonConverterDemo {Testpublic void runCustomJsonConverterDemo() throws Exception {//读取Flowable Modeler保存的JsonInputStream processModelJsonInputStream getClass().getClassLoader().getResourceAsStream(model-json/model.json);ObjectMapper mapper new ObjectMapper();JsonNode processJsonNode mapper.readTree(processModelJsonInputStream);//获取流程模型的Json//使用自定义转换类由Json转换为BpmnModel对象BpmnJsonConverter bpmnJsonConverter new CustomBpmnJsonConverter();BpmnModel bpmnModel bpmnJsonConverter.convertToBpmnModel(processJsonNode);Process mainProcess bpmnModel.getMainProcess();UserTask userTask (UserTask) mainProcess.getFlowElement(sid-DA2AB9F9-3CB2-40C5-945B-95B6DADFA1E1);//查询用户任务对象并打印属性MapString, ListExtensionElement extensionElements userTask.getExtensionElements();ListExtensionElement allowurgingExtension extensionElements.get(allowrecall);if (CollectionUtils.isNotEmpty(allowurgingExtension)) {log.info(扩展属性activetype值为{}, allowurgingExtension.get(0).getElementText());}byte[] bpmnBytes new BpmnXMLConverter().convertToXML(bpmnModel);// 转xmllog.info(bpmnBytes:new String(bpmnBytes));}
}
其中model.json 是flowable-ui点击保存传过来的
