fe_supplier_frontend/src/pages/register/supplier/ForeignForm.tsx

/* 境外企业 表单项 */
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
          >
            <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} />
      <SurveySection form={form} surveyQuestions={surveyQuestions} />
      <AttachmentSection form={form} />
    </>
  );
};

export default ForeignForm;