liuc/fe_supplier_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
linxd
2025-06-17 14:20:06 +08:00
commit 08424ecdb8
112 changed files with 26341 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
src/pages/register/supplier/ForeignForm.tsx Normal file
View File

@ -0,0 +1,319 @@
/* 境外企业 表单项 */
import React from 'react';
import { Form, Input, Button, Select, Row, Col } from 'antd';
import {
MobileOutlined,
MailOutlined,
EnvironmentOutlined,
} from '@ant-design/icons';
/**
* 引入通用表单组件
*/
import {
QualificationSection,
InvoiceSection,
BankAccountSection,
SurveySection,
AttachmentSection,
} from './CommonFormSections';
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 }) => {
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="请选择国家/地区">
<Option value="US">美国</Option>
<Option value="UK">英国</Option>
<Option value="JP">日本</Option>
<Option value="DE">德国</Option>
<Option value="FR">法国</Option>
<Option value="AU">澳大利亚</Option>
<Option value="CA">加拿大</Option>
<Option value="SG">新加坡</Option>
<Option value="HK">中国香港</Option>
<Option value="OTHER">其他</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
style={{ marginBottom: 0 }}
>
<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={24}>
<Form.Item
name="businessScope"
label="经营范围"
labelCol={{ span: 2 }}
wrapperCol={{ span: 22 }}
rules={[{ required: true, message: '请输入经营范围' }]}
>
<TextArea placeholder="请输入经营范围" rows={2} maxLength={200} showCount />
</Form.Item>
</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} />
<SurveySection form={form} surveyQuestions={surveyQuestions} />
<AttachmentSection form={form} />
</>
);
};
export default ForeignForm;