Plutus-UI 使用文档

Plutus-UI 是BBD金融事业群的业务系统ui组件库，其基于antd进行了二次开发，目的在于提高项目的开发效率；由于组件库中的业务组件（以BBD开头）对后台业务逻辑有一定的依赖，因此该库中所提供的业务组件并不适合所有场景，使用业务组件时请认真阅读是否有业务约束。

除了业务组件外，其他组件均来自antd，你完全可以按照官方文档来实现需求。我们希望你尽可能的使用业务组件来提高你的开发效率，当然更期望你能改善或者创造出更多有价值的业务组件！

配置说明

plutus-ui以npm包的形式提供，由于其本身是基于antd开发的，因此无需额外再在项目中导入antd包。

　　npm install --save-dev plutus-ui

基本使用

plutus-ui安装以后，业务组件的使用方法和antd组件的使用方式一致

import React, { Component } from 'react';
import { BBDTable，Table } from 'plutus-ui'; //如果你不需要业务组件，可以直接从plutus-ui中引入antd中的组件

export class PageComponent extends Component {

   constructor(props){
     super(props)
   }

   render() {
     {/* 使用方式如下， 注意BBDTable需要必要参数配置才能正常显示 */}
     return <BBDTable/>
   }
}

**再次声明！**如果你不需要业务组件可以直接从plutus-ui导出antd原生组件，而不是从antd中导出！

业务组件

• BBDMenu
• BBDButton
• BBDTable
• BBDSearches
• BBDLoding
• BBDMessage

BBDMenu

BBDMenu: 权限菜单列表，只适用于系统顶部导航; 这是一个特殊的业务组件，它并不是基于antd的menu进行封装的，因此你无法从antd上了解到它的使用规则。它与业务有着较强的逻辑关联，使用条件也比较苛刻。使用该组件需要注意菜单列表数据必须来自atom系统！

import React, { Component } from 'react';
import { BBDMenu，menu } from 'plutus-ui'; //如果你不需要业务组件，可以直接从plutus-ui中引入antd中的组件

export class Header extends Component {

   constructor(props){
     super(props)
	 this.state = {
       atomMenus: []
     }
   }

   componentDidMount() {
     let atomMenus = this.getAtomMenus() // 获取atom菜单
     this.setState({
        atomMenus
     });
   }

   getAtomMenus() {
     // 通过网络或者其他方式获取到atom菜单，一般情况下是在登录的时候获取菜单，这里只需要从
     // local storge/session storage中获取,详情参考系统单点登录模块
     let menus = [];
     ...
     return menus；
   }

   render() {
     {/* 使用方式如下， 注意BBDMenu需要必要参数配置才能正常显示 */}
     return (<div className="header-root">
				<BBDMenu className="atom-menu" menus={this.state.atomMenus}/>
			</div>);
   }
}

| 属性 | 说明 | 类型 | 默认值 | |-----------|:-------|:--------:|:---------:| |menus|从atom系统获取到的菜单数据，atom菜单api说明|array|[]| |orders|控制菜单列表显示顺序，默认列表按id升序排列|string/object:{rule: 'name', order: []}| id| |curName|指定当前菜单，用于控制菜单状态改变|string| ''(空) |menuChange|切换菜单时，返回最新的菜单|function():curMenu|

BBDButton

BBDButton: 权限按钮组件，用以控制用户是否有权限点击，该组件可以指定不同的按钮类型，每一种类型封装自原生antd，因此你可以从antd官方文档上获取到更多组件信息。它与菜单一样，对业务有较强关联，使用该组件需要注意按钮权限名必须遵守命名规则！

import React, { Component } from 'react';
import { BBDButton，Button，Switch } from 'plutus-ui'; //如果你不需要业务组件，可以直接从plutus-ui中引入antd中的组件

export class PageComponent extends Component {

   ...

   getAtomButtons() {
     // 通过网络或者其他方式获取到atom按钮权限，一般情况下是在登录的时候获取所有按钮，这里只需要
     // 从local storge/session storage中获取,详情参考系统单点登录模块
     let buttons = [];
     ...
     return buttons；
   }

