workflow-bpmn-modeler-andtv-vue3 0.0.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +195 -0
- package/package.json +13 -6
package/README.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# workflow-bpmn-modeler-andtv-vue
|
|
2
|
+
|
|
3
|
+
🔥 本项目基于 `Vue3` + `TypeScript` + `Ant Design Vue` 和 `bpmn.io@8.10` ，实现 flowable 的 modeler 流程设计器
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- ✅ 基于 Vue3 + TypeScript + Ant Design Vue
|
|
8
|
+
- ✅ 支持 Flowable BPMN 2.0 标准
|
|
9
|
+
- ✅ 完整的流程设计器功能
|
|
10
|
+
- ✅ 支持用户、组、分类配置
|
|
11
|
+
- ✅ 支持执行监听器、任务监听器、多实例等高级功能
|
|
12
|
+
- ✅ 支持信号定义和事件处理
|
|
13
|
+
- ✅ 响应式设计，支持移动端
|
|
14
|
+
- ✅ 完整的 TypeScript 类型支持
|
|
15
|
+
|
|
16
|
+
## 预览
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## 在线 demo
|
|
21
|
+
|
|
22
|
+
👉 https://goldsubmarine.github.io/workflow-bpmn-modeler/demo/
|
|
23
|
+
|
|
24
|
+
## 安装
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
# 使用 npm
|
|
28
|
+
npm install workflow-bpmn-modeler-andtv-vue
|
|
29
|
+
|
|
30
|
+
# 使用 yarn
|
|
31
|
+
yarn add workflow-bpmn-modeler-andtv-vue
|
|
32
|
+
|
|
33
|
+
# 使用 pnpm
|
|
34
|
+
pnpm add workflow-bpmn-modeler-andtv-vue
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## 使用说明（最简 demo）
|
|
38
|
+
|
|
39
|
+
```vue
|
|
40
|
+
<template>
|
|
41
|
+
<div>
|
|
42
|
+
<bpmn-modeler
|
|
43
|
+
ref="refNode"
|
|
44
|
+
:xml="xml"
|
|
45
|
+
:users="users"
|
|
46
|
+
:groups="groups"
|
|
47
|
+
:categorys="categorys"
|
|
48
|
+
:is-view="false"
|
|
49
|
+
@save="save"
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<script setup lang="ts">
|
|
55
|
+
import { ref } from 'vue'
|
|
56
|
+
import BpmnModeler from 'workflow-bpmn-modeler-andtv-vue'
|
|
57
|
+
|
|
58
|
+
// 用户数据
|
|
59
|
+
const users = ref([
|
|
60
|
+
{ name: "张三", id: "zhangsan" },
|
|
61
|
+
{ name: "李四", id: "lisi" },
|
|
62
|
+
{ name: "王五", id: "wangwu" },
|
|
63
|
+
])
|
|
64
|
+
|
|
65
|
+
// 组数据
|
|
66
|
+
const groups = ref([
|
|
67
|
+
{ name: "web组", id: "web" },
|
|
68
|
+
{ name: "java组", id: "java" },
|
|
69
|
+
{ name: "python组", id: "python" },
|
|
70
|
+
])
|
|
71
|
+
|
|
72
|
+
// 分类数据
|
|
73
|
+
const categorys = ref([
|
|
74
|
+
{ name: "OA", id: "oa" },
|
|
75
|
+
{ name: "财务", id: "finance" },
|
|
76
|
+
])
|
|
77
|
+
|
|
78
|
+
// XML 数据
|
|
79
|
+
const xml = ref('') // 后端查询到的xml
|
|
80
|
+
|
|
81
|
+
// 保存回调
|
|
82
|
+
const save = (data: any) => {
|
|
83
|
+
console.log(data) // { process: {...}, xml: '...', svg: '...' }
|
|
84
|
+
}
|
|
85
|
+
</script>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## 在 Vue 2 项目中使用
|
|
89
|
+
|
|
90
|
+
如果你需要在 Vue 2 项目中使用，可以通过 iframe 的方式集成该流程设计器。
|
|
91
|
+
|
|
92
|
+
本仓库通过 github pages 部署了静态页面，使用 jsdelivr 做 cdn ，国内访问也非常快速，所以你可以直接集成本仓库的页面。
|
|
93
|
+
|
|
94
|
+
集成方式如下：
|
|
95
|
+
|
|
96
|
+
```html
|
|
97
|
+
<!DOCTYPE html>
|
|
98
|
+
<html lang="en">
|
|
99
|
+
<body>
|
|
100
|
+
<iframe
|
|
101
|
+
src="https://goldsubmarine.github.io/workflow-bpmn-modeler/cdn/1.0.0/"
|
|
102
|
+
id="myFrame"
|
|
103
|
+
frameborder="0"
|
|
104
|
+
width="100%"
|
|
105
|
+
height="800px">
|
|
106
|
+
</iframe>
|
|
107
|
+
|
|
108
|
+
<script>
|
|
109
|
+
let myFrame = document.getElementById("myFrame");
|
|
110
|
+
// 获取到流程详情
|
|
111
|
+
window.addEventListener("message", (event) => {
|
|
112
|
+
console.log(event.data); // { xml: 'xxx', img: 'xxx', process: {} }
|
|
113
|
+
});
|
|
114
|
+
myFrame.onload = () => {
|
|
115
|
+
let postMsg = {
|
|
116
|
+
xml: "", // 后端查询到的xml，新建则为空串
|
|
117
|
+
users: [
|
|
118
|
+
{ name: "张三1", id: "zhangsan" },
|
|
119
|
+
{ name: "李四1", id: "lisi" },
|
|
120
|
+
{ name: "王五1", id: "wangwu" },
|
|
121
|
+
],
|
|
122
|
+
groups: [
|
|
123
|
+
{ name: "web组1", id: "web" },
|
|
124
|
+
{ name: "java组1", id: "java" },
|
|
125
|
+
{ name: "python组1", id: "python" },
|
|
126
|
+
],
|
|
127
|
+
categorys: [
|
|
128
|
+
{ name: "OA1", id: "oa" },
|
|
129
|
+
{ name: "财务1", id: "finance" },
|
|
130
|
+
],
|
|
131
|
+
isView: false
|
|
132
|
+
}
|
|
133
|
+
// 设置初始化值
|
|
134
|
+
myFrame.contentWindow.postMessage(postMsg, "*")
|
|
135
|
+
}
|
|
136
|
+
</script>
|
|
137
|
+
</body>
|
|
138
|
+
</html>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## API 文档
|
|
142
|
+
|
|
143
|
+
### Props
|
|
144
|
+
|
|
145
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
146
|
+
|------|------|------|--------|
|
|
147
|
+
| xml | BPMN XML 字符串 | string | '' |
|
|
148
|
+
| users | 用户列表 | Array<{name: string, id: string}> | [] |
|
|
149
|
+
| groups | 组列表 | Array<{name: string, id: string}> | [] |
|
|
150
|
+
| categorys | 分类列表 | Array<{name: string, id: string}> | [] |
|
|
151
|
+
| is-view | 是否为只读模式 | boolean | false |
|
|
152
|
+
|
|
153
|
+
### Events
|
|
154
|
+
|
|
155
|
+
| 事件名 | 说明 | 回调参数 |
|
|
156
|
+
|--------|------|----------|
|
|
157
|
+
| save | 保存时触发 | (data: {process: object, xml: string, svg: string}) |
|
|
158
|
+
|
|
159
|
+
## 关于定制
|
|
160
|
+
|
|
161
|
+
本组件对标的是 flowable 官方设计器，也就是实现 flowable 的 xml 规则标准，里面所用名词也都是官方文档中的专业术语。所以这个组件只是程序员在开发阶段，自己建模导出 xml 的工具，试图定制该建模器的行为都是不对的，不要把业务带到建模器中来！自己的业务应该另行开发增删改查来实现。
|
|
162
|
+
|
|
163
|
+
## 技术栈
|
|
164
|
+
|
|
165
|
+
- Vue 3.3+
|
|
166
|
+
- TypeScript 5.0+
|
|
167
|
+
- Ant Design Vue 4.0+
|
|
168
|
+
- BPMN.js 8.10+
|
|
169
|
+
- SCSS
|
|
170
|
+
|
|
171
|
+
## 开发
|
|
172
|
+
|
|
173
|
+
```bash
|
|
174
|
+
# 克隆项目
|
|
175
|
+
git clone https://github.com/GoldSubmarine/workflow-bpmn-modeler.git
|
|
176
|
+
|
|
177
|
+
# 安装依赖
|
|
178
|
+
pnpm install
|
|
179
|
+
|
|
180
|
+
# 启动开发服务器
|
|
181
|
+
pnpm dev
|
|
182
|
+
|
|
183
|
+
# 构建库
|
|
184
|
+
pnpm build
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## 赞助支持
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
## License
|
|
192
|
+
|
|
193
|
+
[MIT](http://opensource.org/licenses/MIT)
|
|
194
|
+
|
|
195
|
+
Copyright (c) 2020-present, charles
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "workflow-bpmn-modeler-andtv-vue3",
|
|
3
|
-
"version": "0.0
|
|
4
|
-
"description": "基于 `
|
|
5
|
-
"main": "dist/workflow-bpmn-modeler.umd.min.js",
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "基于 `Vue3` + `TypeScript` + `Ant Design Vue` 和 `bpmn.io@8.10` ，实现 flowable 的 modeler 模型设计器",
|
|
5
|
+
"main": "dist/workflow-bpmn-modeler-andtv-vue.umd.min.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "vue-cli-service serve --open",
|
|
8
8
|
"demo": "cross-env NODE_ENV=demo vue-cli-service build",
|
|
@@ -20,13 +20,17 @@
|
|
|
20
20
|
"type": "git",
|
|
21
21
|
"url": "git+https://github.com/GoldSubmarine/workflow-bpmn-modeler.git"
|
|
22
22
|
},
|
|
23
|
+
"homepage": "https://github.com/GoldSubmarine/workflow-bpmn-modeler#readme",
|
|
23
24
|
"keywords": [
|
|
24
|
-
"
|
|
25
|
+
"vue3",
|
|
26
|
+
"typescript",
|
|
25
27
|
"ant-design-vue",
|
|
26
28
|
"flowable",
|
|
27
|
-
"模型设计器",
|
|
28
29
|
"bpmn",
|
|
29
|
-
"
|
|
30
|
+
"modeler",
|
|
31
|
+
"工作流",
|
|
32
|
+
"流程设计器",
|
|
33
|
+
"workflow-bpmn-modeler"
|
|
30
34
|
],
|
|
31
35
|
"author": {
|
|
32
36
|
"name": "charles",
|
|
@@ -36,6 +40,9 @@
|
|
|
36
40
|
"bugs": {
|
|
37
41
|
"url": "https://github.com/GoldSubmarine/workflow-bpmn-modeler/issues"
|
|
38
42
|
},
|
|
43
|
+
"engines": {
|
|
44
|
+
"node": ">=14.0.0"
|
|
45
|
+
},
|
|
39
46
|
"dependencies": {
|
|
40
47
|
"@ant-design/icons-vue": "^7.0.0",
|
|
41
48
|
"ant-design-vue": "^4.0.0",
|