283 lines
9.7 KiB
TypeScript
283 lines
9.7 KiB
TypeScript
// 供应商注册
|
||
import React, { useState, useEffect } from 'react';
|
||
import { useIntl, history } from 'umi';
|
||
import { Form, Button, message, Radio, Checkbox, Modal, Spin } from 'antd';
|
||
import { HomeOutlined } from '@ant-design/icons';
|
||
import DomesticForm from './supplier/DomesticForm';
|
||
import ForeignForm from './supplier/ForeignForm';
|
||
import Person from './supplier/Person';
|
||
import { addAgent, coscoSupplierBaseAdd, fetchSurveyQuestions } from '@/servers/api/register';
|
||
import './register.less';
|
||
|
||
interface supplierWithInputProps {
|
||
supplierWithInput?: Boolean;
|
||
exitId?: string;
|
||
onOk?: () => void;
|
||
}
|
||
|
||
const SupplierRegister: React.FC<supplierWithInputProps> = (props) => {
|
||
const { supplierWithInput = false, exitId = '', onOk } = props;
|
||
const [form] = Form.useForm();
|
||
const intl = useIntl();
|
||
const [supplierType, setSupplierType] = useState<string>('dvs');
|
||
const [loading, setLoading] = useState(false);
|
||
const [countdown, setCountdown] = useState(0);
|
||
const [modalVisible, setModalVisible] = useState(false);
|
||
const [surveyQuestions, setSurveyQuestions] = useState<API.SurveyQuestionResponse>([]);
|
||
const [fetchingQuestions, setFetchingQuestions] = useState(false);
|
||
|
||
// 获取问卷列表
|
||
useEffect(() => {
|
||
//供应商带录入
|
||
if (supplierWithInput) {
|
||
|
||
}
|
||
const fetchQuestions = async () => {
|
||
setFetchingQuestions(true);
|
||
try {
|
||
const response = await fetchSurveyQuestions();
|
||
if (response.success) {
|
||
setSurveyQuestions(response.data || []);
|
||
} else {
|
||
message.error(response.message || '获取问卷列表失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('获取问卷列表出错:', error);
|
||
message.error('获取问卷列表出错');
|
||
} finally {
|
||
setFetchingQuestions(false);
|
||
}
|
||
};
|
||
|
||
fetchQuestions();
|
||
}, []);
|
||
|
||
// 获取短信验证码
|
||
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 onFinishFailed = (errorInfo: any) => {
|
||
console.log('Failed:', errorInfo);
|
||
};
|
||
|
||
const onFinish = async (values: any) => {
|
||
setLoading(true);
|
||
try {
|
||
// 确保供应商类型添加到表单值中
|
||
values.coscoSupplierBase = values.coscoSupplierBase || {};
|
||
values.coscoSupplierBase.supplierType = supplierType;
|
||
|
||
if(supplierType === 'pe') {
|
||
values.coscoSupplierBase.personName = values.coscoSupplierBase.name;
|
||
values.coscoSupplierBase.personPhone = values.coscoSupplierBase.contactPhone;
|
||
values.coscoSupplierSurveyAttachments = [{
|
||
attachmentsType: "accessory",
|
||
fileName: values.attachments.file.response.fileName,
|
||
fileType: values.attachments.file.response.fileType,
|
||
fileSize: values.attachments.file.response.fileSize,
|
||
filePath: values.attachments.file.response.filePath,
|
||
fileUrl: values.attachments.file.response.filePath,
|
||
}]
|
||
}
|
||
console.log('供应商注册信息:', values);
|
||
// 直接调用API supplierWithInput === true 供应商注册代录 否则 注册 accessory
|
||
|
||
const response = await (supplierWithInput ? addAgent(values) : coscoSupplierBaseAdd(values));
|
||
|
||
if (response.success) {
|
||
if (!supplierWithInput) {
|
||
message.success('注册成功，请登录');
|
||
history.push('/login');
|
||
} else {
|
||
message.success(`${exitId ? '修改成功' : '注册成功'}`);
|
||
onOk?.();
|
||
}
|
||
} else {
|
||
message.error(response.message || '注册失败，请重试');
|
||
}
|
||
} catch (error) {
|
||
console.error('注册出错:', error);
|
||
message.error('注册失败，请稍后重试');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSupplierTypeChange = (e: any) => {
|
||
form.resetFields();
|
||
setSupplierType(e.target.value);
|
||
};
|
||
|
||
return (
|
||
<div className={`register-page ${supplierWithInput ? ' on' : ''}`}>
|
||
<div className="register-container large-width">
|
||
{!supplierWithInput && (
|
||
<>
|
||
<div className="back-home">
|
||
<a onClick={() => history.push('/login')}>
|
||
<HomeOutlined /> 返回
|
||
</a>
|
||
</div>
|
||
|
||
<div className="register-title">
|
||
{intl.formatMessage({ id: 'register.supplier.title' })}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
|
||
<Spin spinning={fetchingQuestions}>
|
||
<Form
|
||
form={form}
|
||
name="supplier_register"
|
||
className="register-form"
|
||
onFinish={onFinish}
|
||
onFinishFailed={onFinishFailed}
|
||
layout="horizontal"
|
||
labelAlign="right"
|
||
size="large"
|
||
labelCol={{ span: 7 }}
|
||
wrapperCol={{ span: 17 }}
|
||
>
|
||
<Form.Item label="境内/境外" labelCol={{ span: 2 }} wrapperCol={{ span: 19 }}>
|
||
<Radio.Group onChange={handleSupplierTypeChange} buttonStyle="solid" value={supplierType}>
|
||
<Radio.Button value="dvs">境内企业/机构</Radio.Button>
|
||
<Radio.Button value="ovs">境外企业</Radio.Button>
|
||
{supplierWithInput && (
|
||
<Radio.Button value="pe">个人</Radio.Button>
|
||
)}
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
|
||
|
||
{supplierType === 'dvs' ? (
|
||
<DomesticForm
|
||
form={form}
|
||
countdown={countdown}
|
||
surveyQuestions={surveyQuestions}
|
||
handleGetCaptcha={handleGetCaptcha}
|
||
/>
|
||
) : supplierType === 'ovs' ? (
|
||
<ForeignForm
|
||
form={form}
|
||
countdown={countdown}
|
||
handleGetCaptcha={handleGetCaptcha}
|
||
surveyQuestions={surveyQuestions}
|
||
/>
|
||
) : (
|
||
<Person
|
||
form={form}
|
||
countdown={countdown}
|
||
handleGetCaptcha={handleGetCaptcha}
|
||
surveyQuestions={surveyQuestions}
|
||
/>
|
||
)}
|
||
{supplierType !== 'pe' && (
|
||
<Form.Item
|
||
name="agreement"
|
||
valuePropName="checked"
|
||
wrapperCol={{ span: 24 }}
|
||
rules={[
|
||
{
|
||
validator: (_, value) =>
|
||
value
|
||
? Promise.resolve()
|
||
: Promise.reject(new Error('请阅读并同意注册信息承诺书')),
|
||
},
|
||
]}
|
||
>
|
||
<div style={{ textAlign: 'center' }}>
|
||
<Checkbox>
|
||
我已阅读并同意
|
||
<Button
|
||
type="link"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setModalVisible(true);
|
||
}}
|
||
>
|
||
《注册信息承诺书》
|
||
</Button>
|
||
</Checkbox>
|
||
</div>
|
||
</Form.Item>
|
||
)}
|
||
|
||
|
||
|
||
<Form.Item wrapperCol={{ span: 24 }}>
|
||
<div style={{ textAlign: 'center' }}>
|
||
<Button type="primary" htmlType="submit" loading={loading}>
|
||
{intl.formatMessage({ id: 'register.submit' })}
|
||
</Button>
|
||
</div>
|
||
</Form.Item>
|
||
</Form>
|
||
</Spin>
|
||
</div>
|
||
|
||
{/* 注册信息承诺书弹窗 */}
|
||
<Modal
|
||
title="注册信息承诺书"
|
||
visible={modalVisible}
|
||
onOk={() => {
|
||
console.log('点击了确定按钮');
|
||
setModalVisible(false);
|
||
}}
|
||
onCancel={() => {
|
||
console.log('点击了取消按钮');
|
||
setModalVisible(false);
|
||
}}
|
||
width={700}
|
||
okText="我知道了"
|
||
cancelButtonProps={{ style: { display: 'none' } }}
|
||
destroyOnClose
|
||
// maskClosable={false}
|
||
>
|
||
<div style={{ maxHeight: '60vh', overflow: 'auto' }}>
|
||
<p>尊敬的用户：</p>
|
||
<p>感谢您注册使用我们的平台。请您仔细阅读以下承诺内容：</p>
|
||
<ol>
|
||
<li>
|
||
本人/单位承诺所提供的注册信息真实、准确、完整，不存在虚假记载、误导性陈述或重大遗漏。
|
||
</li>
|
||
<li>本人/单位承诺遵守平台的各项规则和要求，不从事任何违法违规活动。</li>
|
||
<li>
|
||
本人/单位了解并同意，如提供虚假信息或违反平台规则，平台有权终止服务并追究相关责任。
|
||
</li>
|
||
<li>本人/单位承诺妥善保管账号和密码，对账号下的所有操作和行为负责。</li>
|
||
<li>本人/单位同意平台在必要范围内合法使用所提供的信息，用于提供服务和改善用户体验。</li>
|
||
<li>
|
||
本人/单位承诺遵守国家法律法规和行业规范，恪守商业道德，不从事任何损害平台或其他用户利益的行为。
|
||
</li>
|
||
<li>本人/单位承诺所上传的资质文件和证明材料真实有效，并对其真实性和合法性负责。</li>
|
||
<li>本人/单位了解并同意，平台有权根据业务需要对用户资料进行审核，并保留最终解释权。</li>
|
||
</ol>
|
||
<p>特此承诺！</p>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SupplierRegister;
|