@txdfe/uiless-password-confirm

• 成员列表预览

  预览

• 依赖变量

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