smart-bpmn-designer v2.0.5-beta.10
init smart-bpmn-designer
一、引擎打包指令:
- npm run designer
二、载入指令:
npm install --save smart-bpmn-designer
npm install --save bpmn-js@7.2.1
npm install --save bpmn-js-properties-panel@0.46.0
或者/使用淘宝镜像拉取
cnpm install --save smart-bpmn-designer
cnpm install --save bpmn-js@7.2.1
cnpm install --save bpmn-js-properties-panel@0.46.0
备注: 可能存在部分依赖报错,安提醒加载即可
三、项目中 main.js 中引入如下指令:
import { designer, previewer } from 'smart-bpmn-designer'
Vue.use(designer)
Vue.use(previewer)
也可以追加 option 配置用于修改接口请求代理前缀(例如 NG 代理前缀)
const option = {
bpmnProxy: '/NginxProxy'
}
Vue.use(designer, option)
Vue.use(previewer, option)
可按需引入,设计器组件-designer,和预览组件-previewer
四、代码使用:
引入项目后,可直接复制下述代码使用,开启流程图绘制(设计器组件)
<AspSmartBpmDesigner></AspSmartBpmDesigner>
或者复制下述代码,用于只展示流程图预览(预览组件)
<AspSmartBpmnPreviewer></AspSmartBpmnPreviewer>
属性说明
序号 | 属性 | 类型 | 说明 | 适用组件 | 是否必填 | 默认值 |
---|---|---|---|---|---|---|
1 | height | String | 设置引擎编辑高度 | desinger/previewer | 否 | 100% |
2 | isViewer | Boolean | 设置是否为预览模式 | desinger | 否 | false |
3 | isback | Boolean | 设置是否有返回按钮 | desinger/previewer | 否 | true |
4 | bpmnModel | Object | 设置设计器引擎必要参数,具体配置参数见下详述 | desinger/previewer | 是 | - |
5 | bpmnConfig | Array | 设置设计器引擎可呈现流程元素,可配置变量参考 asp_getBpmnConfigs()方法返回数据的 Key,设置'All'可展示所有 | desinger | 否 | 默认呈现基础流程元素节点 |
bpmnModel 属性赋值:
- 1、设计器模型下:
bpmnModel: {actModelId, flowKey, flowName }
属性说明:
- actModelId:原生流程设计模型 ID,创建流程时系统自动生成,新增是必传;
- flowKey:流程图 Key,创建流程图时传入
- flowName:流程图名称,创建流程图时传入
- 2、详情预览模型下:
bpmnModel: { instanceId, defId }
属性说明:(instanceId, defId 二者传其一可预览流程图)
- instanceId:流程实例 Id,可查看流程图及历史审批记录
- defId:流程定义 Id,只传该参数,仅可查看流程图
- 3、本地静态模拟模型下:
bpmnModel: { demoDesin }
属性说明:
- demoDesin:设计器引擎模拟器,仅在无工作流后端服务时,可通过设置 demoDesin 为 true 使用本地版进行模拟;(也可通过在 url 上配置参数 demoDesin=true 实现)
备注: 本地静态模拟模型下,因无后端服务,无法进行保存,及部分涉及接口查询的功能
五、 历史版本说明:
2023-08-012 1.1.3 更新拓展配置化
1、支持汉化包可自定义元素节点名称; 2、拓展提供钩子函数:
// 接口请求前置事件
beforeHttp({ alias, type, data, bpmFlowModel }, httpObject, callback) {
callback(httpObject)
},
// 接口请求后置事件
afterHttp({ alias, type, data, bpmFlowModel, httpObject }, response, callback) {
callback(response)
},
// 元素节点更新前置事件
beforeUpdateNode({ alias, type, bizObj, bpmFlowModel }, callback) {
callback(bpmFlowModel)
},
// 元素节点属性初始化前置事件
beforeInitNode({ alias, type, bizObj, bpmFlowModel }, callback) {
callback(bpmFlowModel)
}
2023-06-07 1.1.2-bate5 拓展流程元素节点
1、拓展流程元素节点,可支持动态配置; 2、优化流程元素初始化渲染机制; 3、拓展元素边界事件,支持定时器和定时器(非中断); 4、修复已知漏洞;
2023-06-01 1.1.2-bate.3 支撑流程预览
- 可通过配置 :
bpmnModel:{ readOnly, xml}
支持直接查看流程图
2022-12-05 1.1.2 开始兼容 IE11
- wangEditor 降低到 v4,兼容 IE11
- 引入 babel-polyfill,兼容 ES5
2022-10-24 1.1.0 以下版本(不包括 1.1.0),引用方式:
1. 项目中 main.js 中引入如下指令:
import aspBpmnDesigner from 'asp-bpmn-designer'
Vue.use(aspBpmnDesigner)
2. 也可以追加 option 配置用于修改接口请求代理前缀(例如 NG 代理前缀)
const option = {
bpmnProxy: '/NginxProxy'
}
Vue.use(aspBpmnDesigner, option)
3. 引入项目后,可直接复制下述代码使用
<aspBpmnDesigner></aspBpmnDesigner>
5 months ago
5 months ago
6 months ago
5 months ago
7 months ago
7 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago