安装

NPM

# use npm
npm install plug-in-components

org-tree参照vue-tree-color

对vue-tree-color的再次封装

增加参数nodeCompName

# componentName 是在项目中定义的全局组件，会被引入node中加载
nodeCompName="componentName"

其他使用方法参考：https://github.com/CrazyMrYan/vue-tree-color

流程画布是对bpmn的再次封装

简单使用

import bpmnModeler from 'plug-in-components/src/views/bpmn/package'
<template>
  <div class="workflow-bpmn-modeler">
    <bpmn-modeler
      ref="refNode"
      :xml="xml"  // (processId、tenantId优先使用)与xml只给一个就行
      processId=""  // 流程id
      tenantId="" // 系统分类
      :is-view="isView"
      saveModelXml=''
      selectModelXml=''
      searchOrgList=''
      sysGroup=''
      roleTree=''
      flowStartRule=''
      selectByPCodes=''
      sysUser=''
      @save="save"
    />
  </div>
</template>

<script>
import bpmnModeler from 'plug-in-components/src/views/bpmn/package'
import { xmlStr } from '../../assets/xmlStr'
export default {
  components: {
    bpmnModeler
  },
  data() {
    return {
      xml: '', // 后端查询到的xml
      isView: false // 是否可编辑
    }
  },
  mounted() {
    this.initXml()
  },
  methods: {
    initXml() {
      this.xml = xmlStr
    },
    save(data){
      console.log(data)
    }
  }
}
</script>

<style lang="scss">
.workflow-bpmn-modeler {
  height: 100%;
  margin: 0;
}
</style>

右侧面板内容添加及修改

网关节点   gateway.vue
流程节点   process.vue
流程线节点  sequenceFlow.vue
开始结束节点  startEnd.vue
任务节点  task.vue

1. 非级联数据添加字段：

• 在对应节点的computed->formConfig->item的表单对象内添加属性
• 在watch内增加修改属性的监听

2. 级联数据添加自动断：

• 级联添加必须使用弹窗方式参照任务task.vue节点的++orgCode++