npm package: @hubwa/workflow-engine
Description: ## 安装
Latest version: 1.1.1

# 工作流组件

## 安装

### 环境支持

工作流组件基于 Vue.js 实现，并且使用了 Element Plus 中的组件，在引入前请参考 [Element Plus 官方文档](https://element-plus.org/zh-CN/guide/installation.html) 安装 Element Plus：

```sh
# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus
```

### 快速开始

#### 引入组件

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

# Yarn
$ yarn add @hubwa/workflow-engine

# pnpm
$ pnpm install @hubwa/workflow-engine
```

#### 用法

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

```ts
// 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](https://newgitlab.digitalchina.com/wuhan/ccb-workflow-engine/ccb-workflow-engine-frontend-lib/tree/master/packages/workflow-engine#reference)：

```ts
<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. 配置请求数据的方法，用于获取系统内用户、表单模型等数据：

```ts
<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>
```

## 在线示例

<iframe src="https://codesandbox.io/embed/ccb-workflow-engine-frontend-demo-forked-bkszu3?fontsize=14&hidenavigation=1&theme=dark&view=preview"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="ccb-workflow-engine-frontend-demo (forked)"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ccb-workflow-engine-frontend-demo-dyy6oy?file=/src/main.js)

## Reference

### DCWorkflow 组件

`<DCWorkflow>`Props

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

`<DCWorkflow>`Events

| 事件名 | 描述     | 参数                |
| ------ | -------- | ------------------- |
| submit | 提交事件 | data: [Data](#Data) |

`<DCWorkflow>`Slots

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

### WorkflowCanvas 组件

`<workflow-canvas>`Props

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

`<workflow-canvas>`Events

| 事件名      | 描述     | 参数                |
| ----------- | -------- | ------------------- |
| update:data | 更新参数 | data: [Data](#Data) |

### NodeGroup 组件

`<node-group>`Props

| 属性 | 描述       | 类型          | 默认值 |
| ---- | ---------- | ------------- | ------ |
| data | 工作流数据 | [Data](#Data) | -      |

`<node-group>`Events

| 事件名      | 描述     | 参数                |
| ----------- | -------- | ------------------- |
| update:data | 更新参数 | data: [Data](#Data) |

### WorkflowNode 组件

`<workflow-node>`Props

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

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

`<workflow-node>`Events

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

### WorkflowBranch 组件

`<workflow-branch>`Props

| 属性       | 描述       | 类型                      | 默认值 |
| ---------- | ---------- | ------------------------- | ------ |
| nodeConfig | 节点配置项 | [NodeConfig](#NodeConfig) | -      |

`<workflow-branch>`Events

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

### WorkflowCondition 组件

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

`<workflow-condition>`Props

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

`<workflow-condition>`Events

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

### AddNoteButton 组件

`<add-node-button>`Props

| 属性       | 描述                     | 类型                                                       | 默认值 |
| ---------- | ------------------------ | ---------------------------------------------------------- | ------ |
| childNodeP | 节点组件原先的子节点配置 | [NodeConfig](#NodeConfig) &#124; `null` &#124; `undefined` | -      |

`<add-node-button>`Events

| 事件名            | 描述     | 参数                                      |
| ----------------- | -------- | ----------------------------------------- |
| update:childNodeP | 添加分支 | childNodeConfig:[NodeConfig](#NodeConfig) |

### 类型定义

### WorkflowConfig

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

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

### WorkflowCanvasConfig

```ts
interface WorkflowCanvasConfig {
  background?: string;
}
```

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

### WorkflowDrawerConfig

```ts
interface WorkflowDrawerConfig {
  direction?: string;
}
```

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

### WorkflowServiceConfig

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

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

#### WorkflowRequestFunction

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

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

### Data

```ts
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

```ts
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](#Condition)[]   | -       | 可选 |
| conditionNodes          | 具体几条分支                                              | [NodeConfig](#NodeConfig)[] | -       | 可选 |
| nodeUserList            | 操作人                                                    | [NodeUser](#NodeUser) []    | `[]`    |
| error                   | 当前节点是否出错                                          | `boolean`                   | `false` | 可选 |
| childNode               | 子节点                                                    | [NodeConfig](#NodeConfig)   | -       |

### NodeUser

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

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

### Condition

```ts
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`    | -      | 可选 |