347 lines
12 KiB
TypeScript
347 lines
12 KiB
TypeScript
/* 境内企业/机构 表单项 */
|
|
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="encryptValue"
|
|
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;
|