# At at

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/at/freepass)
- 平台：PC
- 维护者：陈佳敏
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s53
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[At]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { PureComponent } from 'react';
import { At } from '@weapp/ui';

class AtDemo extends PureComponent {
  onChange = (id?: string, itemData?: any) => {
    console.log(id, itemData);
  }

  render() {
    return (
      <At
        onChange={this.onChange}
        showTargetMember
        disablePaging={false}
      />
    );
  }
}

export default AtDemo;
```

### 外部受控

组件外部控制显隐

```jsx
import { PureComponent } from 'react';
import { At, Button } from '@weapp/ui';

class Main extends PureComponent<any, any> {

  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
    }
  }

  onChange = (id?: string, itemData?: any) => {
    console.log(id, itemData);
  }

  onVisibleChange = (visible?: boolean) => {
    this.setState({ visible: !!visible });
  }

  onVsisbleOpen = () => {
    this.setState({ visible: true })
  }

  render() {
    return (
      <At
        onChange={this.onChange}
        showTargetMember
       
        visible={this.state.visible}
        onVisibleChange={this.onVisibleChange}
        customChildren={(
          <Button
            onClick={this.onVsisbleOpen}
          >
            打开at
          </Button>
        )}
      />
    );
  }
}

export default Main;
```

## API

### 参数说明如下：

> 接口中{module}将被替换为模块标识

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| showSubCompany | 是否显示分部 | boolean | 否 | false |
| tabsUrl | 动态获取菜单数据请求地址 | string | 否 | `/api/{module}/common/combinationTabs` |
| tabsParams | 动态获取菜单数据请求参数 | object | 否 |  |
| userUrl | 人员接口请求地址 | string | 否 | `/api/{module}/common/userFast` |
| departmentUrl | 部门接口请求地址 | string | 否 | `/api/{module}/common/departmentFast` |
| groupUrl | 群组接口请求地址 | string | 否 | `/api/{module}/common/channelFast` |
| outerUserUrl | 外部人员接口请求地址 | string | 否 | `/api/{module}/common/userExternalFast` |
| subcompanyUrl | 分部人员接口请求地址 | string | 否 | `/api/{module}/common/subcompanyFast` |
| userParams | 人员接口请求参数 | object | 否 |  |
| departmentParams | 人员接口请求参数 | object | 否 |  |
| groupParams | 人员接口请求参数 | object | 否 |  |
| outerUserParams | 外部人员接口请求参数 | object | 否 |  |
| subcompanyParams | 分部人员接口请求参数 | object | 否 |  |
| visible | 弹层显影 | boolean | 否 | false |
| hasMenu | 是否请求tabs | boolean | 否 | true |
| hideTrigger | 是否不显示外层trigger,只显示内部的列表数据 | boolean | 否 | false |
| triggerProps | 弹层属性(支持 trigger 的所有属性) | TriggerProps | 否 |  |
| showTargetMember | 是否显示事项成员 | boolean | false |  |
| delayTime | 延时搜索时间 | number | 否 | 500 |
| onVisibleChange | 弹层显影的回调 | （visible?: boolean）=> void | 否 |  |
| onChange | 人员点击事件的回调 | (id?: string, itemData?: AtItemData) => void | 否 |  |
| className | class 名 | string | 否 |  |
| overlayClassName | 弹层 class 名 | string | 否 |  |
| preficCls | 默认组件 class 名 | string | 否 |  |
| style | 样式 | CSSProperties | 否 |  |
| customRender | 自定义组件渲染 | (props: any, ele: ReactElement) => ReactElement | 否 |  |
| customChildren | 自定义组件chidlren | ReactNode | 否 |  |
| displayOfNull | at弹出框允许展示空数据 | boolean | 否 | true |
| checkPersonnelKit | 是否判断人员套件 | boolean | 否 |  |
| showSearch | 展示搜索框（仅在hasMenu=false时生效） | boolean | 否 |  |
| autoHeight | 选择框高度自动高度 | boolean | 否 |  |
| minRow | 最小行数 | number | 否 |  |
| maxRow | 最大行数 | number | 否 |  |
| listProps | List组件props | ListProps | 否 |  |
| pageSize | 每页条数 | number | 否 | 10 |
| disablePaging | 禁用分页 | boolean | 否 |  |
