流程展示

  本示例介绍了怎样通过代码回显流程图、流转过程。

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

一、回显流程图

  流程图绘制后会生成一个JSON，一般而言可以把它保存到数据库中。当需要回显流程图时，从数据库中读取，再通过API加载展示。

demo.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 designDemoData = getDesignDataByServer()
    //加载数据
    flowAPI.loadData(designDemoData)
    //设置缩放比例
    editor.ddInstance.stage.setStageRatio(0.7) 
    //设置图形居中
    editor.centerModels(editor.ddInstance.stage,"exclusive_gateway_139")
    //设置为只读
    editor.setEditable(false);
  }
}

const getDesignDataByServer = () => { //从服务端获取流程定义JSON
  let mock = `参考下方数据`
  return mock;
};
</script>

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

实时效果

二、流转过程

  可以在加载时传入业务数据改变流程节点，也能够通过API对单个流程节点进行修改。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreSimpleLayout} from "ddei-editor"; //导入布局插件，用于配置布局
const options = {
  config:{  //设置水印
    mark:{
      type:1,
      data:"张三正在查看",
      direct:3
    }
  },
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreSimpleLayout.configuration({ //修改布局组件，去掉工具栏和菜单栏
      others:[]
    })
  ],
  onMounted: (editor)=> { //加载流程图
    //获取流程API
    let flowAPI = editor.flow
    let designDemoData = getDesignDataByServer()
    //加载数据 
    let busiData = { //业务数据 
      start_131: {
        border: {
          color: "green",
        }
      },
      line_136:{
        color:'green'
      },
      line_138:{
        color:'green'
      },
      task1: {
        border: {
          color: "green",
        },
        font:{
          color:"green"
        },
        name:"张三"
      },
      task2: {
        border: {
          color: "blue",
          width:3
        },
        font:{
          color:"blue",
        },
        textStyle:{
          bold:1,
        },
        name:"李四...审批中"
      },
    }
    //加载数据
    flowAPI.loadData(designDemoData,busiData)
    //设置缩放比例
    editor.ddInstance.stage.setStageRatio(0.7) 
    //设置图形居中
    editor.centerModels(editor.ddInstance.stage,"exclusive_gateway_139")
    //设置为只读
    editor.setEditable(false);
  }
}
</script>

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

实时效果

技术支持

QQ:3697355039

微信公众号:ddei757