vue-vben-admin/src/components/ProcessDesigner/index.vue

<template>
  <div class="process-design" :style="'display: flex; height:' + data.height">
    <bpmn-process-designer v-model="data.xmlString" v-bind="data.controlForm" keyboard ref="processDesigner" :events="[
        'element.click',
        'connection.added',
        'connection.removed',
        'connection.changed'
      ]" @connection-added="connectionAdded" @connection-removed="connectionRemoved"
      @connection-changed="connectionChanged" @element-click="elementClick" @init-finished="initModeler"
      @event="handlerEvent" @save="onSaveProcess" :schemeCode="props.schemeCode"/>
    <!-- 属性面板 -->
    <bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix"
      class="process-panel" ref=processPanel :schemeCode="props.schemeCode"/>
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, onMounted, defineProps, computed, defineEmits, inject,ref } from 'vue';
  import './package/theme/index.scss';
  // 流程面板和属性面板
  import { BpmnProcessDesigner, BmpnProcessPenal } from './package/index';
  import 'highlight.js/styles/atom-one-dark-reasonable.css';
  const emit = defineEmits(['save']);
  // Vue.use(vuePlugin);
  const props = defineProps({
    bpmnXml: {
      type: String,
      required: true
    },
    designerForm: {
      type: Object,
      required: true
    },
    schemeCode:{
      type:String,
    }
  })
  const data = reactive({
    height: document.documentElement.clientHeight - 144.5 + "px;",
    xmlString: props.bpmnXml,
    modeler: null,
    controlForm: {
      processId: props.designerForm.processKey || '',
      processName: props.designerForm.processName || '',
      simulation: false,
      labelEditing: false,
      labelVisible: false,
      prefix: 'flowable',
      headerButtonSize: 'small',
      // additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
    },
    element: null,
  })
  const processPanel = ref < any > ()
  const processDesigner = ref <any> ()
  async function getFlow() {
    let panel = await processPanel.value.getPanel()
    let flow = await processDesigner.value.getFlow()
    panel.scheme.flowContent = flow
    return panel
  }
  async function validateFlow(){
    let res = await processPanel.value.validatePanel()
    return res
  }
  defineExpose({
    getFlow,
    validateFlow
  })
  function connectionAdded(node) {
    console.log(node)
    console.log('connectionAdded')
  }
  function connectionRemoved(node) {
    console.log(node)
    console.log('connectionRemoved')
  }
  function connectionChanged(node) {
    console.log(node)
    console.log('connectionChanged')
  }
  function elementClick(element) {
    console.log(element)
    data.element = element;
  }
  function initModeler(modeler) {
    setTimeout(() => {
      data.modeler = modeler;
    }, 10);
  }
  function handlerEvent(eventName, element) {
  }
  function onSaveProcess(saveData) {
    emit('save', saveData);
  }
</script>

<style lang="scss" scoped>
  body {
    overflow: auto !important;
    margin: 0;
    box-sizing: border-box;
  }

  body,
  body * {

    /* 滚动条 */
    &::-webkit-scrollbar-track-piece {
      background-color: #fff;
      /*滚动条的背景颜色*/
      -webkit-border-radius: 0;
      /*滚动条的圆角宽度*/
    }

    &::-webkit-scrollbar {
      width: 10px;
      /*滚动条的宽度*/
      height: 8px;
      /*滚动条的高度*/
    }

    &::-webkit-scrollbar-thumb:vertical {
      /*垂直滚动条的样式*/
      height: 50px;
      background-color: rgba(153, 153, 153, 0.5);
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
      border: 2px solid #fff;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条的hover样式*/
      background-color: rgba(159, 159, 159, 0.3);
      -webkit-border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
      /*滚动条的hover样式*/
      background-color: rgba(159, 159, 159, 0.5);
      -webkit-border-radius: 4px;
    }
  }

  .process-panel {
    height: 100%;
  }
</style>