jobwebsite/src/components/Register/Company/index.tsx

import { useState, useEffect, useRef } from 'react';
import { Link, history, connect } from '@umijs/max';
import type { CaptFieldRef, FormInstance } from '@ant-design/pro-components';
import { Layout, Image, Row, Col, Flex, Space, message, Typography, Segmented, Button, ConfigProvider } from 'antd';
import type { CSSProperties } from 'react';
import { PhoneTwoTone, MailTwoTone, PrinterTwoTone, } from '@ant-design/icons';
import { PageContainer, ProFormCaptcha, ProFormSelect, ProFormText, ProFormCascader, ProFormDatePicker, ProForm } from '@ant-design/pro-components';
import { disAfterData } from '@/utils/format'
import { verifyPhone } from '@/utils/VerifyHelper'
import { selectfieldNames, cascaderfieldNames } from '@/constants'

import { PostCompanyRegister } from '@/services/apis/register';
import { GetCaptcha } from '@/services/apis/common'


const RegisterCompany: React.FC = ({ dispatch, dictModel, detail, closeModel }: any) => {
    const formRef = useRef<FormInstance | null>();
    const [codeImage, setCodeImage] = useState<string>('');
    const [capt_id, setCaptId] = useState<string>('');

    useEffect(() => {
        GetCaptcha().then((res: any) => {
            setCodeImage(res.data.img);
            setCaptId(res.data.capt_id);
        })
    }, []);

    useEffect(() => {
        dispatch({ type: 'dictModel/getList', payload: { code: 2028, type: 'setIndustryPostList' } })
        dispatch({ type: 'dictModel/getList', payload: { code: 2009, type: 'setAreaList' } })
        dispatch({ type: 'dictModel/getList', payload: { code: 2003, type: 'setScaleList' } })
        dispatch({ type: 'dictModel/getList', payload: { code: 2002, type: 'setNatureList' } })

    }, [])


    return (
        <>
            <ConfigProvider
                theme={{
                    components: {
                        Segmented: {
                            colorText: '#19be6e'
                        },
                        Button: {
                            colorText: ''
                        }
                    }
                }}
            >
                <ProForm<Register.Company>
                    formRef={formRef}
                    onFinish={async (values) => {
                        try {
                            values.capt_id = capt_id;
                            values.username = values.contact_mobile;
                            values.industry = values.industry_array && values.industry_array.length > 0 && values.industry_array[0] ? values.industry_array[0] : 0;
                            values.industry2 = values.industry_array && values.industry_array.length > 0 && values.industry_array[1] ? values.industry_array[1] : 0;
                            values.province = values.area_array && values.area_array.length > 0 && values.area_array[0] ? values.area_array[0] : 0;
                            values.city = values.area_array && values.area_array.length > 0 && values.area_array[1] ? values.area_array[1] : 0;
                            values.district = values.area_array && values.area_array.length > 0 && values.area_array[2] ? values.area_array[2] : 0;
                            values.street = values.area_array && values.area_array.length > 0 && values.area_array[3] ? values.area_array[3] : 0;
                            values.nature = values.nature_array && values.nature_array.length > 0 ? values.nature_array[values.nature_array.length - 1] : 0;
                            values.scale = values.scale_array && values.scale_array.length > 0 ? values.scale_array[values.scale_array.length - 1] : 0;
                            delete values.nature_array;
                            delete values.industry_array;
                            delete values.area_array;
                            delete values.scale_array;
                            console.log(values)
                            let res = await PostCompanyRegister(values)
                            message.success('注册成功，可进行登录');
                        } catch (error) {
                            let res = await GetCaptcha()
                            setCodeImage(res.data.img);
                            setCaptId(res.data.capt_id);
                            formRef.current && formRef.current.resetFields(['captcha'])
                        }
                    }}
                    submitter={{
                        submitButtonProps: {
                            block: true,
                            size: 'large',
                            title: '注册',
                            style: {
                                marginTop: 10
                            }
                        },
                        resetButtonProps: {
                            style: {
                                // 隐藏重置按钮
                                display: 'none',
                            },
                        },
                    }}
                >
                    <Row gutter={[20, 0]}>
                        <Col span={12}>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="contact_mobile"
                                label="手机号"
                                placeholder="请输入手机号"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入手机号',
                                    },
                                    () => ({
                                        validator(_, value) {
                                            let info = verifyPhone(value);
                                            if (typeof (info) == 'boolean') {
                                                return Promise.resolve();
                                            }
                                            return Promise.reject(new Error(info));
                                        },
                                    })
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="email"
                                label="邮箱"
                                placeholder="请输入邮箱"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入邮箱',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText.Password
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="password"
                                label="密码"
                                placeholder="请输入密码"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码',
                                    },
                                    () => ({
                                        validator(_, value) {
                                            let comformPassword = formRef.current && formRef.current.getFieldValue('comform_password');
                                            if (comformPassword && comformPassword != value) {
                                                return Promise.reject(new Error('两次密码不一致'));
                                            } else {
                                                return Promise.resolve();
                                            }
                                        },
                                    })
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText.Password
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="comform_password"
                                label="确认密码"
                                placeholder="请确认密码"
                                rules={[
                                    {
                                        required: true,
                                        message: '请确认密码',
                                    },
                                    () => ({
                                        validator(_, value) {
                                            let firstPassword = formRef.current && formRef.current.getFieldValue('password');
                                            if (firstPassword && firstPassword != value) {
                                                return Promise.reject(new Error('密码不一致'));
                                            } else {
                                                return Promise.resolve();
                                            }
                                        },
                                    })
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="full_name"
                                label="企业名称"
                                placeholder="请输入企业名称"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入企业名称',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="registration_number"
                                label="统一社会信用代码"
                                placeholder="请输入统一社会信用代码"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入统一社会信用代码',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormDatePicker name="establishment_date" placeholder='请选择注册日期' label="注册日期" width='lg' fieldProps={{ size: 'large', disabledDate: disAfterData }} rules={[
                                {
                                    required: true,
                                    message: '请选择注册日期',
                                },
                            ]} />
                        </Col>
                        <Col span={12}>
                            <ProFormCascader
                                name="industry_array"
                                label="所属行业"
                                placeholder='请选择所属行业'
                                fieldProps={{
                                    size: 'large',
                                    fieldNames: cascaderfieldNames,
                                    options: dictModel.industryPostList,
                                    changeOnSelect: true

                                }}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择所属行业',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormCascader
                                name="area_array"
                                label="所属地区"
                                placeholder='请选择所属地区'
                                fieldProps={{
                                    size: 'large',
                                    fieldNames: cascaderfieldNames,
                                    options: dictModel.areaList,
                                    changeOnSelect: true

                                }}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择所属地区',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="address"
                                label="公司地址"
                                placeholder="请输入公司地址"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入公司地址',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormCascader
                                name="nature_array"
                                label="企业性质"
                                placeholder="请选择企业性质"
                                fieldProps={{
                                    size: 'large',
                                    fieldNames: selectfieldNames,
                                    options: dictModel.natureList,
                                    changeOnSelect: true
                                }}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择企业性质',
                                    }
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormCascader
                                name="scale_array"
                                label="	企业规模"
                                placeholder="请选择企业规模"
                                fieldProps={{
                                    size: 'large',
                                    fieldNames: selectfieldNames,
                                    options: dictModel.scaleList,
                                    changeOnSelect: true
                                }}
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择企业规模',
                                    }
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="contact_name"
                                label="联系人"
                                placeholder="请输入联系人"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入联系人',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={12}>
                            <ProFormText
                                fieldProps={{
                                    size: 'large',
                                }}
                                name="contact_phone"
                                label="联系固话"
                                placeholder="请输入联系固话"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入联系固话',
                                    },
                                ]}
                            />
                        </Col>
                        <Col span={24}>
                            <Row gutter={10}>
                                <Col span={18}>
                                    <ProFormText
                                        label="图形验证码"
                                        name="captcha"
                                        fieldProps={{
                                            size: 'large',
                                        }}
                                        placeholder={'请输入图形验证码'}
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入图形验证码',
                                            },
                                        ]}
                                    />
                                </Col>
                                <Col span={6}>
                                    <Image src={codeImage} width='100%' height={40} preview={false} style={{ borderRadius: '8px', marginTop: '30px' }} onClick={async () => {
                                        let res = await GetCaptcha()
                                        setCodeImage(res.data.img);
                                        setCaptId(res.data.capt_id);
                                    }} />
                                </Col>
                            </Row>
                        </Col>

                    </Row>
                </ProForm>

            </ConfigProvider>

        </>
    )
}

export default connect(({ dictModel }: any) => ({
    dictModel
}))(RegisterCompany);