349 lines
11 KiB
TypeScript
349 lines
11 KiB
TypeScript
/* 境外企业 表单项 */
|
||
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;
|