fe_supplier_frontend/src/components/CompanyInfo/component/BaseInfoTab.tsx

import React, { useEffect, useState } from 'react';
import { Descriptions } from 'antd';
import { coscoSupplier } from '../services';
import { useIntl } from 'umi';

const BaseInfoTab: React.FC = () => {
    const intl = useIntl();
    const [registerInfo, setRegisterInfo] = useState<any>({ base: {} });

    const fetchData = async () => {
        const res = await coscoSupplier({}); 
        if (res.code === 200) {
            setRegisterInfo(res.data);
        }
    };

    useEffect(() => {
        //供应商信息
        fetchData()
    }, []);

    if (!registerInfo?.base) return <div>{intl.formatMessage({ id: 'component.globalModal.loading' })}...</div>;

    return (
        <div style={{ padding: '0 30px 0 0' }}>
            <Descriptions
                bordered
                column={2}
                size="middle"
                style={{ background: '#fff', padding: '16px 0 0' }}
            >
                {registerInfo.base.supplierType === 'dvs' && (
                    <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.supplierIdentityType' })}>
                        {intl.formatMessage({ id: 'component.globalModal.domesticEnterprise' })}
                    </Descriptions.Item>
                )}
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.enterpriseName' })}>
                    {registerInfo.base.name}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.enterpriseEnglishName' })}>
                    {registerInfo.base.nameEn}
                </Descriptions.Item>
                {registerInfo.base.supplierType !== 'dvs' && (
                    <>
                        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignCountryRegion' })}>
                            {registerInfo.base.nation}
                        </Descriptions.Item>
                        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignVAT' })}>
                            {registerInfo.base.vat}
                        </Descriptions.Item>
                        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignTaxpayerId' })}>
                            {registerInfo.base.taxpayerId}
                        </Descriptions.Item>
                        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignCurrency' })}>
                            {registerInfo.base.currency}
                        </Descriptions.Item>
                    </>
                )}
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.creditCode' })}>
                    {registerInfo.base.socialCreditCode}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.businessScope' })}>
                    {registerInfo.base.range}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.registerAddress' })}>
                    {registerInfo.base.regAddress}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.officeAddress' })}>
                    {registerInfo.base.workAddress}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.parentCompanyInfo' })}>
                    {registerInfo.base.parentCompanyInvestor}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.legalPerson' })}>
                    {registerInfo.base.legalPerson}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.idCardNumber' })}>
                    {registerInfo.base.idCard}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.registeredCapital' })}>
                    {registerInfo.base.capital}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.supplierType' })}>
                    {registerInfo.base.enterpriseType}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactName' })}>
                    {registerInfo.base.contactsName}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactMobile' })}>
                    {registerInfo.base.contactsPhone}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactIdType' })}>
                    {registerInfo.base.contactsType}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactEmail' })}>
                    {registerInfo.base.contactsEmail}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactPhone' })}>
                    {registerInfo.base.telephone}
                </Descriptions.Item>
            </Descriptions>
        </div>
    );
};

export default BaseInfoTab;