• 日期时间规范


    说明

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

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