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

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



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

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

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

    if (!registerInfo?.coscoSupplierBase) 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.coscoSupplierBase.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.coscoSupplierBase.name}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.enterpriseEnglishName' })}>
                    {registerInfo.coscoSupplierBase.nameEn}
                </Descriptions.Item>
                {registerInfo.coscoSupplierBase.supplierType !== 'dvs' && (
                    <>
                        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignCountryRegion' })}>
                            {registerInfo.coscoSupplierBase.nation}
                        </Descriptions.Item>
                        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignVAT' })}>
                            {registerInfo.coscoSupplierBase.vat}
                        </Descriptions.Item>
                        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignTaxpayerId' })}>
                            {registerInfo.coscoSupplierBase.taxpayerId}
                        </Descriptions.Item>
                        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignCurrency' })}>
                            {registerInfo.coscoSupplierBase.currency}
                        </Descriptions.Item>
                    </>
                )}
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.creditCode' })}>
                    {registerInfo.coscoSupplierBase.socialCreditCode}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.businessScope' })}>
                    {registerInfo.coscoSupplierBase.range}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.registerAddress' })}>
                    {registerInfo.coscoSupplierBase.regAddress}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.officeAddress' })}>
                    {registerInfo.coscoSupplierBase.workAddress}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.parentCompanyInfo' })}>
                    {registerInfo.coscoSupplierBase.parentCompanyInvestor}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.legalPerson' })}>
                    {registerInfo.coscoSupplierBase.legalPerson}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.idCardNumber' })}>
                    {registerInfo.coscoSupplierBase.idCard}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.registeredCapital' })}>
                    {registerInfo.coscoSupplierBase.capital}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.supplierType' })}>
                    {registerInfo.coscoSupplierBase.enterpriseType}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactName' })}>
                    {registerInfo.coscoSupplierBase.contactsName}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactMobile' })}>
                    {registerInfo.coscoSupplierBase.contactsPhone}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactIdType' })}>
                    {registerInfo.coscoSupplierBase.contactsType}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactEmail' })}>
                    {registerInfo.coscoSupplierBase.contactsEmail}
                </Descriptions.Item>
                <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactPhone' })}>
                    {registerInfo.coscoSupplierBase.telephone}
                </Descriptions.Item>
            </Descriptions>
        </div>
    );
};

export default BaseInfoTab;