若依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流程文件

<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:flowable="http://flowable.org/bpmn" id="diagram_Process_1697782918307" targetNamespace="http://flowable.org/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"><bpmn2:process id="Process_1697782918307" name="业务流程_自定义会签测试" isExecutable="true"><bpmn2:startEvent id="Event_1le7yzx" flowable:formKey="key_3"><bpmn2:outgoing>Flow_0ipnqyb</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="Activity_03gis3u" flowable:dataType="INITIATOR" flowable:assignee="${initiator}" flowable:text="流程发起人"><bpmn2:incoming>Flow_0ipnqyb</bpmn2:incoming><bpmn2:outgoing>Flow_1uc1pby</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0ipnqyb" sourceRef="Event_1le7yzx" targetRef="Activity_03gis3u" /><bpmn2:userTask id="Activity_1facibr" flowable:dataType="MANAGER" flowable:assignee="${DepManagerHandler.getUser(execution)}" flowable:text="部门经理"><bpmn2:incoming>Flow_1uc1pby</bpmn2:incoming><bpmn2:outgoing>Flow_1x49ob5</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_1uc1pby" sourceRef="Activity_03gis3u" targetRef="Activity_1facibr" /><bpmn2:userTask id="Activity_0nepxhg" flowable:dataType="USERS" flowable:assignee="${assignee}" flowable:candidateUsers="ry,zhangsan" flowable:text="若依,张三"><bpmn2:incoming>Flow_1x49ob5</bpmn2:incoming><bpmn2:outgoing>Flow_170xl0t</bpmn2:outgoing><bpmn2:multiInstanceLoopCharacteristics flowable:collection="${multiInstanceHandler.getUserNames(execution)}" flowable:elementVariable="assignee"><bpmn2:completionCondition xsi:type="bpmn2:tFormalExpression">${nrOfCompletedInstances/nrOfInstances&gt;=1}</bpmn2:completionCondition></bpmn2:multiInstanceLoopCharacteristics></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_1x49ob5" sourceRef="Activity_1facibr" targetRef="Activity_0nepxhg" /><bpmn2:endEvent id="Event_1py9opv"><bpmn2:incoming>Flow_170xl0t</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_170xl0t" sourceRef="Activity_0nepxhg" targetRef="Event_1py9opv" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1697782918307"><bpmndi:BPMNEdge id="Flow_170xl0t_di" bpmnElement="Flow_170xl0t"><di:waypoint x="760" y="240" /><di:waypoint x="822" y="240" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_1x49ob5_di" bpmnElement="Flow_1x49ob5"><di:waypoint x="600" y="240" /><di:waypoint x="660" y="240" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_1uc1pby_di" bpmnElement="Flow_1uc1pby"><di:waypoint x="440" y="240" /><di:waypoint x="500" y="240" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0ipnqyb_di" bpmnElement="Flow_0ipnqyb"><di:waypoint x="288" y="240" /><di:waypoint x="340" y="240" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1le7yzx_di" bpmnElement="Event_1le7yzx"><dc:Bounds x="252" y="222" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_03gis3u_di" bpmnElement="Activity_03gis3u"><dc:Bounds x="340" y="200" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_1facibr_di" bpmnElement="Activity_1facibr"><dc:Bounds x="500" y="200" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_0nepxhg_di" bpmnElement="Activity_0nepxhg"><dc:Bounds x="660" y="200" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1py9opv_di" bpmnElement="Event_1py9opv"><dc:Bounds x="822" y="222" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram>
</bpmn2:definitions>

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

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

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

相关文章

计算机网络文章荟萃

脑残式网络编程入门(二)&#xff1a;我们在读写Socket时&#xff0c;究竟在读写什么&#xff1f;-网络编程/专项技术区 - 即时通讯开发者社区! 1.什么是 socket - 掘金2.socket 的实现原理 - 掘金本文讲述了 socket 在 linux 操作系统下的数据结构&#xff0c;以及阻塞 IO 利用…

檢測項目簡體字

