@aliretail/react-materials-components/demo/TreeManager/README.md

B 端物料组件库

---
title: TreeManager-API
order: 1
category: UI
description: TreeManager 组件描述
screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png
---

## API

| 参数名      | 说明                     | 必填 | 类型                  | 默认值   |
| ----------- | ------------------------ | ---- | --------------------- | -------- |
| subjectName | 主题名称                 | N    | string                | 分组     |
| requestMap  | 请求参数映射表           | Y    | IRequestMap           | {}       |
| tabList     | 标签的 dataSource        | N    | ITabItem[]            | []       |
| onSelect    | 选中标签时发生的回调函数 | N    | (key: string) => void | () => {} |

### IRequestMap

> 请求地址映射类型表述

```TypeScript
interface IRequestItem {
  appCode?: string; // 请求接口的应用 code
  apiCode?: string; // 请求接口的接口 code
  url?: string; // 接口请求的完整地址
  params?: Record<string, string>; // 接口请求所带的额外参数
}
interface IRequestMap {
  queryAll: IRequestItem; // 查询接口
  move: IRequestItem; // 移动接口
  create: IRequestItem; // 创建接口
  rename: IRequestItem; // 重命名接口
  delete: IRequestItem; // 删除接口
}
```

### ITabItem

> tab 切换部分的数据源

```TypeScript
interface ITabItem {
  title: string; // tab 显示的标题内容
  key: string; // tab 相应的唯一标识
}
```

# TTree - 整体树的结构

```TypeScript
// 整棵树
type TTree = ITreeItem[];

// 每个树节点的结构
interface ITreeItem {
  label: string; // 页面显示的字样
  key: string; // 唯一标识
  /**
   * 该分组是否有子内容 true-有 false-没有
   * @default false
   */
  hasContent: boolean;
  children?: ITreeItem[]; // 子节点
}
```

## 接口返回数据格式

如果没有写 response 则只依赖返回的 success 的状态

### response 统一包装格式

```JSON
{
  "success": true, // 接口访问是否成功
  "result": IResult // 下述文档中的数据存放部分
}
```

### IResult 数据部分

#### queryAll - 查询接口

##### request

```JSON
{
  "modelType": string; // 查询的相应 tab 唯一标识
}
```

##### response

```TypeScript
type IResult = TTree;
```

> mock

```JSON
{
  "result": [
    {
      "label": "全部",
      "key": "0-0",
      "children": [
        {
          "label": "my",
          "key": "0-1",
          "hasContent": true
        },
        {
          "label": "us",
          "key": "0-2"
        }
      ]
    },
    {
      "label": "全部2",
      "key": "1-0",
      "children": [
        {
          "label": "my",
          "key": "1-1",
          "hasContent": true
        }
      ]
    }
  ],
  "success": true
}
```

#### move - 移动接口

##### request

```JSON
{
  data: TTree; // 移动之后的树结构
}
```

#### create - 创建节点接口

##### request

```JSON
{
  label: string; // 创建的节点名称
  parentKey: string | undefined; // 创建的节点的父唯一标识,没有则不用带此参数
}
```

#### rename - 重命名接口

##### request

```JSON
{
  key: string; // 要修改的节点唯一标志
  label: string; // 要修改的目标名称
}
```

#### delete - 删除接口

##### request

```JSON
{
  key: string; // 要删除的唯一标志
}
```