# MultiCopy组件

> 此组件为纯业务组件，部分内容需要注意，使用之前需要熟悉业务并对接口和回调进行扩展！！！

## 组件API

- `planData: [Arrary]`：请选择推广计划(组数)/推广组(子链数)的左侧数据 ；
- `onSearch: [Function]`：搜索推广计划回调函数，接收的参数为搜索词；
- `copyGet: [Function]`: 每次添加成功后右侧数据变动事件，接收参数为右侧数据；
- `maxLength: [Number]`: 最当可添加推广组的数量，不传默认值为1000
- `copyHeight: [Number]`: 内部内容组件高度设置，默认400
- `onlyOne: [Boolean]`: 是否只有一个层级，默认为只有计划层级
- `onlyGroup: [Boolean]`: 前提条件`onlyOne：true` ,只有组层级
- `pid_list: [Array]`: 初始选中计划
- `gid_list: [Array]`: 初始选中组
- `notices: [String|html]`: 顶部提示文字
- `loading: [Boolean]`: 是否正在`loading`状态

## `planData` 参数示例，本根据现有业务参考，如有需求联系作者修改

```javascript
[
  {
    "plan":
      {"id":"6064869181","title":"110","group_num":1},
    "group":
      [
        {"id":"6070364072","title":"1101","num":0}
      ]
  },
  {
    "plan":
      {"id":"6064869173","title":"1123123\u5173\u952e\u8bcd\u8ba1\u5212","group_num":1},
    "group":
      [
        {"id":"6066884734","title":"\u65b0\u589e\u7684\u7ec411","num":0},
        {"id":"6066884745","title":"\u65b0\u589e\u7684\u7ec412","num":0},
        {"id":"6066884756","title":"\u65b0\u589e\u7684\u7ec413","num":0}
      ]
  },
  {
    "plan":
      {"id":"6064868997","title":"1\u5173\u952e\u8bcd\u8ba1\u52121","group_num":1},
    "group":
      [
        {"id":"6066884568","title":"\u65b0\u589e\u7684\u7ec41","num":0}
      ]
  },
  {
    "plan":
      {"id":"606486895","title":"3421\u5173\u952e\u8bcd\u8ba1\u5212","group_num":1},
    "group":
      [
        {"id":"606688324","title":"\u65b0\u589e\u7684\u7ec41","num":0}
      ]
  }
]
```

## 使用示例

MultiCopy只作为展示组件使用，下面的demo有数据交互作为容器组件使用。

```javascript
import React, { Component } from 'react';
import MultiCopy from './components/MultiCopy';
import './App.css';

// 此组件应被作为容器组件 MultiCopy 为展示组件
class App extends Component {
  constructor() {
    super();

    this.state = {
      planData: [],
      groupCopyData: []
    }
  }

  // 组件初始化时候应该通过其获取数据传递给 MultiCopy
  componentDidMount() {
    this.setState({planData: virtu});
  }

  render() {
    const {planData} = this.state;
    return (
      <div className="App">
        <MultiCopy planData={planData} onSearch={(word) => this.searchWord(word)} copyGet={(data) => this.getCopy(data)} maxLength={1000}/>
      </div>
    );
  }

  // 搜索按钮的回调函数在业务中应为数据交互操作
  searchWord() {
    this.setState({planData: virtu2});
  }

  // 每次添加完数据会获取到添加完的数据，此后可以借此进行数据操作提交等
  getCopy(copyData) {
    if (copyData) {
      console.log(copyData);
      this.setState({groupCopyData: copyData});
    }
  }
}

const virtu = [
  {
    "plan":
      {"id":"606486918","title":"yxs_openApi_\u6d4b\u8bd5","group_num":1},
    "group":
      [
        {"id":"607036407","title":"APP\u76f8\u5173\u7ec423","num":0}
      ]
  },
  {
    "plan":
      {"id":"606486917","title":"1\u5173\u952e\u8bcd\u8ba1\u5212","group_num":1},
    "group":
      [
        {"id":"606688473","title":"\u65b0\u589e\u7684\u7ec411","num":0},
        {"id":"606688474","title":"\u65b0\u589e\u7684\u7ec412","num":0},
        {"id":"606688475","title":"\u65b0\u589e\u7684\u7ec413","num":0}
      ]
  },
  {
    "plan":
      {"id":"606486899","title":"1\u5173\u952e\u8bcd\u8ba1\u52121","group_num":1},
    "group":
      [
        {"id":"606688456","title":"\u65b0\u589e\u7684\u7ec41","num":0}
      ]
  },
  {
    "plan":
      {"id":"606486895","title":"3421\u5173\u952e\u8bcd\u8ba1\u5212","group_num":1},
    "group":
      [
        {"id":"606688324","title":"\u65b0\u589e\u7684\u7ec41","num":0}
      ]
  }
]

const virtu2 = [
  {
    "plan":
      {"id":"6064869181","title":"110","group_num":1},
    "group":
      [
        {"id":"6070364072","title":"1101","num":0}
      ]
  },
  {
    "plan":
      {"id":"6064869173","title":"1123123\u5173\u952e\u8bcd\u8ba1\u5212","group_num":1},
    "group":
      [
        {"id":"6066884734","title":"\u65b0\u589e\u7684\u7ec411","num":0},
        {"id":"6066884745","title":"\u65b0\u589e\u7684\u7ec412","num":0},
        {"id":"6066884756","title":"\u65b0\u589e\u7684\u7ec413","num":0}
      ]
  },
  {
    "plan":
      {"id":"6064868997","title":"1\u5173\u952e\u8bcd\u8ba1\u52121","group_num":1},
    "group":
      [
        {"id":"6066884568","title":"\u65b0\u589e\u7684\u7ec41","num":0}
      ]
  },
  {
    "plan":
      {"id":"606486895","title":"3421\u5173\u952e\u8bcd\u8ba1\u5212","group_num":1},
    "group":
      [
        {"id":"606688324","title":"\u65b0\u589e\u7684\u7ec41","num":0}
      ]
  }
]

export default App;

```