skycloud-bpmn-modeler v1.0.15

skycloud-bpmn-modeler

🔥 本项目基于 vue 和 bpmn.io@13.0 ，实现 flowable 的 modeler 流程设计器，支持多语言

安装

# 安装
yarn add skycloud-bpmn-modeler

使用说明（最简 demo）

<template>
  <div>
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :lang="'zh'"
      :categorys="categorys"
      :form-models="formModels"
      :api-params="apiParams"
      :model-data="modelData"
      :meta-data="metaData"
      :is-view="false"
      @save="saveModeler"
    />
  </div>
</template>

<script>
import bpmnModeler from "skycloud-bpmn-modeler";

export default {
  components: {
    bpmnModeler,
  },
  data() {
    return {
      xml: '', // 后端查询到的xml
      formModels: [ //apiParams和formModels互斥，apiParams优先级高于formModels
        { name: 'OA', id: 'Approve:Level1' },
        { name: '财务', id: 'finance' }
      ],
      categorys: [//同上
        { name: 'OA', id: 'oa' },
        { name: '财务', id: 'finance' },
        { name: 'python组', id: 'python' }
      ],
      modelData: {
        id: undefined,
        name: '',
        editor: '',
        key: '',
        description: ''
      },
      metaData: {
        users: [
          { name: '张三', id: 'zhangsan' },
          { name: '李四', id: 'lisi' },
          { name: '王五', id: 'wangwu' }
        ],
        groups: [
          { name: 'web组', id: 'web' },
          { name: 'java组', id: 'java' },
          { name: 'python组', id: 'python' }
        ],
        assignees: [
          {
            ids: 'ff808081747d905201748ba96c1e0000,6d9529ae-a77d-4ecb-881f-7828181ed59b',
            names: ['张三']
          },
          {
            ids: 'e1dee49c-5e8e-4d29-9c8b-eda536ea7bd4',
            names: ['里斯本']
          }
        ]

      },
      apiParams: {
        token: '0097f3b6-1524-4aed-810c-1fc70722b63d',
        categorys: {
          method: 'post',
          baseURL: 'http://192.168.162.65:5555/v1/ty',
          url: '/adapterOperator',
          timeout: 5000,
          data: { method: 'listFlowCategory', status: 'available' },
          headers: {
            token: '0097f3b6-1524-4aed-810c-1fc70722b63d',
            'Content-Type': 'application/json;charset=utf-8',
            'X-Request-Type': 'flowable'
          }
        },
        flowableConfig: {
          method: 'post',
          url: 'http://192.168.162.65:5555/v1/ty/adapterOperator',
          timeout: 5000,
          data: { method: 'queryDictionaryBySQL', dataTypeCode: 'flowableConfig' },
          headers: {
            token: '0097f3b6-1524-4aed-810c-1fc70722b63d',
            'Content-Type': 'application/json;charset=utf-8',
            'X-Request-Type': 'desk'
          }
        },
        roles: {
          method: 'post',
          url: 'http://192.168.162.65:5555/v1/ty/adapterOperator',
          timeout: 5000,
          data: { method: 'queryRoleByCondition', status: 'available' },
          headers: {
            token: '0097f3b6-1524-4aed-810c-1fc70722b63d',
            'Content-Type': 'application/json;charset=utf-8',
            'X-Request-Type': 'desk'
          }
        },
        users: {
          method: 'post',
          url: 'http://192.168.162.65:5555/v1/ty/adapterOperator',
          timeout: 5000,
          data: { method: 'queryUserPage', 'ids': [], 'offset': 1, 'limit': 10 },
          headers: {
            token: '0097f3b6-1524-4aed-810c-1fc70722b63d',
            'Content-Type': 'application/json;charset=utf-8',
            'X-Request-Type': 'desk'
          }
        }
      }
    };
  },
  methods: {
    save(data) {
      console.log(data);  // { process: {...}, xml: '...', svg: '...' }
    },
  },
};
</script>