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

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

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

javascript 复制代码
/** 编辑流程设计弹窗页面 */
  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.flowKey
        ddDesignerData.name = res.result.name
        flowJsonData.value = JSON.parse(res.result.flowJson)
        flowJsonData.value.category = row.category
        flowJsonData.value.appType = row.appType
        ddDesignerData.version = res.result.version
        designerData.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; //以便编辑保存的时候获取到processType
          designerData.form.processType.push(selectItem);
          designerData.loading = true;
          console.log("designerData",designerData)
          handleReadImage(row.deploymentId);
          designerData.title = "编辑流程图";  
        }
        xmlFrame.width = '90%'
      }
    })  
  }

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

java 复制代码
<mapper namespace="org.jeecg.modules.flowable.FlowDd.mapper.FlowDdMapper">

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

3、前端编辑后保存

javascript 复制代码
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();
      }  
    })
  }  

其中前端数据如下:

javascript 复制代码
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、后端保存跟原来差不多

java 复制代码
@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图

编辑仿钉钉界面

仿钉钉保存后数据

相关推荐
第二只羽毛几秒前
重载和继承的实践
java·开发语言
王嘉俊9256 分钟前
设计模式--适配器模式:优雅解决接口不兼容问题
java·设计模式·适配器模式
王嘉俊9257 分钟前
设计模式--组合模式:统一处理树形结构的优雅设计
java·设计模式·组合模式
道199314 分钟前
50 台小型无人车与50套穿戴终端 5 公里范围内通信组网方案深度研究
java·后端·struts
迎風吹頭髮20 分钟前
UNIX下C语言编程与实践35-UNIX 守护进程编写:后台执行、脱离终端、清除掩码与信号处理
java·c语言·unix
光军oi36 分钟前
全栈开发杂谈————JAVA微服务全套技术栈详解
java·开发语言·微服务
帮帮志36 分钟前
目录【系列文章目录】-(关于帮帮志,关于作者)
java·开发语言·python·链表·交互
聪明的笨猪猪37 分钟前
Java Spring “MVC ”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
Boop_wu2 小时前
[数据结构] Map和Set
java·数据结构·算法
一勺菠萝丶2 小时前
Mac 上用 Homebrew 安装 JDK 8(适配 zsh 终端)完整教程
java·python·macos