工作流流程引擎flowable+springboot+vue3完整项目

## 界面布局结构 - palette(工具栏) ：提供拖拽工具、框选工具、连线工具、基本图元等 - contextPad(上下文面板)：可以理解为快捷面板 - propertiesPanel(属性面板)：定义流程图中图形元素属性 - shape(图形) 是所有图形的基类（比如Connection，Root） ## 导入与导出 ```` ## 导入 // 异步方式（推荐） let result = await bpmnModeler.importXML(xml) // 回调方式 bpmnModeler.importXML(xml, (result) => {} ) ### 导出xml // 异步方式 let { xml } = await bpmnModeler.saveXML() // 回调方式 bpmnModeler.saveXML({ format: false },({ xml }) => {}) // 格式化导出的xml let { xml } = await bpmnModeler.saveXML({ format: true }) ### 导出svg // 异步方式 let { svg } = await bpmnModeler.saveSVG() // 回调方式 bpmnModeler.saveXML(( { svg } )=>{ }) ## 导入的生命周期事件如下： import.parse.start (即将从xml读取模型) import.parse.complete (模型读取完成) import.render.start (图形导入开始) import.render.complete (图形导入完成) import.done (一切都完成) ```` ## 内部模块/供应商/服务 - eventBus - 事件总线，管理bpmn实例中所有事件 - canvas - 画布，管理svg元素、连线/图形的添加/删除、缩放等 - commandStack - 命令堆栈，管理bpmn内部所有命令操作，提供撤销、重做功能等 - elementRegistry - 元素注册表，管理bpmn内部所有元素 - moddle - 模型管理，用于管理bpmn的xml结构 - modeling - 建模器，绘图时用到，提供用于更新画布上元素的 API（移动、删除） ```` ## 获取一个模块 // 第一个参数为模块名称，第二参数表示是否严格模式 bpmnModeler.get("模块名称",false) ```` ## 事件总线 - eventBus ```` ## 获取事件总线模块 let eventBus = bpmnModeler.get("eventBus") ## 监听事件 // 监听事件 eventBus.on('element.changed', (ev) => {}) // 监听多个事件 eventBus.on( ['shape.added', 'connection.added', 'shape.removed', 'connection.removed'], (ev) => { } ) // 设置优先级 eventBus.on('element.changed', 100, (ev) => {}) // 传入上下文 eventBus.on('element.changed', (ev) => {}, that) // 使用所有参数 eventBus.on('事件名称', 优先级（可选）, 回调函数, 上下文（可选）) ## 只监听一次事件 // 用法同on eventBus.once('事件名称', 优先级（可选）, 回调函数, 上下文（可选）) ## 取消监听事件 // 取消监听 eventBus.off('element.changed', callback) // 取消监听多个事件 eventBus.off(['shape.added', 'connection.added', 'shape.removed', 'connection.removed'], callback) ## 触发事件 eventBus.fire('element.changed', data) ```` ## 画布 - canvas ```` ## 获取画布模块 let canvas = bpmnModeler.get("canvas") ## 缩放 /** * * @param {'fit-viewport' | 'fit-content' | number} lvl * @param {'auto'|{ x: number, y: number }} center */ function zoom(lvl, center) { let canvas = bpmnModeler.get('canvas') canvas.zoom(lvl, center) } // 适应容器缩放 zoom('fit-canvas','auto') // 完全显示内容 zoom('fit-content','auto') ## 对齐（选择多个元素使用shift+鼠标左键） /** * 获取当前选集并对齐 * @param {'left'|'right'|'top'|'bottom'|'middle'|'center'} mode */ function align(mode) { const align = bpmnModeler.get('alignElements') const selection = bpmnModeler.get('selection') const elements = selection.get() if (!elements || elements.length === 0) { return } align.trigger(elements, mode) } ```` ## 元素注册表 - elementRegistry ```` ## 获取元素注册表模块 let elementRegistry = bpmnModeler.get('elementRegistry') ## 遍历所有元素 elementRegistry.forEach((shape, svgElement) => { }) ## 获取指定元素 let shape = elementRegistry.get(元素id或者SVGElement) ## 获取过滤后的元素 let shapes = elementRegistry.filter((shape) => shape.type === 'bpmn:Task') ## 更新元素ID elementRegistry.updateId(shape, "123xxxxsssd") ## 删除一个元素 elementRegistry .remove(传入SVGElement) ## 模型 - moddle 基本上没有用到，具体类型定义见此 ## 建模器 - modeling 获取建模器模块 let modeling= bpmnModeler.get('modeling') ## 修改元素显示文本（常用） modeling.updateLabel(shape, '审核') ## 修改元素属性（常用） modeling.updateProperties(shape, { 属性名称: 属性值 }) ## 对齐元素集合 const selection = bpmnModeler.get('selection') const elements = selection.get() modeling.updateProperties(selection, 'left') ````