RJ-REACT-UI

[TOC]

DataTable

数据表格

props

属性 | 名称 | 类型 | 是否必须 | 默认值 | 可用值 | 示例说明 --|--|--|--|--|--|-- simpleRender | 简单呈现 | bool | | true | | 提高渲染性能。当设置为 true 时 header 按设置顺序显示，不能使用排序,header 中 displayOrder 及 hidden 属性无效，header 与row 对应不依赖 key，按数组顺序呈现等。 loaded | 加载是否已完成 | bool | | true | | hideLoader | 隐藏加载动画 | bool | | false | | showCheckbox | 在行标题显示复选框 | bool | | false | | hideRowNumber | 隐藏行号 | bool| | false | | openRowSelect | 开启行选模式 | bool | | false | | pagination | 分页属性 | object | | | | toolbar | 工具栏 | Toolbar | | | query | 查询栏 | ConditionQueryPanel | | | header | 表头 | array | | | | rows | 行 | array | | | | footer | 汇总 | array | | | | 合计、小计 getCheckedValues | 获取勾选行 | func | | | | 返回已勾选行值数组，其值为在 rows 中每行定义的 value 值 setLoaded | 设置表格数据加载状态 | func | | | 参数为 true 或 false | 控制表格中的加载动画显示。当 hideLoader 为 false 时有效。

props.pagination

分页属性

属性 | 名称 | 类型 | 是否必须 | 默认值 | 说明 --- | --- | --- | --- | --- | --- searchPositionTop | 结果中搜索框顶部显示 | bool | | false | positionTop | 顶部显示 | bool | | false | hide | 隐藏分页 | bool | | false | remote | 远程分页 | bool | | false | 从远程服务器获取行，关闭表内分页 rowCount | 行数 | number | | | pageCount | 总页数 | number | | | pageSize | 每页显示数据行数 | number | | 20 | pageNumber | 当前页数 | number | | |

props.header

表头数组

列描述：

属性 | 名称 | 类型 | 是否必须 | 默认值 | 说明 --- | --- | --- | --- | --- | --- key | 键 | string | true | | text | 标题文本 | string | true | 排序函数 | | operationColumn | 是否为操作列 | bool | | false | width | 宽度 | number | | | minWidth | 最小可变宽度 | number | | | maxWidth | 最大可变宽度 | number | | | fixed | 固定宽度 | bool | | false | sortable | 可排序 | bool | | false | sort | 排序函数 | function | | | 接收参数(prev, next) dataType | 列数据类型 | string | | | 可选值：string, number, date, bool className | 样式名称 | string | | | style | 内联样式 | object | | | textAlign | 标题文本对齐方式 | string | | center | 可选值：left, center, right

示例：

[
    {
        text: '',
        width: 80,
        minWidth: 60,
        maxWidth: 100,
        fixed: true,
        sortable: true,
        dataType: '',
        className: '',
        style: {},
        textAlign: 'center',
        sort: (prev, next)=>{}
    },
]

props.rows

数据行数组

[{value:{}, cells:[cell]}]

数据行属性：

属性 | 名称 | 类型 | 是否必须 | 默认值 | 说明 --- | --- | --- | --- | --- | --- key | 键 | string | true | | 必须与header中的key相对应 value | 行值 | object | | false | cells | 数据单元 | array | | true | [cell]

cell可为字符串或对象，为对象时属性：

属性 | 名称 | 类型 | 是否必须 | 默认值 | 说明 --- | --- | --- | --- | --- | --- operationColumn | 是否为操作列 | bool | | false | content | 内容 | object | | | 如果设置该值则值和格式化函数无效 value | 值 | any | | | text | 文本 | string | | | format | 格式化函数 | function | | | 接收参数(value) className | 样式名称 | string | | | style | 内联样式 | object | | | textAlign | 标题文本对齐方式 | string | | center | 可选值：left, center, right

示例：

[
    {
        value: 1,
        cells: [
            {
                operationColumn: true,
                content: (<Icon icon="edit" />),
                text: '',
                value: 1,
                format: (value)=>Formatter.toPriceDash(value),
                className: '',
                style: {},
                textAlign: 'center',
            },
            ...
        ]
    },
    ...
]

props.footer

表尾汇总行数组

[
    {
        type: 'sub', 
        label: '',
        cells: {
            [headKey]: {}
        }
    },
]

属性 | 名称 | 类型 | 是否必须 | 默认值 | 说明 --- | --- | --- | --- | --- | --- type | 当前页内计算 | string | | total | 可选值为：sub，表示小计行，如果表格只有一页则小计行不显示； total，表示合计行 label | 值 | string | | | cells | 文本 | object(key pairs) | 是 | | 表头键值对，headKey对应header中每列设置的key值

