成员列表预览

预览

依赖变量

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

参数列表

| 参数 | 类型 | 可选值 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | dataSource | array | | | 用于展示的数据源，格式参考示例（暂不支持team） | | type | string | normal(Dialog)/mini(Overlay) | normal | 弹窗尺寸 | | customRoles | array | 格式参考示例 | [] | 用户自定义角色（权限）格式 | | currentUserId | string | | | 当前登录用户的 _userId | | onChange | func | | | 更改角色信息、删除、新增后的回调 | | isAdmin | boolean | true/false | false | 当前登录用户是否是管理员，管理员无视customRoles中的manageRoleIds规则 | | isOwner | boolean | true/false | false | 当前登录用户是否是所有者，所有者在管理员基础上增加移交所有者菜单，onChangeOwner回调 | | onChangeOwner | func | | | 点击移交所有者按钮的回调(member) => {} | | footer | ReactNode | | | 自定义footer | | title | string | | | 标题 | | loading | boolean | true/false | false | 是否是loading状态 | | hasSearch | boolean | true/false | true | 是否有搜索框 | | onClose | func | | | 关闭弹框回调，仅type=normal | | visible | boolean | true/false | false | 是否展示弹框，仅type=normal生效 | | align | string | 参见AT.Overlay的align | | 弹层相对于触发元素的定位，仅type=mini时有效 | | offset | array | [num, num] | | 弹层相对于触发元素的定位的微调，仅type=mini时有效 | | trigger | ReactNode | | | 弹层触发元素，仅type=mini时有效 | | triggerType | string/array | 'click', 'hover' | | 触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，仅type=mini时有效 |

使用

  import React from 'react';
  import ReactDOM from 'react-dom';
  import UILessComponent from '@alife/uiless-member-panel';
  import './index.scss';


  const customRoles = [{
    label: '浏览者',
    value: '20',
    description: '浏览者浏览者浏览者浏览者浏览者',
    manageRoleIds: [],
  }, {
    label: '开发者',
    value: '30',
    description: '开发者开发者开发者',
    manageRoleIds: ['30', '20'],
  }, {
    label: '管理员',
    value: '40',
    description: '管理员管理员管理员',
    manageRoleIds: ['40', '30', '20'],
  }];

  const list = [{
   // type: 'team',  暂不支持team
   // teamId: '',
   // roleId: '40',
   //},
   //{
    type: 'user',
    _userId: '5d27e0dec1a6459902177dae',
    roleId: '30',
    extra: <span>权限继承自：<a href="">上一个对象</a></span>,
  }, {
    type: 'user',
    _userId: '5c9e4c9e8449c6dfb693ddbc',
    roleId: '20',
    extra: <span>权限继承自：<a href="">开放平台</a></span>,
  }];

  class Demo extends React.Component {
    constructor() {
      super();
      this.state = {
        members: list,
        visible: false,
      };
    }

    onChange = (members) => {
      console.log(members);
      this.setState({
        members,
      });
    }

    toggleVisible=() => {
      this.setState({
        visible: !this.state.visible,
      });
    }

    render() {
      return (
        <div style={{ padding: 200 }}>
          <UILessComponent
            customRoles={customRoles}
            dataSource={this.state.members}
            onChange={this.onChange}
            contentHeight="auto"
            footer={<div style={{ padding: 20 }}>当前流水线</div>}
            loading={false}
            currentUserId="5d27e0dec1a6459902177dae"
            isAdmin
            type="mini"
            align="tc bc"
          >
            <button>mini trigger</button>
          </UILessComponent>
          <button onClick={this.toggleVisible}>normal trigger</button>
          <UILessComponent
            customRoles={customRoles}
            dataSource={this.state.members}
            onChange={this.onChange}
            contentHeight={420}
            footer={<div style={{ padding: 20 }}>当前流水线</div>}
            currentUserId="5d27e0dec1a6459902177dae"
            visible={this.state.visible}
            onClose={this.toggleVisible}
          />
          <div style={{ border: '1px solid #e0e0e0', marginTop: 20 }}>
            <UILessComponent.Panel
              customRoles={customRoles}
              dataSource={this.state.members}
              onChange={this.onChange}
              contentHeight="auto"
              loading={false}
              currentUserId="5d27e0dec1a6459902177dae"
              hasSearch
              title="成员列表"
              isOwner
            />
          </div>
        </div>
      );
    }
  }

  ReactDOM.render(<Demo />, document.getElementById('demo-container'));