work-flow-master

一个开箱即用的工作流设计器包装组件，内部封装了所有状态管理，极大简化了原始 Setting 组件的使用方式。

何时使用

• 你希望在项目中快速集成工作流设计器，而不想手动管理数十个 props 和内部状态。
• 你需要一个默认行为合理、可选配置丰富的流程配置界面。

安装

确保已安装 work-flow-master：

npm install work-flow-master

# Setting 组件 Props 说明

| 属性 | 类型 | 必填 | 默认值 | 描述 |
|------|------|------|--------|------|
| `initialData` | `object` | 是 | - | 流程初始配置（见下方结构） |
| `dataProviders` | `object` | 否 | `{}` | 部门/角色/成员数据源 |
| `onSave` | `(config) => Promise` | 是 | - | 保存流程时的回调函数 |
| `onSaveSuccess` | `() => void` | 否 | - | 保存成功后的回调 |
| `onSaveError` | `(error) => void` | 否 | - | 保存失败时的回调 |

## initialData 对象结构

| 字段 | 类型 | 必填 | 默认值 | 描述 |
|------|------|------|--------|------|
| `workFlowDef` | `object` | 是 | - | 流程定义 `{ id, name, description? }` |
| `nodeConfig` | `object` | 是 | - | 流程节点树（根节点为发起人） |
| `flowPermission` | `array` | 否 | `[]` | 发起人权限列表 |
| `directorMaxLevel` | `number` | 否 | `5` | 主管最大层级（用于选择主管） |
| `tableId` | `string/number` | 否 | `''` | 表单 ID，用于获取条件字段 |
| `conditionFields` | `array` | 否 | `[]` | 条件分支可用的字段列表 |

## dataProviders 对象结构

| 字段 | 类型 | 必填 | 默认值 | 描述 |
|------|------|------|--------|------|
| `getDepartments` | `object` | 否 | 空数据 | 部门组织架构数据 |
| `getRoles` | `array` | 否 | `[]` | 角色列表 |
| `getEmployees` | `object` | 否 | 空数据 | 职员分页数据 |


使用以下方法配合analogData.md内的数据即可快速使用

第一步:
先创建一个mockWorkflowData.js把analogData.md中的数据放进去
第二步：
把mockWorkflowData.js引入到需要的地方，复制下面的初始化数据后调用组件即可

/**
 * 流程组件的初始化数据配置
 * 该对象包含了流程设计器所需的所有静态配置数据
 */
const initialData = {
    workFlowDef: mockWorkflowData.workFlowDef, // 流程定义基础信息
    nodeConfig: mockWorkflowData.nodeConfig, // 流程节点配置树（核心数据结构）
    flowPermission: mockWorkflowData.flowPermission, // 发起人权限列表
    directorMaxLevel: mockWorkflowData.directorMaxLevel, // 主管最大层级
    tableId: mockWorkflowData.tableId, // 表单/表格ID
    conditionFields: mockWorkflowData.conditionFields,  // 条件字段列表（可选）
};

/**
 * 数据提供器（异步数据获取接口）
 * 用于流程组件内部动态拉取部门、角色、员工等数据
 */
const dataProviders = {
    getDepartments: mockWorkflowData.getDepartments, // 获取部门组织结构（树形数据）
    getRoles: mockWorkflowData.getRoles, // 获取角色列表
    getEmployees: mockWorkflowData.getEmployees, // 获取职员列表（支持分页）
};

/**
 * 保存流程配置的异步处理函数
 * 将流程设计器生成的 processConfig 提交到后端接口
 * 
 * @param {Object} processConfig - 流程配置对象（由流程设计器组件生成，结构与 initialData.nodeConfig 类似）
 * @returns {Promise<Object>} 返回后端保存成功后的响应数据（如流程ID等）
 * @throws {Error} 当 HTTP 请求失败（非 2xx 状态码）时抛出错误
 * 
 * @example
 * handleSave(processConfig)
 *   .then(data => console.log('保存成功', data))
 *   .catch(err => console.error('保存失败', err));
 */
const handleSave = async (processConfig) => {
    // 发送 POST 请求到流程保存接口（模拟接口）
    const response = await fetch('/api/workflow/save', {
        method: 'POST',                               // 请求方法
        headers: { 'Content-Type': 'application/json' }, // 指定 JSON 格式
        body: JSON.stringify(processConfig),          // 将流程配置序列化为 JSON 字符串
    });
    
    // 如果响应状态码不在 200-299 范围内，则抛出错误
    if (!response.ok) throw new Error('保存失败');
    
    // 解析并返回后端响应的 JSON 数据
    return response.json();
};

/**
 * 流程设计器主组件
 * 该组件用于配置工作流的节点、审批人、条件分支等核心逻辑
 * 
 * @component
 * @param {Object} props - 组件属性
 * @param {Object} props.initialData - 流程初始化配置（包含流程定义、节点树、权限等）
 * @param {Object} props.dataProviders - 数据提供器（用于动态获取部门/角色/员工）
 * @param {Function} props.onSave - 保存流程配置的回调函数，接收 processConfig 对象
 * @param {Function} props.onSaveSuccess - 保存成功后的回调（无参数）
 * @param {Function} props.onSaveError - 保存失败后的回调，接收错误对象 err
 */}
<Setting
    initialData={initialData}
    dataProviders={dataProviders}
    onSave={handleSave}
    onSaveSuccess={() => alert('保存成功')}
    onSaveError={(err) => console.error(err)}
/>