fe_supplier_frontend/src/components/CompanyInfo/index.tsx

import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import { useIntl } from 'umi';
import BaseInfoTab from './component/BaseInfoTab';
import QualificationTab from './component/QualificationTab';
import InvoiceTab from './component/InvoiceTab';
import AttachmentsTab from './component/AttachmentsTab';
import ContactsInfoTab from './component/ContactsInfoTab';
import BankInfoTab from './component/BankInfoTab';
import PeBaseInfoTab from './component/PeBaseInfoTab';

import { coscoSupplierBase } from './services'

interface CompanyInfoProps {
  viewType?: boolean;
  record?: string;
}

const { TabPane } = Tabs;

const CompanyInfo: React.FC<CompanyInfoProps> = (props) => {
  const userId = sessionStorage.getItem('userId') || '';
  const { viewType = false, record = userId } = props;
  const intl = useIntl();
  // 切换tab
  const [subTab, setSubTab] = useState<string>('');

  useEffect(() => {
    coscoSupplierBase(record).then((res) => {
      if (res.code === 200) {
        if (res.data.coscoSupplierBase.supplierType === 'pe') {
          setSubTab('pe')
        } else {
          setSubTab('base')
        }
      }
    })

  }, [record])

  return (
    <Tabs activeKey={subTab} onChange={setSubTab}>
      {subTab === 'pe' ? (
        <TabPane tab={intl.formatMessage({ id: 'page.workbench.base' })} key="pe">
          <PeBaseInfoTab viewType={viewType} record={record} />
        </TabPane>
      ) : subTab ?(
        <>
          <TabPane tab={intl.formatMessage({ id: 'page.workbench.base' })} key="base">
            <BaseInfoTab viewType={viewType} record={record} />
          </TabPane>
          <TabPane tab={intl.formatMessage({ id: 'page.workbench.qualification' })} key="qualification">
            <QualificationTab viewType={viewType} record={record} />
          </TabPane>
          <TabPane tab={intl.formatMessage({ id: 'page.workbench.invoice' })} key="invoice">
            <InvoiceTab viewType={viewType} record={record} />
          </TabPane>
          <TabPane tab={intl.formatMessage({ id: 'page.workbench.bank' })} key="bank">
            <BankInfoTab viewType={viewType} record={record} />
          </TabPane>
          <TabPane tab={intl.formatMessage({ id: 'page.workbench.attachments' })} key="attachments">
            <AttachmentsTab viewType={viewType} record={record} />
          </TabPane>
          <TabPane tab={intl.formatMessage({ id: 'page.workbench.contacts' })} key="contacts">
            <ContactsInfoTab viewType={viewType} record={record} />
          </TabPane>
        </>
      ):(
        <div></div>
      )}

    </Tabs>
  );
};

export default CompanyInfo;