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

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


export interface Request {
    capital: string;
    contactsEmail: string;
    contactsName: string;
    contactsPhone: string;
    contactsType: string;
    enterpriseType: string;
    id: string;
    idCard: string;
    legalPerson: string;
    licenceAccessory: string;
    licenceDate: string;
    name: string;
    nameEn: string;
    parentCompanyInvestor: string;
    range: string;
    regAddress: string;
    socialCreditCode: string;
    telephone: string;
    workAddress: string;
    [property: string]: any;
}
interface changeDataValueProps {
    id?:string;
    title?:string;
    changeDesc?:string;
    coscoSupplierSurveyAttachments?:coscoSupplierSurveyAttachments[];
}
interface coscoSupplierSurveyAttachments {
    attachmentsType: string;
    fileName: string;
    fileType: string;
    fileSize: string;
    filePath: string;
    fileUrl: string;
}

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

const BaseInfoTab: React.FC<BaseInfoTabProps> = (props) => {
    const { viewType = false, record = '' } = props;
    const intl = useIntl();
    const [registerInfo, setRegisterInfo] = useState<Request>();
    //变更说明与附件
    const [changeDataValue, setChangeDataValue] = useState<changeDataValueProps>();
    const fetchData = async () => {
        const res = await coscoSupplierBase(record);
        if (res.code === 200) {
            setRegisterInfo(res.data);
            setChangeDataValue({
                title: res.data.title,
                changeDesc: res.data.changeDesc,
                coscoSupplierSurveyAttachments: res.data.coscoSupplierSurveyAttachments,
            })
        }
    };
    //增改查
    const [formVisible, setFormVisible] = useState(false);
    const handleAdd = () => {
        setFormVisible(true);
    };
    const handleFormSubmit = () => {
        setFormVisible(false);
        fetchData();
    };

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

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

    return (
        <div style={{ padding: '0 30px 0 0' }}>
         
            { !viewType && (
                <Button type="primary" onClick={handleAdd}>修改</Button>
            )}
            <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>
            <BaseInfoFormModal
                visible={formVisible}
                onOk={handleFormSubmit}
                onCancel={() => setFormVisible(false)}
                initialValues={registerInfo.coscoSupplierBase || undefined}
                changeData={changeDataValue}
            />
        </div>
    );
};

export default BaseInfoTab;