122 lines
4.8 KiB
TypeScript
122 lines
4.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { connect, useIntl } from 'umi';
|
|
import { Modal, Button, Space, Descriptions } from 'antd';
|
|
import { coscoSupplierBase } from './services'
|
|
import SupplierRegisterInfo from './components/SupplierRegisterInfo';
|
|
import AccessCategoryTable from './components/AccessCategoryTable';
|
|
import TianyanchaInfo from './components/TianyanchaInfo';
|
|
import RiskList from './components/RiskList';
|
|
|
|
// 弹出主体
|
|
const GlobalModal = ({ visible, id, dispatch }: any) => {
|
|
const intl = useIntl();
|
|
|
|
// 页面显示具体tab类型
|
|
const [modalType, setModalType] = useState<'register' | 'category' | 'tianyancha' | 'risk'>('register');
|
|
//供应商信息数据
|
|
const [registerInfo, setRegisterInfo] = useState<any>(null);
|
|
//获取供应商信息
|
|
const fetchRegisterInfo = () => {
|
|
//供应商信息
|
|
|
|
coscoSupplierBase(id).then((res) => {
|
|
let { code, data } = res;
|
|
if (code == 200) {
|
|
setRegisterInfo(data);
|
|
}
|
|
})
|
|
};
|
|
//切换 供应商信息 准入品类/品类库 天眼查工商信息 合规风险列表 页面标签
|
|
const handleSwitch = (type: typeof modalType) => {
|
|
setModalType(type);
|
|
};
|
|
// 渲染页面 供应商信息 准入品类/品类库 天眼查工商信息 合规风险列表 页面标签
|
|
const renderContent = () => {
|
|
if (modalType === 'register' && registerInfo?.coscoSupplierBase) {
|
|
//供应商页面
|
|
return <SupplierRegisterInfo registerInfo={registerInfo} />;
|
|
}
|
|
if (modalType === 'category') {
|
|
//准入品类/品类库
|
|
return <AccessCategoryTable id={id} />
|
|
}
|
|
if (modalType === 'tianyancha') {
|
|
//天眼查信息
|
|
return <TianyanchaInfo id={id} />;
|
|
}
|
|
if (modalType === 'risk') {
|
|
//合规风险列表
|
|
return <RiskList id={id} />;
|
|
}
|
|
return null;
|
|
};
|
|
// 初始化
|
|
useEffect(() => {
|
|
if (visible) {
|
|
setModalType('register');
|
|
fetchRegisterInfo();
|
|
}
|
|
}, [visible, id]);
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
zIndex={1100}
|
|
width="90%"
|
|
onCancel={() => {
|
|
setRegisterInfo(null); // ← 清空数据
|
|
dispatch({ type: 'globalModal/hide' });
|
|
}}
|
|
footer={null}
|
|
title={
|
|
<div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
|
|
<span>{intl.formatMessage({ id: 'component.globalModal.title' })}</span>
|
|
</div>
|
|
}
|
|
>
|
|
{(registerInfo?.coscoSupplierBase.supplierType !== 'pe' && registerInfo ) ?
|
|
(
|
|
<div>
|
|
<Space style={{ marginBottom: 16 }}>
|
|
<Button type={modalType === 'register' ? 'primary' : 'default'} onClick={() => handleSwitch('register')}>{intl.formatMessage({ id: 'component.globalModal.register' })}</Button>
|
|
<Button type={modalType === 'category' ? 'primary' : 'default'} onClick={() => handleSwitch('category')}>{intl.formatMessage({ id: 'component.globalModal.category' })}</Button>
|
|
<Button type={modalType === 'tianyancha' ? 'primary' : 'default'} onClick={() => handleSwitch('tianyancha')}>{intl.formatMessage({ id: 'component.globalModal.tianyancha' })}</Button>
|
|
<Button type={modalType === 'risk' ? 'primary' : 'default'} onClick={() => handleSwitch('risk')}>{intl.formatMessage({ id: 'component.globalModal.ComplianceRisk' })}</Button>
|
|
</Space>
|
|
<div style={{ height: '600px', overflowY: 'auto' }}>
|
|
{renderContent()}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Descriptions bordered column={3} style={{ marginBottom: 24 }} title={intl.formatMessage({ id: 'component.globalModal.supplierRegisterInfo' })}>
|
|
<Descriptions.Item label="姓名" labelStyle={{ width: '140px' }}>
|
|
<span>{registerInfo?.coscoSupplierBase.personName}</span>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="身份证号" labelStyle={{ width: '140px' }}>
|
|
<span>{registerInfo?.coscoSupplierBase.idCard}</span>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="联系电话" labelStyle={{ width: '140px' }}>
|
|
<span>{registerInfo?.coscoSupplierBase.personPhone}</span>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="开户行">
|
|
<span>{registerInfo?.coscoSupplierBase.personBank}</span>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="银行账号">
|
|
<span>{registerInfo?.coscoSupplierBase.personAccount}</span>
|
|
</Descriptions.Item>
|
|
{/* <Descriptions.Item label="相关证照">
|
|
<span>{registerInfo?.coscoSupplierBase.accessory}</span>
|
|
</Descriptions.Item> */}
|
|
</Descriptions>
|
|
)
|
|
}
|
|
|
|
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default connect(({ globalModal }: any) => ({
|
|
visible: globalModal.visible,
|
|
id: globalModal.id,
|
|
}))(GlobalModal);
|