workflow-bpmn-antdv-panda

安装 ⏳

# 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>
  </div>
</template>

<script>
//需要依赖ant-design-vue和less
/**
 * package包引入
 * 内部依赖版本：
 * "bpmn-js": "^7.2.1",
 * "vue-codemirror": "^4.0.6"
 */
//import bpmnModeler from '../package/index'
//1.0.1 版本引用
//import bpmnModeler from 'workflow-bpmn-antdv-panda/package/';
//1.0.2 版本引用
import bpmnModeler from 'workflow-bpmn-antdv-panda';
export default {
  components: {
    bpmnModeler
  },
  data() {
    return {
      xml: '', // 后端查询到的xml
      //指定或候选人
      users: [
        { name: '张三', id: 'zhangsan' },
        { name: '李四', id: 'lisi' },
        { name: '王五', id: 'wangwu' }
      ],
      //候选组
      groups: [
        { name: 'web组', id: 'web' },
        { name: 'java组', id: 'java' },
        { name: 'python组', id: 'python' }
      ],
      //分类
      categories: [
        { name: 'OA', id: 'oa', children: [{ name: '请假', id: 'leave' }] },
        { name: '财务', id: 'finance' }
      ],
      //过滤面板参数，参数见文档
      panelFilters: [],
      //panelFilters: ['category','message'],
      //左侧操作组件栏过滤，过滤参数见文档
      //paletteFilters:['space-tool','create.start-event','create.task'],
      paletteFilters: [],
      //左侧操作组件栏，行为组件是否显示，设置false组件的操作栏将被隐藏
      paletteToolShow: true,
      //头部右侧操作栏显示内容配置
      rightActionConfig: {
        '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': '保存'
        }
      },
      /**
       * 关联表单配置
       */
      associateFormConfig: {
        enable: true, //此项为false，显示表单标识输入框，后两项设置两项均无效
        isPreview: true,
        isCreate: true
      },
      //关联表单动态表达式数据源
      associateFormDataOptions: [],
      //分配指定人动态表达式数据源
      assigneeDataSource: ['#{approval}', '${approverId}', '${INITIATOR}'],
      //分配候选人动态表达式数据源
      candidateUserDataSource: ['#{approval}', '#{app}'],
      //分配候选组动态表达式数据源
      candidateGroupDataSource: ['#{approval}', '#{app}'],
      //过期时间动态表达式数据源
      dueDateDataSource: ['${dueDate}'],
      //观察时间动态表达式数据源
      followUpDateDataSource: ['${followUpDate}'],
      //开始节点发起人动态表达式数据源
      initiatorDataSource: ['initiator'],
      //跳过表达式动态表达式数据源
      skipExpressionDataSource: [],
      //跳转表达式动态表达式数据源
      conditionExpressionDataSource: ['${approve}', '${!approve}'],

      //自己业务数据
      //关联表单扩展，用于接入flowable动态表单或其他自定义动态表单
      formShowVisible: false,
      formCreateVisible: false
    }
  },
  mounted() {
    this.getModelDetail()
  },
  methods: {
    getModelDetail() {
      fetch('https://cdn.jsdelivr.net/gh/Vincent-Vic/workflow-bpmn-antdv-panda@master/src/Leave.bpmn20.xml')
          .then(response => {
            return response.text()
          }).then(xml => {
        this.xml = xml
      })
    },
    saveModeler(data) {
      console.log(data)
    },
    showAssociateForm(formKey) {
      console.log(formKey)
      this.formShowVisible = true
    },
    createAssociateForm() {
      console.log('create form')
      this.formCreateVisible = true
    }
  }
}
</script>

<style lang="less">
html, body, #app {
  height: 100%;
  margin: 0;
}
</style>

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

组件参数 👣

主要参数 👣

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

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

{
  "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":"保存"
  }
}

面板参数 👣

Attributes	describe	type	default
filters	面板参数过滤	Array	[]
associateFormConfig	关联表单配置	Object	{ //此项为false，后设置两项均无效 enable:false, isView: true, isCreate: true, }
associateFormDataOptions	关联表单动态数据	Array
assigneeDataSource	分配到任务的人动态数据	Array	[ "#{approval}", "${approverId}", "${INITIATOR}" ]
dueDateDataSource	过期时间动态数据	Array	["${dueDate}"]
followUpDateDataSource	观察时间动态数据	Array	["${followUpDate}"]
initiatorDataSource	【开始节点】发起人动态数据	Array	["initiator"]
skipExpressionDataSource	跳过表达式动态数据	Array	[]
conditionExpressionDataSource	跳转动态数据	Array	[]
candidateUserDataSource	分配候选人动态表达式数据源	Array	[]
candidateGroupDataSource	分配候选组动态表达式数据源	Array	[]
categoriesFields	分类树状结构与具体转换	Object	{ children:'children', title:'name', key:'id', value: 'id' }

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

过滤属性 👣

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

参数列表

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

选项	过滤字段
流程分类	category
流程描述	documentation
执行监听器	executionListener
信号定义	signal
消息定义	message
节点描述	nodeDocumentation
跳转条件	conditionExpression
跳过条件	skipExpression
发起人	initiator
表单标识/表单挂载	formKey
任务监听器	taskListener
多实例	multiInstance
异步	async
优先级	priority
是否为补偿	isForCompensation
服务任务可触发	triggerable
自动存储变量	autoStoreVariables
排除	exclude
输入变量	ruleVariablesInput
规则	rules
结果变量	resultVariable
类	class
过期时间	dueDate
观察时间	followUpDate

组件栏 👣

过滤属性 👣

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

事件 👣

事件名称	参数	描述
save	{ "process":{ "id":"", "category":"", "name":"" }, "svg":"", "xml":"" }	保存按钮触发事件
showForm	formKey	显示挂载表单点击事件
createForm		创建表单点击事件

workflow-bpmn-antdv-panda

安装 ⏳

更新日志

注意事项

使用说明 👣

完整示例 👣

组件参数 👣

主要参数 👣

面板参数 👣

过滤属性 👣

组件栏 👣

过滤属性 👣

事件 👣

/workflow-bpmn-antdv-panda/

Package Sidebar

Install

Repository

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

workflow-bpmn-antdv-panda

安装 ⏳

更新日志

注意事项

使用说明 👣

完整示例 👣

组件参数 👣

主要参数 👣

面板参数 👣

过滤属性 👣

组件栏 👣

过滤属性 👣

事件 👣

/workflow-bpmn-antdv-panda/

Package Sidebar

Install

Repository

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads