.NET 7.0 + Vue 3 开源跨平台图形化工作流引擎,适配多终端

35 阅读5分钟

前言

大家好,今天向大家介绍 AIBPM —— 一款图形界面的工作流系统。

在开发过程中,作者始终秉持着简洁优雅的设计理念,致力于打造一个开箱即用的开源产品,帮助非开发人员通过直观的图形操作界面完成工作流配置与使用,同时也为开发人员提供一些思路及代码复用,减少编写代码的时间。

项目介绍

AIBPM 是一个开源的工作流引擎,为简化工单和工作流管理而设计。

AIBPM 采用了图形操作界面,实现了所见即所得的工作流配置方式。用户可以通过拖拽和点击等简单操作,快速开发出复杂的工作流,无需深入了解底层技术细节。

项目框架

前端基于新的技术栈,包括 Vue 3.x、Composition API(setup 语法糖)、TypeScript、Vite、Element Plus、vue-router-next 和 Pinia。

后端基于.NET 7.0 并且引用开源模块Freesql和中台admin框架开发的工作流/工单系统,自己实现的顺序流引擎。

系统采用了开源框架中台Admin,Admin是前后端分离权限管理系统。

支持多租户、动态Api、任务调度。集成统一认证授权、数据验证、缓存、Ip限流、全Api鉴权、单元测试、性能分析、Swagger Api。

内置模块有:权限管理、人事管理、租户管理、日志管理、数据配置等

项目特点

1、可视化表单

基于form-generator,作者升级为VUE 3.0的同时增加多种表单和容器组件,同时专为工作流定制组件。支持添加自定义组件。

2、强大的流程设计器

基于mxgraph ,强大的图形编辑能力,作者专为工作流定制组件及配置项。

3、多数据库支持

基于freesql,支持MySql、SqlServer、PostgreSQL、Oracle、Sqlite、Firebird、达梦、人大金仓、神舟通用、南大通用、翰高、ClickHouse、Access 等数据库。

4、权限管理系统

基于中台admin,支持跨平台,支持动态API,省去书写controller的麻烦,内置swagger,knife4jui,文档清晰。 模块化开发,简洁高效。

5、主题切换

基于vue-next-admin,使用vue3.x 、Typescript、vite、Element plus等,适配手机、平板、pc 的开源免费模板库。

6、开源产品

采用MIT协议,完全免费,可以在任何合法场景中使用。

项目功能

系统内置了表单设计器和流程设计器,所有设计器都选用了灵活的框架,方便定制化,流程模板也加入了版本机制,以保证流程的兼容性。

流程设计器

流程设计器是工作流设计的核心部分,选用mxgraph作为流程设计器前端框架,自定义流程图形,并设计了校验机制,做到界面简洁但功能强大,可定制度非常高。

mxGraph是一个支持多种语言(JavaScript、.NET、Java、PHP)的画图框架,所绘制的图形可以在主流浏览器以及原生应用上使用。

mxGraph的使用场景有4个:图形可视化、图形交互、图形布局、图形分析。

采用mxgraph开发出流程设计器,设计器可以具有大量丰富的可操作图形,设计器本身具有有强大的图形编辑能力。为了界面简洁,仅显示了自定义的基础流程图形,可以定制自己想要的图形及功能。

流程设计器包括:定制图形、单向连线、开始节点、结束节点、审批节点、人工节点、网关等。

表单设计器

1、表单解析器

2、通用组件

3、容器

4、属性面板

5、定制组件

组织单元选择组件、表格/明细组件、标签容器、计算公式、金额组件、编辑器、组合型组件等。

项目使用

1、发起流程

选择左侧菜单工作流栏目,进入发起流程菜单,单击想要发起的流程模板。

系统弹出表单,填写表单,点击提交,流程发起步骤完成。

2、流程查看

平台选择左侧菜单工作流栏目,进入我的待办,选择我的已办Tab(标签页)查看刚发起的流程。

点击进入后可以查看流程数据,点击审批记录标签可以查看当前流程状态及当前处理人。

3、流程审批

登录平台

选择左侧菜单工作流栏目,进入我的待办,选择待办事项

点击审批,工作完成

4、流程模版创建

选择左侧菜单工作流栏目,进入流程管理-模板管理

新增模板后按照按照指引设计流程

发布流程后,新的模板会在发起流程菜单中显示

项目效果

在线体验

demo.aibpm.ailicloud.com/

项目地址

1、后端服务

gitee.com/leooneone/a…

github.com/leooneone/a…

2、前端UI

gitee.com/leooneone/a…

github.com/leooneone/a…

3、查看文档

doc.aibpm.ailicloud.com/

总结

以上仅展示了AIBPM 工作流引擎的部分功能。更多实用特性和详细信息,请大家访问项目地址。

希望通过本文能为 .NET在工作流引擎开发方面提供有价值的参考。欢迎在评论区留言交流,分享您的宝贵经验和建议。

最后

如果你觉得这篇文章对你有帮助,不妨点个赞支持一下!你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助,欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区,与其他热爱技术的同行一起交流心得,共同成长!

优秀是一种习惯,欢迎大家留言学习!