cells值属性：

属性 | 名称 | 类型 | 是否必须 | 默认值 | 说明 --- | --- | --- | --- | --- | --- inCurrentPage | 当前页内计算 | bool | | false | value | 值 | any | | | text | 文本 | string | | | content | 内容 | object | | | 设置后，无value值时有效，格式化函数无效 format | 格式化函数 | function | | | 接收参数(value) className | 样式名称 | string | | | style | 内联样式 | object | | | textAlign | 标题文本对齐方式 | string | | center | 可选值：left, center, right aggregate | 内容聚合函数 | string | | count | 可选值：count, sum, avg, max, min customerAggregate | 自定义聚合函数 | function | | | 如果设置该函数，则设置的内置聚合函数无效

示例：

[
    {
        type: 'sub',
        cells: {
            amount:{
                inCurrentPage: true,
                text: '',
                value: 1,
                customerAggregate: (rows, columnIndex) => { }, 
                format: (value)=>Formatter.toPriceDash(value),
                className: '',
                style: {},
                textAlign: 'center',
            },
        }
    },
]

表格示例：

import React, { Component } from 'react';

import { Formatter, Convert } from 'rj-utils';
import { DataTable, Toolbar, ConditionQueryPanel, Input, Button, Icon } from 'rj-react-ui';

export default class TestTable extends Component {
    constructor(props){
        super(props);
        this.state = {
            licenseNumber: '',
            agencyID: '',
            data: [

            ],
        };
    }

    handleAddClick = () => {
        // TODO
    }

    handleQpIcLicenseNumber = (e) => {
        this.setState({licenseNumber: e.target.value});
    }

    handleQpIcAgencyID = (value) => {
        this.setState({agencyID: value});
    }

    handleSearch = () => {
        // TODO search
    }

    render() {
        let toolbar = (
            <Toolbar>
                <Button rjStyle="primary" onClick={this.handleAddClick}>
                    <Icon icon="plus-circle" /><span>ADD</span>
                </Button>
            </Toolbar>
        );

        let query = (
            <ConditionQueryPanel onSearch={this.handleSearch}>
                <ul>
                    <li>
                        <label>车牌号码：</label>
                        <Input placeholder="车牌号码"
                            value={this.state.licenseNumber}
                            onChange={this.handleQpIcLicenseNumber} />
                    </li>
                    <li>
                        <label>服务机构：</label>
                        <Input type="select" value={this.state.agencyID} onChange={this.handleQpIcAgencyID} />
                    </li>
                </ul>
            </ConditionQueryPanel>
        );

        let header =
            [
                { key: 'operation', text: '操作', width: 80, fixed: true, operationColumn: true },
                { key: 'agencyName', text: '机构', width: 60, sortable: true },
                { key: 'customerName', text: '客户名称', width: 80, sortable: true },
                { key: 'channelName', text: '渠道名称', width: 80, sortable: true },
                { key: 'amount', text: '金额', width: 100, sortable: true },
                { key: 'createTime', text: '制单日期', width: 100, sortable: true, fixed: true },
            ];
        
        let rows = this.state.data.map((item, index) => {
            let edStyle = {};
            if (item.ExpireDays < 0) {
                edStyle = { backgroundColor: '#ffffcc' };
            }

            return {
                cells: [
                    {
                        key: 'operation',
                        operationColumn: true,
                        content: [
                            <Icon key="dm" icon="detail-ms-o" onClick={()=>{}} />,
                        ]
                    },
                    { key: 'agencyName', value: item.AgencyName },
                    { key: 'customerName', value: item.CustomerName },
                    { key: 'channelName', value: item.ChannelName },
                    {
                        key: 'amount',
                        value: item.Amount,
                        textAlign: 'right',
                        format: (value) => Formatter.toPriceDash(value)
                    },
                    { key: 'createTime', value: item.CreateTime },
                ]
            };
        });

        let footer = [
            {
                type: 'sub',
                label: '小计',
                cells: {
                    agencyName: {
                        inCurrentPage: true,
                        aggregate: 'count',
                        format: (value) => `${value}辆`
                    },
                    amount: {
                        inCurrentPage: true,
                        aggregate: 'sum',
                        format: (value) => Formatter.toPriceDash(value),
                        textAlign: 'right',
                    },
                }
            },
            {
                type: 'total',
                label: '合计',
                cells: {
                    agencyName: {
                        aggregate: 'count',
                        format: (value) => `${value} 辆`
                    },
                    amount: {
                        aggregate: 'sum',
                        format: (value) => Formatter.toPriceDash(value),
                        textAlign: 'right',
                    },
                }
            },
        ];

        let pagination = {};

        return (
            <DataTable 
                toolbar={toolbar}
                query={query}
                header={header}
                rows={rows}
                footer={footer}
                pagination={pagination} />
        );
    }
}

