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

/* 境外企业 表单项 */
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().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="增值税号VAT">
            <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', 'telephone']} 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;