flow-engine-maker

流程可视化配置工具，结合流程引擎使用，仅供熙牛前端团队使用。

前端招聘，寻找有想法、有能力的你，有意向联系我：haomou.chh@alibaba-inc.com

用法

使用文档：https://yuque.antfin-inc.com/futurehit/wl053z/uzf0r3

编辑流程、生成代码：

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 '@ali/seenew-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>
}

开发者

皓眸

流程编辑器

807991555