index.tsx
3.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { INVOICE_COLUMNS, InvoiceItem } from '@/pages/Invoice/constant';
import { postServiceInvoiceQueryInvoice } from '@/services';
import { getUserInfo } from '@/utils/user';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import {
ActionType,
PageContainer,
ProTable,
} from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Avatar, Button, Dropdown, Tag } from 'antd';
import { useRef } from 'react';
const userInfo = getUserInfo();
const InvoicePage = () => {
const actionRef = useRef<ActionType>();
return (
<>
<PageContainer
header={{
title: '发票管理',
extra: [
<Avatar key="0" style={{ verticalAlign: 'middle' }} size="large">
{userInfo?.username}
</Avatar>,
<Tag key="nickName">{userInfo?.nickName}</Tag>,
<Dropdown
key="dropdown"
trigger={['click']}
menu={{
items: [
{
label: '退出登录',
key: '1',
onClick: () => {
localStorage.removeItem('token');
history.push('/login');
},
},
// {
// label: '修改密码',
// key: '2',
// },
],
}}
>
<Button key="4" style={{ padding: '0 8px' }}>
<EllipsisOutlined />
</Button>
</Dropdown>,
],
}}
>
<ProTable<InvoiceItem>
scroll={{ x: true }}
columns={INVOICE_COLUMNS}
actionRef={actionRef}
cardBordered
request={async (params) => {
const res = await postServiceInvoiceQueryInvoice({
data: { ...params },
});
if (res) {
return {
data: res?.data?.data || [],
total: res?.data?.total || 0,
};
}
}}
columnsState={{
persistenceKey: 'pro-table-singe-demos',
persistenceType: 'localStorage',
defaultValue: {
option: { fixed: 'right', disable: true },
},
onChange(value) {
console.log('value: ', value);
},
}}
rowKey="id"
search={{
labelWidth: 'auto',
}}
options={{
setting: {
listsHeight: 400,
},
}}
form={{
// 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
syncToUrl: (values, type) => {
if (type === 'get') {
return {
...values,
created_at: [values.startTime, values.endTime],
};
}
return values;
},
}}
pagination={{
pageSize: 5,
onChange: (page) => console.log(page),
}}
dateFormatter="string"
headerTitle="发票列表"
toolBarRender={() => [
<Button
key="button"
icon={<PlusOutlined />}
onClick={() => {
actionRef.current?.reload();
}}
type="primary"
>
新建
</Button>,
]}
/>
</PageContainer>
</>
);
};
export default InvoicePage;