workflow-bpmn-modeler-andtv-vue3 10.1.1 → 10.2.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.
Files changed (52) hide show
  1. package/dist/fonts/bpmn.5d33bee4.eot +0 -0
  2. package/dist/fonts/bpmn.67058807.woff2 +0 -0
  3. package/dist/fonts/bpmn.b5c9250d.ttf +0 -0
  4. package/dist/fonts/bpmn.e9e7d076.woff +0 -0
  5. package/dist/img/bpmn.74eea12b.svg +224 -0
  6. package/dist/workflow-bpmn-modeler-andtv-vue3.common.js +199 -5
  7. package/dist/workflow-bpmn-modeler-andtv-vue3.umd.js +199 -5
  8. package/dist/workflow-bpmn-modeler-andtv-vue3.umd.min.js +199 -5
  9. package/package/CHANGELOG.md +6 -0
  10. package/package/LICENSE +21 -0
  11. package/package/README.md +208 -0
  12. package/package/components/nodePanel/process.vue +9 -2
  13. package/package/components/nodePanel/startEnd.vue +6 -2
  14. package/package/dist/demo.html +9 -0
  15. package/package/dist/fonts/bpmn.5d33bee4.eot +0 -0
  16. package/package/dist/fonts/bpmn.67058807.woff2 +0 -0
  17. package/package/dist/fonts/bpmn.b5c9250d.ttf +0 -0
  18. package/package/dist/fonts/bpmn.e9e7d076.woff +0 -0
  19. package/package/dist/img/bpmn.74eea12b.svg +224 -0
  20. package/package/dist/workflow-bpmn-modeler-andtv-vue3.common.js +5617 -0
  21. package/package/dist/workflow-bpmn-modeler-andtv-vue3.umd.js +5617 -0
  22. package/package/dist/workflow-bpmn-modeler-andtv-vue3.umd.min.js +5617 -0
  23. package/package/index.vue +91 -427
  24. package/package/package/BpmData.js +68 -0
  25. package/package/package/PropertyPanel.vue +342 -0
  26. package/package/package/common/customTranslate.js +20 -0
  27. package/package/package/common/mixinExecutionListener.js +24 -0
  28. package/package/package/common/mixinPanel.js +70 -0
  29. package/package/package/common/mixinXcrud.js +22 -0
  30. package/package/package/common/parseElement.js +53 -0
  31. package/package/package/components/custom/customContextPad.vue +24 -0
  32. package/package/package/components/nodePanel/gateway.vue +165 -0
  33. package/package/package/components/nodePanel/process.vue +201 -0
  34. package/package/package/components/nodePanel/property/executionListener.vue +240 -0
  35. package/package/package/components/nodePanel/property/listenerParam.vue +137 -0
  36. package/package/package/components/nodePanel/property/multiInstance.vue +177 -0
  37. package/package/package/components/nodePanel/property/signal.vue +178 -0
  38. package/package/package/components/nodePanel/property/taskListener.vue +242 -0
  39. package/package/package/components/nodePanel/sequenceFlow.vue +180 -0
  40. package/package/package/components/nodePanel/startEnd.vue +174 -0
  41. package/package/package/components/nodePanel/task.vue +452 -0
  42. package/package/package/flowable/flowable.json +1218 -0
  43. package/package/package/flowable/init.js +24 -0
  44. package/package/package/flowable/showConfig.js +51 -0
  45. package/package/package/index.js +9 -0
  46. package/package/package/index.ts +10 -0
  47. package/package/package/index.vue +730 -0
  48. package/package/package/lang/zh.js +227 -0
  49. package/package/package/types/components.d.ts +35 -0
  50. package/package/package.json +89 -0
  51. package/package.json +12 -13
  52. package/package/bpmn-styles.css +0 -40
