供应商

src/components/CompanyInfo/component/QualificationTab.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { Table } from 'antd';
+import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+import { qualifications } from '../services';
+import { useIntl } from 'umi';
+
+interface Qualification {
+  id: string;
+  certificateType: string;
+  name: string;
+  code: string;
+  typeLevel: string;
+  authority: string;
+  dateTime: string;
+  termOfValidity: string;
+  updateTime: string;
+}
+// 列表头部信息
+const columns: ColumnsType<Qualification> = [
+  { title: 'page.workbench.certificateType', dataIndex: 'certificateType' },
+  { title: 'page.workbench.certificateName', dataIndex: 'name' },
+  { title: 'page.workbench.certificateCode', dataIndex: 'code' },
+  { title: 'page.workbench.typeLevel', dataIndex: 'typeLevel' },
+  { title: 'page.workbench.authority', dataIndex: 'authority' },
+  { title: 'page.workbench.dateTime', dataIndex: 'dateTime' },
+  { title: 'page.workbench.termOfValidity', dataIndex: 'termOfValidity' },
+  { title: 'page.workbench.updateTime', dataIndex: 'updateTime' },
+];
+
+const QualificationTab: React.FC = () => {
+  //语言切换
+  const intl = useIntl();
+  //列表渲染数据
+  const [data, setData] = useState<Qualification[]>([]);
+  //列表加载
+  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 qualifications({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
+        rowKey="id"
+        className="custom-table"
+        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 QualificationTab;