892 lines
31 KiB
TypeScript
892 lines
31 KiB
TypeScript
|
/* 境外企业 表单项 */
|
|||
|
|
import React from 'react';
|
|||
|
|
import { Form, Input, Button, Select, Upload, DatePicker, Row, Col, Cascader, Table, Radio } from 'antd';
|
|||
|
|
import {
|
|||
|
|
MobileOutlined,
|
|||
|
|
MailOutlined,
|
|||
|
|
EnvironmentOutlined,
|
|||
|
|
UploadOutlined,
|
|||
|
|
PlusOutlined,
|
|||
|
|
DeleteOutlined,
|
|||
|
|
} from '@ant-design/icons';
|
|||
|
|
import { message } from 'antd';
|
|||
|
|
|
|||
|
|
const { Option } = Select;
|
|||
|
|
const { TextArea } = Input;
|
|||
|
|
|
|||
|
|
// 中国省市区级联数据
|
|||
|
|
const addressOptions = [
|
|||
|
|
{
|
|||
|
|
value: '330000',
|
|||
|
|
label: '浙江省',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: '330100',
|
|||
|
|
label: '杭州市',
|
|||
|
|
children: [
|
|||
|
|
{ value: '330102', label: '上城区' },
|
|||
|
|
{ value: '330103', label: '下城区' },
|
|||
|
|
{ value: '330104', label: '江干区' },
|
|||
|
|
{ value: '330105', label: '拱墅区' },
|
|||
|
|
{ value: '330106', label: '西湖区' },
|
|||
|
|
{ value: '330108', label: '滨江区' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '310000',
|
|||
|
|
label: '上海市',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: '310100',
|
|||
|
|
label: '上海市',
|
|||
|
|
children: [
|
|||
|
|
{ value: '310101', label: '黄浦区' },
|
|||
|
|
{ value: '310104', label: '徐汇区' },
|
|||
|
|
{ value: '310105', label: '长宁区' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
interface ForeignFormProps {
|
|||
|
|
form: any;
|
|||
|
|
countdown: number;
|
|||
|
|
handleGetCaptcha: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ForeignForm: React.FC<ForeignFormProps> = ({ form, countdown, handleGetCaptcha }) => {
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<div className="form-section-title">基本信息</div>
|
|||
|
|
|
|||
|
|
<Row gutter={24}>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="companyName"
|
|||
|
|
label="企业名称"
|
|||
|
|
rules={[{ required: true, message: '请输入企业名称' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入企业名称" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="companyEnglishName"
|
|||
|
|
label="企业英文名称"
|
|||
|
|
rules={[{ required: true, message: '请输入企业英文名称' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入企业英文名称" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="companyRegNumber"
|
|||
|
|
label="公司注册号"
|
|||
|
|
rules={[{ required: true, message: '请输入公司注册号' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入公司注册号" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="country"
|
|||
|
|
label="国家/地区"
|
|||
|
|
rules={[{ required: true, message: '请选择国家/地区' }]}
|
|||
|
|
>
|
|||
|
|
<Select placeholder="请选择国家/地区">
|
|||
|
|
<Option value="US">美国</Option>
|
|||
|
|
<Option value="UK">英国</Option>
|
|||
|
|
<Option value="JP">日本</Option>
|
|||
|
|
<Option value="DE">德国</Option>
|
|||
|
|
<Option value="FR">法国</Option>
|
|||
|
|
<Option value="AU">澳大利亚</Option>
|
|||
|
|
<Option value="CA">加拿大</Option>
|
|||
|
|
<Option value="SG">新加坡</Option>
|
|||
|
|
<Option value="HK">中国香港</Option>
|
|||
|
|
<Option value="OTHER">其他</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="registrationPassword"
|
|||
|
|
label="登录密码"
|
|||
|
|
rules={[
|
|||
|
|
{ required: true, message: '请输入登录密码' },
|
|||
|
|
{ min: 8, message: '密码长度为8-20位' },
|
|||
|
|
{
|
|||
|
|
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,20}$/,
|
|||
|
|
message: '需要同时包含字母、数字、大小写',
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Input.Password placeholder="长度为8-20位，需要同时包含字母、数字、大小写" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="confirmPassword"
|
|||
|
|
label="确认密码"
|
|||
|
|
rules={[
|
|||
|
|
{ required: true, message: '请再次输入密码' },
|
|||
|
|
({ getFieldValue }) => ({
|
|||
|
|
validator(_, value) {
|
|||
|
|
if (!value || getFieldValue('registrationPassword') === value) {
|
|||
|
|
return Promise.resolve();
|
|||
|
|
}
|
|||
|
|
return Promise.reject(new Error('两次输入的密码不一致'));
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Input.Password placeholder="请再次输入密码" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="registeredAddress"
|
|||
|
|
label="注册地址"
|
|||
|
|
rules={[{ required: true, message: '请输入注册地址' }]}
|
|||
|
|
>
|
|||
|
|
<Input prefix={<EnvironmentOutlined />} placeholder="请具体注明" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item name="officeAddress" label="办公地址">
|
|||
|
|
<Input prefix={<EnvironmentOutlined />} placeholder="请具体注明" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item name="parentCompanyInfo" label="母公司/出资人">
|
|||
|
|
<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="companyType"
|
|||
|
|
label="企业性质"
|
|||
|
|
rules={[{ required: true, message: '请选择企业性质' }]}
|
|||
|
|
>
|
|||
|
|
<Select placeholder="请选择企业性质">
|
|||
|
|
<Option value="corporation">公司制企业</Option>
|
|||
|
|
<Option value="partnership">合伙企业</Option>
|
|||
|
|
<Option value="joint">合资企业</Option>
|
|||
|
|
<Option value="sole">独资企业</Option>
|
|||
|
|
<Option value="other">其他</Option>
|
|||
|
|
</Select>
|
|||
|
|
</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="registeredCapitalGroup"
|
|||
|
|
label="注册资本"
|
|||
|
|
rules={[{ required: true, message: '请输入注册资本' }]}
|
|||
|
|
>
|
|||
|
|
<Input.Group compact style={{ display: 'flex' }}>
|
|||
|
|
<Form.Item name="capitalCurrency" noStyle initialValue="USD">
|
|||
|
|
<Select style={{ width: 100, borderRadius: '2px 0 0 2px' }}>
|
|||
|
|
<Option value="USD">美元</Option>
|
|||
|
|
<Option value="EUR">欧元</Option>
|
|||
|
|
<Option value="GBP">英镑</Option>
|
|||
|
|
<Option value="JPY">日元</Option>
|
|||
|
|
<Option value="HKD">港币</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
name="capitalAmount"
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请输入金额' }]}
|
|||
|
|
>
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
placeholder="请输入金额"
|
|||
|
|
style={{ flex: 1, borderRadius: '0 2px 2px 0', marginLeft: -1 }}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Input.Group>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={16}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="businessScope"
|
|||
|
|
label="经营范围"
|
|||
|
|
labelCol={{ span: 2 }}
|
|||
|
|
wrapperCol={{ span: 21 }}
|
|||
|
|
rules={[{ required: true, message: '请输入经营范围' }]}
|
|||
|
|
>
|
|||
|
|
<TextArea placeholder="请输入经营范围" rows={2} maxLength={200} showCount />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="contactName"
|
|||
|
|
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: '请输入正确的手机号码' },
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Input
|
|||
|
|
placeholder="请输入11位手机号码"
|
|||
|
|
prefix={<MobileOutlined />}
|
|||
|
|
addonAfter={
|
|||
|
|
<Button
|
|||
|
|
type="link"
|
|||
|
|
size="small"
|
|||
|
|
disabled={countdown > 0}
|
|||
|
|
onClick={handleGetCaptcha}
|
|||
|
|
>
|
|||
|
|
{countdown ? `${countdown}秒后重新获取` : '获取验证码'}
|
|||
|
|
</Button>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="verificationCode"
|
|||
|
|
label="验证码"
|
|||
|
|
rules={[
|
|||
|
|
{ required: true, message: '请输入验证码' },
|
|||
|
|
{ pattern: /^\d{6}$/, message: '请输入6位数字验证码' },
|
|||
|
|
]}
|
|||
|
|
extra="该手机号用于后续联系和找回密码"
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入验证码" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="contactIdType"
|
|||
|
|
label="联系人身份类别"
|
|||
|
|
rules={[{ required: true, message: '请选择联系人身份类别' }]}
|
|||
|
|
>
|
|||
|
|
<Select placeholder="请选择类型">
|
|||
|
|
<Option value="internal">境内人士</Option>
|
|||
|
|
<Option value="external">境外（非大陆人士）</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="contactIdNumber"
|
|||
|
|
label="联系人证件号码"
|
|||
|
|
rules={[{ required: true, message: '请输入联系人证件号码' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请填写联系人正确的身份证号" />
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
{/* 资质信息 */}
|
|||
|
|
<div className="form-section-title">资质信息</div>
|
|||
|
|
|
|||
|
|
<Form.List name="qualifications">
|
|||
|
|
{(fields, { add, remove }) => (
|
|||
|
|
<>
|
|||
|
|
<Table
|
|||
|
|
dataSource={fields.map((field) => ({
|
|||
|
|
...field,
|
|||
|
|
key: field.key,
|
|||
|
|
fieldKey: field.name,
|
|||
|
|
}))}
|
|||
|
|
pagination={false}
|
|||
|
|
bordered
|
|||
|
|
size="middle"
|
|||
|
|
rowKey="key"
|
|||
|
|
columns={[
|
|||
|
|
{
|
|||
|
|
title: '序号',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
width: 60,
|
|||
|
|
render: (_, __, index) => index + 1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '资质证书类型',
|
|||
|
|
dataIndex: 'certType',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'certType']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请选择资质证书类型' }]}
|
|||
|
|
>
|
|||
|
|
<Select placeholder="请选择类型" style={{ width: '100%' }}>
|
|||
|
|
<Option value="机构资质">机构资质</Option>
|
|||
|
|
<Option value="CMMI资质等级">CMMI资质等级</Option>
|
|||
|
|
<Option value="质量体系认证">质量体系认证</Option>
|
|||
|
|
<Option value="环境管理体系认证">环境管理体系认证</Option>
|
|||
|
|
<Option value="行业资质">行业资质</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '资质名称',
|
|||
|
|
dataIndex: 'certName',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'certName']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请输入资质名称' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入资质名称" />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '资质证书编号',
|
|||
|
|
dataIndex: 'certNumber',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'certNumber']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请输入资质证书编号' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入证书编号" />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '资质类别和等级',
|
|||
|
|
dataIndex: 'certLevel',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item name={[record.name, 'certLevel']} noStyle>
|
|||
|
|
<Input placeholder="请输入资质类别和等级" />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '发证机构',
|
|||
|
|
dataIndex: 'issuingAuthority',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'issuingAuthority']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请输入发证机构' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入发证机构" />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '发证日期',
|
|||
|
|
dataIndex: 'issueDate',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'issueDate']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请选择发证日期' }]}
|
|||
|
|
>
|
|||
|
|
<DatePicker placeholder="年/月/日" style={{ width: '100%' }} />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '资质有效期至',
|
|||
|
|
dataIndex: 'expiryDate',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'expiryDate']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请选择资质有效期' }]}
|
|||
|
|
>
|
|||
|
|
<DatePicker placeholder="年/月/日" style={{ width: '100%' }} />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '附件',
|
|||
|
|
dataIndex: 'certFile',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'certFile']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请上传资质证书附件' }]}
|
|||
|
|
>
|
|||
|
|
<Upload name="certFile" action="/api/upload" listType="text" maxCount={1}>
|
|||
|
|
<Button type="link" size="small">上传</Button>
|
|||
|
|
</Upload>
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
width: 70,
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Button
|
|||
|
|
type="link"
|
|||
|
|
danger
|
|||
|
|
icon={<DeleteOutlined />}
|
|||
|
|
onClick={() => remove(record.name)}
|
|||
|
|
>
|
|||
|
|
删除
|
|||
|
|
</Button>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
<Form.Item style={{ marginTop: 16 }} wrapperCol={{ span: 24 }}>
|
|||
|
|
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
|
|||
|
|
添加行
|
|||
|
|
</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Form.List>
|
|||
|
|
|
|||
|
|
{/* 开票信息 */}
|
|||
|
|
<div className="form-section-title">开票信息</div>
|
|||
|
|
|
|||
|
|
<Row gutter={24}>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="invoiceType"
|
|||
|
|
label="纳税人类型"
|
|||
|
|
rules={[{ required: true, message: '请选择纳税人类型' }]}
|
|||
|
|
>
|
|||
|
|
<Select placeholder="请选择纳税人类型">
|
|||
|
|
<Option value="general">一般纳税人</Option>
|
|||
|
|
<Option value="small">小规模纳税人</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="invoiceTitle"
|
|||
|
|
label="开票抬头"
|
|||
|
|
rules={[{ required: true, message: '请输入开票抬头' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入开票抬头" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="taxpayerNumber"
|
|||
|
|
label="纳税人识别号"
|
|||
|
|
rules={[{ required: true, message: '请输入纳税人识别号' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入纳税人识别号" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item name="invoiceAddress" label="开票地址">
|
|||
|
|
<Input placeholder="请输入开票地址" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item name="invoicePhone" label="开票电话">
|
|||
|
|
<Input placeholder="请输入开票电话" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item name="invoiceBank" label="开票户行">
|
|||
|
|
<Input placeholder="请输入开票银行" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item name="bankAccountNumber" label="开票户行账号">
|
|||
|
|
<Input placeholder="请输入开票户行账号" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item name="generalTaxpayerCert" label="一般纳税人资格证明">
|
|||
|
|
<Upload
|
|||
|
|
name="generalTaxpayerCert"
|
|||
|
|
action="/api/upload"
|
|||
|
|
listType="text"
|
|||
|
|
maxCount={1}
|
|||
|
|
beforeUpload={(file) => {
|
|||
|
|
const isValidFormat =
|
|||
|
|
file.type === 'application/pdf' ||
|
|||
|
|
file.type === 'image/jpeg' ||
|
|||
|
|
file.type === 'image/png';
|
|||
|
|
if (!isValidFormat) {
|
|||
|
|
message.error('只能上传PDF/JPG/PNG格式文件!');
|
|||
|
|
}
|
|||
|
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
|||
|
|
if (!isLt10M) {
|
|||
|
|
message.error('文件大小不能超过10MB!');
|
|||
|
|
}
|
|||
|
|
return isValidFormat && isLt10M;
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Button icon={<UploadOutlined />}>上传文件</Button>
|
|||
|
|
</Upload>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
{/* 银行账户 */}
|
|||
|
|
<div className="form-section-title">银行账户</div>
|
|||
|
|
|
|||
|
|
<Form.List name="bankAccounts">
|
|||
|
|
{(fields, { add, remove }) => (
|
|||
|
|
<>
|
|||
|
|
<Table
|
|||
|
|
dataSource={fields.map((field) => ({
|
|||
|
|
...field,
|
|||
|
|
key: field.key,
|
|||
|
|
fieldKey: field.name,
|
|||
|
|
}))}
|
|||
|
|
pagination={false}
|
|||
|
|
bordered
|
|||
|
|
size="middle"
|
|||
|
|
rowKey="key"
|
|||
|
|
columns={[
|
|||
|
|
{
|
|||
|
|
title: '序号',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
width: 60,
|
|||
|
|
render: (_, __, index) => index + 1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '开户银行',
|
|||
|
|
dataIndex: 'bankName',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'bankName']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请输入开户银行' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入开户银行" />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '账户名称',
|
|||
|
|
dataIndex: 'accountName',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'accountName']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请输入账户名称' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入账户名称" />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '账号',
|
|||
|
|
dataIndex: 'accountNumber',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'accountNumber']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请输入账号' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入账号" />
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '国家、省、市',
|
|||
|
|
dataIndex: 'location',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={[record.name, 'address']}
|
|||
|
|
noStyle
|
|||
|
|
rules={[{ required: true, message: '请选择地址' }]}
|
|||
|
|
>
|
|||
|
|
<Cascader
|
|||
|
|
options={addressOptions}
|
|||
|
|
placeholder="请选择省市区"
|
|||
|
|
showSearch={{
|
|||
|
|
filter: (inputValue, path) => {
|
|||
|
|
return path.some((option) => {
|
|||
|
|
if (typeof option.label === 'string') {
|
|||
|
|
return (
|
|||
|
|
option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
width: 70,
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Button
|
|||
|
|
type="link"
|
|||
|
|
danger
|
|||
|
|
icon={<DeleteOutlined />}
|
|||
|
|
onClick={() => remove(record.name)}
|
|||
|
|
>
|
|||
|
|
删除
|
|||
|
|
</Button>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
<Form.Item style={{ marginTop: 16 }} wrapperCol={{ span: 24 }}>
|
|||
|
|
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
|
|||
|
|
添加行
|
|||
|
|
</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Form.List>
|
|||
|
|
|
|||
|
|
{/* 社会准则符合性自查问卷 */}
|
|||
|
|
<div className="form-section-title">社会准则符合性自查问卷</div>
|
|||
|
|
|
|||
|
|
<div className="questionnaire-header">填写人信息：</div>
|
|||
|
|
<Row gutter={24}>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="surveyCompanyName"
|
|||
|
|
label="供应商名称"
|
|||
|
|
rules={[{ required: true, message: '请输入供应商名称' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入供应商名称" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="surveyPersonName"
|
|||
|
|
label="姓名"
|
|||
|
|
rules={[{ required: true, message: '请输入姓名' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入姓名" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="surveyPosition"
|
|||
|
|
label="职位"
|
|||
|
|
rules={[{ required: true, message: '请输入职位' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入职位" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="surveyPhone"
|
|||
|
|
label="电话号"
|
|||
|
|
rules={[{ required: true, message: '请输入电话号' }]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入电话号" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="surveyEmail"
|
|||
|
|
label="邮箱"
|
|||
|
|
rules={[
|
|||
|
|
{ type: 'email', message: '请输入有效的电子邮箱' },
|
|||
|
|
{ required: true, message: '请输入电子邮箱' },
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Input placeholder="请输入电子邮箱" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<Form.Item
|
|||
|
|
name="surveyDate"
|
|||
|
|
label="日期"
|
|||
|
|
rules={[{ required: true, message: '请选择日期' }]}
|
|||
|
|
>
|
|||
|
|
<DatePicker placeholder="请选择日期" style={{ width: '100%' }} />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<div className="questionnaire-header" style={{ marginTop: '20px' }}>
|
|||
|
|
问卷：
|
|||
|
|
</div>
|
|||
|
|
<Table
|
|||
|
|
pagination={false}
|
|||
|
|
bordered
|
|||
|
|
size="middle"
|
|||
|
|
rowKey="id"
|
|||
|
|
dataSource={[
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
question:
|
|||
|
|
'法律法规：\n我们确保经营和提供的产品服务遵守国家及各业务所在地的所有使用法律、法规及健康和安全：',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
question:
|
|||
|
|
'健康和安全：\n我们为员工提供符合法律法规的安全且健康的工作场所。我们建立安全管理体系，并向员工传达工作场所或生活设施的健康和安全标准，致力于减少工作对员工造成的伤害和疾病。',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
question:
|
|||
|
|
'环境：\n我们能够以环境友好的方式经营。我们遵守适用的环境法律、法规和标准，并建立有效的环境管理体系。\n我们遵守贵集团对相关产品或服务的部分附加环境要求，这些要求和规定体现在设计与产品规范的合同文档中。',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
question:
|
|||
|
|
'监督和记录\n我们保留记录遵守所有法律和此行为准则的必要文件，并根据要求为贵集团提供对文件的查看权。我们接允许贵集团在适当的时候，以验证行为准则执行为目的的现场勘查',
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
columns={[
|
|||
|
|
{
|
|||
|
|
title: '序号',
|
|||
|
|
dataIndex: 'id',
|
|||
|
|
width: 60,
|
|||
|
|
align: 'center',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '问题',
|
|||
|
|
dataIndex: 'question',
|
|||
|
|
render: (text) => <div style={{ whiteSpace: 'pre-line' }}>{text}</div>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '回复',
|
|||
|
|
width: 650,
|
|||
|
|
render: (_, record) => (
|
|||
|
|
<Form.Item
|
|||
|
|
name={['survey', `question${record.id}`]}
|
|||
|
|
rules={[{ required: true, message: '请选择答案' }]}
|
|||
|
|
>
|
|||
|
|
<Radio.Group>
|
|||
|
|
<Radio value="yes">是</Radio>
|
|||
|
|
<Radio value="no">否</Radio>
|
|||
|
|
{record.id !== 1 && (
|
|||
|
|
<>
|
|||
|
|
<Radio value="partialYes">尚未完全符合，但将在企业发展中完善</Radio>
|
|||
|
|
<Radio value="noPlan">无任何计划</Radio>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Radio.Group>
|
|||
|
|
</Form.Item>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 供应商反商业贿赂承诺书 */}
|
|||
|
|
<div className="form-section-title">供应商反商业贿赂承诺书</div>
|
|||
|
|
|
|||
|
|
<Row gutter={24}>
|
|||
|
|
<Col span={12}>
|
|||
|
|
<div className="upload-label">
|
|||
|
|
请加盖公司公章后上传
|
|||
|
|
<Button
|
|||
|
|
type="link"
|
|||
|
|
href="/templates/anti-bribery-template.docx"
|
|||
|
|
download="供应商反商业贿赂承诺书模板.docx"
|
|||
|
|
>
|
|||
|
|
下载模版
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
<Form.Item
|
|||
|
|
name="antiBriberyDoc"
|
|||
|
|
rules={[{ required: true, message: '请上传已盖章的反商业贿赂承诺书' }]}
|
|||
|
|
>
|
|||
|
|
<Upload
|
|||
|
|
name="antiBriberyDoc"
|
|||
|
|
action="/api/upload"
|
|||
|
|
listType="text"
|
|||
|
|
maxCount={1}
|
|||
|
|
beforeUpload={(file) => {
|
|||
|
|
const isValidFormat =
|
|||
|
|
file.type === 'application/pdf' ||
|
|||
|
|
file.type === 'application/msword' ||
|
|||
|
|
file.type ===
|
|||
|
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
|||
|
|
if (!isValidFormat) {
|
|||
|
|
message.error('只能上传PDF/DOC/DOCX格式文件!');
|
|||
|
|
}
|
|||
|
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
|||
|
|
if (!isLt10M) {
|
|||
|
|
message.error('文件大小不能超过10MB!');
|
|||
|
|
}
|
|||
|
|
return isValidFormat && isLt10M;
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Button icon={<UploadOutlined />}>上传文件</Button>
|
|||
|
|
</Upload>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
{/* 其他附件 */}
|
|||
|
|
<div className="form-section-title">其他附件</div>
|
|||
|
|
|
|||
|
|
<Row gutter={24}>
|
|||
|
|
<Col span={24}>
|
|||
|
|
<Form.Item name="otherAttachments">
|
|||
|
|
<div className="upload-label">其他附件（非必须上传）</div>
|
|||
|
|
<Upload
|
|||
|
|
name="otherAttachments"
|
|||
|
|
action="/api/upload"
|
|||
|
|
listType="text"
|
|||
|
|
multiple
|
|||
|
|
beforeUpload={(file) => {
|
|||
|
|
const isLt20M = file.size / 1024 / 1024 < 20;
|
|||
|
|
if (!isLt20M) {
|
|||
|
|
message.error('文件大小不能超过20MB!');
|
|||
|
|
}
|
|||
|
|
return isLt20M;
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Button icon={<UploadOutlined />}>上传</Button>
|
|||
|
|
</Upload>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default ForeignForm;
|