供应商

src/components/CompanyInfo/component/InvoiceTab.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { Table } from 'antd';
+import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+import { invoice } from '../services';
+import { useIntl } from 'umi';
+
+interface InvoiceInfo {
+  id: string;
+  taxpayerType: string;
+  taxpayerCode: string;
+  head: string;
+  address: string;
+  phone: string;
+  bank: string;
+  account: string;
+  updateTime: string;
+  certificateUrl: string;
+}
+
+const columns: ColumnsType<InvoiceInfo> = [
+  { title: 'page.workbench.invoice.index', dataIndex: 'index', width: 80, key: 'index', render: (_: any, __: any, index: number) => index + 1 },
+  { title: 'page.workbench.invoice.taxpayerType', dataIndex: 'taxpayerType' },
+  { title: 'page.workbench.invoice.taxpayerCode', dataIndex: 'taxpayerCode' },
+  { title: 'page.workbench.invoice.head', dataIndex: 'head' },
+  { title: 'page.workbench.invoice.address', dataIndex: 'address' },
+  { title: 'page.workbench.invoice.phone', dataIndex: 'phone' },
+  { title: 'page.workbench.invoice.bank', dataIndex: 'bank' },
+  { title: 'page.workbench.invoice.account', dataIndex: 'account' },
+  { title: 'page.workbench.invoice.updateTime', dataIndex: 'updateTime' },
+  {
+    title: 'page.workbench.invoice.qualificationCertificate',
+    width:'180px', 
+    dataIndex: 'qualificationCertificate',
+    render: (val: string) => (val ? <a href={val} target="_blank" rel="noreferrer">查看附件</a> : '-'),
+  },
+];
+
+const InvoiceTab: React.FC = () => {
+  //语言切换
+  const intl = useIntl();
+  //列表渲染数据
+  const [data, setData] = useState<InvoiceInfo[]>([]);
+  //列表加载
+  const [loading, setLoading] = useState(false);
+   //列表分页
+  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
+  //列表方法
+  const getList = async (page = 1, pageSize = 10) => {
+     setLoading(true);
+     try {
+       const { code, data, total } = await invoice({page, pageSize});
+       if (code === 200) {
+         setData(data);
+         setPagination({ current: page, pageSize, total }); 
+       }
+     } finally {
+       setLoading(false);
+     }
+  };
+  //初始化
+  useEffect(() => {
+    getList(); 
+  }, []);
+
+  return (
+    <div style={{ padding: '0 30px 0 0' }}>
+      <Table
+        className="custom-table"
+        rowKey="id"
+        columns={columns.map(column => ({
+          ...column,
+          title: intl.formatMessage({ id: column.title as string }) 
+        }))}
+        dataSource={data}
+        pagination={pagination}
+        loading={loading}
+        onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
+      />
+    </div>
+  );
+};
+
+export default InvoiceTab;