基于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图

编辑仿钉钉界面

仿钉钉保存后数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/872549.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搜集日志。

logstash 负责&#xff1a; 接收数据 input — 解析过滤并转换数据 filter(此插件可选) — 输出数据 output input — decode — filter — encode — output elasticsearch 查询和保存数据 Elasticsearch 去中心化集群 Data node 消耗大量 CPU、内存和 I/O 资源 分担一部分…

四、GD32 MCU 常见外设介绍

系统架构 1.RCU 时钟介绍 众所周知&#xff0c;时钟是MCU能正常运行的基本条件&#xff0c;就好比心跳或脉搏&#xff0c;为所有的工作单元提供时间 基数。时钟控制单元提供了一系列频率的时钟功能&#xff0c;包括多个内部RC振荡器时钟(IRC)、一个外部 高速晶体振荡器时钟(H…

Docker修改Postgresql密码

在Docker环境中&#xff0c;对已运行的PostgreSQL数据库实例进行密码更改是一项常见的维护操作。下面将详述如何通过一系列命令行操作来实现这一目标。 修改方式 查看容器状态及信息 我们需要定位到正在运行的PostgreSQL容器以获取其相关信息。执行以下命令列出所有正在运行…

Mongodb多键索引中索引边界的混合

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第93篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

安全防御---防火墙双击热备与带宽管理

目录 一、实验拓扑 二、实验需求 三、实验的大致思路 四、实验过程 4、基础配置 4.1 FW4的接口信息 4.2 新建办公&#xff0c;生产&#xff0c;游客&#xff0c;电信&#xff0c;移动安全区域 4.3 接口的网络配置 生产区:10.0.1.2/24 办公区:10.0.2.2/24 4.4 FW4的…

极地生产力自主采样系统的观测:融池比例统计 MEDEA 融池比例数据集

Observations from the Autonomous Polar Productivity Sampling System. 极地生产力自主采样系统的观测结果 简介 该项目是美国国家航空航天局 ICESCAPE 大型项目的一部分&#xff0c;旨在研究浮游植物丰度的长期季节性变化与整个生长季节在波弗特海和楚科奇海测量到的海冰…

Spring与设计模式实战之策略模式

Spring与设计模式实战之策略模式 引言 在现代软件开发中&#xff0c;设计模式是解决常见设计问题的有效工具。它们提供了经过验证的解决方案&#xff0c;帮助开发人员构建灵活、可扩展和可维护的系统。本文将探讨策略模式在Spring框架中的应用&#xff0c;并通过实际例子展示…

Linux 驱动开发 举例

Linux驱动开发涉及编写内核模块或设备驱动程序&#xff0c;以便让Linux内核能够识别和控制硬件设备。以下是一个简单的Linux驱动开发示例&#xff0c;这个示例将展示如何创建一个简单的字符设备驱动。 示例&#xff1a;简单的字符设备驱动 1. 定义设备驱动结构 首先&#xf…

深度学习损失计算

文章目录 深度学习损失计算1.如何计算当前epoch的损失&#xff1f;2.为什么要计算样本平均损失&#xff0c;而不是计算批次平均损失&#xff1f; 深度学习损失计算 1.如何计算当前epoch的损失&#xff1f; 深度学习中的损失计算&#xff0c;通常为数据集的平均损失&#xff0…

CREC晶振产品分类

CREC晶振大类有石英晶体谐振器、石英晶体振荡器、石英晶体滤波器 其中石英晶体谐振器&#xff1a; KHZ石英谐振器 车规级32.768KHz石英谐振器 专为汽车RTC应用而设计&#xff0c;通过AECQ-200可靠性测试&#xff0c;满足汽车电子的高标准时频需求&#xff0c;为客户提供可靠…

完整的优化流程需要做什么工作

&#x1f47d;System.out.println(“&#x1f44b;&#x1f3fc;嗨&#xff0c;大家好&#xff0c;我是代码不会敲的小符&#xff0c;目前工作于上海某电商服务公司…”); &#x1f4da;System.out.println(“&#x1f388;如果文章中有错误的地方&#xff0c;恳请大家指正&…

三生随记——空调的诅咒

在一个炎热的夏日&#xff0c;小镇上的居民们都在忍受着高温的煎熬。阳光无情地炙烤着大地&#xff0c;空气仿佛凝固了一般&#xff0c;让人喘不过气来。 杰克和艾米是一对年轻的夫妻&#xff0c;他们刚刚搬进了这座小镇边缘的一座古老房子。这座房子虽然宽敞&#xff0c;但却透…

前后端,数据库以及分布式系统

1. 前端&#xff08;Frontend&#xff09; 定义&#xff1a; 前端是用户直接与之交互的部分&#xff0c;通常在浏览器中运行。它负责呈现和展示数据&#xff0c;与用户进行交互。 关键点&#xff1a; HTML/CSS/JavaScript&#xff1a; HTML定义了页面结构&#xff0c;CSS负责…

Interface中的方法被default修饰

Interface中的方法被default修饰 在Java 8中&#xff0c;引入了default方法的概念&#xff0c;使得接口可以包含具体的方法实现。被default修饰的方法称为默认方法。这意味着接口不仅可以声明方法&#xff0c;还可以提供方法的默认实现。 默认方法的主要作用包括&#xff1a;…

工业网络通信教学平台-工业互联网综合教学的实验平台-工业互联网应用实训

工业互联网&#xff08;Industrial Internet&#xff09;&#xff0c;也称为工业物联网或IIoT&#xff0c;是一个开放的、全球化的工业网络&#xff0c;将人、数据和机器进行连接&#xff0c;将工业、技术和互联网深度融合。 工业互联网产业发展离不开信息技术产业人才&#xf…

Elasticsearch 聚合查询简介

Elasticsearch 聚合查询简介 在 Elasticsearch 中&#xff0c;聚合&#xff08;Aggregations&#xff09;是一种强大的数据分析工具&#xff0c;可以让你从数据中提取有意义的信息。通过聚合查询&#xff0c;可以对数据进行分类、统计、过滤和分组等操作&#xff0c;从而帮助用…

Android TEE SE

在Android平台上&#xff0c;Trusted Execution Environment (TEE) 和 Secure Element (SE) 是用来增强设备安全性的关键技术。TEE提供了隔离的执行环境&#xff0c;可以执行敏感的安全操作&#xff0c;而SE则是一个独立的、高度安全的微控制器&#xff0c;用于存储和处理非常敏…

Log4j的原理及应用详解(五)

本系列文章简介&#xff1a; 在软件开发的广阔领域中&#xff0c;日志记录是一项至关重要的活动。它不仅帮助开发者追踪程序的执行流程&#xff0c;还在问题排查、性能监控以及用户行为分析等方面发挥着不可替代的作用。随着软件系统的日益复杂&#xff0c;对日志管理的需求也日…

Qt Creator的好用的功能

&#xff08;1&#xff09;ctrlf&#xff1a; 在当前文档进行查询操作 &#xff08;2&#xff09;f3: 找到后&#xff0c;按f3&#xff0c;查找下一个 &#xff08;3&#xff09;shiftf3: 查找上一个 右键菜单&#xff1a; (4)f4&#xff1a;在…

LabVIEW异步和同步通信详细分析及比较

1. 基本原理 异步通信&#xff1a; 原理&#xff1a;异步通信&#xff08;Asynchronous Communication&#xff09;是一种数据传输方式&#xff0c;其中数据发送和接收操作在独立的时间进行&#xff0c;不需要在特定时刻对齐。发送方在任何时刻可以发送数据&#xff0c;而接收…