index.tsx
3.2 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
import { Button, Divider, Dropdown, Form, Icon, Menu } from 'antd';
import React, { useState, useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import UmiUIFlag from '@umijs/ui-flag';
import { FormComponentProps } from 'antd/es/form';
import { TableListItem, TableListParams } from './typing.d';
export async function queryRule(params?: TableListParams) {
console.log(params);
return { data: [], success: true };
}
const TableList: React.FC<FormComponentProps> = () => {
const [sorter, setSorter] = useState({});
const actionRef = useRef<ActionType>();
const columns: ProColumns<TableListItem>[] = [
{
title: '规则名称',
dataIndex: 'name',
},
{
title: '描述',
dataIndex: 'desc',
},
{
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
align: 'right',
renderText: (val: string) => `${val} 万`,
},
{
title: '状态',
dataIndex: 'status',
valueEnum: {
0: { text: '关闭', status: 'Default' },
1: { text: '运行中', status: 'Processing' },
2: { text: '已上线', status: 'Success' },
3: { text: '异常', status: 'Error' },
},
},
{
title: '上次调度时间',
dataIndex: 'updatedAt',
sorter: true,
valueType: 'dateTime',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: () => (
<>
<a>配置</a>
<Divider type="vertical" />
<a href="">订阅警报</a>
</>
),
},
];
return (
<ProTable<TableListItem>
headerTitle="查询表格"
actionRef={actionRef}
rowKey="key"
onChange={(_, _filter, _sorter) => {
setSorter(`${_sorter.field}_${_sorter.order}`);
}}
params={{
sorter,
}}
toolBarRender={(action, { selectedRows }) => [
<>
<UmiUIFlag />
</>,
<Button icon="plus" type="primary">
新建
</Button>,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
console.log('remove');
action.reload();
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="approval">批量审批</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <Icon type="down" />
</Button>
</Dropdown>
),
]}
tableAlertRender={(selectedRowKeys, selectedRows) => (
<div>
已选择 <a style={{ fontWeight: 600 }}>{selectedRowKeys.length}</a> 项
<span>
服务调用次数总计 {selectedRows.reduce((pre, item) => pre + item.callNo, 0)} 万
</span>
</div>
)}
request={params => queryRule(params)}
columns={columns}
/>
);
};
export default Form.create<FormComponentProps>()(TableList);