基于jeecgboot-vue3的Flowable流程支持bpmn流程设计器与仿钉钉流程设计器-编辑多版本处理

因为这个项目license问题无法开源，更多技术支持与服务请加入我的知识星球。

1、前端编辑带有仿钉钉流程的处理

/** 编辑流程设计弹窗页面 */const handleLoadXml = (row) => {console.log("handleLoadXml row",row)const params = {flowKey: row.key,version: row.version} queryByKeyAndVersion(params).then(res => {console.log("queryByKeyAndVersion res",res)if (res.code === 200 && res.result.hasOwnProperty("id")) {ddDesignerData.id = res.result.flowKeyddDesignerData.name = res.result.nameflowJsonData.value = JSON.parse(res.result.flowJson)flowJsonData.value.category = row.categoryflowJsonData.value.appType = row.appTypeddDesignerData.version = res.result.versiondesignerData.form.processType.push({id: row.category,appType: row.appType})ddDesignerOpen.value = true}else {designerData.title = "流程设计 - " + row.name;designerData.deploymentId = row.deploymentId;designerData.form = {processType: [],processName: row.name,processKey: row.key}if (row &&row.deploymentId) {const selectItem = categorys.value.find(item => item.id == row.category);modelForm.processType = selectItem; //以便编辑保存的时候获取到processTypedesignerData.form.processType.push(selectItem);designerData.loading = true;console.log("designerData",designerData)handleReadImage(row.deploymentId);designerData.title = "编辑流程图";  }xmlFrame.width = '90%'}})  }

2、后端检查是否有相应的仿钉钉flowKey和版本号相同的仿钉钉数据

<mapper namespace="org.jeecg.modules.flowable.FlowDd.mapper.FlowDdMapper"><select id="selectByKeyAndVersion" resultType="org.jeecg.modules.flowable.FlowDd.entity.FlowDd">select * from flow_ddwhere flow_key= #{flowKey} and version = #{version} limit 1</select>
</mapper>

3、前端编辑后保存

const ddSave = (data: any) => {console.log("ddSave data",data)saveXmlJson(data).then(res => {if(res.code === 200) {createMessage.success(res.message);ddDesignerData.loading = false;ddDesignerOpen.value = false;getList();}  })}  

其中前端数据如下：

const save = () => {const processModel = {code: pCode.value,name: pName.value,icon: {name: 'el:HomeFilled',color: '#409EFF'},process: props.process,flowJson: JSON.stringify(props.process),category: props.processType[0].id,appType: props.processType[0].appType,enable: true,version: props.version,sort: 0,groupId: '',remark: ''}emit('save', processModel);
}

4、后端保存跟原来差不多

@Override@Transactional(rollbackFor = Exception.class)public Result saveDdModel(ProcessModel processModel) {try {FlowSaveXmlVo vo = new FlowSaveXmlVo();BpmnModel bpmnModel = processModel.toBpmnModel();FlowDd flowDd = new FlowDd();flowDd.setId(processModel.getId());flowDd.setName(processModel.getName());flowDd.setFlowKey(processModel.getCode());flowDd.setVersion(processModel.getVersion()+1);//String flowJson = JSON.toJSONString(processModel);//有问题，会转换成大写的问题String flowJson = processModel.getFlowJson();flowDd.setFlowJson(flowJson);flowDdService.save(flowDd);String xml = new String(new BpmnXMLConverter().convertToXML(bpmnModel));vo.setAppType(processModel.getAppType());vo.setCategory(processModel.getCategory());vo.setXml(xml);vo.setDesignerType("DingDing");return this.saveXmlMode(vo);} catch (Exception e) {e.printStackTrace();throw new RuntimeException("创建失败: e=" + e.getMessage());}}

5、效果图

上面是v2版本了，对应bpmn图

编辑仿钉钉界面

仿钉钉保存后数据