bpmn-design-antd

    1.0.0 • Public • Published

    Bpmn Process Designer

    A process designer that depends on bpmn.js , Vue 2.x and ant-design-vue.

    一个基于 bpmn.jsVue 2.xant-design-vue 开发的流程设计器。

    You can view and edit BPMN 2.0 diagrams in the browser.

    您可以使用它在浏览器上查看和编辑符合 BPMN 2.0 规范的流程文件。


    由于个人精力有限,除bug之外,该项目不再维护新功能


    在大佬Element的版本基础上修改为ant-design-vue版本,并进行了二次封装,基本文档请参考Gitee/MiyueSC Process Designer

    1. 安装

    yarn add bpmn-design-antd
    // or yarn install

    2. 本地运行

    yarn
    yarn demo
    // or yarn install

    4.使用说明(最简 demo)

    4.1人员选择、组任务、多实例集合选择支持插槽方式

    <template>
       <div>
          <BpmnDesignAntd ref="BpmnDesignAntd" :design="design" v-model="flowXml" style="width:100%;height:100%;">
             <!-- 人员、角色选择没有封装到组件内,可以通过传参的方式来传递人员列表,也可以通过这种插槽的方式 -->
             <!-- 使用插槽需要自己手动把值更新到xml上 -->
             <!-- 办理人 -->
             <template #assignee="{assignee}">
                <BpmnUser key="assignee" :multi="false" :value="assignee" @change="handleEditTask('assignee',$event)" />
             </template>
             <!-- 候选用户 -->
             <template #candidateUsers="{candidateUsers}">
                <BpmnUser key="candidateUsers" :multi="false" :value="candidateUsers" @change="handleEditTask('candidateUsers',$event)" />
             </template>
             <!-- 候选组 -->
             <template #candidateGroups="{candidateGroups}">
                <JSelectRole :value="candidateGroups" @change="handleEditTask('candidateGroups',$event)" />
             </template>
             <!-- 会签人员列表 -->
             <template #collection="{collection}">
                <BpmnUser key="collection" :value="collection" @change="handleEditCollection" />
             </template>
          </BpmnDesignAntd>
       </div>
    </template>
    <script>
    import 'bpmn-design-antd/lib/bpmn-design-antd.css'
    import { BpmnDesignAntd } from "bpmn-design-antd"
    export default {
      components: {
        BpmnDesignAntd
      },
      data(){
         return {
            flowXml: "", // 后端查询到的xml
            design:'',
         }
      },
      methods: {
         handleEditTask(key, val) {
            //人员,角色插槽选择用updateElementTask方法来更新数据
          this.$refs.BpmnDesignAntd.updateElementTask(key, val)
        },
        handleEditCollection(val) {
           //多实例集合选择用updateLoop方法来更新数据
          if (val) {
            this.$refs.BpmnDesignAntd.updateLoop('collection', '${testUser.resolveUsersForTask(execution,"' + val + '")}')
          } else {
            this.$refs.BpmnDesignAntd.updateLoop('collection', '')
          }
        }
      }
    }

    3. 文档说明 Documentation

    3.1 BpmnDesignAntd

    3.1.1 Attributes

    Attribute Description Type Accepted Values Default
    value/v-model 初始化流程对应的 xml 字符串 String - -
    design MyProcessDesigner组件对象 Object -
    penal MyProcessPenal组件对象 Object -

    3.1.2 Events

    Event Name Description Callback Parameters
    init-finished 流程实例等初始化完成之后 modeler
    change 流程发生可监听的改变时 ( EventBus.on("commandStack.changed")) XMLString
    destroy 组件准备销毁时,此时流程实例已经销毁 modeler
    BpmnEvents Like element.click, will replace . to - (ex: "element.click" => "element-click" ). If you want to use an event, you must add the event name to the "events" parameter
    传入参数 events 对应的事件发生时触发,会将 events 数组内部的事件名称中的 . 替换成 - 来适配 vue 的自定义监听事件。比如 "element.click" 会变成 element-click
    element, InternalEventInstance

    3. 文档说明 Documentation

    3.1 MyProcessDesigner(因打包的时候,组装过一次,所有参数都放到BpmnDesignAntd组件design对象下)

    3.1.1 Attributes

    Attribute Description Type Accepted Values Default
    value/v-model 初始化流程对应的 xml 字符串 String - -
    design.translations 翻译文件 Object - zh.js
    design.additionalModel 自定义的附加模块 Object[] / Object - -
    design.moddleExtension 自定义的扩展模块 Object - -
    design.onlyCustomizeAddi 仅使用开发时的自定义附加模块 Boolean - false
    design.onlyCustomizeModdle 仅使用开发时的自定义扩展模块 Boolean - false
    design.prefix 流程引擎对应扩展属性前缀 String camunda, activiti, flowable design.camunda
    design.events 需要使用的事件列表,可用事件见 Bpmn.js 中文文档 Array - [element.click]
    design.headerButtonSize 头部按钮组的大小 String "default", "medium", "small", "mini" small

    3.1.2 Events

    Event Name Description Callback Parameters
    init-finished 流程实例等初始化完成之后 modeler
    change 流程发生可监听的改变时 ( EventBus.on("commandStack.changed")) XMLString
    destroy 组件准备销毁时,此时流程实例已经销毁 modeler
    BpmnEvents Like element.click, will replace . to - (ex: "element.click" => "element-click" ). If you want to use an event, you must add the event name to the "events" parameter
    传入参数 events 对应的事件发生时触发,会将 events 数组内部的事件名称中的 . 替换成 - 来适配 vue 的自定义监听事件。比如 "element.click" 会变成 element-click
    element, InternalEventInstance

    3.1.3 Methods

    Method Name Parameters Description
    downloadProcessAsXml name: string = "diagram" 下载文件为 ${name}.xml 格式的文件
    downloadProcessAsBpmn name: string = "diagram" 下载文件为 ${name}.bpmn 格式的文件
    downloadProcessAsSvg name: string = "diagram" 下载文件为 ${name}.svg 格式的文件
    processRedo - 恢复上次操作
    processUndo - 撤销本次操作
    processZoomIn newZoom: number = 0.1 按照指定倍率缩小视图(小数点后两位)
    processZoomOut newZoom: number = 1 按照指定倍率放大视图(小数点后两位)
    processZoomTo newZoom: number = 1 缩放视图到指定倍率
    processReZoom - 重置缩放倍率并居中显示全部元素
    processRestart - 重置所有编辑过程并清空画布
    createNewDiagram xml: string 重新导入新的xml字符串

    3.2 MyProcessPenal(因打包的时候,组装过一次,所有参数都放到BpmnDesignAntd组件penal对象下)

    3.2.1 Attributes

    Attribute Description Type Accepted Values Default
    bpmn-modeler 初始化生成的 modeler 实例,必须 Object - -
    penal.prefix 流程引擎对应扩展属性前缀 String camunda, activiti, flowable camunda
    penal.width 侧边栏宽度 Number - 480
    penal.assignee 办理人列表 Array - []
    penal.candidateUsers 候选人列表 Array - []
    penal.candidateGroups 组人员列表 Array - []

    4. 运行截图

    4.1 初始界面

    image-20210422140659561

    4.2 监听器

    image-20210422140728176

    image-20210422140805725

    4.3 扩展属性

    image-20210422140906725

    4.4 流转路径配置

    image-20210422140924114

    4.5 任务配置

    image-20210422141009316

    4.6 多实例任务

    image-20210422141035638

    4.8 表单配置

    image-20210422141220571

    image-20210422141354311

    4.9 预览

    image-20210422140939414

    5. 功能说明

    1. 工具栏:包含常见操作,比如打开文件、下载文件、预览、对齐方式、缩放管理、撤销删除等
    2. 常规信息:id、名称、扩展属性、元素文档
    3. 特殊节点属性:
      1. 流程全局消息与信号
      2. 执行监听器
      3. 用户任务节点 任务监听器
      4. 表单配置
      5. 任务配置
      6. 多实例任务
      7. 流转条件
    4. 内置常用 camundaflowableactiviti 解析文件
    5. 自定义左侧元素栏 platte 与弹出菜单 contentPad 示例模块
    6. 自定义渲染方法 renderer 模块实例

    学习交流

    qq群905442757

    Install

    npm i bpmn-design-antd

    DownloadsWeekly Downloads

    26

    Version

    1.0.0

    License

    Apache

    Unpacked Size

    7.81 MB

    Total Files

    91

    Last publish

    Collaborators

    • contorl