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'
      ]" @element-click="elementClick" @init-finished="initModeler" @event="handlerEvent" @save="onSaveProcess" />
    <!-- 属性面板 -->
      <bmpn-process-penal :element="data.element" :bpmn-modeler="data.modeler" :prefix="data.controlForm.prefix" class="process-panel" />
  </div>
</template>

<script lang="ts" setup>
  import { h, reactive, onMounted, defineProps, computed, defineEmits } 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
    }
  })
  const data = reactive({
    height: document.documentElement.clientHeight - 94.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,
  })
  function elementClick(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>