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';

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(() => {
    // 从字典中 联系人身份类别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>

      {/* 营业执照附件和有效期 */}
      <Row gutter={24}>
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'licenceAccessory']}
            label="营业执照附件"
            extra="pdf,jpg,jpeg,png类型的文件,大小不超过10MB"
            rules={[{ required: true, message: '请上传营业执照附件' }]}
          >
            <Upload
              name="businessLicense"
              action="/api/upload"
              listType="text"
              maxCount={1}
              beforeUpload={(file) => validateFileSize(file, 10, ['pdf', 'jpg', 'jpeg', 'png'])}
            >
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name={['coscoSupplierBase', 'licenceDate']}
            label="营业执照有效期"
            rules={[{ required: false, 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="socialCreditCode"
            label="统一社会信用代码"
            rules={[
              { required: true, message: '请输入统一社会信用代码' },
              { pattern: /^[0-9A-HJ-NPQRTUWXY]{18}$/, message: '请输入正确的统一社会信用代码' },
            ]}
          >
            <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="registeredCapital"
            label="注册资本"
            rules={[{ required: true, message: '请输入注册资本' }]}
          >
            <Input type="number" placeholder="请输入金额" addonBefore="人民币" addonAfter="万元" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="companyType"
            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="parentCompanyInfo" label="母公司/出资人">
            <Input placeholder="请输入母公司或出资人信息" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="registeredAddress"
            label="注册地址"
            rules={[{ required: true, message: '请输入注册地址' }]}
          >
            <Input prefix={<EnvironmentOutlined />} placeholder="上海市普陀区XX路1888号" />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item name="officeAddress" label="办公地址">
            <Input
              prefix={<EnvironmentOutlined />}
              placeholder="请具体注明省、市、区、路、门牌号"
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="businessScope"
            label="经营范围"
            rules={[{ required: true, message: '请输入经营范围' }]}
          >
            <TextArea
              placeholder="金融专用产品、广告传媒"
              rows={2}
              maxLength={200}
              showCount
              style={{ resize: 'none' }}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            name="contactPerson"
            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: '请输入有效的手机号' },
            ]}
            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 label="联系人证件号码" required>
            <Space.Compact size="large">
              <Form.Item
                name="contactIdType"
                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="contactIdNumber"
                noStyle
                rules={[{ required: true, message: '请填写联系人正确的身份证号' }]}
              >
                <Input placeholder="请填写联系人正确的身份证号" />
              </Form.Item>
            </Space.Compact>
          </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} supplierType={'dvs'} />
      <SurveySection form={form} surveyQuestions={surveyQuestions} />
      <AttachmentSection form={form} />
    </>
  );
};

export default DomesticForm;