• 日期时间规范

    说明

    整个工程关于日期时间严格按照统一的规范定义。

    01. 前后端交互格式

    前后端传递日期格式统一为：

    不要自己直接写死格式，采用统一的常量

    引入常量:

    import { DEFAULT_DATE_FORMAT } from 'utils/constants';

    02. 前端日期时间显示

    前端日期的显示要根据个人中心的设置统一处理

    01. 应用

    // 引入对应的 方法和常量
import { getDateFormat } from 'utils/utils';
import { DEFAULT_DATE_FORMAT } from 'utils/constants';
import { dateRender } from 'utils/renderer';

// 在表单中使用
// 提交方法
handleSubmit(e){
    // ...
    const formValues = form.getFieldsValue();
    formValues.startDate = formValues.startDate && formValues.startDate.format(DEFAULT_DATE_FORMAT);
    // ...
}
// FormItem
const dateFormat = getDateFormat();
form.getFieldDecorator('startDate', {
    initialValue: editRecord.startDate ? moment(editRecord.startDate, DEFAULT_DATE_FORMAT) : null,
})(
    <DatePicker
        format={dateFormat}
    />
)

// Table
const columns = [
    {
        dataIndex: 'startDate',
        name: intl.get('hmdm.model.bank.startDate').d('生效时间'),
        render: dateRender,
    },
];

    02. 例子

    import { getDateFormat } from 'utils/utils';
import { DEFAULT_DATE_FORMAT } from 'utils/constants';
import { dateRender } from 'utils/renderer';


@Form.create({fieldNameProp: null})
@connect(({loading}) => ({loading}))
export default class Bank extends React.Component {

    state = {
        editRecord: {startDate: '2018-09-20', id: 1}, // 当前编辑的记录
    };

    getColumns(){
        if(!this.columns){
            this.columns = [
                {
                    dataIndex: 'startDate',
                    name: intl.get('hmdm.model.bank.startDate').d('生效时间'),
                    render: dateRender,
                },
                // ...
            ];
        }
        return this.columns;
    }

    handleSearchBtnClick(e){
        e.preventDefault();
        const {form} = this.props;
        const formValues = form.getFieldsValue();
        const dateFormat = getDateFormat();
        formValues.startDate = formValues.startDate && moment.format(dateFormat);
        this.queryList(formValues);
    }

    queryList(params){
        // ...
    }

    render(){
        const { form } = this.props;
        const { editRecord = {startDate: '2018-09-20', id: 1} } = this.state;
        const dateFormat = getDateFormat();
        return (
            <React.Fragment>
                <Header title="银行定义" />
                <Content>
                    <div className="table-list-search">
                        <Form layout="inline">
                            <Form.Item label={intl.get('hmdm.model.bank.startDate').d('生效时间')}>
                                {
                                    form.getFieldDecorator('startDate')(
                                        <DatePicker format={dateFormat} />
                                    )
                                }
                            </Form.Item>
                            <Form.Item>
                                <Button htmlType="submit" type="primary" onClick={this.handleSearchBtnClick}>{intl.get('hzero.common.button.search').d('查询')}</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <Table 
                        // ...
                        columns={this.getColumns()}
                        dataSource={dataSource}
                        rowKey="id"
                    />
                    <EditModal
                        editRecord={editRecord}
                        // ...
                    />
                </Content>
            </React.Fragment>
        );
    }
}

@Form.create({fieldNameProp: null})
class EditModal extends React.Component{

    render(){
        const { editRecord = {}, form } = this.props;
        const dateFormat = getDateFormat();
        return (
            <Modal
                // ...
                visible
            >
                <Form>
                    <Form.Item label={intl.get('hmdm.model.bank.startDate').d('生效时间')}>
                        {
                            form.getFieldDecorator('startDate', {
                                initialValue: editRecord.startDate ? moment(editRecord.startDate, DEFAULT_DATE_FORMAT) : null,
                            })(
                                <DatePicker
                                    format={dateFormat}
                                />
                            )
                        }
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}