init smart-bpmn-designer

一、引擎打包指令：

• npm run designer

二、载入指令：

• npm install --save smart-bpmn-designer

• npm install --save [email protected]

• npm install --save [email protected]

或者/使用淘宝镜像拉取

• cnpm install --save smart-bpmn-designer

• cnpm install --save [email protected]

• cnpm install --save [email protected]

备注： 可能存在部分依赖报错，安提醒加载即可

三、项目中 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 }

属性说明：

1. actModelId：原生流程设计模型 ID，创建流程时系统自动生成，新增是必传；
2. flowKey：流程图 Key，创建流程图时传入
3. flowName：流程图名称，创建流程图时传入

• 2、详情预览模型下：bpmnModel: { instanceId, defId }

属性说明：（instanceId, defId 二者传其一可预览流程图）

1. instanceId：流程实例 Id，可查看流程图及历史审批记录
2. defId：流程定义 Id，只传该参数，仅可查看流程图

• 3、本地静态模拟模型下：bpmnModel: { demoDesin }

属性说明：

1. 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>