349 lines
12 KiB
TypeScript
349 lines
12 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';
|
||
import { getDictList } from '@/servers/api/dicts';
|
||
import type { DictItem } from '@/servers/api/dicts';
|
||
|
||
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[]>([]);
|
||
// 企业类别
|
||
const [companyTypeOptions, setCompanyTypeOptions] = useState<DictItem[]>([]);
|
||
// 币种
|
||
const [currencyOptions, setCurrencyOptions] = useState<DictItem[]>([]);
|
||
useEffect(() => {
|
||
// 设置供应商类型为境外企业
|
||
form.setFieldsValue({
|
||
coscoSupplierBase: {
|
||
...form.getFieldValue('coscoSupplierBase'),
|
||
supplierType: 'ovs'
|
||
}
|
||
});
|
||
|
||
getregionInternational({ pId: 0 }).then((res) => {
|
||
if (res.code === 200) {
|
||
setRegionOptions(res.data);
|
||
}
|
||
});
|
||
// 企业类别
|
||
getDictList('enterprise_type').then((res) => {
|
||
if (res.code === 200) {
|
||
setCompanyTypeOptions(res.data);
|
||
}
|
||
});
|
||
// 币种
|
||
getDictList('currency').then((res) => {
|
||
if (res.code === 200) {
|
||
setCurrencyOptions(res.data);
|
||
}
|
||
});
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
{/* 境外企业特有的基本信息部分 */}
|
||
<div className="form-section-title">基本信息</div>
|
||
|
||
{/* 隐藏字段 - 供应商类型 */}
|
||
<Form.Item name={['coscoSupplierBase', 'supplierType']} hidden initialValue="ovs">
|
||
<Input />
|
||
</Form.Item>
|
||
|
||
<Row gutter={24}>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'name']}
|
||
label="企业名称"
|
||
rules={[{ required: true, message: '请输入企业名称' }]}
|
||
>
|
||
<Input placeholder="请输入企业名称" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'nameEn']}
|
||
label="企业英文名称"
|
||
rules={[{ required: true, message: '请输入企业英文名称' }]}
|
||
>
|
||
<Input placeholder="请输入企业英文名称" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item name={['coscoSupplierBase', 'vat']} label="税号">
|
||
<Input placeholder="请输入增值税号" />
|
||
</Form.Item>
|
||
</Col>
|
||
{/* <Col span={8}>
|
||
<Form.Item name={['coscoSupplierBase', 'taxpayerId']} label="境外纳税人ID号">
|
||
<Input placeholder="请输入境外纳税人ID号" />
|
||
</Form.Item>
|
||
</Col> */}
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'nation']}
|
||
label="国家/地区"
|
||
rules={[{ required: true, message: '请选择国家/地区' }]}
|
||
>
|
||
<Select placeholder="请选择国家/地区">
|
||
{regionOptions.map((item) => {
|
||
return <Option key={item.id} 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={['coscoSupplierBase', 'regAddress']}
|
||
label="注册地址"
|
||
rules={[{ required: true, message: '请输入注册地址' }]}
|
||
>
|
||
<Input prefix={<EnvironmentOutlined />} placeholder="请具体注明" />
|
||
</Form.Item>
|
||
</Col> */}
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'workAddress']}
|
||
label="办公地址"
|
||
rules={[{ required: true, message: '请输入办公地址' }]}
|
||
>
|
||
<Input prefix={<EnvironmentOutlined />} placeholder="请具体注明" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'range']}
|
||
label="经营范围"
|
||
rules={[{ required: true, message: '请输入经营范围' }]}
|
||
>
|
||
<TextArea placeholder="请输入经营范围" rows={2} maxLength={200} showCount />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item name={['coscoSupplierBase', 'parentCompanyInvestor']} label="母公司/出资人">
|
||
<Input placeholder="请输入母公司或出资人信息" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item name={['coscoSupplierBase', 'legalPerson']} label="企业法定代表人">
|
||
<Input placeholder="请输入企业法定代表人" />
|
||
</Form.Item>
|
||
</Col>
|
||
{/* <Col span={8}>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'enterpriseType']}
|
||
label="企业类型"
|
||
rules={[{ required: true, message: '请选择企业类型' }]}
|
||
>
|
||
<Select
|
||
placeholder="请选择企业类型"
|
||
options={companyTypeOptions.map(item => ({
|
||
label: item.dicName,
|
||
value: item.code,
|
||
}))}
|
||
/>
|
||
</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={['coscoSupplierBase', 'currency']} noStyle initialValue="USD">
|
||
<Select
|
||
style={{ width: 100, borderRadius: '2px 0 0 2px' }}
|
||
options={currencyOptions.map((item) => ({
|
||
label: item.dicName,
|
||
value: item.code,
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'capital']}
|
||
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={['coscoSupplierBase', 'contactsName']}
|
||
label="联系人姓名"
|
||
rules={[{ required: true, message: '请输入联系人姓名' }]}
|
||
>
|
||
<Input placeholder="请输入联系人姓名" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'contactsEmail']}
|
||
label="联系人邮箱"
|
||
rules={[
|
||
{ type: 'email', message: '请输入有效的电子邮箱' },
|
||
{ required: true, message: '请输入电子邮箱' },
|
||
]}
|
||
extra="该邮箱用于后续联系和找回密码"
|
||
>
|
||
<Input
|
||
placeholder="请输入电子邮箱"
|
||
prefix={<MailOutlined />}
|
||
addonAfter={
|
||
<Button
|
||
type="link"
|
||
size="small"
|
||
disabled={countdown > 0}
|
||
onClick={handleGetCaptcha}
|
||
>
|
||
{countdown ? `${countdown}秒后重新获取` : '获取验证码'}
|
||
</Button>
|
||
}
|
||
/>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item
|
||
name="captcha"
|
||
label="验证码"
|
||
rules={[
|
||
{ required: true, message: '请输入验证码' },
|
||
{ pattern: /^\d{6}$/, message: '请输入6位数字验证码' },
|
||
]}
|
||
>
|
||
<Input placeholder="请输入验证码" />
|
||
</Form.Item>
|
||
</Col>
|
||
{/* <Col span={8}>
|
||
<Form.Item
|
||
name={['coscoSupplierBase', 'contactsPhone']}
|
||
label="联系人手机"
|
||
>
|
||
<Input placeholder="请输入企业联系电话" prefix={<MobileOutlined />} />
|
||
</Form.Item>
|
||
</Col> */}
|
||
<Col span={8}>
|
||
<Form.Item name={['coscoSupplierBase', 'contactsPhone']} label="联系电话">
|
||
<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> */}
|
||
</Row>
|
||
|
||
{/* 使用通用表单组件 */}
|
||
<QualificationSection form={form} />
|
||
{/* <InvoiceSection form={form} /> */}
|
||
<BankAccountSection form={form} supplierType={'ovs'} />
|
||
<SurveySection form={form} surveyQuestions={surveyQuestions} />
|
||
<AttachmentSection form={form} />
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default ForeignForm;
|