@txdfe/uiless-member v3.4.2

依赖变量

    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需要后端增加一个配置写到页面上

参数列表

UilessMemberComponent.Mini

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

使用

  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'));