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

/* 境内企业/机构 表单项 */
import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Select, Upload, DatePicker, Row, Col, message, Space } from 'antd';
import {
  MobileOutlined,
  MailOutlined,
  EnvironmentOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import { getDictList } from '@/servers/api/dicts';
import type { DictItem } from '@/servers/api/dicts';
/**
 * 引入通用表单组件
 */
import {
  QualificationSection,
  InvoiceSection,
  BankAccountSection,
  SurveySection,
  AttachmentSection,
} from './CommonFormSections';
import { validateFileSize } from '@/utils/utils';
import FileUpload from '@/components/FileUpload/FileUpload';

const { Option } = Select;
const { TextArea } = Input;

// 移除不再需要的addressOptions

interface DomesticFormProps {
  form: any;
  countdown: number;
  handleGetCaptcha: () => void;
  surveyQuestions?: API.SurveyQuestionResponse; // 本身就是数组类型
}

/**
 * 境内企业注册表单
 * 基本信息部分为境内企业特有
 * 其他部分使用通用表单组件
 */
const DomesticForm: React.FC<DomesticFormProps> = ({
  form,
  countdown,
  handleGetCaptcha,
  surveyQuestions,
}) => {
  const [contactsTypeOptions, setContactsTypeOptions] = useState<DictItem[]>([]);
  // 企业类别
  const [companyTypeOptions, setCompanyTypeOptions] = useState<DictItem[]>([]);

  useEffect(() => {
    // 设置供应商类型为境内企业
    form.setFieldsValue({
      coscoSupplierBase: {
        ...form.getFieldValue('coscoSupplierBase'),
        supplierType: 'dvs'
      }
    });

    // 从字典中 联系人身份类别contacts_type 获取数据
    getDictList('contacts_type').then((res) => {
      if (res.code === 200) {
        setContactsTypeOptions(res.data);
      }
    });
    // 企业类别
    getDictList('enterprise_type').then((res) => {
      if (res.code === 200) {
        setCompanyTypeOptions(res.data);
      }
    });
  }, []);

  return (
    <>
      <div className="form-section-title">基本信息</div>

      {/* 隐藏字段 - 供应商类型 */}
      <Form.Item name={['coscoSupplierBase', 'supplierType']} hidden initialValue="dvs">
        <Input />
      </Form.Item>

      {/* 营业执照附件和有效期 */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'licenceAccessory']}
            label="营业执照附件"
            rules={[{ required: true, message: '请上传营业执照附件' }]}
            getValueProps={(value) => {
              return {
                value: value?.length > 0 ? value[0]?.url : undefined,
              };
            }}
            getValueFromEvent={(value) => {
              return value?.length > 0 ? value[0]?.url : undefined;
            }}
          >
            <FileUpload
              listType="text"
              maxCount={1}
              maxSize={10}
              allowedTypes={['pdf', 'jpg', 'jpeg', 'png']}
              tip="pdf,jpg,jpeg,png类型的文件,大小不超过10MB"
            >
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </FileUpload>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'licenceDate']}
            label="营业执照有效期"
            rules={[{ required: true, message: '请选择营业执照有效期' }]}
          >
            <DatePicker placeholder="请选择日期" style={{ width: '100%' }} format="YYYY-MM-DD" />
          </Form.Item>
        </Col>
        <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: false, message: '请输入英文名' }]}
          >
            <Input placeholder="请输入英文名" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'socialCreditCode']}
            label="统一社会信用代码"
            rules={[
              { required: true, message: '请输入统一社会信用代码' },
              { pattern: /^[0-9A-HJ-NPQRTUWXY]{18}$/, message: '请输入正确的统一社会信用代码' },
            ]}
          >
            <Input placeholder="请输入正确的统一社会信用代码" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'legalPerson']}
            label="企业法定代表人"
            rules={[{ required: true, message: '请输入企业法定代表人/负责人' }]}
          >
            <Input placeholder="张三" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="证件号码" required>
            <Space.Compact size="large">
              <Form.Item
                name={['coscoSupplierBase', 'contactsType']}
                noStyle
                rules={[{ required: true, message: '请选择联系人证件类型' }]}
              >
                <Select placeholder="请选择类型">
                  {contactsTypeOptions.map((item) => (
                    <Option key={item.code} value={item.code}>
                      {item.dicName}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
              <Form.Item
                name={['coscoSupplierBase', 'idCard']}
                noStyle
                rules={[{ required: true, message: '请填写联系人正确的身份证号' }]}
              >
                <Input placeholder="请填写联系人正确的身份证号" />
              </Form.Item>
            </Space.Compact>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'capital']}
            label="注册资本"
            rules={[{ required: true, message: '请输入注册资本' }]}
          >
            <Input type="number" placeholder="请输入金额" addonBefore="人民币" addonAfter="万元" />
          </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 name={['coscoSupplierBase', 'parentCompanyInvestor']} label="母公司/出资人">
            <Input placeholder="请输入母公司或出资人信息" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'regAddress']}
            label="注册地址"
            rules={[{ required: true, message: '请输入注册地址' }]}
          >
            <Input prefix={<EnvironmentOutlined />} placeholder="上海市普陀区XX路1888号" />
          </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
              style={{ resize: 'none' }}
            />
          </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', 'contactsPhone']}
            label="联系人手机"
            rules={[
              { required: true, message: '请输入联系人手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' },
            ]}
            extra="该手机号用于后续联系和找回密码"
          >
            <Input
              prefix={<MobileOutlined />}
              placeholder="请输入11位手机号码"
              addonAfter={
                <Button
                  type="link"
                  size="small"
                  disabled={countdown > 0}
                  onClick={handleGetCaptcha}
                >
                  {countdown > 0 ? `${countdown}s` : '获取验证码'}
                </Button>
              }
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="captcha"
            label="验证码"
            rules={[{ required: true, message: '请输入验证码' }]}
          >
            <Input placeholder="请输入短信验证码" />
          </Form.Item>
        </Col>
        {/* <Col span={8}>
          <Form.Item name="contactIdType" label="联系人身份类别">
            <Select placeholder="请选择类型">
              <Option value="idcard">居民身份证</Option>
              <Option value="passport">护照</Option>
              <Option value="other">其他证件</Option>
            </Select>
          </Form.Item>
        </Col> */}
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'contactsEmail']}
            label="联系人邮箱"
            rules={[
              { type: 'email', message: '请输入有效的电子邮箱' },
              { required: true, message: '请输入电子邮箱' },
            ]}
          >
            <Input prefix={<MailOutlined />} placeholder="XXX@XXX.com " />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item name={['coscoSupplierBase', 'telephone']} label="固定电话">
            <Input placeholder="请输入企业联系电话" />
          </Form.Item>
        </Col>
      </Row>

      {/* 使用通用表单组件 */}
      <QualificationSection form={form} />
      <InvoiceSection form={form} />
      <BankAccountSection form={form} supplierType={'dvs'} />
      <SurveySection form={form} surveyQuestions={surveyQuestions} />
      <AttachmentSection form={form} />
    </>
  );
};

export default DomesticForm;