Modal

模态窗口

props

属性 | 名称 | 类型 | 是否必须 | 默认值 | 可用值 | 示例说明 --|--|--|--|--|--|-- show | 是否显示 | bool | | true| | max | 最大化 | bool | | false | | title | 标题 | string | | 对话框 | | width | 宽度 | number | | 600 | | | height | 高度 | number | | 500 | | | minWidth | 最小宽度 | number | | | | minHeight | 最小高度 | number | | | | icons | 标题栏右边显示的图标按钮 | array | | | Modal.MODAL_ICON | ['resize', 'reload'] hideButtons | 隐藏底部操作面板按钮栏 | bool | | false | | resizeable | 窗口是否拖动改变大小 | bool | | true | | buttons | 显示的按钮 | array | | [Modal.MODAL_BUTTON.CONFIRM, Modal.MODAL_BUTTON.CANCEL] | Modal.MODAL_BUTTON | | padding | 内边距 | string | | 10px | | confirmLoading | 确认按钮加载状态 | bool | | false | | true时确定按钮显示为loading状态 onConfirm | 确定回调 | func | | | | onCancel | 取消回调 | func | | | | onClose | 关闭回调 | func | | | | onReload | 重新加载回调 | func | | | | onResize | 窗口大小改变回调 | func | | | | onDownload | 下载回调 | func | | | | onOpenNew | 新窗口打开回调 | func | | | |

样式说明

Modal 内容为 flex 布局，即 style 的 display 值为 flex。

示例代码

import React, { Component } from 'react';
import { Modal, Button } from 'rj-react-ui';

export default class TestModalPage extends Component {
    constructor(props){
        super(props);
        this.state = { show:false };
    }

    handleToggleModal = () => {
        this.setState({show: !this.state.show});
    }

    handleModalConfirm = () => {
        alert('confirm');
    }

    render() {
        <div>
            <Button onClick={this.handleToggleModal}>显示隐藏对话框</Button>
            <Modal show={this.state.show} onConfirm={this.handleModalConfirm}>
                这是对话框内容
            </Modal>
        </div>
    }
}

Modal.MODAL_ICON

对话框右上角图标 名称 | 值 | 说明 --|--|-- DOWNLOAD | download | 下载 RELOAD | reload | 重新加载 RESIZE | resize | 最大化/还原 OPEN_NEW | open_new | 新窗口打开

Modal.MODAL_BUTTON

对话框按钮 常量 | 值 | 说明 --|--|-- CONFIRM | confirm | 确定或是 CANCEL | cancel | 取消或否

Modal.MODAL_BUTTON_TYPE

按钮样式 常量 | 值 | 说明 --|--|-- DEFAULT | default | 默认 YES_NO | yes_no | 是否

ModalEnhance

Modal高阶组件

ModalEnhance 作用是在 HTML 页面中的 body 顶层结尾创建 Modal 的宿主结点，用 ModalEnhance 扩展的组件采用 show 方法直接调用。 特别说明： 用 ModalEnhance 时，在 Modal 上需要绑定 onClose, onCancel, onConfirm 事件，一般情况下 onClose 和 onCancel 绑定 props.onClose 和 props.onCancel。

show方法说明

show方法接受一个对象参数，该对象参数可取属性为 Modal 的 props 属性

示例代码

// BaseEdit.jsx

import React, { Component } from 'react';
import { Modal, ModalEnhance, Button } from 'rj-react-ui';

class BaseEdit extends Component {
    constructor(props){
        super(props);
    }

    handleModalConfirm = () => {
        // TODO
        this.props.onConfirm();
    }

    render() {
            <Modal title="编辑基础信息"
                onClose={this.props.onClose}
                onCancel={this.props.onCancel}
                onConfirm={this.handleModalConfirm}>
                {this.props.data.text}
            </Modal>
    }
}

export default ModalEnhance(BaseEdit)

// Index.jsx

import React, { Component } from 'react';
import { Button } from 'rj-react-ui';

import BaseEdit from './BaseEdit.jsx';

export default class BaseEdit extends Component {
    constructor(props){
        super(props);
    }

    handleEditClick = ()=> {
        BaseEdit.show({
            data: { text: '编辑内容' },
            onConfirm: ()=> {
                // TODO 确认回调处理
            }
        });
    }

    render() {
        return (<Button onClick={this.handleEditClick}>编辑</Button>);
    }
}