通过纯代码设计 实现 flowable 驳回功能 无需操作bpmn.xml文件

Task taskQuery = taskService.createTaskQuery().processInstanceId(processInstanceId).list().get(0);
LOGGER.info("changeActivityStateDefined:{}" ,JSON.toJSONString(activityStateRequest, true));
if (activityStateRequest.getCancelActivityIds() != null && activityStateRequest.getCancelActivityIds().size() == 1) {

    runtimeService.createChangeActivityStateBuilder()
            .processInstanceId(processInstanceId)
            .moveSingleActivityIdToActivityIds(taskQuery.getTaskDefinitionKey(), activityStateRequest.getStartActivityIds())
            .changeState();

} else if (activityStateRequest.getStartActivityIds() != null && activityStateRequest.getStartActivityIds().size() == 1) {
    runtimeService.createChangeActivityStateBuilder()
            .processInstanceId(processInstanceId)
            .moveActivityIdsToSingleActivityId(activityStateRequest.getCancelActivityIds(), activityStateRequest.getStartActivityIds().get(0))
    
好的,下面是Vue3整合bpmn.js实现flowable流程设计器的代码实现。 首先,需要安装依赖: ``` npm install bpmn-js@8.0.1 npm install bpmn-js-properties-panel@0.44.0 npm install bpmn-js-properties-panel-provider@0.23.0 npm install camunda-bpmn-moddle@6.2.0 npm install vue-bpmn ``` 接着,在Vue组件中引入需要的文件: ```javascript import BpmnModeler from 'bpmn-js/lib/Modeler'; import propertiesPanelModule from 'bpmn-js-properties-panel'; import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'; import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'; import 'bpmn-js-properties-panel/styles/properties.less'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; ``` 然后,在Vue组件中定义bpmn.js的Modeler和其他必要的变量: ```javascript data() { return { bpmnModeler: null, propertiesPanel: null, xml: null, }; }, ``` 接下来,在Vue组件的mounted生命周期函数中初始化bpmn.js的Modeler和其他必要的变量: ```javascript mounted() { this.bpmnModeler = new BpmnModeler({ container: '#canvas', propertiesPanel: { parent: '#properties', }, additionalModules: [ propertiesPanelModule, propertiesProviderModule, ], moddleExtensions: { camunda: camundaModdleDescriptor, }, }); this.propertiesPanel = this.bpmnModeler.get('propertiesPanel'); }, ``` 然后,在Vue组件的methods中定义一些必要的方法,比如打开一个流程图、保存一个流程图、导出一个流程图: ```javascript methods: { openDiagram(xml) { this.bpmnModeler.importXML(xml, (err) => { if (err) { console.log(err); } else { console.log('success'); } }); }, saveDiagram() { this.bpmnModeler.saveXML({ format: true }, (err, xml) => { if (err) { console.log(err); } else { console.log(xml); } }); }, exportDiagram() { this.bpmnModeler.saveSVG((err, svg) => { if (err) { console.log(err); } else { console.log(svg); } }); }, }, ``` 最后,在Vue组件的template中定义UI界面: ```html <template> <div> <div id="canvas"></div> <div id="properties"></div> <button @click="saveDiagram">保存</button> <button @click="exportDiagram">导出</button> </div> </template> ``` 在这个例子中,我们使用了Vue3和bpmn.js来实现flowable流程设计器。通过这个例子,你可以了解到如何在Vue3中整合bpmn.js以及如何定义UI界面、打开、保存和导出流程图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值