增加上传组件,对接注册字段
This commit is contained in:
linxd
@ -8,7 +8,6 @@ import {
|
||||
Input,
|
||||
Button,
|
||||
Select,
|
||||
Upload,
|
||||
DatePicker,
|
||||
Row,
|
||||
Col,
|
||||
@ -17,9 +16,9 @@ import {
|
||||
Cascader,
|
||||
Empty,
|
||||
} from 'antd';
|
||||
import { UploadOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { message } from 'antd';
|
||||
import { validateFileSize } from '@/utils/utils';
|
||||
import FileUpload from '@/components/FileUpload';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -103,7 +102,7 @@ export const QualificationSection: React.FC<CommonFormSectionsProps> = ({ form }
|
||||
dataIndex: 'certType',
|
||||
render: (_, record) => (
|
||||
<Form.Item
|
||||
name={[record.name, 'certType']}
|
||||
name={[record.name, 'certificateType']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请选择资质证书类型' }]}
|
||||
>
|
||||
@ -122,7 +121,7 @@ export const QualificationSection: React.FC<CommonFormSectionsProps> = ({ form }
|
||||
dataIndex: 'certName',
|
||||
render: (_, record) => (
|
||||
<Form.Item
|
||||
name={[record.name, 'certName']}
|
||||
name={[record.name, 'name']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请输入资质名称' }]}
|
||||
>
|
||||
@ -135,7 +134,7 @@ export const QualificationSection: React.FC<CommonFormSectionsProps> = ({ form }
|
||||
dataIndex: 'certNumber',
|
||||
render: (_, record) => (
|
||||
<Form.Item
|
||||
name={[record.name, 'certNumber']}
|
||||
name={[record.name, 'code']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请输入资质证书编号' }]}
|
||||
>
|
||||
@ -147,7 +146,7 @@ export const QualificationSection: React.FC<CommonFormSectionsProps> = ({ form }
|
||||
title: '资质类别和等级',
|
||||
dataIndex: 'certLevel',
|
||||
render: (_, record) => (
|
||||
<Form.Item name={[record.name, 'certLevel']} noStyle>
|
||||
<Form.Item name={[record.name, 'typeLevel']} noStyle>
|
||||
<Input placeholder="请输入资质类别和等级" />
|
||||
</Form.Item>
|
||||
),
|
||||
@ -157,7 +156,7 @@ export const QualificationSection: React.FC<CommonFormSectionsProps> = ({ form }
|
||||
dataIndex: 'issuingAuthority',
|
||||
render: (_, record) => (
|
||||
<Form.Item
|
||||
name={[record.name, 'issuingAuthority']}
|
||||
name={[record.name, 'authority']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请输入发证机构' }]}
|
||||
>
|
||||
@ -204,15 +203,17 @@ export const QualificationSection: React.FC<CommonFormSectionsProps> = ({ form }
|
||||
dataIndex: 'certFile',
|
||||
render: (_, record) => (
|
||||
<Form.Item
|
||||
name={[record.name, 'certFile']}
|
||||
name={[record.name, 'accessory']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请上传资质证书附件' }]}
|
||||
rules={[{ required: true, message: '请上传资质证书附件' }]}
|
||||
valuePropName="value"
|
||||
>
|
||||
<Upload name="certFile" action="/api/upload" listType="text" maxCount={1}>
|
||||
<Button type="link" size="small">
|
||||
上传
|
||||
</Button>
|
||||
</Upload>
|
||||
<FileUpload
|
||||
maxSize={10}
|
||||
allowedTypes={['pdf', 'jpg', 'jpeg', 'png']}
|
||||
maxCount={1}
|
||||
buttonText="上传"
|
||||
/>
|
||||
</Form.Item>
|
||||
),
|
||||
},
|
||||
@ -268,7 +269,7 @@ export const InvoiceSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
name="invoiceTitle"
|
||||
name={['coscoSupplierInvoice', 'head']}
|
||||
label="开票抬头"
|
||||
rules={[{ required: true, message: '请输入开票抬头' }]}
|
||||
>
|
||||
@ -277,7 +278,7 @@ export const InvoiceSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item
|
||||
name="taxpayerNumber"
|
||||
name={['coscoSupplierInvoice', 'taxpayerCode']}
|
||||
label="纳税人识别号"
|
||||
rules={[{ required: true, message: '请输入纳税人识别号' }]}
|
||||
>
|
||||
@ -285,36 +286,33 @@ export const InvoiceSection: React.FC<CommonFormSectionsProps> = ({ form }) => {
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="invoiceAddress" label="开票地址">
|
||||
<Form.Item name={['coscoSupplierInvoice', 'address']} label="开票地址">
|
||||
<Input placeholder="请输入开票地址" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="invoicePhone" label="开票电话">
|
||||
<Form.Item name={['coscoSupplierInvoice', 'phone']} label="开票电话">
|
||||
<Input placeholder="请输入开票电话" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="invoiceBank" label="开票户行">
|
||||
<Form.Item name={['coscoSupplierInvoice', 'bank']} label="开票户行">
|
||||
<Input placeholder="请输入开票银行" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="bankAccountNumber" label="开票户行账号">
|
||||
<Form.Item name={['coscoSupplierInvoice', 'account']} label="开票户行账号">
|
||||
<Input placeholder="请输入开票户行账号" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Item name="generalTaxpayerCert" label="一般纳税人资格证明">
|
||||
<Upload
|
||||
name="generalTaxpayerCert"
|
||||
action="/api/upload"
|
||||
listType="text"
|
||||
<Form.Item name={['coscoSupplierInvoice', 'qualificationCertificate']} label="一般纳税人资格证明" valuePropName="value">
|
||||
<FileUpload
|
||||
maxSize={10}
|
||||
allowedTypes={['pdf', 'jpg', 'jpeg', 'png']}
|
||||
maxCount={1}
|
||||
beforeUpload={(file) => validateFileSize(file, 10, ['pdf', 'jpg', 'jpeg', 'png'])}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>上传文件</Button>
|
||||
</Upload>
|
||||
buttonText="上传文件"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
@ -356,7 +354,7 @@ export const BankAccountSection: React.FC<CommonFormSectionsProps> = ({ form })
|
||||
dataIndex: 'bankName',
|
||||
render: (_, record) => (
|
||||
<Form.Item
|
||||
name={[record.name, 'bankName']}
|
||||
name={[record.name, 'bank']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请输入开户银行' }]}
|
||||
>
|
||||
@ -382,7 +380,7 @@ export const BankAccountSection: React.FC<CommonFormSectionsProps> = ({ form })
|
||||
dataIndex: 'accountNumber',
|
||||
render: (_, record) => (
|
||||
<Form.Item
|
||||
name={[record.name, 'accountNumber']}
|
||||
name={[record.name, 'account']}
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请输入账号' }]}
|
||||
>
|
||||
@ -452,7 +450,10 @@ export const BankAccountSection: React.FC<CommonFormSectionsProps> = ({ form })
|
||||
*/
|
||||
export const SurveySection: React.FC<SurveySectionProps> = ({ form, surveyQuestions }) => {
|
||||
// 使用API获取的问卷数据，如果没有则显示无数据状态
|
||||
const hasQuestions = surveyQuestions && surveyQuestions.length > 0;
|
||||
const hasQuestions = surveyQuestions && Array.isArray(surveyQuestions) && surveyQuestions.length > 0;
|
||||
|
||||
// 调试日志
|
||||
console.log('调查问卷数据:', surveyQuestions);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -524,22 +525,16 @@ export const SurveySection: React.FC<SurveySectionProps> = ({ form, surveyQuesti
|
||||
</div>
|
||||
|
||||
{hasQuestions ? (
|
||||
<Form.List name="coscoSupplierSurveyQuestionReply">
|
||||
<Form.List name="coscoSupplierSurveyQuestionReply" initialValue={surveyQuestions.map((q: any, index) => ({ surveyQuestionId: q.id, replyValue: '' }))}>
|
||||
{(fields, { add, remove }) => {
|
||||
// 确保有足够的表单项对应每个问题
|
||||
if (fields.length < surveyQuestions.length) {
|
||||
const diff = surveyQuestions.length - fields.length;
|
||||
for (let i = 0; i < diff; i++) {
|
||||
add();
|
||||
}
|
||||
}
|
||||
console.log('Form.List fields:', fields);
|
||||
|
||||
return (
|
||||
<Table
|
||||
pagination={false}
|
||||
bordered
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
rowKey={(record, index) => `survey_question_${index}`}
|
||||
dataSource={surveyQuestions}
|
||||
columns={[
|
||||
{
|
||||
@ -557,30 +552,39 @@ export const SurveySection: React.FC<SurveySectionProps> = ({ form, surveyQuesti
|
||||
{
|
||||
title: '回复',
|
||||
width: 650,
|
||||
render: (_, record, index) => (
|
||||
<>
|
||||
<Form.Item
|
||||
name={[index, 'surveyQuestionId']}
|
||||
initialValue={record.id}
|
||||
hidden
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[index, 'replyValue']}
|
||||
rules={[{ required: true, message: '请选择答案' }]}
|
||||
wrapperCol={{ span: 24 }}
|
||||
>
|
||||
<Radio.Group>
|
||||
{record.coscoSurveyQuestionOptionList?.map((option: any) => (
|
||||
<Radio key={option.id} value={option.opentionValue}>
|
||||
{option.optionName}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
</>
|
||||
),
|
||||
render: (_, record, index) => {
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
name={[index, 'surveyQuestionId']}
|
||||
initialValue={record.id}
|
||||
hidden
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[index, 'replyValue']}
|
||||
rules={[{ required: true, message: `请选择问题${index + 1}的答案` }]}
|
||||
wrapperCol={{ span: 24 }}
|
||||
>
|
||||
{record.coscoSurveyQuestionOptionList && record.coscoSurveyQuestionOptionList.length > 0 ? (
|
||||
<Radio.Group>
|
||||
{record.coscoSurveyQuestionOptionList.map((option: any) => (
|
||||
<Radio
|
||||
key={option.id}
|
||||
value={option.opentionValue}
|
||||
>
|
||||
{option.optionName}
|
||||
</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
) : (
|
||||
<Input placeholder="请输入回答" />
|
||||
)}
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@ -638,43 +642,40 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
|
||||
<Form.Item
|
||||
name={[field.name, 'fileUrl']}
|
||||
rules={[{ required: true, message: '请上传已盖章的反商业贿赂承诺书' }]}
|
||||
valuePropName="value"
|
||||
>
|
||||
<Upload
|
||||
name="file"
|
||||
action="/api/upload"
|
||||
listType="text"
|
||||
<FileUpload
|
||||
maxSize={10}
|
||||
allowedTypes={['pdf', 'doc', 'docx']}
|
||||
maxCount={1}
|
||||
beforeUpload={(file) =>
|
||||
validateFileSize(file, 10, ['pdf', 'doc', 'docx'])
|
||||
}
|
||||
onChange={(info) => {
|
||||
if (info.file.status === 'done') {
|
||||
const response = info.file.response;
|
||||
if (response && response.success) {
|
||||
// 填充文件信息
|
||||
form.setFieldsValue({
|
||||
coscoSupplierSurveyAttachments: [
|
||||
{
|
||||
...form.getFieldValue([
|
||||
'coscoSupplierSurveyAttachments',
|
||||
field.name,
|
||||
]),
|
||||
fileName: info.file.name,
|
||||
fileType: info.file.type,
|
||||
fileSize: info.file.size.toString(),
|
||||
filePath: response.filePath || response.url,
|
||||
},
|
||||
],
|
||||
});
|
||||
message.success(`${info.file.name} 上传成功`);
|
||||
} else {
|
||||
message.error(`${info.file.name} 上传失败`);
|
||||
buttonText="上传文件"
|
||||
onChange={(fileList) => {
|
||||
if (fileList && fileList.length > 0) {
|
||||
const file = fileList[0];
|
||||
if (file.status === 'done' && file.response) {
|
||||
const response = file.response;
|
||||
if (response && response.success) {
|
||||
// 填充文件信息
|
||||
form.setFieldsValue({
|
||||
coscoSupplierSurveyAttachments: [
|
||||
{
|
||||
...form.getFieldValue([
|
||||
'coscoSupplierSurveyAttachments',
|
||||
field.name,
|
||||
]),
|
||||
fileName: file.name,
|
||||
fileType: file.type,
|
||||
fileSize: file.size?.toString(),
|
||||
filePath: response.filePath || response.url,
|
||||
},
|
||||
],
|
||||
});
|
||||
message.success(`${file.name} 上传成功`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>上传文件</Button>
|
||||
</Upload>
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
))}
|
||||
@ -711,42 +712,40 @@ export const AttachmentSection: React.FC<CommonFormSectionsProps> = ({ form }) =
|
||||
)}
|
||||
|
||||
{index > 0 && (
|
||||
<Form.Item name={[field.name, 'fileUrl']}>
|
||||
<Upload
|
||||
name="file"
|
||||
action="/api/upload"
|
||||
listType="text"
|
||||
<Form.Item name={[field.name, 'fileUrl']} valuePropName="value">
|
||||
<FileUpload
|
||||
maxSize={20}
|
||||
allowedTypes={['*']}
|
||||
maxCount={1}
|
||||
beforeUpload={(file) => validateFileSize(file, 20, ['*'])}
|
||||
onChange={(info) => {
|
||||
if (info.file.status === 'done') {
|
||||
const response = info.file.response;
|
||||
if (response && response.success) {
|
||||
// 填充文件信息
|
||||
const fieldValue = form.getFieldValue([
|
||||
'coscoSupplierSurveyAttachments',
|
||||
field.name,
|
||||
]);
|
||||
form.setFieldsValue({
|
||||
coscoSupplierSurveyAttachments: [
|
||||
{
|
||||
...fieldValue,
|
||||
fileName: info.file.name,
|
||||
fileType: info.file.type,
|
||||
fileSize: info.file.size.toString(),
|
||||
filePath: response.filePath || response.url,
|
||||
},
|
||||
],
|
||||
});
|
||||
message.success(`${info.file.name} 上传成功`);
|
||||
} else {
|
||||
message.error(`${info.file.name} 上传失败`);
|
||||
buttonText="上传"
|
||||
onChange={(fileList) => {
|
||||
if (fileList && fileList.length > 0) {
|
||||
const file = fileList[0];
|
||||
if (file.status === 'done' && file.response) {
|
||||
const response = file.response;
|
||||
if (response && response.success) {
|
||||
// 填充文件信息
|
||||
const fieldValue = form.getFieldValue([
|
||||
'coscoSupplierSurveyAttachments',
|
||||
field.name,
|
||||
]);
|
||||
form.setFieldsValue({
|
||||
coscoSupplierSurveyAttachments: [
|
||||
{
|
||||
...fieldValue,
|
||||
fileName: file.name,
|
||||
fileType: file.type,
|
||||
fileSize: file.size?.toString(),
|
||||
filePath: response.filePath || response.url,
|
||||
},
|
||||
],
|
||||
});
|
||||
message.success(`${file.name} 上传成功`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>上传</Button>
|
||||
</Upload>
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user