# ingenious-flow-designer



## 实战项目
[演示地址](http://antd-vben5-pro.madong.tech/)

账号/密码：admin/123456

注：实战项目不开源
## 使用文档
### 兼容性注意
* 因Vite 需要 Node.js 版本 18+ 或 20+。当你的包管理器发出警告时，请注意升级你的 Node 版本。
* 本项目是在 Node.js 版本 16+的环境下测试通过。

### 下载
```shell
git clone https://gitcode.com/motion-code/flow-designer.git
git clone https://gitee.com/motion-code/flow-designer.git
```



### 安装
```shell
npm install ingenious-flow-designer --registry=https://registry.npmmirror.com 
```

### 全局注册
```javascript
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'
})
```
### 使用样例
#### 编辑模式
```html
<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>
```
#### 只读模式
```html
<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
```typescript
export declare type FDThemeConfig = {
  primaryColor?: string; // 主题色
  edgePrimaryColor?: string; // 边主题色
  activeColor?: string; // 进行时节点颜色
  historyColor?: string; // 历史节点/边颜色
  backgroundColor ?: string;// 画布背景颜色
}
```
#### FDHighLightType
```typescript
export declare type FDHighLightType = {
  history_node_names?: Array<string>; // 历史节点名称
  history_edge_names?: Array<string>; // 历史边名称
  active_node_names?: Array<string>; // 活跃节点名称
}
```
#### FDPatternItem
```typescript
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
```typescript
export declare type FDControlItem = {
  key?: string; // 唯一编码
  iconClass?: string; // 图标类
  title?: string; // 标题
  text?: string; // 文本
  onClick?: Function // 事件函数
  hide?: boolean; // 是否隐藏
  sort?: number; // 排序字段
}
```
#### FDFormType和FDFormItemType
```typescript
/**
 * 表单数据类型
 */
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](https://gitee.com/mldong/flow-designer)项目的启发，并/或在其卓越的代码基础与先进理念上进行了适配与优化，以更好地支持ingenious工作流引擎。衷心感谢mldong作者的辛勤耕耘与无私奉献，他们的努力为我们项目的成功奠定了坚实的基础。
- 课堂视频《工作流设计器开发最佳实践》(https://www.bilibili.com/cheese/play/ss24484)