一个简单的流程驱动

之前项目做的流程驱动项目，通过可视化配置纯函数业务流程，按照流程驱动状态机流转，上一个流程输出到下一个流程输入。

课程地址：网易云课堂在线课程

github：https://github.com/chalecao/flow-engine

实现效果 #

应用市场查找“流程编辑器”，结果如下图，是我开发的可视化的流程编辑器：

1. 新建配置文件 创建目录：

• comps，用于存放功能点函数组件

• config，用于存放配置文件

• config.flow.json，存放配置文件

配置文件以.flow.json结尾。 示例：

{
  "doctorStationFlow": {
    "config": [
      [
        "handleCardNumberByBackendWeishan",
        "figureOutNameSearchType",
        "searchCardNumberByName"
      ],
      [
        "backendParserWeishan",
        "daliIdCardReadCard"
      ],
      [
        "fastKeyReadCard",
        "backendParserWeishan",
        "getMedicarePatientInfo"
      ],
      "searchPatientRequest"
    ],
    "mark": "xxxx"
  }
}

2. 设计业务流程 安装vscode插件，市场搜索流程编辑器，安装。右键config.flow.json，选择打开流程设计。

切换到节点管理，选择基础设置，设置相对组件路径，这个用于生成代码使用。

3. 业务流程设计 点击添加业务流程，开始设计流程。

编辑完，注意填写流程标识，后面业务就使用这个标识来执行对应流程。点保存。

然后点生成代码，会自动生成代码

4. 使用示例

import React, { useState, useEffect } from 'react';
import runnable from 'flow-engine';
import flow from './config'
export default props => {
  /**
   * 指定对应流程标识的配置流程
   * @param {*} scene 具体流程标识
   */
  const exeAlipayFlow = (scene) => {
    runnable.excute(flow(scene), {
      ...props,
      debug: {
        mode: 2, // 打印执行流程
        // mode: 1,  // debug执行流程
        disabledNodes: [], // 禁用的流程
        ...debug,
      },
    }, () => {
      // 流程最后执行完的回调函数
    });
  }
  return <div></div>
}

产品场景 #

比较适合多业务流程的情况，比如之前做的一个项目是医院项目的读卡器读卡程序，读取用户就诊凭证，就是各种社保卡、市民卡、身份证、医保二维码、健康码等等有17种，每个市区的社保卡、市民卡都不一样，调用的读卡程序接口，传递的参数都不一样，我们通过流程驱动来解决。

• 17种卡，每种读卡流程都配置一遍，最后形成一个大的读卡流程。