@txdfe/uiless-member

• 依赖变量

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