成员列表预览

预览

依赖变量

    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 | | | 用于展示的数据源，格式参考示例） | | 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) => {} | | onChangeItem | func | | | 修改用户权限的回调(member) => {} | | onRemove | func | | | 删除成员的回调([member]) => {} | | extra | ReactNode | | | 搜索框(搜索cion)右边的扩展区域 | | footer | ReactNode | | | 自定义footer | | title | string | | | 标题 | | contentHeight | string/number | | 'auto' | 内容区高度，type=normal时不包含弹框header | | maxContentHeight | string/number | | | 最大内容区高度，type=normal时不包含弹框header | | loading | boolean | true/false | false | 是否是loading状态 | | hasSearch | boolean | true/false | true | 是否有搜索框 | | searchPlaceholder | string | | 输入内容 | 搜索框placeholder | | 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 = [{
    memberType: 'team',
    teamId: '',
    roleId: '40',
  },
  {
    memberType: 'user',
    _userId: '5d27e0dec1a6459902177dae',
    roleId: '30',
    extra: <span>权限继承自：<a href="">上一个对象</a></span>,
    customMenus: [{
      text: "哈哈哈",
      onClick: () => console.log("click hahaha")
    }]
  }, {
    memberType: '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'));