基于vue3 、vite 、 AntV完成的流程设计器

最新推荐文章于 2024-05-25 09:51:32 发布
最新推荐文章于 2024-05-25 09:51:32 发布
阅读量451 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MMKJSH/article/details/131263135
版权

真正的大师,永远都怀着一颗学徒的心！

一、项目简介

基于vue3 、vite 、 AntV完成的流程设计器

二、实现功能

  • 支持流程属性

  • 支持职能部门维护

  • 支持撤销

  • 支持重做

  • 支持基本图形节点、表格图

  • 支持生成图片

  • 支持状态管理

  • 支持操作权限

  • 支持节点的闭环

  • 支持信息互换等

三、技术选型

  • html+css+js

  • vite

  • vue3

  • axios

  • element plus

  • AntV X6 2.0

  • mockjs

四、界面展示

五、源码地址

私信回复：流程引擎

程序员小美
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue3.0 流程编辑器
qq_16603051的博客
08-20 6436
源码地址 #vue-flow-editor-vue3.0 ##简介 vue-flow-editor是基于Vue3.0以及G6@3.1.10实现的流程编辑器。在线操作地址： ##特点 -兼容ie； -轻量级依赖 -依赖于Vue3.0、g6、element-plus，但是打包的vue-flow-editor中是不包含这些依赖的， 由开发者手动引入，方便管理依赖； -对G6的连接线进行了简单封装，对节点无影响。开发者可...
【工作流引擎】Flowable流程设计器 基于bpmnjs开发的vue组件
Vincent Vic
04-25 1万+
【工作流引擎】Flowable流程设计器 基于bpmnjs开发的vue组件设计器介绍集成设计器 设计器介绍 bpmn.js官网 bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 集成设计器 本文集成现成的Vue设计器组件 Element UI版本 workflow-bpmn-modeler Ant Design Vue 版本 workflow-bpmn-modeler-antdv npm i workflow-bpmn-modeler-antdv
如何在VUE中使用andflow流程设计组件
u012474395的博客
05-11 1444
/</其中：标签必须要包含id属性，并且唯一。tags属性为流程控件类别列表对象。meta属性为流程控件列表对象。model属性值为流程模型对象。
推荐开源项目：Vue-Simple-Flowchart — 轻量级流程图编辑器
最新发布
gitblog_00020的博客
05-25 438
推荐开源项目：Vue-Simple-Flowchart — 轻量级流程图编辑器 项目地址:https://gitcode.com/Jeffreyrn/vue-simple-flowchart 在数据处理和决策流程设计中，流程图是一种直观且高效的工具。今天，我们向您推荐一个基于Vue.js的轻量级流程图编辑器——Vue-Simple-Flowchart。这款组件让您能够轻松构建和编辑流程图，无需复杂...
flow-editor-vue:基于flowable绘图工具oryx的流程设计器
05-30
flow-editor-vue 安装 NPM npm i flow-editor-vue 运行示例代码 NPM npm run serve 说明 本项目examples文件夹中的示例代码，主要为测试API而写， 大家可以通过调到已抛出的API结合自定义UI实现更加美观和符合实际项目需求的界面。 最终功能及效果，由你来决定！ 如下是经过UI调整优化后的示例图：
vue3集成bpmn-js——适配activiti工作流
web17886480312的博客
03-06 3508
1、安装bpmn-js npm install bpmn-js 2、vue引入相关依赖 import { markRaw } from 'vue'; import 'bpmn-js/dist/assets/diagram-js.css'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'; import BpmnModeler from 'bpmn-js/lib/Modeler'; 3、页面 <div id="containe
基于Vue实现的Activiti工作流Web设计器
MMKJSH的博客
11-11 2461
基于Vue实现的Activiti工作流Web设计器
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并完成流程图编辑项目。这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。 流程图编辑页面是一个专门用于创建、编辑和...
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
在本项目中，"基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码"，开发者采用了一系列现代前端技术构建了一个功能丰富的流程图编辑工具。让我们详细了解一下这些关键技术及其在项目中的应用。 首先，Vue3是...
antvx6 流程设计器+ vite + vue3
12-26
"antvx6 流程设计器+ vite + vue3" 是一个现代前端开发的组合，它融合了蚂蚁金服推出的antv x6流程图组件库、轻量级构建工具Vite和Vue.js的最新版本Vue 3。这个组合旨在提供高效、可维护且具有出色用户体验的流程...
基于 Vue3、Vite、Ant-Design-Vue大数据开发案例
04-11
基于 Vue3、Vite、Ant-Design-Vue、TypeScript、Vue Vben Admin，最先进的技术栈，让初学者能够更快的入门并投入到团队开发中去。包括模块如：组织机构、角色用户、菜单授权、数据权限、系统参数等。强大的组件封装...
.NET CORE WEBAPI+VUE前后端分离工作流引擎ROADFLOW3.0更新发布
roadflow工作流引擎的博客
10-22 990
经过长太半年之后的开发升级，基于VUE为前端，.NET CORE WEBAPI为后端的前后端分离工作流引擎ROADFLOW3.0更新发布了。欢迎下载试用，下载地址：http://www.roadflow.net/Download，在线演示地址：http://vue.roadflow.net/。 ...
vite4 + vue3 + pinia + axios + vue-router + elementPlus
HeMister的博客
04-14 1430
创建项目后node_modules 有但是就是找不到使用pnpm i 重新加载依赖就可以了关键是其他电脑上没有这个问题…(可能是我本机配置有问题)
bpmn-js：vue集成bpmn-js流程设计器并汉化
热门推荐
举世武双的博客
03-05 1万+
最近工作转到工作流模块开发了，需要开发一个流程设计器。 于是就开始接触到bpmn-js，搜索了不少资料，整合demo。现在总结一下如何在vue工程中集成bpmn-js流程设计器。 集成的效果： 目前这个demo只是初步实现简单的几个功能。业务当中要扩展的话，就需要老铁更进一步进行改造和完善了。 1、保存模型为BPMN 的xml格式，这个xml数据可以提交到后端工作流引擎保存，完成流程设计的功能。 2、保存SVG。 3、导入BPMN。将文件中的xml数据转化为流程图，重新设计或保存。 .
BPMN Vue Custom：流程图定制利器，助力业务流程可视化
gitblog_00020的博客
03-29 447
BPMN Vue Custom：流程图定制利器，助力业务流程可视化 项目地址:https://gitcode.com/LinDaiDai/bpmn-vue-custom BPMN Vue Custom 是一个基于 BPMN.io 和 Vue.js 的组件库，旨在帮助开发者轻松创建和展示符合业务流程模型与Notation (BPMN) 标准的流程图。这个项目的重点是将复杂的BPMN图形化表示集成到...
Vue-BPMN：基于Vue.js的企业流程建模神器
gitblog_00040的博客
03-29 442
Vue-BPMN：基于Vue.js的企业流程建模神器 项目地址:https://gitcode.com/miniclound/vue-bpmn Vue-BPMN 是一个强大的前端组件库，用于构建企业级业务流程模型（BPMN）的可视化工具。该项目结合了Vue.js的灵活性和BPMN 2.0规范的强大功能，为开发者提供了一种直观、高效的流程设计和管理方式。 项目简介 Vue-BPMN的主要目标是简化B...
antv-x6+v3+ts流程设计器
weixin_44213308的博客
01-22 4060
1、背景： 一直希望能在计算机领域与管理学的交叉领域能够有所贡献，但国外的几款流程引擎确实是用的不顺手，国内做的好的好像也都不开源，所以一直有个执念就是能够重写国人自己的开源工作流引擎。 第一步还是拿流程设计器开刀，笔者的想法是工作流设计器从前端主业务中独立出来，单独进行开发，不要跟前端的其他业务公用一个项目 2、进度： 项目进度初步将antv-x6集成进vue3中，最近写了写了一个登陆页面，逻辑关系还在思考中，将持续更新，当然对项目觉得项目对自己有帮助的，或者想拿去二开的小伙伴们也欢迎 3、展示
vue使用OA工作流Activiti
一步一个脚印，踏实努力，向着目标前进
06-29 3076
Activiti提供了一个图形化的流程设计器，可以使用该设计器来创建和定义工作流程。流程定义可以包括各种活动、网关、事件和任务等元素，以及它们之间的关系和顺序。
推荐开源项目：Vite-Vue-BPMN-Process - 基于Vite与Vue的流程建模工具
gitblog_00063的博客
03-27 477
推荐开源项目：Vite-Vue-BPMN-Process - 基于Vite与Vue的流程建模工具 项目地址:https://gitcode.com/moon-studio/vite-vue-bpmn-process 项目简介 Vite-Vue-BPMN-Process 是一个由Moon Studio开发的开源项目，它结合了现代化的前端框架Vite和Vue，提供了一个用于创建、编辑和管理业务流程模型...
vue3+vite 集成activiti前端设计器
09-02
Vue3 Vite 是一个用于构建Web界面的渐进式JavaScript框架，而 Activiti 是一个流程引擎和业务流程管理(BPM)解决方案。要将 Activiti 前端设计器集成到 Vue3 Vite 中，需要进行一些步骤。 首先，需要下载并安装 Activiti 前端设计器的相关文件。可以从 Activiti 官方网站下载设计器的压缩包，然后将其解压到项目的特定目录中。 然后，在 Vue3 Vite 项目中创建一个新的组件，用于加载 Activiti 前端设计器。可以使用 Vue 的 `import` 来引入设计器的相关文件，然后在组件中使用 `import` 或者 `require` 来引入设计器的样式和脚本文件。 接下来，可以在 Vue3 Vite 项目的路由配置中添加一个新的路由，用于展示 Activiti 前端设计器的页面。可以将这个路由配置为一个独立的路由路径，比如 `/activiti-designer`。 在创建的路由页面中，可以使用设计器的接口或者组件来渲染设计器的界面。可以通过本地或者远程的方式加载设计器的配置文件，并将设计器的相关属性和方法绑定到 Vue 组件的数据和方法中。 最后，可以通过修改 Vue3 Vite 项目的打包配置，将 Activiti 前端设计器的相关文件打包到最终的项目中。可以使用 Vite 的插件或者配置项来实现这个功能。 总的来说，要将 Activiti 前端设计器集成到 Vue3 Vite 中，需要下载和解压设计器的文件，创建一个新的组件用于加载设计器，配置一个新的路由来展示设计器的界面，并通过数据绑定和方法绑定将设计器的功能集成到 Vue3 Vite 项目中。最后，调整打包配置，将设计器文件打包到最终项目中。这样就可以在 Vue3 Vite 中使用 Activiti 前端设计器来设计和管理业务流程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员小美

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值