320 lines
12 KiB
TypeScript
320 lines
12 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Modal, Form, message, Input, Upload, Button } from 'antd';
|
|
import type { UploadProps } from 'antd';
|
|
import { UploadOutlined } from '@ant-design/icons';
|
|
import DomesticForm from './DomesticForm';
|
|
import ForeignForm from './ForeignForm';
|
|
import { uploadFile, updateSupplierBase } from '../services'
|
|
|
|
interface Props {
|
|
visible: boolean;
|
|
onOk: () => void;
|
|
onCancel: () => void;
|
|
initialValues?: coscoSupplierBases;
|
|
changeData?: changeDataValueProps;
|
|
|
|
}
|
|
|
|
// 基础信息
|
|
interface coscoSupplierBases {
|
|
id?: string;
|
|
supplierType?: string;
|
|
name?: string;
|
|
nameEn?: string;
|
|
range?: string;
|
|
workAddress?: string;
|
|
parentCompanyInvestor?: string;
|
|
legalPerson?: string;
|
|
capital?: string;
|
|
contactsName?: string;
|
|
contactsPhone?: string;
|
|
contactsEmail?: string;
|
|
nation?: string;
|
|
vat?: string;
|
|
currency?: string;
|
|
licenceAccessory?: string;
|
|
licenceDate?: string;
|
|
enterpriseType?: string;
|
|
socialCreditCode?: string;
|
|
regAddress?: string;
|
|
idCard?: string;
|
|
contactsType?: string;
|
|
telephone?: string;
|
|
}
|
|
|
|
//提交全部数据
|
|
interface updateSupplierBases {
|
|
title?: string;
|
|
changeDesc?: string;
|
|
coscoSupplierSurveyAttachments?: coscoSupplierSurveyAttachments[];
|
|
coscoSupplierBase: coscoSupplierBases;
|
|
attachment?: {
|
|
uid: string;
|
|
name: string;
|
|
url: string;
|
|
status: string;
|
|
}[];
|
|
}
|
|
|
|
//变更内容
|
|
interface changeDataValueProps {
|
|
id?: string;
|
|
title?: string;
|
|
changeDesc?: string;
|
|
coscoSupplierSurveyAttachments?: coscoSupplierSurveyAttachments[];
|
|
}
|
|
interface coscoSupplierSurveyAttachments {
|
|
attachmentsType: string;
|
|
fileName: string;
|
|
fileType: string;
|
|
fileSize: string;
|
|
filePath: string;
|
|
fileUrl: string;
|
|
}
|
|
//变更要求
|
|
interface changeComparisonDataProps {
|
|
name?: string;
|
|
range?: string;
|
|
}
|
|
const BaseInfoFormModal: React.FC<Props> = ({
|
|
visible,
|
|
onOk,
|
|
onCancel,
|
|
initialValues,
|
|
changeData
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
//短信
|
|
const [countdown, setCountdown] = useState(0);
|
|
//变更企业名称与 经营范围 时需要 添加 名称 变更说明与附件上传
|
|
const [changeComparisonData, setChangeComparisonData] = useState<changeComparisonDataProps>();
|
|
//查看数据
|
|
const [viewData, setViewData] = useState<updateSupplierBases>();
|
|
|
|
//数据初始化
|
|
useEffect(() => {
|
|
if (visible && initialValues) {
|
|
form.setFieldsValue({
|
|
...changeData,
|
|
coscoSupplierBase: {
|
|
...initialValues,
|
|
licenceAccessoryD: initialValues?.licenceAccessory
|
|
? [{
|
|
uid: '-1',
|
|
name: '营业执照',
|
|
status: 'done',
|
|
url: initialValues.licenceAccessory,
|
|
thumbUrl: initialValues.licenceAccessory,
|
|
}]
|
|
: [],
|
|
},
|
|
attachment: changeData?.coscoSupplierSurveyAttachments
|
|
? [{
|
|
uid: '-1',
|
|
name: changeData?.coscoSupplierSurveyAttachments[0].fileName,
|
|
url: changeData?.coscoSupplierSurveyAttachments[0].fileUrl,
|
|
status: 'done',
|
|
response: {
|
|
fileName: changeData?.coscoSupplierSurveyAttachments[0].fileName,
|
|
fileType: changeData?.coscoSupplierSurveyAttachments[0].fileType,
|
|
fileSize: changeData?.coscoSupplierSurveyAttachments[0].fileSize,
|
|
filePath: changeData?.coscoSupplierSurveyAttachments[0].filePath,
|
|
fileUrl: changeData?.coscoSupplierSurveyAttachments[0].fileUrl,
|
|
attachmentsType: "change",
|
|
}
|
|
}]
|
|
: [],
|
|
|
|
});
|
|
setChangeComparisonData({
|
|
name: initialValues.name,
|
|
range: initialValues.range,
|
|
})
|
|
setViewData({
|
|
...changeData,
|
|
coscoSupplierBase: {
|
|
...initialValues,
|
|
}
|
|
});
|
|
} else {
|
|
form.resetFields();
|
|
}
|
|
}, [visible, initialValues, changeData]);
|
|
|
|
|
|
|
|
// 获取短信验证码
|
|
const handleGetCaptcha = () => {
|
|
form
|
|
.validateFields(['contactPhone'])
|
|
.then((values) => {
|
|
message.success(`验证码已发送至 ${values.contactPhone}`);
|
|
let count = 60;
|
|
setCountdown(count);
|
|
|
|
const timer = setInterval(() => {
|
|
count--;
|
|
setCountdown(count);
|
|
if (count === 0) {
|
|
clearInterval(timer);
|
|
}
|
|
}, 1000);
|
|
})
|
|
.catch((errorInfo) => {
|
|
message.error('请先输入正确的手机号');
|
|
});
|
|
|
|
};
|
|
|
|
//确认提交
|
|
const handleFinish = async () => {
|
|
Modal.confirm({
|
|
title: '是否确认个人信息变更？',
|
|
onOk: async () => {
|
|
const values = await form.validateFields();
|
|
const payload = {
|
|
...values,
|
|
};
|
|
//values.attachment 有附件就处理
|
|
if (values.attachment) {
|
|
const file = values.attachment?.[0].response;
|
|
payload.coscoSupplierSurveyAttachments = [
|
|
{
|
|
attachmentsType: file.attachmentsType,
|
|
fileName: file.fileName,
|
|
fileType: file.fileType,
|
|
fileSize: file.fileSize,
|
|
filePath: file.filePath,
|
|
fileUrl: file.fileUrl,
|
|
}
|
|
];
|
|
}
|
|
// 处理营业执照回显字段转换问题
|
|
if (payload.coscoSupplierBase.supplierType === 'dvs') {
|
|
let licenceAccessoryD = payload.coscoSupplierBase.licenceAccessoryD;
|
|
if (licenceAccessoryD[0].response) {
|
|
payload.coscoSupplierBase.licenceAccessory = payload.coscoSupplierBase.licenceAccessoryD[0].response.url
|
|
} else {
|
|
payload.coscoSupplierBase.licenceAccessory = payload.coscoSupplierBase.licenceAccessoryD[0].url
|
|
}
|
|
delete payload.coscoSupplierBase.licenceAccessoryD
|
|
}
|
|
const res = await updateSupplierBase(payload);
|
|
if (res.code === 200) {
|
|
message.success('修改成功');
|
|
onOk();
|
|
}
|
|
},
|
|
});
|
|
|
|
};
|
|
//上传接口
|
|
const uploadProps: UploadProps = {
|
|
name: 'file',
|
|
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 = {
|
|
uid: res.fileSize,
|
|
name: res.fileName,
|
|
status: 'done',
|
|
url: res.url,
|
|
fileName: res.fileName,
|
|
fileType: res.fileType,
|
|
fileSize: res.fileSize,
|
|
filePath: res.filePath,
|
|
fileUrl: res.url,
|
|
attachmentsType: "change",
|
|
};
|
|
onSuccess?.(uploadedFile, new XMLHttpRequest())
|
|
message.success('上传成功');
|
|
} catch (err: any) {
|
|
onError?.(err);
|
|
message.error(err.message || '上传失败');
|
|
}
|
|
}
|
|
};
|
|
return (
|
|
<Modal
|
|
title="企业基本信息"
|
|
visible={visible}
|
|
onCancel={onCancel}
|
|
onOk={handleFinish}
|
|
destroyOnClose
|
|
width={800}
|
|
>
|
|
<Form form={form} labelCol={{ flex: '140px' }} wrapperCol={{ flex: 1 }}>
|
|
{viewData?.coscoSupplierBase?.supplierType === 'dvs' ? (
|
|
<DomesticForm
|
|
form={form}
|
|
countdown={countdown}
|
|
handleGetCaptcha={handleGetCaptcha}
|
|
/>
|
|
) : (
|
|
<ForeignForm
|
|
form={form}
|
|
countdown={countdown}
|
|
handleGetCaptcha={handleGetCaptcha}
|
|
/>
|
|
)}
|
|
<Form.Item shouldUpdate>
|
|
{() => {
|
|
// 每次Form数据变化都会重新render
|
|
const currentName = form.getFieldValue(['coscoSupplierBase', 'name']);
|
|
const currentRange = form.getFieldValue(['coscoSupplierBase', 'range']);
|
|
const shouldShowPanel =
|
|
(changeComparisonData?.name !== undefined && currentName !== changeComparisonData.name) ||
|
|
(changeComparisonData?.range !== undefined && currentRange !== changeComparisonData.range);
|
|
|
|
if (!shouldShowPanel) return null;
|
|
|
|
return (
|
|
<>
|
|
<Form.Item
|
|
name='title'
|
|
label="名称"
|
|
labelCol={{ flex: '140px' }}
|
|
rules={[{ required: true, message: '请输入名称' }]}
|
|
>
|
|
<Input placeholder="请输入名称" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name='changeDesc'
|
|
label="变更说明"
|
|
labelCol={{ flex: '140px' }}
|
|
rules={[{ required: true, message: '请输入变更说明' }]}
|
|
>
|
|
<Input.TextArea placeholder="请输入变更说明" rows={2} maxLength={200} showCount />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="attachment"
|
|
label="附件"
|
|
labelCol={{ flex: '140px' }}
|
|
valuePropName="fileList"
|
|
getValueFromEvent={(e) => Array.isArray(e) ? e : e?.fileList}
|
|
>
|
|
<Upload {...uploadProps} maxCount={1}>
|
|
<Button icon={<UploadOutlined />}>上传</Button>
|
|
</Upload>
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
</Modal >
|
|
);
|
|
};
|
|
|
|
export default BaseInfoFormModal;
|