基于jeecgboot-vue3的Flowable流程-集成仿钉钉流程（六）仿钉钉流程的转bpmn流程图

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

1、转bpmn流程图接口

/**
     * 转为bpmn xml格式
     * @param processModel
     * @throws IOException
     */
    @PostMapping("/ddtobpmnxml")
    public Result<?> ddToBpmnXml(@RequestBody ProcessModel processModel) {
    	try {
	        BpmnModel bpmnModel = processModel.toBpmnModel();
	        return Result.OK(new String(new BpmnXMLConverter().convertToXML(bpmnModel)));
    	} catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException("创建失败: e=" + e.getMessage());
        }
    }

2、toBpmnModel()方法

public BpmnModel toBpmnModel() {
        BpmnModel bpmnModel = new BpmnModel();
        // 命名空间
        bpmnModel.setTargetNamespace("https://flowable.org/bpmn20");
        // 创建一个流程
        Process process = new Process();
        // 设置流程的id
        process.setId(this.getCode());
        // 设置流程的name
        process.setName(this.getName());
        // 设置流程的文档
        process.setDocumentation(this.getRemark());
        // 递归构建所有节点
        Node node = this.getProcess();
        List<FlowElement> flowElementList = node.convert();
        for (FlowElement flowElement : flowElementList) {
            process.addFlowElement(flowElement);
        }
        // 设置流程
        bpmnModel.addProcess(process);
        // 自动布局
        new BpmnAutoLayout(bpmnModel).execute();
        return bpmnModel;
    }

3、前端调用接口

const converterBpmn = () => {
  const processModel = {
    code: pCode.value,
    name: pName.value,
    icon: {
      name: 'el:HomeFilled',
      color: '#409EFF'
    },
    process: props.process,
    enable: true,
    version: 1,
    sort: 0,
    groupId: '',
    remark: ''
  }
  ddToBpmnXml(processModel).then(res => {
     console.log("ddToBpmnXml res",res)
     processView.title = pName.value
     processView.index = pCode.value
     processView.xmlData = res.result
     processView.open = true
  })  
}

4、效果图