vue-willtable/strategy-doc/docs/guide/introduce.md

An editable table component for Vue

# 介绍

`Strategy` 是基于滴滴国际化运营平台 `POPE2.0` 孵化的前端自动布局的流程编排组件，主要应用于各类业务的运营场景。只需指定点线连接关系即可渲染出流程图，操作类似脑图可直接在节点之间插入节点，可对点的队列进行批量复制粘贴删除等操作。提供简单灵活的自定义点边渲染方法与属性以及菜单项拖拽事件，可以高度自定义点、边以及菜单样式，满足不同产品的样式风格要求。提供新增校验、空数据校验以及错误数据校验等多种校验方法，保证流程与数据的准确性，降低错配概率。

## 为何自研

由于 POPE1.0 逐渐不满足业务诉求，团队发起了 POPE2.0 改版，界面交互主要参考了 Safesforce 的 Journey Builder。

内容包括通过拖拽不同类型节点到画布中的节点后面或插入节点中间，可自动连线布局生成流程图。除了普通节点外，有一种分叉节点来处理有多条路径的节点（例：流量分流，条件判断），后期还需支持合并节点等功能。

在调研了 bpmn.js、X6、LoginFlow 等框架后，发现这些框架的交互与产品交互有一定的差别。这些框架都是用户自由放置节点以及连线，而产品交互是用户只需关心流程执行顺序有效，布局与连线由系统自动生成。针对产品上的差异存在以下问题：

1. 部分框架扩展能力不足，自定义节点成本很高
2. 自动布局连线渲染以及尾部添加节点、中间插入节点、批量复制粘贴删除等功能都需重新实现，但框架代码较重，代码不好控制，改造成本高

因此，我们考虑自研的方式来支持 POPE2.0 产品的流程编辑需求。

<!-- ## 为何开源

1. 技术条件：流程编辑组件可与业务节点解耦，大部分业务需求开发，可以无需改动流程编辑组件的公用代码，流程编辑组件具备抽离独立的条件
2. 功能沉淀：经过 POPE2.0 一年多的迭代开发，流程编辑组件功能得到了逐渐的完善，可以满足丰富的产品场景需求
3. 外部需求：公司内部团队 r-lab 以及去了美团的同事基本都以 POPE2.0 代码重新实现了一套新的运营活动流程编辑系统，如果能将该流程编辑组件抽离开源出去，可以极大降低类似运营活动流程系统的开发成本
4. 易用轻量：市面上没有与这种产品形态非常贴近的开源组件，改造成本都很高，利用 Strategy 可以更低成本接入。并且体积大小为几十 kb，是很多类似开源流程组件大小的十分之一不到。 -->

## 特性与能力

1. 画布展示与编辑能力：节点自动布局与连线，支持节点拖拽添加以及批量复制、粘贴、删除等操作。支持合并节点。
2. 自定义能力：支持点、边以及菜单列表自定义结构或样式。支持自定义节点按钮列表。
3. 校验能力：支持自定义节点判空校验、节点数据校验、节点添加校验等。
4. 包含四种节点类型：
   - 普通节点：单个节点，数据默认存储在`nodeDetail`中
   - 分叉节点：节点保存后会产生分叉路径，数据存在`paths`数组中
   - 占位节点：跟在分叉节点分叉路径后面，当分叉节点分叉路径后没有其他节点时用来占位
   - 组合节点：在`group`数组中定义多个其他节点的集合，可自定义初始值一次性拖入到画布中
5. 工具能力：支持撤销重做、小地图、画布放大缩小等。