工作流组件

安装

环境支持

工作流组件基于 Vue.js 实现，并且使用了 Element Plus 中的组件，在引入前请参考 Element Plus 官方文档 安装 Element Plus：

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

快速开始

引入组件

# NPM
$ npm install @hubwa/workflow-engine --save

# Yarn
$ yarn add @hubwa/workflow-engine

# pnpm
$ pnpm install @hubwa/workflow-engine

用法

1. 在入口文件中完整引入 ElementPlus 和组件的 css 文件：

// main.ts
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import '@hubwa/workflow-engine/dist/style.css';
import App from './App.vue';

const app = createApp(App);

app.use(ElementPlus);
app.mount('#app');

2. 在页面上引入组件并提供基础配置，详细见 Reference：

<script setup lang="ts">
import axios from 'axios';
import { createWorkflowConfig, DCWorkflow } from '@hubwa/workflow-engine';
import type { WorkflowData } from '@hubwa/workflow-engine';

const config = createWorkflowConfig();

const submit = (data: WorkflowData) => {
  console.log(data);
};
</script>

<template>
  <DCWorkflow :config="config" @submit="submit" />
</template>

3. 配置请求数据的方法，用于获取系统内用户、表单模型等数据：

<script setup lang="ts">
const config = createWorkflowConfig((config) => {
  config.setService({
    // 请求前缀
    baseAPI: '/api',
    // 发起 HTTP 请求的方法：默认为 ({ url, method })=> fetch(url, { method,}).then((res) => res.json()),
    request: ({ url, method }) => axios({ url, method }).then((res) => res.data),
  });
});
</script>

在线示例

Reference

DCWorkflow 组件

<DCWorkflow>Props

| 属性 | 描述 | 类型 | 默认值 | 备注 | | ------- | ---------------- | --------------------------------- | ------ | ---- | | class | 自定义类名 | string | - | 可选 | | config | 自定义节点配置项 | WorkflowConfig | - | - | | modelId | 工作流 id | string | - | 可选 |

<DCWorkflow>Events

| 事件名 | 描述 | 参数 | | ------ | -------- | ------------------- | | submit | 提交事件 | data: Data |

<DCWorkflow>Slots

| 插槽名 | 描述 | 作用域 | | ------- | -------------- | ----------- | | default | 自定义提交事件 | graphData |

WorkflowCanvas 组件

<workflow-canvas>Props

| 属性 | 描述 | 类型 | 默认值 | | ------ | ---------------- | --------------------------------- | ------ | | data | 工作流数据 | Data | - | | config | 自定义节点配置项 | WorkflowConfig | - |

<workflow-canvas>Events

| 事件名 | 描述 | 参数 | | ----------- | -------- | ------------------- | | update:data | 更新参数 | data: Data |

NodeGroup 组件

<node-group>Props

| 属性 | 描述 | 类型 | 默认值 | | ---- | ---------- | ------------- | ------ | | data | 工作流数据 | Data | - |

<node-group>Events

| 事件名 | 描述 | 参数 | | ----------- | -------- | ------------------- | | update:data | 更新参数 | data: Data |

WorkflowNode 组件

<workflow-node>Props

WorkflowNode组件分别用于发起人节点和审批人节点参数，所以专属于发起人节点的参数flowPermission为可选参数。

| 属性 | 描述 | 类型 | 默认值 | | -------------- | ------------------ | ------------------------- | ------ | | nodeConfig | 节点配置项 | NodeConfig | - | | flowPermission | 发起人参数（可选） | NodeUser[] | - |

<workflow-node>Events

| 事件名 | 描述 | 参数 | | --------------------- | ------------------ | ------------------------------------- | | update:nodeConfig | 更新节点信息 | nodeConfig：NodeConfig | | update:flowPermission | 更新发起人节点信息 | nodeUsers：NodeUser[] |

WorkflowBranch 组件

<workflow-branch>Props

| 属性 | 描述 | 类型 | 默认值 | | ---------- | ---------- | ------------------------- | ------ | | nodeConfig | 节点配置项 | NodeConfig | - |

<workflow-branch>Events

| 事件名 | 描述 | 参数 | | ----------------- | ------------ | ------------------------------------- | | update:nodeConfig | 更新节点信息 | nodeConfig：NodeConfig |

WorkflowCondition 组件

WorkflowCondition组件是WorkflowBranch组件的子组件,每一条分支都必须有且只有一个直接条件判断节点。