   render() {
     let { atomButtons } = this.state

     {/* 使用方式如下， 注意BBDButton需要必要参数配置才能正常显示 */}
     {/* permissionName需要遵守atom命名规则，atom系统添加按钮资源时注意permissionName换成大写加在XXX_XXX_BUTTON_后 */}
     return (<div className="header-root">
				<BBDButton className="atom-button-div" permissionList={atomButtons}
                   permissionName={'model-batch-add'} domtype="div" >批量增加</BBDButton>
                <BBDButton className="atom-button-switch" permissionList={atomButtons}
                   permissionName={'model-batch-enable'} domtype="switch" checkd={true}/>
                <BBDButton className="atom-button-button" permissionList={atomButtons}
                   permissionName={'model-batch-delete'}>批量删除</BBDButton>
			</div>);
   }
}

| 属性 | 说明 | 类型 | 默认值 | |-----------|:-------|:--------:|:---------:| |permissionList|从atom系统获取到的按钮数据，atom按钮api说明|array|[]| |permissionName|在atom系统添加按钮资源时需要填写的名称|string| 必填项| |title|无权限时，需要显示的提示信息|string| '没有权限'| |domType|按钮类型:div、button、switch|string|'button'| |showChildren|没有权限时，是否隐藏按钮，用于div类型按钮|Boolean|true|

BBDTable

BBDTable: 分页列表组件，该组件封装了antd的Table组件，保留了原生Table的所有属性，封装该组件核心目的在于支持列表自动刷新和使用风格统一的分分页样式。使用列表组件注意，列表的数据需要遵循后台约束的统一格式

import React, { Component } from 'react';
import { BBDTable，Table } from 'plutus-ui'; //如果你不需要业务组件，可以直接从plutus-ui中引入antd中的组件

export class PageComponent extends Component {

  constructor(props){
    super(props)

    // 指定列表的基本列信息,高级配置参考antd columns配置
    this.tableColumns = [
      {
         title: '客户名称',
         dataIndex： 'name',   // 需要对应接口上的展示字段
         key: 'name',          // 表示当前行的唯一性，建议与dataIndex保持一致
      },
      {
         title: '客户经理',
         dataIndex： 'manager',   // 需要对应接口上的展示字段
         key: 'manager',          // 表示当前行的唯一性，建议与dataIndex保持一致
      },
      ...
    ]
  }


   render() {
     {/* 使用方式如下， 注意BBDTable需要必要参数配置才能正常显示 */}
     return (<div className="page-root">
				<BBDTable className="bbd-table" url={'/api'} domain={'//demo.bbdfinance.com'} columns={this.tableColumns}/>
			</div>);
   }
}

| 属性 | 说明 | 类型 | 默认值 | |-----------|:-------|:--------:|:---------:| |url|后台接口地址|string|''(空)| |domain|后台接口域名|string| window.location.host| |localFilter|是否支持本地数据筛选|Boolean|false| |params|列表筛选条件|object|{}| |pageSize|列表一页展示的数据条数|number|20|

| API | 说明 | 参数 | 返回值 | |-----------|:-------|:--------:|:---------:| |dataNotifyChange|按照传入的筛选条件，手动刷新列表|function(params: object, callback: function)|无|

Table组件是一个非常强大的组件, 要使用好该组件需要认真阅读antd文档

BBDSearches

待补充...

BBDLoading

待补充...

BBDMessage

BBDMessage: 消息弹窗，该组件封装了antd的Message组件封装该组件核心目的在duration内相同的消息只展示一次，message具有全局性，你可以在任何有window对象的环境下使用。

import React, { Component } from 'react';
import { BBDMessage，message, Button } from 'plutus-ui';  //如果你不需要业务组件，可以直接从plutus-ui中引入antd中的组件

export class PageComponent extends Component {

  constructor(props){
    super(props)
  }


   render() {
     {/* 使用方式如下， 注意BBDTable需要必要参数配置才能正常显示 */}
     return (<Button onClick={() => BBDMessage({content: '消息'})}>显示message</Button>);
   }
}

| 属性 | 说明 | 类型 | 默认值 | |-----------|:-------|:--------:|:---------:| |options|{content: '', duration: '', onClose: function}|onject|{}|