98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import { connect, useIntl } from 'umi';
|
||
|
|
import { Modal, Button, Space, Tag } from 'antd';
|
||
|
|
import { coscoSupplier } 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 isBlacklisted = true;
|
||
|
|
//灰名单显示状态
|
||
|
|
const isGreylisted = true;
|
||
|
|
//获取供应商信息
|
||
|
|
const fetchRegisterInfo = () => {
|
||
|
|
//供应商信息
|
||
|
|
coscoSupplier({id}).then((res) => {
|
||
|
|
let { code, data } = res;
|
||
|
|
if (code == 200) {
|
||
|
|
setRegisterInfo(data);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
};
|
||
|
|
//切换 供应商信息 准入品类/品类库 天眼查工商信息 合规风险列表 页面标签
|
||
|
|
const handleSwitch = (type: typeof modalType) => {
|
||
|
|
setModalType(type);
|
||
|
|
};
|
||
|
|
// 渲染页面 供应商信息 准入品类/品类库 天眼查工商信息 合规风险列表 页面标签
|
||
|
|
const renderContent = () => {
|
||
|
|
if (modalType === 'register') {
|
||
|
|
//供应商页面
|
||
|
|
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={() => dispatch({ type: 'globalModal/hide' })}
|
||
|
|
footer={null}
|
||
|
|
title={
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
|
||
|
|
<span>{intl.formatMessage({id: 'component.globalModal.title' })}</span>
|
||
|
|
<span style={{ marginLeft: '10px' }}>
|
||
|
|
{isBlacklisted && <Tag color="red">{intl.formatMessage({id: 'component.globalModal.blacklist' })}</Tag>}
|
||
|
|
{isGreylisted && <Tag color="gray">{intl.formatMessage({id: 'component.globalModal.GreyList' })}</Tag>}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<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>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default connect(({ globalModal }: any) => ({
|
||
|
|
visible: globalModal.visible,
|
||
|
|
id: globalModal.id,
|
||
|
|
}))(GlobalModal);
|