扩展输出

  DFlow设计图可以转换为JSON或BpmnXML，在扩展属性后需要将这些属性转换为对应的输出。

  本示例介绍了扩展输出的三种方式。

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

一、设置关键字

  DFlow默认会使用流程节点的id属性作为关键字，可以通过API的setJsonKeyField指定某个属性作为关键字。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreTopMenuSimplePanel} from "ddei-editor" //引入菜单插件
const options = {
  config: {
    initData: {
      controls: [
        {
          model: "1000011",
        },
      ]
    }
  },
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreTopMenuSimplePanel.configuration({ //配置顶部菜单及菜单项
      direct: 2,
      position: 2,
      drag: 1,
      items: [
        {
          name: "输出",  
          action: function (editor) { //调用API扩展输出
            //获取流程API
            let flowAPI = editor.flow
            //设置以code作为key字段,默认以id作为key字段
            flowAPI.setJsonKeyField("code")
            //获取json字符串
            let flowObj = flowAPI.toFlowObject()
            console.log(flowObj.toJSON())
          }
        }
      ]
    })
  ]
}
</script>

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

实时效果

二、增加输出属性

  DFlow默认维护了一个输出属性列表，只有在列表中且不为空的属性才会输出，可以通过API的configJsonField配置需要输出的属性列表。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreTopMenuSimplePanel} from "ddei-editor"; //引入菜单插件
import { DDeiFlowElementSettingDialog} from 'ddei-flow'; // 引入属性编辑器插件
const options = {
  config: {
    initData: {
      controls: [
        {
          model: "1000011",
        },
      ]
    }
  },
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreTopMenuSimplePanel.configuration({ //配置顶部菜单及菜单项
      direct: 2,
      position: 2,
      drag: 1,
      items: [
        {
          name: "输出",  
          action: function (editor) { //调用API扩展输出
            //获取流程API
            let flowAPI = editor.flow
            //设置以code作为key字段,默认以id作为key字段
            flowAPI.setJsonKeyField("code")
            //配置属性输出列表
            flowAPI.configJsonField((jsonConfig)=>{
              jsonConfig.push("newField") //添加自定义属性到输出列表
            })
            //获取json字符串
            let flowObj = flowAPI.toFlowObject()
            console.log(flowObj.toJSON())
          }
        }
      ]
    }),
    DDeiFlowElementSettingDialog.modify((plugin)=>{  //自定义属性
      let newItems = [
        {
          id: 'ddei-flow-property-editor-text',  //编辑器类型，文本
          label: "自定义",                        //显示标签
          desc: "自定义",                         //说明
          property: 'newField',                  //属性名称
        }
      ]
      plugin.options.items.push(...newItems)    //将自定义属性添加到原有的属性列表中
    })
  ]
}
</script>

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

实时效果

三、扩展BpmnXML

  DFlow默认按照Bpmn规范输出BpmnXML，可以通过回调函数bpmnProcessorFN、bpmnAfterProcessorFN和bpmndiProcessorFN对XML的输出过程进行拦截或扩展。

  扩展BpmnXML需要遵循Bpmn规范，可以采用名称空间或采用Bpmn规定的元素来扩展。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreTopMenuSimplePanel} from "ddei-editor"; //引入菜单插件
const options = {
  config: {
    initData: {
      controls: [
        {
          model: "1000011",
        },
      ]
    }
  },
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreTopMenuSimplePanel.configuration({ //配置顶部菜单及菜单项
      direct: 2,
      position: 2,
      drag: 1,
      items: [
        {
          name: "输出",  
          action: function (editor) { //调用API扩展输出     
            //获取流程API
            let flowAPI = editor.flow
            //添加前置拦截函数，参数1为节点，参数2为锁进层级
            flowAPI.bpmnProcessorFN = (node, tabLevel)=>{  
              //判断是否为顶级节点，是顶级节点则拦截，加入ddei名称空间
              if(node.graphics){
                let flowObject = node
                //加入ddei的名称空间
                let returnStr = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions id="`+ flowObject.id + `" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="http://bpmn.io/schema/bpmn" xmlns:ddei="https://www.ddei.top">\n`
                let contentStr = ''
                let defineStr = ''
                //输出graphics
                for (let gi = 0; gi < flowObject.graphics.length;gi++){ 
                  let flowGraph = flowObject.graphics[gi];
                  let processResult = flowAPI.flowGraph2BPMNXML(flowGraph)
                  if (processResult?.contentStr) {
                    contentStr += processResult.contentStr+"\n"
                  }
                  if (processResult?.defineStr){
                    defineStr += processResult.defineStr
                  }
                }
                returnStr += defineStr
                returnStr += contentStr
                returnStr += '</bpmn:definitions>'
                return returnStr
              }
              //如果是其他元素，则不作拦截
              return false
            }
            //获取BpmnXML字符串
            let bpmnXML = flowAPI.toBPMNXML()
            console.log(bpmnXML)
          }
        }
      ]
    })
  ]
}
</script>

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

实时效果

技术支持

QQ:3697355039

微信公众号:ddei757