某些項目可能要求代碼中不允許使用簡體字 安裝stcheck檢查 yarn add stcheck --dev在項目根目錄創建 st.config.json 文件 {"patterns": ["./**/*.(ts|js|tsx|jsx|vue|html)","!**/node_modules/**","!.git/**"],"gitignore&q…

Express框架开发接口之登录与注册API

我们利用nodeexpressmysql开发接口&#xff0c;对数据库数据进行简单增、删、查改等操作。 接口是什么&#xff1f; 接口是 前后端通信的桥梁 简单理解&#xff1a;一个接口就是 服务中的一个路由规则 &#xff0c;根据请求响应结果 接口的英文单词是 API (Application Progra…

Java工具库——FastJson的40个常用方法

那些想看却没看的书&#xff0c;在心里摆满一个图书馆… 工具库介绍 阿里巴巴的 FastJSON&#xff0c;也被称为 Alibaba FastJSON 或阿里巴巴 JSON&#xff0c;是一个高性能的 Java JSON 处理库&#xff0c;用于在 Java 应用程序中解析和生成 JSON 数据。FastJSON 以其卓越的性…

HTTP发起请求与收到响应的大致过程

可以《《透视 HTTP 协议》Windows 10 搭建最小实验环境》搭建环境&#xff0c;之后才能进行下边的操作。 1.鼠标左键点击两下www目录下的start.bat批处理文件。 2.打开Wireshark&#xff0c;然后选择Adapter for loopback traffic capture。 3.然后把tcp.port 80 || udp.…

碳排放数据,各地区的(直辖市数据细分到区县),含shp和xlsx格式,带符号化

这两天推了道路相关的数据&#xff0c;道路线路、客运飞机场、航空、地铁、火车站点等等交通出行类的数据之前都已发过&#xff0c;需要的可以自己翻一翻。 交通运输行业还比较关注的碳排放数据&#xff0c;也整理出来了&#xff0c;有需要的自取。 数据地址&#xff1a; 全…

项目管理工具ConceptDraw PROJECT mac中文版自定义列功能

ConceptDraw PROJECT Mac是一款专业的项目管理工具&#xff0c;适用于MacOS平台。它提供了成功规划和执行项目所需的完整功能&#xff0c;包括任务和资源管理、报告和变更控制。 这款软件可以与ConceptDraw office集成&#xff0c;利用思维导图和数据可视化的强大功能来改进项目…

Microsoft.Extensions 简介

Microsoft.Extensions 简介 一、Microsoft.Extensions 简介 .NET Extensions 是一套官方的、开源的、跨平台的 API 集合&#xff0c;提供了一些常用的编程模式和实用工具&#xff0c;例如依赖项注入、日志记录、缓存、Host以及配置等等。该项目的大多数 API 都被用在 .NET 平…

Jetpack:019-Jetpack的导航二(传递数据)

文章目录 1. 知识回顾2. 使用方法2.1 通过参数传递数据2.2 获取参数中的数据2.3 共享导航控制器 3. 示例代码4. 内容总结 我们在上一章回中介绍了Jetpack中导航相关的内容&#xff0c;本章回中 继续介绍导航相关的内容。闲话休提&#xff0c;让我们一起Talk Android Jetpack吧…

reactNative导入excel文件

组件内导入 import {TouchableOpacity,PermissionsAndroid} from react-native; import RNFS from react-native-fs; import XLSX from xlsx; import DocumentPicker from react-native-document-picker; import {Buffer} from buffer;// 需要安装一下三个,Buffer和react-nati…

Node编写更新用户头像接口

目录 定义路由和处理函数 验证表单数据 ​编辑 实现更新用户头像的功能 定义路由和处理函数 向外共享定义的更新用户头像处理函数 // 更新用户头像的处理函数 exports.updateAvatar (req, res) > {res.send(更新成功) } 定义更新用户头像路由 // 更新用户头像的路由…

安装 tensorflow==1.15.2 遇见的问题

一、直接安装 命令&#xff1a;pip install tensorflow1.15.2 二、换 阿里云 镜像源 命令&#xff1a;pip install -i http://mirrors.aliyun.com/pypi/simple tensorflow1.15.2 三、换 豆瓣 镜像源 命令&#xff1a;pip install http://pypi.douban.com/simple tensorflow1…

【OpenCV实现平滑图像形态学变化】

文章目录 概要目标腐蚀膨胀开运算结构元素&#xff08;内核&#xff09;小结 概要 形态学变化是一组简单的图像操作&#xff0c;主要用于处理二值图像&#xff0c;即只包含黑和白两种颜色的图像。这些操作通常需要两个输入&#xff0c;原始图像和一个内核&#xff08;kernel&a…

第13期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练 Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…

接口自动化测试实战

实现思路 使用excel管理用例用例信息&#xff0c;requests模块发送http请求&#xff0c;实现了记录日志&#xff0c;邮件发送测试报告的功能 目录结构如下&#xff1a; 同时&#xff0c;我也准备了一份软件测试视频教程&#xff08;含接口、自动化、性能等&#xff09;&#…

MySQL 连接出现 Authentication plugin ‘caching_sha2_password的处理方法(使用第二种)

出现这个原因是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password, 解决问题方法有两种,一种是升级navicat驱动,一种是把mysql用户登录密码加密规则还原成mysql_native_password. 1. 升级MySQL版本 较早的MySQL版本可能不…

TSINGSEE青犀老旧小区升级改造AI+视频监控方案

一、背景与需求 近年来&#xff0c;政府高度重视城镇老旧小区改造工作&#xff0c;强调要加快老旧小区改造&#xff0c;不断完善城市管理和服务&#xff0c;彻底改变粗放型管理方式&#xff0c;让人民群众在城市生活得更方便、更舒心、更美好。老旧小区升级改造面临以下问题&a…

Kotlin中使用ViewBinding绑定控件并添加点击事件

文章目录 效果1、加入依赖2、与控件进行绑定在 Activity 中使用视图绑定 3、监听控件 效果 实现源码 class MainActivity : AppCompatActivity() {lateinit var binding:ActivityMainBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstan…

计算机毕业设计 基于SpringBoot大学生创新创业项目管理系统的设计与实现 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

【安装tensorflow-CPU版本】

一、安装目的二、安装过程三、总结 一、安装目的 使自己的jupyter能用tensorflow 二、安装过程 首先打开anaconda prompt 接着输入conda list 查看自己是否安装了tensorflow 在 Python 中使用 pip 工具来升级 pip 自身并指定了使用清华大学的镜像源进行安装 python -m pip …