# 审批流程

本文将介绍如何使用LogicFlow构建权限审批流程。主要包括的功能如下:

  • 创建流程内支持的审批节点
  • 审批流程配置
  • 审批流程主题设置
  • 审批流程进度预览

# 创建审批节点

审批节点包括发起申请、审核、判断、结束。 通过LogicFlow自定义节点,扩展审批流程需要的节点。

# 节点菜单Panel

节点菜单panel使用React组件实现,为组件绑定事件onMouseDown事件,拖拽panel组件进行节点创建。

# 自定义流程节点

  • 节点
    审批节点包括发起申请、审核、判断、结束。其中审核角色又分为直接上级、T3领导,T2领导,T1领导等。不同作用的节点,使用不同的形状、大小、颜色等进行区分。
  • 属性
    审批流程配置中除了节点信息之外,还需要配置各个审批节点和边上的一些属性,自定义实现属性配置。通过LogicFlow自定义属性,扩展审批流程需要的业务属性。
  • 连线规则
    在审批流配置过程中,需要有一些控制连接的规则保证流程的正确性,比如申请节点不能被其它节点连接、结束节点不能连接其他节点等,LogicFlow提供了自定义节点连线规则功能来实现这个需求。

# 审批流配置

# 创建节点

从菜单面板中拖拽节点到画布进行创建。

# 流程配置

通过节点锚点创建边,建立节点之间的联系;对齐线功能辅助调整位置,使得流程更加整齐美观;应用连线规则,保证流程的正确性。

# 审批流扩展

# 事件

LogicFlow提供了节点和边的交互事件,可以通过监听这些事件,拿到对应的节点和边的数据以及原生事件信息。事件的详细内容见事件API
审批中的流程进度预览,设置静默模式,监听节点hover,使用React组件展示审批详情。

# 审批流程主题设置

可以通过主题设置的方式,统一修改节点和边的样式,优化流程展示,适配与宿主系统UI。主题详情见主题API