wzj-vue/src/views/workflow/model/design.vue

<template>
  <el-dialog v-if="dialog.visible" v-model="dialog.visible" :title="dialog.title" width="90%" height="100%">
    <div class="modeler">
      <bpmn-design ref="bpmnDesign"></bpmn-design>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup name="Design">
import { getInfo } from '@/api/workflow/model';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { ModelForm } from '@/api/workflow/model/types';
import BpmnDesign from '@/components/BpmnDesign';
const bpmnDesign = ref<InstanceType<typeof BpmnDesign>>();
const dialog = reactive<DialogOption>({
  visible: false,
  title: 'Flowable工作流在线流程设计器'
});
const modelForm = ref<ModelForm>();
const openDialog =  (id) => {
    dialog.visible = true
    getInfo(id).then(res=>{
      if (bpmnDesign.value) {
        Object.assign(modelForm.value, res.data);
        bpmnDesign.value.initDiagram(modelForm.value.xml);
      }
    });
};
/**
 * 对外暴露子组件方法
 */
defineExpose({
  openDialog
});
</script>