75 lines
2.3 KiB
TypeScript
75 lines
2.3 KiB
TypeScript
|
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;
|