vue-willtable/strategy-doc/README.md

An editable table component for Vue

[官网文档](https://strategyjs.didiglobal.com/strategy-doc/)

# Strategy.js

Strategy 是专注于流程可视化编排的前端组件，流程节点自动布局、自动连线，支持批量复制粘贴删除节点、自定义节点样式、自定义节点数据与添加校验等功能。让用户专注于流程逻辑规则，能够便捷直观的配置出流程图，并能够在各类流程引擎上执行。

## 特性

- 高自定义

  兼容不同产品的样式风格要求，样式支持高度的自定义，菜单与节点均支持自定义渲染

- 重执行

  流程图数据可完整表达业务逻辑，适用在各种流程引擎

- 多校验

  为保证流程与数据的准确性，提供自定义拖拽新增校验、空数据校验以及错误数据校验等多种校验方法

## 安装

```
npm install @didi/strategy --save
```

## 示例

```
const strategyRef: StrategyRef = useRef(null);
const nodeClick = (node: NodeDefine) => {
  setCurrentNode(node);
};

React.useEffect(() => {
  // 初始数据
  const data: StrategyMetadata = {
      nodeMap: {
        '00': {
          nodeId: '00',
          nodeKey: 'group',
          nodeType: NodeType.normal,
          nodeBusType: 'common',
          nodeDetail: {
            id: '123456',
          },
        },
        '01': {
          nodeId: '01',
          nodeKey: 'userEvent',
          nodeType: NodeType.multi,
          nodeBusType: 'trigger',
          paths: [
            {
              key: '01',
              name: '冒泡',
              data: {
                type: 'bubble',
              },
            },
            {
              key: '02',
              name: '完单',
              data: {
                type: 'finish_order',
              },
            },
          ],
        },
        '02': {
          nodeId: '02',
          nodeKey: 'userAttr',
          nodeBusType: 'condition',
          nodeType: NodeType.multi,
          paths: [
            {
              key: '03',
              name: '数量大于1',
              data: {
                type: 'amount',
              },
            },
          ],
        },
        '03': {
          nodeId: '03',
          nodeKey: 'coupon',
          nodeBusType: 'action',
          nodeType: NodeType.normal,
          nodeDetail: {
            content: 'ddd',
          },
        },
        '04': {
          nodeId: '04',
          nodeKey: 'placeholder',
          nodeType: NodeType.placeholder,
        },
      },
      edgeMap: {
        '00': {
          edgeId: '00',
          startNodeId: '00',
          endNodeId: '01',
        },
        '01': {
          edgeId: '01',
          edgeName: '冒泡',
          startNodeId: '01',
          endNodeId: '02',
        },
        '02': {
          edgeId: '02',
          edgeName: '完单',
          startNodeId: '01',
          endNodeId: '04',
        },
        '03': {
          edgeId: '03',
          edgeName: '数量大于1',
          startNodeId: '02',
          endNodeId: '03',
        },
      },
    };
    // 设置数据
    strategyRef.current?.setData(data);
}, []);

<StrategyEditor ref={strategyRef} NodeMenuList={NodeMenuList} nodeClick={nodeClick} />
```

## 示例

示例包含添加叶子节点、中间插入节点、分叉与普通节点表单编辑、节点数据校验、节点添加校验、批量复制删除等操作。

### 普通风格示例

![common](http://img0.didiglobal.com/static/magellan_test/do1_f54YVw29s5wrJGg1WAep)

### POPE 风格示例

![pope](http://img0.didiglobal.com/static/magellan_test/do1_D7UleVJvNUtylNc5m4GP)

## 联系我们

加入 D-Chat 群

 <img src="http://img0.didiglobal.com/static/magellan_test/do1_ndDE5w1CSqudN1KZKpeR" width="200px">