83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
|
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;
|