若依ruoyi-nbcio如何做一个仿钉钉流程设计器的思考

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统

看到有些流程图采用仿钉钉的流程设计，比如下面界面：

这种方式虽然简单，但可能符合中国人的习惯，使用简单直观，所以也有一定的市场。

如何结合现有的bpmn-process-designer流程设计器进行兼容是需要考虑的问题。

现有流程设计器采用标准的bpmn规范，生成xml文件。

而一般仿钉钉的流程图是生成相应的json，所以需要进行流程图转换，以便兼容。

基本思路;

1、仿钉钉做的流程图，也可以跟bpmn-process-designer流程设计器类似，可以查看flowable的json格式或xml格式，这个就需要进行转换。

2、主要通过flowable的相关类与方法，把json格式转换成xml格式，同时这个xml文件可以导入到bpmn-process-designer流程设计器进行查看与验证，这样后面的流程逻辑都不需要修改。

3、可以主要通过BpmnModel，SequenceFlow，Process，StartEvent，EndEvent，FlowableListener，BpmnAutoLayout，BpmnXMLConverter等flowable类或方法来实现从json转换成xml文件。

4、前端参考网上一些开源项目，但form表单还是采用现有的formdesigner，同时也是考虑支持节点的表单支持

5、也要考虑自定义业务表单的支持

6、先支持简单的并行，条件等流程节点的支持，后续再支持复杂的流程设计。

下面附上一个标注的flowable的xml流程文件

  
    
      Flow_0ipnqyb
    
    
      Flow_0ipnqyb
      Flow_1uc1pby
    
    
    
      Flow_1uc1pby
      Flow_1x49ob5
    
    
    
      Flow_1x49ob5
      Flow_170xl0t
      
        ${nrOfCompletedInstances/nrOfInstances>=1}
      
    
    
    
      Flow_170xl0t
    
    
  
  
    
      
        
        
      
      
        
        
      
      
        
        
      
      
        
        
      
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
    
  

后续根据上面的思路实现前后端代码。