@hubwa/workflow-engine v1.1.1

工作流组件

安装

环境支持

工作流组件基于 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

<DCWorkflow>Events

<DCWorkflow>Slots

WorkflowCanvas 组件

<workflow-canvas>Props

<workflow-canvas>Events

NodeGroup 组件

<node-group>Props

<node-group>Events

WorkflowNode 组件

<workflow-node>Props

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

<workflow-node>Events

WorkflowBranch 组件

<workflow-branch>Props

<workflow-branch>Events

WorkflowCondition 组件

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

<workflow-condition>Props

<workflow-condition>Events

AddNoteButton 组件

<add-node-button>Props

<add-node-button>Events

类型定义

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;
}

属性说明：

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; //右侧自定义内容
}