• 依赖变量

      window.UILessConfig = {
          appId: ctx.app.config.appId, // current appId
          orgId: ctx.app.config.orgId, // current orgId
          accessToken: token, // current access token
          host: 'http://uiless.teambition.aone.alibaba.net', // host
      };

  对接入了tb导航的页面，appId，orgId，accessToken都可以在页面上找到，host需要后端增加一个配置写到页面上

• 参数列表

| 参数 | 类型 | 可选值 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | multiple | bool | true/false | false | 是否多选 | | value | array | [] | [] | 当前值 | | title | string | '' | '添加成员' | 标题 | | customRoles | array | [] | [] | 是否有角色信息 | | onChange | func | ()=>{} | ()=>{} | 人员信息变化回调 | | onSearch | func | ()=> Promise | | 使用自定义数据源dataSource时，传递onSearch 可使用自己的成员接口来搜索， 该函数需要return一个primise，参考示例 | | dataSource | array | [] | null | 自定义搜索数据源，传递就使用，不传递就接口搜索，自定义数据的结构需要与组件onChange的参数一致 | | extraMemberTypes | array | ['team', 'role', 'group'] | | 除人员外可选的成员类型: 部门、角色、群组 | | mode | string | add/edit | add | 仅multiple = true 时生效，生效时：edit模式可以反选成员，并在onChange参数中移除该成员（包含传入的value）。 add模式时，不可反选成员，onChange参数中不包含传入的value | | loading | bool | | false | 是否是loading | | defaultList | string/array | user对象数组/ 'default'/ 'recommend' | default | 组件打开时展示数据，可传递user数组， recommend表示组件根据最近沟通或共同项目计算推荐的成员， default表示组件加载的默认列表 | | defaultListName | string | | 成员 | 组件打开时展示列表标题 | | okText | string | | 确认 | 确认按钮文案 | | cancelText | string | | 取消 | 取消按钮文案 | | visible | bool | | | 控制组件是否展示，传递时为可控， 不传递则使用trigger，由组件自身控制 | | onVisibleChange | func | | | 不控制组件是否展示时，组件自身visible变化时回调 | | onRequestClose | func | | | 控制组件是否展示时，点击关闭和取消时调用 | | messageProps | object | | | 组件顶部的自定义信息，api参考AT.Message | | confirmProps | object | | | 点击确定按钮时确认框，type，title，content | | useGroupFeatures | boolean | | false | 开启后，可配置群组选择，可在角色及群组中选人 |

• UilessMemberComponent.Mini

  除以下API，还可使用部分AT.Overlay的API，可尝试使用

| 参数 | 类型 | 可选值 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | multiple | bool | true/false | false | 是否多选 | | value | array | [] | [] | 当前值 | | title | string | '' | '添加成员' | 标题 | | customRoles | array | [] | [] | 是否有角色信息 | | onChange | func | ()=>{} | ()=>{} | 人员信息变化回调 | | onSearch | func | ()=> Promise | | 使用自定义数据源dataSource时，传递onSearch 可使用自己的成员接口来搜索， 该函数需要return一个primise，参考示例 | | dataSource | array | [] | null | 自定义搜索数据源，传递就使用，不传递就接口搜索，自定义数据的结构需要与组件onChange的参数一致 | | mode | string | add/edit | add | 仅multiple = true 时生效，生效时：edit模式可以反选成员，并在onChange参数中移除该成员（包含传入的value）。 add模式时，不可反选成员，onChange参数中不包含传入的value | | loading | bool | | false | 是否是loading | | userTagRender | func | (userObj) => ({ color: 'blue', children: '推荐', ... }) | | 用户右侧标签, 函数参数是用户对象， 返回at组件的tag.colorable对象或 null | | defaultList | string/array | user对象数组/ 'default'/ 'recommend' | default | 组件打开时展示数据，可传递user数组， recommend表示组件根据最近沟通或共同项目计算推荐的成员， default表示组件加载的默认列表 | | okText | string | | 确定 | 确定按钮文案 | | visible | bool | | | 控制组件是否展示，传递时为可控， 不传递则使用trigger，由组件自身控制 | | onVisibleChange | func | | | 不控制组件是否展示时，组件自身visible变化时回调 | | onRequestClose | func | | | 控制组件是否展示时，点击关闭和取消时调用 | | align | string | | | 参考组件AT.Overlay align | | offset | array | | | 参考组件AT.Overlay offset | | safeNode | any | | | 参考组件AT.Overlay safeNode | | container | any | | | 参考组件AT.Overlay container |

• 使用

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Member from '@alife/uiless-member';
    import { Button, Select } from '@alife/at';
    import './index.scss';
  
    const customRoles = [{
      label: 'owner',
      value: 1,
    }, {
      label: 'master',
      value: 2,
    }, {
      label: 'developer',
      value: 3,
    }, {
      label: 'reporter',
      value: 4,
    }];
  
    const value = [{
      _userId: "5c83a71a8449c608dd7378f6",
      name: "王x(昆x)"
    }, {
      _userId: "5c83aee88449c608dd73790a",
      name: "周x雄(拓x)",
      // tag: {
      //   color: 'red',
      //   children: '推荐'
      // }
    }];
  
    class Demo extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: [],
        };
      }
      onChange = (value, customRoleId) => {
        console.log(value, customRoleId);
      }
  
      render() {
        return (
          <div>
            <Member
              trigger={<Button>trigger</Button>}
              onChange={this.onChange}
              multiple
              value={value}
              customRoles={customRoles}
              okText="提交"
              cancelText="取消"
              ready={() => {}} // 传递的value由组件获取完整信息填充数据后调用
              extraMemberTypes={['role', 'team']} //除人员外还可添加的类型: 角色、部门
              messageProps={{ // 不传递则不展示， Api参考At.Message
                title: '提示信息标题',
                children: '这是提示信息的描述字段',
                // visible: true, // 传递visible时，标识可控，可结合onClose，closeable使用
                closeable: true, // 是否可关闭
                type: 'notice', //' success', 'warning', 'error', 'notice', 'help', 'loading'
                // ...At.Message Api
              }}
              confirmProps={{ // 点击确定按钮是否展示确认框，不传递不展示，仅支持以下三个api
                title: '确认标题',
                content: '这是确认描述字段',
                type: 'warning',
              }}
              mode="edit" // 添加模式， edit可再次编辑传递的value， add模式只增， 传递的value禁用
            />
            <Member.Mini
              onChange={this.onChange}
              multiple
              customRoles={customRoles}
              onVisibleChange={(q) => console.log(q)}
              ready={q => console.log('ready', q)}
              trigger={
                  <div>
                    <Select
                      hasArrow={false}
                      mode="multiple"
                      value={value.map((item => item._userId))}
                      visible={false}
                      dataSource={value.map(item => Object.assign(item, { value: item._userId, label: item.name }))}
                    />
                  </div>
              }
            />
          </div>
        );
      }
    }
  
    ReactDOM.render(<Demo />, document.getElementById('demo-container'));