rj-react-ui-min v1.0.0

RJ-REACT-UI

TOC

DataTable

数据表格

props

props.pagination

分页属性

props.header

表头数组

列描述：

示例：

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

props.rows

数据行数组

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

数据行属性：

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

示例：

[
    {
        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]: {}
        }
    },
]

cells值属性：

示例：

[
    {
        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

样式说明

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