zs-bpmn-vue3
v0.0.18
Published
> **该组件是在Vite Vue Bpmn Process Editor项目基础上封装的vue3组件版,删除了部分内容,只有activiti,其他可自行与原版项目对比,这版本最主要是vue3版本,也有我封装的[vue2组件版本](https://www.npmjs.com/package/bpmn-activiti-lyl),需要自行查看**
Downloads
23
Readme
Vite Vue Bpmn Process Editor 组件版本(vue3)
该组件是在Vite Vue Bpmn Process Editor项目基础上封装的vue3组件版,删除了部分内容,只有activiti,其他可自行与原版项目对比,这版本最主要是vue3版本,也有我封装的vue2组件版本,需要自行查看
1. 调用组件
npm install zs-bpmn-vue3
2. 新项目引入
在main.ts中全局引入
import { ZsBpmn } from 'zs-bpmn-vue3';
import 'zs-bpmn-vue3/dist/style.css';
app.use(ZsBpmn)
在页面中直接调用,xml 为传进组件中的内容,可直接渲染页面;submit 是保存按钮的点击事件,有个参数是页面的 xml
<ZsBpmn :xml="comState.bpmnXml" @submit="saveBpmnXml" />
以下内容全部为原版项目的介绍,别看错!别看错!
Description
A Vite Vue Bpmn Process Editor based on Bpmn.js, Vite, Vue.js 3.x.
The typescript type declaration of Bpmn.js and Diagram.js is implemented, and typescript can be used to write code in the editor.
Gitee: https://gitee.com/MiyueSC/vite-vue-bpmn-process
Friendship sponsorship
Life is not easy, pig sighs sighs. If it helps you, you can buy me a cup of coffee. Thanks ( After all, this project has been written for several months, and the typescript part is really too difficult to write. )~~~~
付费咨询联系微信:
Directory
|-- public
|-- src
| |-- additional-functions 扩展的事件函数方法,包括右键事件等
| |-- additional-modules bpmn.js 自定义模块(扩展与重写)
| |-- AutoPlace
| |-- ContextPad
| |-- Lint
| |-- Palette
| |-- PopupMenu
| |-- Renderer
| |-- Rules
| |-- Translate
| |-- bo-utils businessObject 相关属性处理函数
| |-- components 组件 与 bpmn.js 自定义模块
| |-- common 公共组件
| |-- Designer 流程设计器
| |-- Palette 重写的 bpmn.js 的 Palette 组件
| |-- Panel 重写的 bpmn.js 的 Panel 组件
| |-- Setting 项目配置表单组件
| |-- Toolbar 编辑器工具栏组件
| |-- bpmn-icons bpmn 对应的图标文件 svg
| |-- config 项目配置文件
| |-- moddle-extensions bpmn.js 扩展解析文件
| |-- activiti.json
| |-- bpmn.json bpmn 基础元素和属性配置
| |-- camunda.json
| |-- flowable.json
| |-- miyue.json 自定义扩展配置
| |-- zeebe.json zeebe 表单配置
| |-- store
| |-- editor
| |-- modeler
| |-- styles
| |-- camunda-penal.scss camunda 官方侧边栏样式
| |-- context-pad.scss bpmn.js 上下文菜单样式(扩展部分)
| |-- designer.scss 流程设计器样式
| |-- index.scss 项目样式统一入口
| |-- palette.scss bpmn.js 的 Palette 组件样式(扩展部分)
| |-- panel.scss bpmn.js 的 Panel 组件样式(重写panel)
| |-- setting.scss 项目配置表单样式
| |-- toolbar.scss 编辑器工具栏样式
| |-- utils
| |-- EmptyXML.ts 生成空的 XML 文件
| |-- EventEmitter.ts 事件发布订阅器
| |-- files.ts 文件相关操作
| |-- index.ts 常用工具函数
| |-- Logger.ts 控制台日志输出美化
| |-- storage.ts 本地存储操作
| |-- tools.ts 常用工具函数
| |-- uuid.ts uuid 生成器
| |-- App.vue
| |-- main.ts
| |-- env.d.ts
|-- types
| |-- bpmn-moddle
| |-- declares
| |-- bpmn.d.ts bpmn.js 的类型声明文件
| |-- bpmn-js-bpmnlint.d.ts bpmn.js lint 模块
| |-- bpmn-js-token-simulation.d.ts bpmn.js 流转模拟模块
| |-- bpmn-moddle.d.ts bpmn.js 的 moddle 类型声明文件
| |-- camunda-bpmn-moddle.d.ts camunda 官方 moddle 类型声明文件
| |-- diagram.d.ts diagram.js 的类型声明文件
| |-- diagram-js-direct-editing.d.ts diagram.js 的双击编辑类型声明文件
| |-- didi.d.ts [Nikku - didi](https://github.com/nikku/didi/blob/master/lib/index.d.ts)
| |-- moddle.d.ts moddle 的类型声明文件
| |-- object-refs.d.ts
| |-- editor
|-- LICENSE
|-- README.md
|-- tsconfig.json
|-- package.json
|-- vite.config.js
Activiti moddle json: https://github.com/Activiti/activiti-modeling-app/blob/master/projects/process-editor/src/services/activiti.json
Licence
This project is licensed under the Apache License 2.0 .