供应商

src/components/GlobalModal/index.tsx

@@ -0,0 +1,97 @@
+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);