ingenious-flow-designer

实战项目

演示地址

账号/密码：admin/123456

注：实战项目不开源

使用文档

兼容性注意

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

下载

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