DFlow流程图-V1.0.2

Appearance

Bpmn导入 ​

  BpmnXML是遵循BPMN规范的一种流程描述格式，主流工作流工具或者框架都会支持。本示例介绍了通过API导入BpmnXML生成流程图的过程。

  本示例基于教程快速指南开发，请查看教程快速指南。

demo.vue

vue
<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreSimpleLayout} from "ddei-editor"; //导入布局插件，用于配置布局
const options = {
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreSimpleLayout.configuration({ //修改布局组件，去掉工具栏和菜单栏
      others:[]
    })
  ],
  onMounted: (editor)=> { //加载流程图
    //获取流程API
    let flowAPI = editor.flow
    let bpmnXML = getBpmnXMLByServer()
    let busiDataJSON = getBusiDataJSON() //加载业务数据(可选)
    //加载Bpmn数据
    flowAPI.loadFromBpmnXML(designDemoData,busiDataJSON)
    //设置缩放比例(可选)
    editor.ddInstance.stage.setStageRatio(0.7) 
    //设置图形居中(可选)
    editor.centerModels(editor.ddInstance.stage,"task_1")
    //设置为只读(可选)
    editor.setEditable(false);
  }
}

const getBpmnXMLByServer = () => { //从服务端获取BpmnXML
  let mock = `参考下方数据`
  return mock;
};

const getBusiDataJSON = () => { //从服务端获取BpmnXML
  let mock = `参考下方数据`
  return mock;
};
</script>

<template>
  <DDeiEditorView :options="options" id="dflow_editor_1"></DDeiEditorView>
</template>

实时效果

技术支持 ​

QQ:3697355039
微信公众号:ddei757