基于vue+bpmn.js改造的流程引擎编辑器

下载依赖

yarn install或者npm i

启动

yarn serve或者npm run serve

编译打包

yarn build或者npm run build

Lints and fixes files

yarn lint

展示效果

• 隐藏编辑功能后效果

• 显示所有编辑功能后效果

使用方法

参考src目录下的Demo.vue

<template>
    <smc-bpmn :xml="xml" />
</template>

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------------------------------------------------------ | ------- | --------------------- | ------ | | xml | 标准的BPMN格式，用于加载流程图 | string | -- | null | | formSize | 表单大小，参考element | string | medium / small / mini | mini | | formProperty | 表单属性，参考下面表单属性 | Array | -- | -- | | formKey | 表单key，用于选择表单，参考表单属性 | String | -- | -- | | showDialog | 移动到节点上时，是否显示dialog | boolean | false/true | false | | isView | 是否显示编辑功能 | boolean | false/true | true | | completeList | 流程完成节点样式，节点id数组 | Array | -- | -- | | todoList | 流程当前节点样式，节点id数组 | Array | -- | -- | | formDetail | 流程表单处理信息，移动到节点上时，显示dialog的内容，showDialog必须为true | -- | -- |

表单属性

| 参数 | 说明 | 类型 | 可选值 | | -------- | ----------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------- | | id | 表单唯一值，用于判断加载哪个表单，配置formKey属性使用 | string | 必填 | | name | 表单名称 | string | 必填 | | property | 表单填写信息 | Array | {id: '字段id', name: '字段名称', readable: 是否可读(true/false), writable: 是否可写(true/false) } |