ingenious-flow-designer

实战项目

演示地址

账号/密码：admin/123456

注：实战项目不开源

使用文档

兼容性注意

• 因Vite 需要 Node.js 版本 18+ 或 20+。当你的包管理器发出警告时，请注意升级你的 Node 版本。
• 本项目是在 Node.js 版本 16+的环境下测试通过。

下载

git clone https://gitee.com/motion-code/flow-designer.git

安装

npm install ingenious-flow-designer --registry=https://registry.npmmirror.com 

全局注册

import { createApp } from 'vue'
import FlowDesigner from 'ingenious-flow-designer'
import 'mldong-flow-designer-plus/lib/style.css'
const app = createApp(App)
// 注：uiLibrary和当前项目使用的UI库保持一致
// 如果为局部注册，则需要指定uiLibrary
// app.config.globalProperties.$uiLibrary= 'element-plus'

app.use(FlowDesigner,{
  // 指定UI库：antd | element-plus
  uiLibrary: 'element-plus'
})

使用样例

编辑模式

<template>
  <IngeniousFlowDesigner v-model:value="graphData" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const graphData = ref({
    name: 'leave1',
    display_name: '请假流程',
    post_interceptors: "leave_post_interceptors",
    nodes: [
      {
        id: "1",
        type: "ingenious:start",
        x: 100,
        y: 100,
        properties: {
          // state: 'history'
          post_interceptors: "start_post_interceptors"
        }
      },
      {
        id: "2",
        type: "ingenious:task",
        x: 300,
        y: 200,
        text: "节点2",
        properties: {
          // state: 'active'
          form: 'leaveForm',
          post_interceptors: "task_post_interceptors"
        }
      },
      {
        id: "3",
        type: "ingenious:end",
        x: 500,
        y: 600,
        text: "结束",
        properties: {
          post_interceptors: "end_post_interceptors"
        }
      },
    ],
    edges: [
      {
        id: "1-2",
        sourceNodeId: "1",
        targetNodeId: "2",
        type: "ingenious:transition",
        text: "连线",
        properties: {
          // state: 'history'
          expr: "$a == 1"
        }
      },
      {
        id: "2-3",
        sourceNodeId: "2",
        targetNodeId: "3",
        type: "ingenious:transition",
        text: "连线2",
        properties: {
          // state: 'history'
          expr: "$a == 2"
        }
      },
    ],
  })
</script>

只读模式

<template>
  <IngeniousDesignerPlus :viewer="true" v-model:value="graphData" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const graphData = ref({
    name: 'leave1',
    display_name: '请假流程',
    post_interceptors: "leave_post_interceptors",
    nodes: [
      {
        id: "1",
        type: "ingenious:start",
        x: 100,
        y: 100,
        properties: {
          // state: 'history'
          post_interceptors: "start_post_interceptors"
        }
      },
      {
        id: "2",
        type: "ingenious:task",
        x: 300,
        y: 200,
        text: "节点2",
        properties: {
          // state: 'active'
          form: 'leaveForm',
          post_interceptors: "task_post_interceptors"
        }
      },
      {
        id: "3",
        type: "ingenious:end",
        x: 500,
        y: 600,
        text: "结束",
        properties: {
          post_interceptors: "end_post_interceptors"
        }
      },
    ],
    edges: [
      {
        id: "1-2",
        sourceNodeId: "1",
        targetNodeId: "2",
        type: "ingenious:transition",
        text: "连线",
        properties: {
          // state: 'history'
          expr: "${a} == 1"
        }
      },
      {
        id: "2-3",
        sourceNodeId: "2",
        targetNodeId: "3",
        type: "ingenious:transition",
        text: "连线2",
        properties: {
          // state: 'history'
          expr: "${a} == 2"
        }
      },
    ],
  })
</script>

属性说明

属性名	类型	默认值	说明
v-model:value	object	-	流程图数据
theme	FDThemeConfig	-	主题配置
highLight	FDHighLightType	高亮配置
initDndPanel	boolean	true	是否初始化拖拽面板
dndPanel	FDPatternItem	-	拖拽面板配置
initControl	boolean	true	是否初始化控制面板
control	FDControlItem	-	控制面板配置
nodeClick	Function	-	节点点击事件
edgeClick	Function	-	边点击事件
drawerWidth	String	Number	600px
modalWidth	String	Number	60%
processForm	FDFormType	-	流程表单配置
edgeForm	FDFormType	-	边表单配置
defaultEdgeType	string	ingenious:transition	默认边
typePrefix	string	ingenious:	自定义节点/边类型前缀
viewer	boolean	false	是否查看模式

FDThemeConfig

export declare type FDThemeConfig = {
  primaryColor?: string; // 主题色
  edgePrimaryColor?: string; // 边主题色
  activeColor?: string; // 进行时节点颜色
  historyColor?: string; // 历史节点/边颜色
  backgroundColor ?: string;// 画布背景颜色
}

FDHighLightType

export declare type FDHighLightType = {
  history_node_names?: Array<string>; // 历史节点名称
  history_edge_names?: Array<string>; // 历史边名称
  active_node_names?: Array<string>; // 活跃节点名称
}

FDPatternItem

export declare type FDPatternItem = {
  type?: string;
  text?: string;
  label?: string;
  icon?: string;
  className?: string;
  properties?: object;
  callback?: () => void;
  hide?: boolean; // 是否隐藏
  sort?: number; // 排序字段
  drawerTitle?: string;// 抽屉标题
  nodeClick?: (e: any) => void;
  form?: FDFormType; // 表单配置
};

FDControlItem

export declare type FDControlItem = {
  key?: string; // 唯一编码
  iconClass?: string; // 图标类
  title?: string; // 标题
  text?: string; // 文本
  onClick?: Function // 事件函数
  hide?: boolean; // 是否隐藏
  sort?: number; // 排序字段
}

FDFormType和FDFormItemType

/**
 * 表单数据类型
 */
export declare type FDFormType = {
  labelWidth?: string;
  formItems: Array<FDFormItemType>;
} 
/**
 * 表单项数据类型
 */
export declare type FDFormItemType = {
  name: string; // 表单项名称
  label?: string; // 表单项标签
  component?: 'Input' | 'Select'; // 表单组件
  render?: (args: any) => VNode;
  componentProps?: any; // 表单组件属性
} 

事件

事件名	说明	回调参数
on-init	初始化事件	(lf: any) => void
on-render	渲染事件	(lf: any) => void
on-save	控制面板保存事件	(graphData: any) => void

致谢

• 本项目深受https://gitee.com/mldong/flow-designer项目的启发，并/或在其卓越的代码基础与先进理念上进行了适配与优化，以更好地支持ingenious工作流引擎。衷心感谢mldong作者的辛勤耕耘与无私奉献，他们的努力为我们项目的成功奠定了坚实的基础。
• 课堂视频《工作流设计器开发最佳实践》(https://www.bilibili.com/cheese/play/ss24484)