[Feature]: 使用react flow来实现审批王流程图查看界面

[yinlianghui]

Summary 摘要

• 原审批王申请单上的流程图按钮点开的流程图页面使用react flow重新实现，功能保持不变。

• React Flow参考资料： https://reactflow.dev/docs/quickstart https://reactflow.dev/docs/examples/overview https://reactflow.dev/docs/api/react-flow-props

• 一个使用React Flow实现的项目： https://github.com/sqlhabit/sql_schema_visualizer

• 需要切到分支react_flow_form_workflow，这个分支已经把申请单上的流程图按钮点开的流程图页面换成了一个名为workflow_chart的微页面，在这个微页面中实现原流程图功能。

• 原流程图是一个单独的接口返回的静态html，源码见：https://github.com/steedos/steedos-platform/blob/3bb47115458141b0ee2b98af968884816f79deab/creator/packages/steedos-workflow-chart/routes/chart.coffee#L583C18-L583C18

• 需要参考上面原流程图业务逻辑代码在微页面workflow_chart中使用react flow实现相关功能。

• 微页面中实现流程图的整体思路：

{data:instances(filters:["_id", "=", "Mo3CDsxu9PsjSddM5"]){
  _id,flow,traces,
    flow__expand{
      name,
      current,
      historys
    },
  _display:_ui{flow}
}}

第一步：上面的GraphQL基本上拿到了画流程图需要的instance及flow数据，但是出于性能考虑需要改为单独在自定义接口中实现上面的GraphQL数据查询功能。 接口中用ObjectQL来查询数据，不要用原来的db.xx.find这种meteor语法了，可参考写法：

const instance = require('@steedos/objectql').getObject('instances').aggregate({}, [
    {
        '$match': {
            '_id': 'cFLmxT54j2WMQ8C6v'
        }
    }, {
        '$project': {
            'flow_version': 1,
            'flow': 1,
            'lastTrace': {
                '$last': '$traces'
            }
        }
    }
])

第二步：微页面中有一个service，调用上面第一步做好的接口，拿到当前申请单需要的基础数据，然后使用react flow画出流血节点。

Why should this be worked on? 此需求的应用场景？

流程图及流程设计器重构。

[tujiajun]

https://github.com/wbkd/react-flow/issues/2665 若节点之间有来回互动，可能会导致流程图显示效果杂乱，若要优化流程图，可参考该issue，但最完美的解决方案是创建一个自定义节点