fe_supplier_frontend/src/components/CompanyInfo/component/DomesticForm.tsx

/* 境外企业 表单项 */
import React, { useEffect, useState } from 'react';
import { Form, Input, Select, Row, Col, message, Upload, Button } from 'antd';
import type { UploadProps } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { uploadFile } from '../services';
import type { UploadFile } from 'antd/es/upload/interface';
import { getDictList } from '@/servers/api/dicts';
import type { DictItem } from '@/servers/api/dicts';
const { Option } = Select;
interface ForeignFormProps {
  form: any;
  countdown: number;
  handleGetCaptcha: () => void;
}

/**
 * 境外企业注册表单
 * 基本信息部分为境外企业特有
 * 其他部分使用通用表单组件
 */
const DomesticForm: React.FC<ForeignFormProps> = ({ form, countdown, handleGetCaptcha }) => {
  const [contactsType, setContactsType] = useState<DictItem[]>([]);
  const [enterpriseType, setEnterpriseType] = useState<DictItem[]>([]);
  //上传得图片
  const [licenceFileList, setLicenceFileList] = useState<UploadFile[]>([]);
  useEffect(() => {
    getDictList('contacts_type').then((res) => {
      if (res.code === 200) {
        setContactsType(res.data);
      }
    });
    getDictList('enterprise_type').then((res) => {
      if (res.code === 200) {
        setEnterpriseType(res.data);
      }
    });
    const licenceAccessory = form.getFieldValue(['coscoSupplierBase', 'licenceAccessory']);
    if (licenceAccessory) {
      setLicenceFileList([{
        uid: '-1',
        name: '营业执照',
        status: 'done',
        url: licenceAccessory,
        thumbUrl: licenceAccessory,
      }]);
    } else {
      setLicenceFileList([]);
    }

  }, [])
  //上传接口
  const uploadProps: UploadProps = {
    name: 'file',
    accept: 'image/*',
    fileList: licenceFileList,
    maxCount: 1,
    showUploadList: true,
    beforeUpload: (file) => {
      if (file.size > 1048576) { // 1MB
        message.error('文件大小不能超过1MB');
        return Upload.LIST_IGNORE; // 阻止上传
      }
      return true;
    },
    customRequest: async ({ file, onSuccess, onError }) => {
      try {
        const realFile = file as File;
        const res = await uploadFile(realFile);
        const uploadedFile: UploadFile  = {
          uid: String(res.fileSize), 
          name: res.fileName,
          status: 'done',
          url: res.url,
          thumbUrl: res.url,
        };
        setLicenceFileList([uploadedFile]);
        
        // 让表单跟随
        form.setFieldsValue({
          coscoSupplierBase: {
            ...form.getFieldValue('coscoSupplierBase'),
            licenceAccessoryD: [uploadedFile]
          }
        });

        onSuccess?.(uploadedFile, new XMLHttpRequest())
        message.success('上传成功');
      } catch (err: any) {
        onError?.(err);
        message.error(err.message || '上传失败');
      }
    },
    onRemove: () => {
      setLicenceFileList([]);
      form.setFieldsValue({
        coscoSupplierBase: {
          ...form.getFieldValue('coscoSupplierBase'),
          licenceAccessoryD: []
        }
      });
      return true;
    }
  };
  return (
    <>
      {/* 境外企业特有的基本信息部分 */}
      <div className="form-section-title">基本信息</div>

      <Row gutter={24}>
        {/* <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'supplierType']}
            label="供应商分类"
            rules={[{ required: true, message: '请选择供应商分类' }]}
          >
            <Select placeholder="请选择">
              <Option value="dvs">境内企业/机构</Option>
              <Option value="ovs">境外企业</Option>
              <Option value="pe">个人</Option>
            </Select>
          </Form.Item>
        </Col> */}

        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'licenceDate']}
            label="营业执照有效期"
            rules={[{ required: true, message: '请输入营业执照有效期' }]}
          >
            <Input placeholder="请输入营业执照有效期" />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'enterpriseType']}
            label="企业类型"
            rules={[{ required: true, message: '请选择企业类型' }]}
          >
            <Select
              placeholder="请选择企业类别"
              options={enterpriseType.map((item) => ({
                label: item.dicName,
                value: item.code,
              }))}
            />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'name']}
            label="企业名称"
            rules={[{ required: true, message: '请输入企业名称' }]}
          >
            <Input placeholder="请输入企业名称" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'nameEn']}
            label="英文名"
          >
            <Input placeholder="请输入企业英文名称" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'socialCreditCode']}
            label="统一社会信用代码"
            rules={[{ required: true, message: '请输入统一社会信用代码' }]}
          >
            <Input placeholder="请输入统一社会信用代码" />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'regAddress']}
            label="注册地址"
            rules={[{ required: true, message: '请输入注册地址' }]}
          >
            <Input placeholder="请输入注册地址" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'workAddress']}
            label="办公地址"
          >
            <Input placeholder="请输入办公地址" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'parentCompanyInvestor']}
            label="母公司/出资人信息"
          >
            <Input placeholder="请输入母公司/出资人信息" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'legalPerson']}
            label="企业法定代表人"
            rules={[{ required: true, message: '请输入法定代表人' }]}
          >
            <Input placeholder="请输入企业法定代表人/负责人" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'contactsName']}
            label="联系人姓名"
            rules={[{ required: true, message: '请输入联系人姓名' }]}
          >
            <Input placeholder="请输入联系人姓名" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'contactsPhone']}
            label="联系人手机"
            rules={[
              { required: true, message: '请输入联系人手机号码' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' },
            ]}
          >
            <Input placeholder="请输入11位手机号码" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'contactsType']}
            label="联系人身份类别"
            rules={[{ required: true, message: '请选择联系人身份类别' }]}
          >
            <Select placeholder="请选择">
              {contactsType.map((item) => (
                <Select.Option key={item.code} value={item.code}>
                  {item.dicName}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            // 用 dependencies 监听 contactsType
            dependencies={['coscoSupplierBase', 'contactsType']}
            shouldUpdate={(prev, curr) =>
              prev.coscoSupplierBase?.contactsType !== curr.coscoSupplierBase?.contactsType
            }
            noStyle
          >
            {({ getFieldValue }) => {
              const contactsType = getFieldValue(['coscoSupplierBase', 'contactsType']);
              let label = '身份证号';
              // 可自定义规则
              if (contactsType === '1') {
                label = '身份证号';
              } else if (contactsType === '0') {
                label = '护照号';
              } else {
                label = '';
              }
              if (!label) {
                return null; // label为空，不渲染
              }
              return (
                <Form.Item
                  name={['coscoSupplierBase', 'idCard']}
                  label={label}
                  rules={[{ required: true, message: `请输入${label}` }]}
                >
                  <Input placeholder={`请输入${label}`} />
                </Form.Item>
              );
            }}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'contactsEmail']}
            label="联系人邮箱"
            rules={[
              { type: 'email', message: '请输入有效的电子邮箱' },
              { required: true, message: '请输入电子邮箱' },
            ]}
          >
            <Input placeholder="XXX@XXX.com" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name={['coscoSupplierBase', 'telephone']}
            label="固定电话"
          >
            <Input placeholder="请输入企业联系电话" />
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item
            name={['coscoSupplierBase', 'capital']}
            label="注册资本/实收资本"
            rules={[{ required: true, message: '请输入注册资本金额' }]}
          >
            <Input type="number" placeholder="请输入金额" addonAfter="万元" />
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item
            name={['coscoSupplierBase', 'range']}
            label="经营范围"
            rules={[{ required: true, message: '请输入经营范围' }]}
          >
            <Input.TextArea placeholder="请输入经营范围" rows={2} maxLength={200} showCount />
          </Form.Item>
        </Col>
        <Col span={24}>
        <Form.Item
          name={['coscoSupplierBase', 'licenceAccessoryD']}
          label="营业执照附件"
          valuePropName="fileList"
          getValueFromEvent={e => Array.isArray(e) ? e : e?.fileList}
          rules={[{ required: true, message: '请上传营业执照' }]}
        >
          <Upload {...uploadProps}>
            {licenceFileList.length < 1 && (
              <Button icon={<UploadOutlined />}>上传文件</Button>
            )}
          </Upload>
        </Form.Item>
      </Col>
        <Form.Item name={['coscoSupplierBase', 'id']} noStyle>
          <Input type="hidden" />
        </Form.Item>
        <Form.Item name={['coscoSupplierBase', 'supplierType']} noStyle>
          <Input type="hidden" />
        </Form.Item>
      </Row>

    </>
  );
};

export default DomesticForm;