基于 vue3 的流程审批设计器 ZSFlowEditor

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的流程审批设计器——ZSFlowEditor。

ZSFlowEditor是一个使用 vue3 、vite 、 AntV X6 完成的流程设计器。设计器主要的用途为ERP类项目的流程审批，支持 职能带、节点属性、边条件表达式等。

技术点

• • 使用 vite + vue3 + vuex + axios + element plus + eslint + AntV X6 + mockjs

• • 手工加载 JSON 数据，手工创建画布节点，可以自定义业务数据

• • 自定义哪些节点类型可被选择、拖拽、移动等

• • 职能带泳道，根据多边形画法完成职能带泳道。实现新增职能带泳道自动吸附对齐；只允许删除最后一个职能带泳道；实现子节点的选择事件和无法移出职能带范围

项目截图

安装

依赖

npm install --registry=https://registry.npm.taobao.org

启动本地调试 使用 mockjs 带演示数据

npm run demo

-END- 

开源协议：MIT

开源地址：https://gitee.com/gfqy/zsflow-editor

原文始发于微信公众号（开源技术专栏）：基于 vue3 的流程审批设计器 ZSFlowEditor