antd-bpmn v1.0.0 发布,一个 React 工作流高阶组件


【源创会预告】1024 程序员节(的前两天),相约开源PHP办公室,我们一起聊 AI!>>>

antd-bpmn

一个基于 React + Ant.design + bpmn.js 编写的工作流高阶组件。

已完成功能

  •  基于 bpmn.js 的基础画图功能
  •  XML 预览
  •  XML 保存
  •  对齐方式:向右对齐,左右居中,向左对齐,向上对齐,上下居中,向下对齐
  •  放大、缩小
  •  撤销、重做
  •  小地图、快捷键
  •  重写工具栏(更符合国人习惯)
  •  重写元素菜单(更符合国人习惯)
  •  属性面板的设置

如何使用

安装:

npm i @codeflex/antd-bpmn
 

示例代码:

function App() {
const config: AntdBpmnConfig = {
deptDataUrl: "/xxxx",
deptDataUrl: "bpmn.demo.xml",
onLoad: (url, set) => {
console.log("onLoad", url)
// 加载 xml 数据
if (url === "bpmn.demo.xml") {
fetch(url).then(response => set(response.text()))
.catch(err => console.log(err));
}
// 加载部门数据
else {
set([
{value: 'dept1', label: '北京分公司'},
{value: 'dept2', label: '上海分公司'},
{value: 'dept3', label: '-- 上海研发部'},
])
}
},

onChooseAssignee: (set) => {
set(Math.random(), "Michael");
},
};
return <AntdBpmn config={config}/>;
}
 

AntdBpmnConfig 说明:

  • xmlDataUrl: 获取 bpmn xml 数据的 URL
  • deptDataUrl: 获取部门数据的 URL
  • onLoad: 监听加载网络数据,数据加载完毕后通过第二个参数 set 方法来设置
  • onChooseAssignee: 监听选择用户操作,选择用户后通过第二个参数 set 方法来设置

运行测试

git clone https://gitee.com/antdadmin/antd-bpmn.git

npm install
npm run dev

AntdAdmin 介绍

AntdAdmin 是一个致力于 中国信创 产业的前端开源框架,其底层技术栈主要以 React + Ant.design 为主。AntdAdmin 开源(或者计划开源)的产品主要如下:

  • antd-admin:一个基于 React + Ant.Design 的中(后)台 UI 框架(准备中...)。
  • antd-crud:一个基于 React + Ant.Design 的增删改查高级组件(已开源:https://gitee.com/antdadmin/antd-crud )。
  • antd-bpmn:一个基于 React + Ant.Design 的工作流设计组件(已开源:https://gitee.com/antdadmin/antd-bpmn )。
  • antd-builder:一个基于 React + Ant.Design 的表单拖拽设计组件(准备中...)。

相關推薦

2023-10-21

【源创会预告】1024 程序员节(的前两天),相约开源PHP办公室,我们一起聊 AI!>>> antd-crud 一个基于 React + Ant.Design 的增删改查组件。 特征 1、极轻量,只依赖于 Ant.Design 再无其他任何依赖 2、支持基本的【增删改查】

2023-10-24

组件(已开源:https://gitee.com/antdadmin/antd-crud )。 antd-bpmn:一个基于 React + Ant.Design 的工作流设计组件(已开源:https://gitee.com/antdadmin/antd-bpmn )。 antd-builder:一个基于 React + Ant.Design 的表单拖拽设计组件(准备中...)

2023-10-15

基于 React + Ant.Design 的增删改查高级组件(已开源)。 antd-bpmn:一个基于 React + Ant.Design 的工作流设计组件(准备中...)。 antd-builder:一个基于 React + Ant.Design 的拖拽设计组件(准备中...)。  

2023-10-17

两个 React 高级组件,用到的同学也可以关注下: -  Antd-bpmn:一个基于 React + Ant.design + bpmn.js 编写的工作流高阶组件,开源网址:https://gitee.com/antdadmin/antd-bpmn - Antd-crud:一个优质的 React 【增删改查】高阶组件,基于 Ant.Desig

2023-10-28

两个 React 高级组件,用到的同学也可以关注下: -  Antd-bpmn:一个基于 React + Ant.design + bpmn.js 编写的工作流高阶组件,开源网址:https://gitee.com/antdadmin/antd-bpmn - Antd-crud:一个优质的 React 【增删改查】高阶组件,基于 Ant

2023-04-14

v1.0.0 更新内容: 1、设计、规划和研发基础 RBAC 权限架构; 2、编写框架核心底层代码,设计基于 Layout 布局的模板,设计并编写自定义模板 html 文件; 3、对系统模板进行架构设计及模板继承相关设计; 4、研发框架基础模块,

2023-08-04

与统一维护管理的模块。 通知公告:系统通知公告信息发布维护。 代码生成:一键生成模块CRUD的功能,包括后端和前端等相关代码。 案例演示:常规代码生成器一键生成后的演示案例。 软件信息 软件名称:RXThinkCMF

2023-08-12

v1.0.0 更新内容: 1、搭建基于 ThinkPHP8 的项目架构; 2、新增角色、菜单、节点等权限架构体系; 3、新增基础用户、角色、菜单等基础模块; 4、新增字典、配置等基础数据模块; 5、新增广告、友链、站点等业务模块; 6、新增

2023-12-07

Spring-boot-holiday-starter v1.0.0 一个轻量级节假日判断的小工具!      前言 由于项目原因,在一些场景下需要判断是否是节假日,所以写了一个工具类,方便使用。 开源不易,点个 star 鼓励一下吧! 介绍

2023-08-30

模型与底层技术 >>> Notary 项目维护人员宣布了一项重大发布,包括 Notary 项目规范 v1.0.0、notation v1.0.0、notation-go v1.0.0 和notation-core-go v1.0.0,已经可以用于生产环境! Notation 是 Notary 项目的一个子项目,包括 notation CLI 和两

2022-12-09

PdlBox_library v1.0.0 已经发布 此版本更新内容包括: 加入bugly库 详情查看:https://gitee.com/clbDream/pdl-box_library/releases/v1.0.0

2024-10-28

Agents-Flex v1.0.0-beta.13 已经发布,大语言模型应用开发框架 此版本更新内容包括: feat: add plugin for solon framework refactor: optimize VectorStore delete methods refactor: optimize RedisVectorStore for sort by desc refactor: optimize SparkLLM embedding

2023-11-30

AiEditor 关于 AiEditor(官网 https://aieditor.dev ) AiEditor 是一个面向 AI 的下一代富文本编辑器,她基于 Web Component,因此支持 Layui、Vue、React、Angular 等几乎任何前端框架。她适配了 PC Web 端和手机端,并提供了 亮色 和

2023-04-04

务治理等功能,无需安装依赖Docker、Maven、Node等环境即可发布Java和Node应用,主要特点:部署简单、操作简洁、功能快速。 更新内容 重大特性更新 增加副本资源的监控功能; 支持通过tag构建版本; 支持环境维度的亲和