<业务需求>Hooks模板

Hooks页面模块

 基于ant 3.X版本
 再难也是增删改查

import React, { useState } from 'react';
import { Card, Row, Col, Form, Button, Typography, Input } from 'antd';
// 语言包
import { useIntl } from 'react-intl';
import IconFont from '@/components/common/IconFont';
import { connect } from 'react-redux';

const ProAdd: React.FC = (props: any) => {
    console.log('能收到refresh吗',props.showEdit);
    const [loading, setLoading] = useState(false);
    const [isEdit, setIsEdit] = useState(0);
    // 语言工具
    const { formatMessage } = useIntl();
    const handleSave = () => {
        props.form.validateFieldsAndScroll((err: any, values: any) => {
            if (!err) {
                console.log('验证成功');
                // createConference
                const params: any = saveConference;
                console.log(params);
            }
        });
    };
    const renderBasic = (props: any) => {
        const { getFieldDecorator } = props.form;
        return (
            <div>
                <Form layout={'horizontal'} onSubmit={handleSave}>
                    <Row {...props.twoRowOption} style={{ marginBottom: '16px' }}>
                        <Col {...props.twoColOption}>
                            <Form.Item
                                colon={false}
                                label={formatMessage({
                                    id: 'call_features.conference.number',
                                })}>
                                // 对number双向绑定和进行表单验证
                                {getFieldDecorator('number', {
                                    initialValue: saveConference.number,
                                    hidden: isEdit > 0,
                                    rules: [
                                        {
                                            required: true,
                                            message: formatMessage({ id: 'valid.required' }),
                                        },
                                        { validator: validation, type: 'number' },
                                        { validator: validation, type: 'maxLen', minValue: 1, maxValue: 7 },
                                    ],
                                })(<Input disabled={isEdit > 0} />)}
                            </Form.Item>
                        </Col>
                        <Col {...props.twoColOption}>
                            <Form.Item
                                colon={false}
                                label={formatMessage({
                                    id: 'call_features.conference.name',
                                })}>
                                // 对name双向绑定和进行表单验证
                                {getFieldDecorator('name', {
                                    initialValue: saveConference.name,
                                    rules: [
                                        {
                                            required: true,
                                            message: formatMessage({ id: 'valid.required' }),
                                        },
                                        { validator: validation, type: 'maxLen', maxValue: 127 },
                                    ],
                                })(<Input />)}
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    };
    const renderFooter = () => {
        return (
            <Card className="footer-buttons">
                <Button type="primary" disabled={loading} loading={loading} onClick={handleSave}>
                    {!loading && <IconFont type="icon-save" />}
                    {formatMessage({ id: 'common.save' })}
                </Button>
                <Button type="primary" className="btn-cancel">
                    <IconFont type="icon-no" />
                    {formatMessage({ id: 'common.cancle' })}
                </Button>
            </Card>
        );
    };
    return (
        <div>
            <Row>
                <Col span={24}>
                    <Card
                        style={{ width: '100%' }}
                        bodyStyle={{ overflowX: 'hidden', overflowY: 'auto', height: 'calc(100vh - 198px)' }}>
                        {renderBasic(props)}
                    </Card>
                </Col>
            </Row>
            <Row>
                <Col>{renderFooter()}</Col>
            </Row>
        </div>
    );
};
const mapStateToProps = (state: any) => {
    return {
        twoRowOption: state.UIState.twoRowOption,
        twoColOption: state.UIState.twoColOption,
    };
};
const mapDispatchToProps = (dispatch: any) => {
    return {};
};

const ProAddForm = Form.create<any>({ name: 'ProAdd' })(connect(mapStateToProps,mapDispatchToProps)(ProAdd));
export default ProAddForm;