<workflow-condition>Props

| 属性 | 描述 | 类型 | 默认值 | | ---------- | -------------------------------------- | ------------------------- | ------ | | nodeConfig | 节点配置项 | NodeConfig | - | | index | 当前条件判断分支的位置 | number | - | | length | 所属分支的 length | number | - | | id | 所属分支的 id | string | - | | hasDefault | 当前分支是否含有自动生成的默认条件节点 | boolean | - |

<workflow-condition>Events

| 事件名 | 描述 | 参数 | | ----------------- | -------------------- | ------------------------------------- | | update:nodeConfig | 更新节点信息 | nodeConfig：NodeConfig | | delCondition | 删除此条条件判断分支 | index:number,direction:number | | sortCondition | 条件判断排序 | index:number |

AddNoteButton 组件

<add-node-button>Props

| 属性 | 描述 | 类型 | 默认值 | | ---------- | ------------------------ | ---------------------------------------------------------- | ------ | | childNodeP | 节点组件原先的子节点配置 | NodeConfig | null | undefined | - |

<add-node-button>Events

| 事件名 | 描述 | 参数 | | ----------------- | -------- | ----------------------------------------- | | update:childNodeP | 添加分支 | childNodeConfig:NodeConfig |

类型定义

WorkflowConfig

interface WorkflowConfig {
  canvas?: WorkflowCanvasConfig;
  drawer?: WorkflowDrawerConfig;
  service: WorkflowServiceConfig;
}

属性说明： | 属性 | 描述 | 类型 | 默认值 | 备注 | | ------- | -------------- | ----------------------------------------------- | ------ | ---- | | canvas | 自定义画布 | WorkflowCanvasConfig | - | 可选 | | drawer | 自定义 drawer | WorkflowDrawerConfig | - | 可选 | | service | 自定义 service | WorkflowServiceConfig | - | |

WorkflowCanvasConfig

interface WorkflowCanvasConfig {
  background?: string;
}

属性说明： | 属性 | 描述 | 类型 | 默认值 | 备注 | | ---------- | ------ | -------- | ------ | ---- | | background | 背景色 | string | - | 可选 |

WorkflowDrawerConfig

interface WorkflowDrawerConfig {
  direction?: string;
}

属性说明： | 属性 | 描述 | 类型 | 默认值 | 备注 | | --------- | ------------------ | -------- | ------ | ---- | | direction | 自定义 drawer 方向 | string | - | 可选 |

WorkflowServiceConfig

interface WorkflowServiceConfig {
  baseAPI?: string;
  request: WorkflowRequestFunction;
  modelDetailAPI?: string;
  userOptionsAPI?: string;
  modelFieldsAPI?: string;
}

属性说明： | 属性 | 描述 | 类型 | 默认值 | 备注 | | -------------- | ------------------- | --------------------------------------------------- | ------ | ---- | | baseAPI | 自定义画布背景色 | string | - | 可选 | | request | 请求参数 | WorkflowRequestFunction | - | - | | modelDetailAPI | 根节点配置 | string | - | 可选 | | userOptionsAPI | 自定义发起人/操作人 | string | - | 可选 | | modelFieldsAPI | 自定义条件判断字段 | string | - | 可选 |

WorkflowRequestFunction

interface WorkflowRequestFunction {
  (params: WorkflowRequestParams): Promise<any>;
}
interface WorkflowRequestParams {
  url: string;
  method?: 'get' | 'post';
}

属性说明： | 属性 | 描述 | 类型 | 默认值 | 备注 | | ------ | -------- | ----------------------- | ------ | ---- | | url | 请求 API | | - | | | method | 请求方法 | 'get' | 'post' | - | 可选 |

Data

interface Data {
  tableId: number;
  flowPermission: NodeUser[]; //发起人
  nodeConfig: NodeConfig;
  directorMaxLevel?: any; //审批主管最大层级
  workFlowDef?: {
    name: string;
  }; //审批名称
}

属性说明： | 属性 | 描述 | 类型 | 默认值 | | ---------------- | ---------------- | ------------------ | ------ | | tableId | 工作流 id | number | - | | flowPermission | 发起人 | number | - | | nodeConfig | 根节点配置 | string | - | | directorMaxLevel | 审批主管最大层级 | any | - | | workFlowDef | 审批名称 | { name: string } | - |

NodeConfig

