vue-vben-admin/src/views/demo/workflow/scheme/preview.vue

<template>
  <div class="preview-box">
    <div class="btn-box">
      <a-button type="primary" :icon="h(SaveOutlined)" @click="onSave" class="ml-2">保存流程 </a-button>
    </div>
    <process-designer :key="designerOpen" style="border:1px solid rgba(0, 0, 0, 0.1);" ref="modelDesigner"
      v-loading="designerData.loading" :bpmnXml="designerData.bpmnXml" :designerForm="designerData.form"
      @save="onSaveDesigner" />
  </div>

</template>

<script lang="ts" setup>
  import { h, ref, provide, reactive, onMounted, defineProps, computed, defineEmits } from 'vue';
  import ProcessDesigner from '@/components/ProcessDesigner/index.vue';
  import { SaveOutlined, ZoomOutOutlined, ZoomInOutlined, RotateLeftOutlined, RotateRightOutlined, ClearOutlined } from '@ant-design/icons-vue';
  const designerOpen = ref(false)
  const designerData = reactive({
    loading: false,
    bpmnXml: '',
    modelId: null,
    form: {
      processName: null,
      processKey: null
    }
  })
  const modelDesigner = ref < any > ()
  function onSave() {
    let formData = modelDesigner.value.getFlow()
  }
</script>
<style scoped>
  .preview-box {
    .btn-box {
      padding: 10px;
      justify-content: flex-end;
      display: flex;

    }
  }
</style>