自动编排

  DFlow支持流程自动编排功能（一种只需通过点击按钮实现流程设计的能力）。

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

一、自动编排

  DDeiQuickFlow插件实现了自动排版功能，默认的排版控件包含BPMN规范中的开始事件、用户任务、分支和结束事件。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiQuickFlow} from "ddei-flow";//导入快捷排版插件
const options = {
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiQuickFlow //引入DDeiQuickFlow插件
  ]
}
</script>

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

实时效果

二、配置控件

  可以通过nodeGroupConfig和nodeConfig来对快捷创建的组件进行配置。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiQuickFlow} from "ddei-flow";//导入快捷排版插件
const options = {
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiQuickFlow //引入DDeiQuickFlow插件
  ],
  nodeGroupConfig: { //配置分组信息
    "taskGroup": [
      {
        name: "ddei.flow.task",
        icon: `<svg class="icon-ddei-flow" style="width:34px;height:34px;" aria-hidden="true">
          <use xlink:href="#icon-ddei-flow-user-task"></use>
        </svg>`,
        type: "task"
      },
      {
        name: "ddei.flow.script",
        icon: `<svg class="icon-ddei-flow" style="width:34px;height:34px;" aria-hidden="true">
          <use xlink:href="#icon-ddei-flow-script-task"></use>
        </svg>`,
        type: "script"
      },
      {
        name: "ddei.flow.service",
        icon: `<svg class="icon-ddei-flow" style="width:34px;height:34px;" aria-hidden="true">
          <use xlink:href="#icon-ddei-flow-service-task"></use>
        </svg>`,
        type: "service"
      },
      {
        name: "ddei.flow.manual",
        icon: `<svg class="icon-ddei-flow" style="width:34px;height:34px;" aria-hidden="true">
          <use xlink:href="#icon-ddei-flow-manual-task"></use>
        </svg>`,
        type: "manual"
      },
      {
        name: "ddei.flow.branch",
        icon: `<svg class="icon-ddei-flow" style="width:34px;height:34px;" aria-hidden="true">
          <use xlink:href="#icon-ddei-flow-gateway-xor"></use>
        </svg>`,
        type: "branch"
      }
    ]
  },
  nodeConfig : { //配置控件大小
    start: {
      model: "1000001",
      width: 50,
      height: 50,
      textField: "name"
    },
    task: {
      model: "1000011",
      width: 160,
      height: 80,
      textField: "name"
    },
    script: {
      model: "1000021",
      width: 160,
      height: 80,
      textField: "name"
    },
    manual: {
      model: "1000051",
      width: 160,
      height: 80,
      textField: "name"
    },
    service: {
      model: "1000031",
      width: 160,
      height: 80,
      textField: "name"
    },
    branch: {
      model: "1000202",
      width: 60,
      height: 60,
      textField: "name"
    },
    condition: {
      model: "100001",
      width: 100,
      height: 40,
      textField: "name"
    },
    converge: {
      model: "1000204",
      width: 60,
      height: 60,
      textField: "name"
    },
    end: {
      model: "1000003",
      width: 50,
      height: 50,
      textField: "name"
    }
  }
}
</script>

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

实时效果

三、扩展按钮

  按钮以插件的方式提供，通过viewer可以用一个vue组件复写按钮。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiQuickFlow,DDeiQuickFlowOperatePanel} from "ddei-flow";//导入快捷排版插件
import {DDeiCoreSimpleLayout} from "ddei-editor"; //导入布局插件，用于配置布局
import operateViewDemo from "./operate-view-demo.vue"; //自定义按钮组件
const options = {
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiQuickFlow, //引入DDeiQuickFlow插件
    DDeiQuickFlowOperatePanel.configuration({  //自定义按钮
      viewer: operateViewDemo
    })
  ],
}
</script>

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

operate-view-demo.vue

...
<div ref="operateGroupDiv" class="ddei-quickflow-operate-group">
    <svg class="icon extbtn" aria-hidden="true" @mouseenter="mouseEnter($el)">
      <use xlink:href="#icon-add-layer"></use>
    </svg>
</div>
...

实时效果

四、自定义显示

  通过vue自定义组件，可以复写默认显示样式，丰富功能。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiQuickFlow} from "ddei-flow";//导入快捷排版插件
import custUserTaskDemo from "./user-task-demo.vue" //导入自定义控件样式
const options = {
  config:{
    controlDefines: [ //通过扩展控件机制，复写控件样式
      {
        'id': '1000011',
        viewer:custUserTaskDemo
      }
    ]
  },
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiQuickFlow //引入DDeiQuickFlow插件
  ]
}
</script>

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

user-task-demo.vue

<script lang="ts">
export default {
  name: "ddei-flow-bpmn-viewer-user-task-demo",
  props: {
    model: {
      type: Object,
      default: null
    },
    editor: {
      type: Object,
      default: null
    }
  },
  methods: {
    refreshDragState(type) {
    }
  }


};
</script>
<template>
  <div ref="divElement" class="ddei-flow-bpmn-viewer-user-task">
    <div class="title">
      发送人
    </div>
    <div class="content">
      {{ editor.i18n(model.name ? model.name : "ddei.flow.usertask") }}
    </div>
  </div>
</template>
...

实时效果

技术支持

QQ:3697355039

微信公众号:ddei757