interface NodeConfig {
  nodeName: string;
  type: number; // 0 发起人 1审批 2抄送 3条件 4路由
  priorityLevel?: any; // 条件优先级
  settype?: any; // 审批人设置 1指定成员 2主管 4发起人自选 5发起人自己 7连续多级主管
  selectMode?: any; //审批人数 1选一个人 2选多个人
  selectRange?: any; //选择范围 1.全公司 2指定成员 2指定角色
  directorLevel?: any; //审批终点  最高层主管数
  examineMode?: any; //多人审批时采用的审批方式 1依次审批 2会签
  noHanderAction?: any; //审批人为空时 1自动审批通过/不允许发起 2转交给审核管理员
  examineEndDirectorLevel?: any; //审批终点 第n层主管
  ccSelfSelectFlag?: any; //允许发起人自选抄送人
  conditionList?: Condition[] | null | undefined; //当审批单同时满足以下条件时进入此流程
  conditionNodes?: NodeConfig[] | null | undefined;
  error?: boolean;
  nodeUserList: NodeUser[]; //操作人
  childNode: NodeConfig | null | undefined;
}

属性说明：

| 属性 | 描述 | 类型 | 默认值 | 备注 | | ----------------------- | --------------------------------------------------------- | --------------------------- | ------- | ---- | | nodeName | 节点名称 | string | - | | type | 节点类型(0 发起人 1 审批人 2 抄送 3 条件 4 路由) | number | - | | settype | 审批人设置 | number | - | 可选 | | selectMode | 审批人数 | any | - | 可选 | | selectRange | 选择范围 | any | - | 可选 | | selectMode | 审批人数 | any | - | 可选 | | examineMode | 多人审批时采用的审批方式 | any | - | 可选 | | directorLevel | 审批终点 最高层主管数 | any | - | 可选 | | noHanderAction | 审批人为空时 1 自动审批通过/不允许发起 2 转交给审核管理员 | any | - | 可选 | | examineEndDirectorLevel | 审批终点 第 n 层主管 | any | - | 可选 | | ccSelfSelectFlag | 允许发起人自选抄送人 | any | - | 可选 | | conditionList | 条件判断节点中当审批单满足以下条件时进入此流程 | Condition[] | - | 可选 | | conditionNodes | 具体几条分支 | NodeConfig[] | - | 可选 | | nodeUserList | 操作人 | NodeUser [] | [] | | error | 当前节点是否出错 | boolean | false | 可选 | | childNode | 子节点 | NodeConfig | - |

NodeUser

interface NodeUser {
  targetId: number;
  type: number;
  name: string;
}

属性说明： | 属性 | 描述 | 类型 | 默认值 | | -------- | -------- | -------- | ------ | | targetId | 用户 id | number | ------ | | type | 用户类型 | number | ------ | | name | 用户名字 | string | ------ |

Condition

interface Condition {
  columnDbname: string; //条件字段名称
  columnId: number; //条件id  columnId == 0 为发起人
  //columnType == "String" && showType == "3"为多选  columnType == "Double"为区间
  columnType: any; //条件字段类型
  conditionCn: any;
  conditionEn: any;
  //fixedDownBoxValue 匹配 columnType == "String" && showType == "3"时子选项内容
  fixedDownBoxValue?: any; //多选数组
  opt1: string; //左侧符号 < ≤
  opt2: string; //右侧符号 < ≤
  optType: string; //["", "<", ">", "≤", "=", "≥"][optType]
  showName: string; //展示名
  showType: string; //3多选 其他
  type: any; //1 发起人 2其他
  zdy1: string; //左侧自定义内容
  zdy2: string; //右侧自定义内容
}

| 属性 | 描述 | 类型 | 默认值 | 备注 | | ----------------- | ------------------------------------------- | -------- | ------ | ---- | | showName | 条件字段名称 | string | - | - | | showType | 条件展示类型 | string | - | - | | columnId | 条件字段 Id | any | - | - | | columnType | 条件字段类型 | any | - | - | | optType | 数字型条件符号类型 | string | - | - | | zdy1 | 左侧自定义内容 | string | - | - | | zdy2 | 右侧自定义内容（仅在optType==='6'时使用） | string | - | - | | opt1 | 左侧符号（仅在optType==='6'时使用） | string | - | - | | opt2 | 右侧符号（仅在optType==='6'时使用） | string | - | - | | conditionCn | 条件中文名称 | string | - | - | | conditionEn | 条件英文名称 | string | - | - | | fixedDownBoxValue | 多选数组 | any | - | 可选 |