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

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


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;
    coscoSupplierSurveyAttachments:coscoSupplierSurveyAttachments[];
    [property: string]: any;
}
interface coscoSupplierSurveyAttachments {
    fileUrl: string;
    fileName: string;
}

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

const BaseInfoTab: React.FC<BaseInfoTabProps> = (props) => {
    const userId = sessionStorage.getItem('userId') || '';
  const { viewType = false, record = userId } = props;
    const intl = useIntl();
    const [registerInfo, setRegisterInfo] = useState<Request>();
    const fetchData = async () => {
        const res = await coscoSupplierBase(record);
        if (res.code === 200) {
            setRegisterInfo(res.data);
           
        }
    };
    //增改查
    const [formVisible, setFormVisible] = useState(false);
    const handleAdd = () => {
        setFormVisible(true);
    };
    const handleFormSubmit = () => {
        setFormVisible(false);
        fetchData();
    };

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

    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' }}
            >
                <Descriptions.Item label="姓名">
                    {registerInfo.coscoSupplierBase.personName}
                </Descriptions.Item>
                <Descriptions.Item label="身份证号">
                    {registerInfo.coscoSupplierBase.idCard}
                </Descriptions.Item>
                <Descriptions.Item label="联系电话">
                    {registerInfo.coscoSupplierBase.personPhone}
                </Descriptions.Item>
                <Descriptions.Item label="开户行">
                    {registerInfo.coscoSupplierBase.personBank}
                </Descriptions.Item>
                <Descriptions.Item label="银行账号">
                    {registerInfo.coscoSupplierBase.personAccount}
                </Descriptions.Item>
                <Descriptions.Item label="相关证照">
                    <a href={registerInfo.coscoSupplierSurveyAttachments[0].fileUrl} target="_blank" rel="noreferrer">{registerInfo.coscoSupplierSurveyAttachments[0].fileName}</a>
                </Descriptions.Item>
                 
            </Descriptions>
            <PeBaseInfoFormModal
                visible={formVisible}
                onOk={handleFormSubmit}
                onCancel={() => setFormVisible(false)}
                initialValues={registerInfo.coscoSupplierBase || undefined}
            />
        </div>
    );
};

export default BaseInfoTab;