workflow-bpmn-antdv-panda v1.0.10

安装 ⏳

# yarn
yarn add workflow-bpmn-antdv-panda
# Or npm
npm i workflow-bpmn-antdv-panda

更新日志

1.0.0 更新说明 新增了邮件配置

注意事项

组件使用AntdvUI，但UI需要自行配置,如果版本缺少组件根据报错自行加入全局 例如：

import { FormModel } from 'ant-design-vue';

Vue.use(FormModel);

文档建议参考代码仓库为准

使用说明 👣

完整示例 👣

<template>
  <div id="app">
    <bpmn-modeler
        ref="refNode"
        :xml="xml"
        :is-view="false"
        :categories="categories"
        :categories-fields="categoriesFields"
        :users="users"
        :groups="groups"
        :candidate-user-data-source="candidateUserDataSource"
        :candidate-group-data-source="candidateGroupDataSource"

    :paletteToolShow="paletteToolShow"
    :panelFilters="panelFilters"
    :paletteFilters="paletteFilters"
    :associate-form-config="associateFormConfig"
    :associate-form-data-options="associateFormDataOptions"
    :assignee-data-source="assigneeDataSource"
    :due-date-data-source="dueDateDataSource"
    :follow-up-date-data-source="followUpDateDataSource"
    :initiator-data-source="initiatorDataSource"
    :skip-expression-data-source="skipExpressionDataSource"
    :condition-expression-data-source="conditionExpressionDataSource"
    @save="saveModeler"
    @showForm="showAssociateForm"
    @createForm="createAssociateForm"
>
  <!--左边扩展按钮示例-->
  <div slot="header-left">
    <a-button>左边扩展</a-button>
  </div>
  <!--右边扩展按钮示例-->
  <div slot="header-right">
    <a-button>右边扩展</a-button>
  </div>
</bpmn-modeler>

<a-modal v-model:visible="formShowVisible" title="显示表单" width="400px">
  <template #footer>
  </template>
  【显示表单】本功能为外部扩展，非组件内部弹窗,用于接入flowable动态表单或其他自定义动态表单....
</a-modal>
<a-modal v-model:visible="formCreateVisible" title="创建表单" width="400px">
  <template #footer>
  </template>
  【创建表单】本功能为外部扩展，非组件内部弹窗,用于接入flowable动态表单或其他自定义动态表单....
</a-modal>

> 内容参数均为选用，无需任何参数也可以使用，根据实际情况配置

## 组件参数 👣
### 主要参数 👣


| Attributes        | describe            | structure                                                    | type    | default |
| ----------------- | ------------------- | ------------------------------------------------------------ | ------- | ------- |
| xml               | 流程文件xml数据       |                                                              | String  | ''      |
| users             | 指定或候选用户列表     | [<br/>  { name: 'name', id: 'id' },<br/>]                    | Array   | []      |
| groups            | 候选组               | [<br/>    { name: 'name', id: 'id' },<br/>]                  | Array   | []      |
| categories        | 流程分类             | [<br/>    { name: 'name', id: 'id' },<br/>]                  | Array   | []      |
| isView            | 视图模式             |                                                              | Boolean | false   |
| rightActionConfig | 头部右侧导航栏按钮配置  | {<br/>  ".*":{<br/>    "show":true,<br/>    "icon":true,<br/>    "label":"XML"<br/>    }<br/>  } | Object  | 见下文  |

头部右侧导航栏按钮配置默认配置

```json
{
  "showCode":{
    "show":true,
    "icon":true,
    "label":"XML"
  },
  "downloadXML":{
    "show":true,
    "icon":true,
    "label":"XML"
  },
  "downloadSVG":{
    "show":true,
    "icon":true,
    "label":"SVG"
  },
  "save":{
    "show":true,
    "icon":true,
    "label":"保存"
  }
}

面板参数 👣

面板部分使用Ant Design Vue的AutoComplete 自动完成组件来提高使用便携性，为提高扩展性，可以自行配置自动完成的数据，默认数据如表

过滤属性 👣

filters: {
  type: Array,
  default: () => []
}

参数列表

包含在参数列表的可以通过filters配置隐藏参数配置

组件栏 👣

过滤属性 👣

paletteFilters 设置可以将操作栏组件隐藏 | 选项 | 过滤字段 | | -------- | --------------------------- | | 抓手 | hand-tool | | 套索 | lasso-tool | | 空间 | space-tool | | 连接 | global-connect-tool | | 开始 | create.start-event | | 中间 | create.intermediate-event | | 结束 | create.end-event | | 网关 | create.exclusive-gateway | | 任务 | create.task | | 子流程 | create.subprocess-expanded | | 数据对象 | create.data-object | | 数据存储 | create.data-store | | 扩展存储 | create.participant-expanded | | 分组 | create.group |

事件 👣