package/package/CHANGELOG.md ADDED
@@ -0,0 +1,6 @@
1
+ # ChangeLog
2
+
3
+ v0.0.1
4
+
5
+ -基于vue3和bpmn.io@8.10
6
+ -实现flowable的modeler模型设计器
package/package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2020 GoldSubmarine
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/package/README.md ADDED
@@ -0,0 +1,208 @@
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
+ ![20200930030243](https://cdn.jsdelivr.net/gh/goldsubmarine/cdn@master/blog/20200930030243.png)
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
+ <WorkflowBpmnModeler
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 WorkflowBpmnModeler from 'workflow-bpmn-modeler-andtv-vue3'
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
+ ### 全局注册使用
89
+
90
+ ```javascript
91
+ import { createApp } from 'vue'
92
+ import App from './App.vue'
93
+ import WorkflowBpmnModeler from 'workflow-bpmn-modeler-andtv-vue3'
94
+
95
+ const app = createApp(App)
96
+ app.use(WorkflowBpmnModeler)
97
+ app.mount('#app')
98
+ ```
99
+
100
+ ## 在 Vue 2 项目中使用
101
+
102
+ 如果你需要在 Vue 2 项目中使用，可以通过 iframe 的方式集成该流程设计器。
103
+
104
+ 本仓库通过 github pages 部署了静态页面，使用 jsdelivr 做 cdn ，国内访问也非常快速，所以你可以直接集成本仓库的页面。
105
+
106
+ 集成方式如下：
107
+
108
+ ```html
109
+ <!DOCTYPE html>
110
+ <html lang="en">
111
+ <body>
112
+ <iframe
113
+ src="https://goldsubmarine.github.io/workflow-bpmn-modeler/cdn/1.0.0/"
114
+ id="myFrame"
115
+ frameborder="0"
116
+ width="100%"
117
+ height="800px">
118
+ </iframe>
119
+
120
+ <script>
121
+ let myFrame = document.getElementById("myFrame");
122
+ // 获取到流程详情
123
+ window.addEventListener("message", (event) => {
124
+ console.log(event.data); // { xml: 'xxx', img: 'xxx', process: {} }
125
+ });
126
+ myFrame.onload = () => {
127
+ let postMsg = {
128
+ xml: "", // 后端查询到的xml，新建则为空串
129
+ users: [
130
+ { name: "张三1", id: "zhangsan" },
131
+ { name: "李四1", id: "lisi" },
132
+ { name: "王五1", id: "wangwu" },
133
+ ],
134
+ groups: [
135
+ { name: "web组1", id: "web" },
136
+ { name: "java组1", id: "java" },
137
+ { name: "python组1", id: "python" },
138
+ ],
139
+ categorys: [
140
+ { name: "OA1", id: "oa" },
141
+ { name: "财务1", id: "finance" },
142
+ ],
143
+ isView: false
144
+ }
145
+ // 设置初始化值
146
+ myFrame.contentWindow.postMessage(postMsg, "*")
147
+ }
148
+ </script>
149
+ </body>
150
+ </html>
151
+ ```
152
+
153
+ ## API 文档
154
+
155
+ ### Props
156
+
157
+ | 参数 | 说明 | 类型 | 默认值 |
158
+ |------|------|------|--------|
159
+ | xml | BPMN XML 字符串 | string | '' |
160
+ | users | 用户列表 | Array<{name: string, id: string}> | [] |
161
+ | groups | 组列表 | Array<{name: string, id: string}> | [] |
162
+ | categorys | 分类列表 | Array<{name: string, id: string}> | [] |
163
+ | is-view | 是否为只读模式 | boolean | false |
164
+
165
+ ### Events
166
+
167
+ | 事件名 | 说明 | 回调参数 |
168
+ |--------|------|----------|
169
+ | save | 保存时触发 | (data: {process: object, xml: string, svg: string}) |
170
+
171
+ ## 关于定制
172
+
173
+ 本组件对标的是 flowable 官方设计器，也就是实现 flowable 的 xml 规则标准，里面所用名词也都是官方文档中的专业术语。所以这个组件只是程序员在开发阶段，自己建模导出 xml 的工具，试图定制该建模器的行为都是不对的，不要把业务带到建模器中来！自己的业务应该另行开发增删改查来实现。
174
+
175
+ ## 技术栈
176
+
177
+ - Vue 3.3+
178
+ - TypeScript 5.0+
179
+ - Ant Design Vue 4.0+
180
+ - BPMN.js 8.10+
181
+ - SCSS
182
+
183
+ ## 开发
184
+
185
+ ```bash
186
+ # 克隆项目
187
+ git clone https://github.com/GoldSubmarine/workflow-bpmn-modeler.git
188
+
189
+ # 安装依赖
190
+ pnpm install
191
+
192
+ # 启动开发服务器
193
+ pnpm dev
194
+
195
+ # 构建库
196
+ pnpm build
197
+ ```
198
+
199
+ ## 赞助支持
200
+
201
+ ![donate](https://cdn.jsdelivr.net/gh/goldsubmarine/cdn@master/blog/donate.png)
202
+
203
+ ## License
204
+
205
+ [MIT](http://opensource.org/licenses/MIT)
206
+
207
+ Copyright (c) 2020-present, charles
208
+
package/package/components/nodePanel/process.vue CHANGED
@@ -46,7 +46,7 @@
46
46
  </template>
47
47
 
48
48
  <script setup lang="ts">
49
- import { ref, computed, watch, onMounted, nextTick } from 'vue'
49
+ import { ref, computed, watch, onMounted, nextTick, toRaw } from 'vue'
50
50
  import { FormInstance } from 'ant-design-vue'
51
51
  import executionListenerDialog from './property/executionListener.vue'
52
52
  import signalDialog from './property/signal.vue'
@@ -94,7 +94,13 @@ const updateProperties = (properties: Record<string, any>) => {
94
94
  nextTick(() => {
95
95
  try {
96
96
  const modeling = props.modeler.get('modeling')
97
- modeling.updateProperties(props.element, properties)
97
+ const elementRegistry = props.modeler.get('elementRegistry')
98
+ // 确保传入 bpmn-js 的是原始元素而非 Vue 代理
99
+ const current = elementRegistry.get(props.element?.id)
100
+ const rawElement = current || toRaw(props.element)
101
+ // 保证传递的属性对象不是被代理的响应式对象
102
+ const plainProps = JSON.parse(JSON.stringify(properties))
103
+ modeling.updateProperties(rawElement, plainProps)
98
104
  } catch (error) {
99
105
  console.warn('Update properties error:', error)
100
106
  }
@@ -149,6 +155,7 @@ watch(() => formData.value.documentation, (val) => {
149
155
  }
150
156
  if (props.modeler?.get('moddle')) {
151
157
  const documentationElement = props.modeler.get('moddle').create('bpmn:Documentation', { text: val })
158
+ // 直接传递由 moddle 创建的纯对象数组，避免被代理
152
159
  updateProperties({ documentation: [documentationElement] })
153
160
  }
154
161
  })
package/package/components/nodePanel/startEnd.vue CHANGED
@@ -38,7 +38,7 @@
38
38
  </template>
39
39
 
40
40
  <script setup lang="ts">
41
- import { ref, computed, watch, onMounted, nextTick } from 'vue'
41
+ import { ref, computed, watch, onMounted, nextTick, toRaw } from 'vue'
42
42
  import { FormInstance } from 'ant-design-vue'
43
43
  import executionListenerDialog from './property/executionListener.vue'
44
44
  import { commonParse } from '../../common/parseElement'
@@ -74,7 +74,11 @@ const updateProperties = (properties: Record<string, any>) => {
74
74
  nextTick(() => {
75
75
  try {
76
76
  const modeling = props.modeler.get('modeling')
77
- modeling.updateProperties(props.element, properties)
77
+ const elementRegistry = props.modeler.get('elementRegistry')
78
+ const current = elementRegistry.get(props.element?.id)
79
+ const rawElement = current || toRaw(props.element)
80
+ const plainProps = JSON.parse(JSON.stringify(properties))
81
+ modeling.updateProperties(rawElement, plainProps)
78
82
  } catch (error) {
79
83
  console.warn('Update properties error:', error)
80
84
  }
package/package/dist/demo.html ADDED
@@ -0,0 +1,9 @@
1
+ <!DOCTYPE html>
2
+ <meta charset="utf-8">
3
+ <title>workflow-bpmn-modeler-andtv-vue3 demo</title>
4
+ <script src="./workflow-bpmn-modeler-andtv-vue3.umd.js"></script>
5
+
6
+
7
+ <script>
8
+ console.log(workflow-bpmn-modeler-andtv-vue3)
9
+ </script>