325 lines
11 KiB
TypeScript
325 lines
11 KiB
TypeScript
/* 境外企业 表单项 */
|
||
import React, { useState, useEffect } from 'react';
|
||
import { Form, Input, Button, Select, Row, Col, Cascader } from 'antd';
|
||
import {
|
||
MobileOutlined,
|
||
MailOutlined,
|
||
EnvironmentOutlined,
|
||
} from '@ant-design/icons';
|
||
/**
|
||
* 引入通用表单组件
|
||
*/
|
||
import {
|
||
QualificationSection,
|
||
InvoiceSection,
|
||
BankAccountSection,
|
||
SurveySection,
|
||
AttachmentSection,
|
||
} from './CommonFormSections';
|
||
|
||
import { getregionInternational } from '@/servers/api/register';
|
||
|
||
const { Option } = Select;
|
||
const { TextArea } = Input;
|
||
|
||
interface ForeignFormProps {
|
||
form: any;
|
||
countdown: number;
|
||
handleGetCaptcha: () => void;
|
||
surveyQuestions?: API.SurveyQuestionResponse; // 本身就是数组类型
|
||
}
|
||
|
||
/**
|
||
* 境外企业注册表单
|
||
* 基本信息部分为境外企业特有
|
||
* 其他部分使用通用表单组件
|
||
*/
|
||
const ForeignForm: React.FC<ForeignFormProps> = ({ form, countdown, handleGetCaptcha, surveyQuestions }) => {
|
||
// 全球
|
||
const [regionOptions, setRegionOptions] = useState<API.RegionOption[]>([]);
|
||
useEffect(() => {
|
||
getregionInternational().then(res => {
|
||
if (res.code === 200) {
|
||
setRegionOptions(res.data);
|
||
}
|
||
});
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
{/* 境外企业特有的基本信息部分 */}
|
||
<div className="form-section-title">基本信息</div>
|
||
|
||
<Row gutter={24}>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="companyName"
|
||
label="企业名称"
|
||
rules={[{ required: true, message: '请输入企业名称' }]}
|
||
>
|
||
<Input placeholder="请输入企业名称" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="companyEnglishName"
|
||
label="企业英文名称"
|
||
rules={[{ required: true, message: '请输入企业英文名称' }]}
|
||
>
|
||
<Input placeholder="请输入企业英文名称" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="companyRegNumber"
|
||
label="公司注册号"
|
||
rules={[{ required: true, message: '请输入公司注册号' }]}
|
||
>
|
||
<Input placeholder="请输入公司注册号" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="country"
|
||
label="国家/地区"
|
||
rules={[{ required: true, message: '请选择国家/地区' }]}
|
||
>
|
||
<Select placeholder="请选择国家/地区">
|
||
{
|
||
regionOptions.map((item) => {
|
||
return <Option value={item.id}>{item.name}</Option>
|
||
})
|
||
}
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="registrationPassword"
|
||
label="登录密码"
|
||
rules={[
|
||
{ required: true, message: '请输入登录密码' },
|
||
{ min: 8, message: '密码长度为8-20位' },
|
||
{
|
||
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,20}$/,
|
||
message: '需要同时包含字母、数字、大小写',
|
||
},
|
||
]}
|
||
>
|
||
<Input.Password placeholder="长度为8-20位，需要同时包含字母、数字、大小写" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="confirmPassword"
|
||
label="确认密码"
|
||
rules={[
|
||
{ required: true, message: '请再次输入密码' },
|
||
({ getFieldValue }) => ({
|
||
validator(_, value) {
|
||
if (!value || getFieldValue('registrationPassword') === value) {
|
||
return Promise.resolve();
|
||
}
|
||
return Promise.reject(new Error('两次输入的密码不一致'));
|
||
},
|
||
}),
|
||
]}
|
||
>
|
||
<Input.Password placeholder="请再次输入密码" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="registeredAddress"
|
||
label="注册地址"
|
||
rules={[{ required: true, message: '请输入注册地址' }]}
|
||
>
|
||
<Input prefix={<EnvironmentOutlined />} placeholder="请具体注明" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item name="officeAddress" label="办公地址">
|
||
<Input prefix={<EnvironmentOutlined />} placeholder="请具体注明" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item name="parentCompanyInfo" label="母公司/出资人">
|
||
<Input placeholder="请输入母公司或出资人信息" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="legalPerson"
|
||
label="企业法定代表人"
|
||
rules={[{ required: true, message: '请输入企业法定代表人' }]}
|
||
>
|
||
<Input placeholder="请输入企业法定代表人" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="companyType"
|
||
label="企业性质"
|
||
rules={[{ required: true, message: '请选择企业性质' }]}
|
||
>
|
||
<Select placeholder="请选择企业性质">
|
||
<Option value="corporation">公司制企业</Option>
|
||
<Option value="partnership">合伙企业</Option>
|
||
<Option value="joint">合资企业</Option>
|
||
<Option value="sole">独资企业</Option>
|
||
<Option value="other">其他</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="supplierType"
|
||
label="供应商类型"
|
||
rules={[{ required: true, message: '请选择供应商类型' }]}
|
||
>
|
||
<Select placeholder="请选择供应商类型">
|
||
<Option value="manufacturer">制造商</Option>
|
||
<Option value="agent">代理商</Option>
|
||
<Option value="service">服务商</Option>
|
||
<Option value="other">其他</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
label="注册资本"
|
||
required
|
||
>
|
||
<Input.Group compact style={{ display: 'flex' }}>
|
||
<Form.Item name="capitalCurrency" noStyle initialValue="USD">
|
||
<Select style={{ width: 100, borderRadius: '2px 0 0 2px' }}>
|
||
<Option value="USD">美元</Option>
|
||
<Option value="EUR">欧元</Option>
|
||
<Option value="GBP">英镑</Option>
|
||
<Option value="JPY">日元</Option>
|
||
<Option value="HKD">港币</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="capitalAmount"
|
||
noStyle
|
||
rules={[{ required: true, message: '请输入注册资本金额' }]}
|
||
>
|
||
<Input
|
||
type="number"
|
||
placeholder="请输入金额"
|
||
style={{ flex: 1, borderRadius: '0 2px 2px 0', marginLeft: -1 }}
|
||
/>
|
||
</Form.Item>
|
||
</Input.Group>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="businessScope"
|
||
label="经营范围"
|
||
rules={[{ required: true, message: '请输入经营范围' }]}
|
||
>
|
||
<TextArea placeholder="请输入经营范围" rows={2} maxLength={200} showCount />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}></Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="contactName"
|
||
label="联系人姓名"
|
||
rules={[{ required: true, message: '请输入联系人姓名' }]}
|
||
>
|
||
<Input placeholder="请输入联系人姓名" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="contactPhone"
|
||
label="联系人手机"
|
||
rules={[
|
||
{ required: true, message: '请输入联系人手机号码' },
|
||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' },
|
||
]}
|
||
>
|
||
<Input
|
||
placeholder="请输入11位手机号码"
|
||
prefix={<MobileOutlined />}
|
||
addonAfter={
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
disabled={countdown > 0}
|
||
onClick={handleGetCaptcha}
|
||
>
|
||
{countdown ? `${countdown}秒后重新获取` : '获取验证码'}
|
||
</Button>
|
||
}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="verificationCode"
|
||
label="验证码"
|
||
rules={[
|
||
{ required: true, message: '请输入验证码' },
|
||
{ pattern: /^\d{6}$/, message: '请输入6位数字验证码' },
|
||
]}
|
||
extra="该手机号用于后续联系和找回密码"
|
||
>
|
||
<Input placeholder="请输入验证码" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="contactIdType"
|
||
label="联系人身份类别"
|
||
rules={[{ required: true, message: '请选择联系人身份类别' }]}
|
||
>
|
||
<Select placeholder="请选择类型">
|
||
<Option value="internal">境内人士</Option>
|
||
<Option value="external">境外（非大陆人士）</Option>
|
||
</Select>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="contactIdNumber"
|
||
label="联系人证件号码"
|
||
rules={[{ required: true, message: '请输入联系人证件号码' }]}
|
||
>
|
||
<Input placeholder="请填写联系人正确的身份证号" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="contactEmail"
|
||
label="联系人邮箱"
|
||
rules={[
|
||
{ type: 'email', message: '请输入有效的电子邮箱' },
|
||
{ required: true, message: '请输入电子邮箱' },
|
||
]}
|
||
>
|
||
<Input prefix={<MailOutlined />} placeholder="XXX@XXX.com" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item name="telephone" label="固定电话">
|
||
<Input placeholder="请输入企业联系电话" />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
{/* 使用通用表单组件 */}
|
||
<QualificationSection form={form} />
|
||
<InvoiceSection form={form} />
|
||
<BankAccountSection form={form} supplierType={'ovs'} />
|
||
<SurveySection form={form} surveyQuestions={surveyQuestions} />
|
||
<AttachmentSection form={form} />
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ForeignForm;
|