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

import React, { useEffect, useState } from 'react';
import { Table } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import { coscoSupplierBase } from '../services';
import { useIntl } from 'umi';

// 联系人信息接口
interface Contact {
  id: string;
  name: string;
  department: string;
  position: string;
  mobile: string;
  phone: string;
  email: string;
  updateTime: string;
}
interface Props {
  viewType?: boolean;
  record?: string;
}
const ContactsInfoTab: React.FC<Props> = (props) => {
  const userId = sessionStorage.getItem('userId') || '';
  const { viewType = false, record = userId } = props;
  const intl = useIntl();
  const [data, setData] = useState<Contact[]>([]);
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [loading, setLoading] = useState(false);

  const fetchContacts = async (page: number = 1, pageSize: number = 10) => {

    coscoSupplierBase(record).then((res) => {
      if(res.code == 200) {
        setData([res.data.coscoSupplierBase])
      }
    })
  };

  useEffect(() => {
    fetchContacts();
  }, []);

  const handleTableChange = (pagination: TablePaginationConfig) => {
    fetchContacts(pagination.current!, pagination.pageSize!);
  };

  const columns: ColumnsType<Contact> = [
    {
      title: intl.formatMessage({ id: 'page.workbench.contacts.index' }),
      dataIndex: 'index',
      key: 'index',
      width: 80,
      align: 'center',
      render: (_: any, __: any, index: number) =>
        (pagination.current! - 1) * pagination.pageSize! + index + 1,
    },
    {
      title: '联系人',
      dataIndex: 'contactsName',
      key: 'contactsName',
    },
    {
      title: '手机号',
      dataIndex: 'contactsPhone',
      key: 'contactsPhone',
    },
    {
      title: '邮箱',
      dataIndex: 'contactsEmail',
      key: 'contactsEmail',
    },
  ];

  return (
    <div style={{ padding: '0 30px 0 0' }}>
      <Table
        className="custom-table"
        columns={columns}
        dataSource={data}
        rowKey="id"
        loading={loading}
        pagination={pagination}
        onChange={handleTableChange}
        bordered
      />
    </div>
  );
};

export default ContactsInfoTab;