|
|
@@ -1,388 +0,0 @@
|
|
1
|
|
-import { PlusOutlined } from '@ant-design/icons';
|
|
2
|
|
-import { Button, message, Input, Drawer } from 'antd';
|
|
3
|
|
-import React, { useState, useRef } from 'react';
|
|
4
|
|
-// import { useIntl, FormattedMessage } from 'umi';
|
|
5
|
|
-import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
|
|
6
|
|
-import ProTable from '@ant-design/pro-table';
|
|
7
|
|
-import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
|
|
8
|
|
-import ProDescriptions from '@ant-design/pro-descriptions';
|
|
9
|
|
-import UpdateForm from './components/UpdateForm';
|
|
10
|
|
-import { queryRule, updateRule, addRule, removeRule } from './service';
|
|
11
|
|
-/**
|
|
12
|
|
- * 添加节点
|
|
13
|
|
- *
|
|
14
|
|
- * @param fields
|
|
15
|
|
- */
|
|
16
|
|
-
|
|
17
|
|
-const handleAdd = async (fields) => {
|
|
18
|
|
- const hide = message.loading('正在添加');
|
|
19
|
|
-
|
|
20
|
|
- try {
|
|
21
|
|
- await addRule({ ...fields });
|
|
22
|
|
- hide();
|
|
23
|
|
- message.success('添加成功');
|
|
24
|
|
- return true;
|
|
25
|
|
- } catch (error) {
|
|
26
|
|
- hide();
|
|
27
|
|
- message.error('添加失败请重试！');
|
|
28
|
|
- return false;
|
|
29
|
|
- }
|
|
30
|
|
-};
|
|
31
|
|
-/**
|
|
32
|
|
- * 更新节点
|
|
33
|
|
- *
|
|
34
|
|
- * @param fields
|
|
35
|
|
- */
|
|
36
|
|
-
|
|
37
|
|
-const handleUpdate = async (fields) => {
|
|
38
|
|
- const hide = message.loading('正在配置');
|
|
39
|
|
-
|
|
40
|
|
- try {
|
|
41
|
|
- await updateRule({
|
|
42
|
|
- name: fields.name,
|
|
43
|
|
- desc: fields.desc,
|
|
44
|
|
- key: fields.key,
|
|
45
|
|
- });
|
|
46
|
|
- hide();
|
|
47
|
|
- message.success('配置成功');
|
|
48
|
|
- return true;
|
|
49
|
|
- } catch (error) {
|
|
50
|
|
- hide();
|
|
51
|
|
- message.error('配置失败请重试！');
|
|
52
|
|
- return false;
|
|
53
|
|
- }
|
|
54
|
|
-};
|
|
55
|
|
-/**
|
|
56
|
|
- * 删除节点
|
|
57
|
|
- *
|
|
58
|
|
- * @param selectedRows
|
|
59
|
|
- */
|
|
60
|
|
-
|
|
61
|
|
-const handleRemove = async (selectedRows) => {
|
|
62
|
|
- const hide = message.loading('正在删除');
|
|
63
|
|
- if (!selectedRows) return true;
|
|
64
|
|
-
|
|
65
|
|
- try {
|
|
66
|
|
- await removeRule({
|
|
67
|
|
- key: selectedRows.map((row) => row.key),
|
|
68
|
|
- });
|
|
69
|
|
- hide();
|
|
70
|
|
- message.success('删除成功，即将刷新');
|
|
71
|
|
- return true;
|
|
72
|
|
- } catch (error) {
|
|
73
|
|
- hide();
|
|
74
|
|
- message.error('删除失败，请重试');
|
|
75
|
|
- return false;
|
|
76
|
|
- }
|
|
77
|
|
-};
|
|
78
|
|
-
|
|
79
|
|
-const TableList = () => {
|
|
80
|
|
- /** 新建窗口的弹窗 */
|
|
81
|
|
- const [createModalVisible, handleModalVisible] = useState(false);
|
|
82
|
|
- /** 分布更新窗口的弹窗 */
|
|
83
|
|
-
|
|
84
|
|
- const [updateModalVisible, handleUpdateModalVisible] = useState(false);
|
|
85
|
|
- const [showDetail, setShowDetail] = useState(false);
|
|
86
|
|
- const actionRef = useRef();
|
|
87
|
|
- const [currentRow, setCurrentRow] = useState();
|
|
88
|
|
- const [selectedRowsState, setSelectedRows] = useState([]);
|
|
89
|
|
- /** 国际化配置 */
|
|
90
|
|
-
|
|
91
|
|
- // const intl = useIntl();
|
|
92
|
|
- const columns = [
|
|
93
|
|
- {
|
|
94
|
|
- // title: (
|
|
95
|
|
- // <FormattedMessage
|
|
96
|
|
- // id="pages.searchTable.updateForm.ruleName.nameLabel"
|
|
97
|
|
- // defaultMessage="规则名称"
|
|
98
|
|
- // />
|
|
99
|
|
- // ),
|
|
100
|
|
- title: '规则名称',
|
|
101
|
|
- dataIndex: 'name',
|
|
102
|
|
- tip: '规则名称是唯一的 key',
|
|
103
|
|
- render: (dom, entity) => {
|
|
104
|
|
- return (
|
|
105
|
|
- <a
|
|
106
|
|
- onClick={() => {
|
|
107
|
|
- setCurrentRow(entity);
|
|
108
|
|
- setShowDetail(true);
|
|
109
|
|
- }}
|
|
110
|
|
- >
|
|
111
|
|
- {dom}
|
|
112
|
|
- </a>
|
|
113
|
|
- );
|
|
114
|
|
- },
|
|
115
|
|
- },
|
|
116
|
|
- {
|
|
117
|
|
- // title: <FormattedMessage id="pages.searchTable.titleDesc" defaultMessage="描述" />,
|
|
118
|
|
- title: '描述',
|
|
119
|
|
- dataIndex: 'desc',
|
|
120
|
|
- valueType: 'textarea',
|
|
121
|
|
- },
|
|
122
|
|
- {
|
|
123
|
|
- // title: <FormattedMessage id="pages.searchTable.titleCallNo" defaultMessage="服务调用次数" />,
|
|
124
|
|
- title: '服务调用次数',
|
|
125
|
|
- dataIndex: 'callNo',
|
|
126
|
|
- sorter: true,
|
|
127
|
|
- hideInForm: true,
|
|
128
|
|
- // renderText: (val) =>
|
|
129
|
|
- // `${val}${intl.formatMessage({
|
|
130
|
|
- // id: 'pages.searchTable.tenThousand',
|
|
131
|
|
- // defaultMessage: ' 万 ',
|
|
132
|
|
- // })}`,
|
|
133
|
|
- renderText: (val) => `${val} 万`,
|
|
134
|
|
- },
|
|
135
|
|
- {
|
|
136
|
|
- // title: <FormattedMessage id="pages.searchTable.titleStatus" defaultMessage="状态" />,
|
|
137
|
|
- title: '状态',
|
|
138
|
|
- dataIndex: 'status',
|
|
139
|
|
- hideInForm: true,
|
|
140
|
|
- valueEnum: {
|
|
141
|
|
- 0: {
|
|
142
|
|
- // text: (
|
|
143
|
|
- // <FormattedMessage id="pages.searchTable.nameStatus.default" defaultMessage="关闭" />
|
|
144
|
|
- // ),
|
|
145
|
|
- title: '关闭',
|
|
146
|
|
- status: 'Default',
|
|
147
|
|
- },
|
|
148
|
|
- 1: {
|
|
149
|
|
- // text: (
|
|
150
|
|
- // <FormattedMessage id="pages.searchTable.nameStatus.running" defaultMessage="运行中" />
|
|
151
|
|
- // ),
|
|
152
|
|
- title: '运行中',
|
|
153
|
|
- status: 'Processing',
|
|
154
|
|
- },
|
|
155
|
|
- 2: {
|
|
156
|
|
- // text: (
|
|
157
|
|
- // <FormattedMessage id="pages.searchTable.nameStatus.online" defaultMessage="已上线" />
|
|
158
|
|
- // ),
|
|
159
|
|
- title: '已上线',
|
|
160
|
|
- status: 'Success',
|
|
161
|
|
- },
|
|
162
|
|
- 3: {
|
|
163
|
|
- // text: (
|
|
164
|
|
- // <FormattedMessage id="pages.searchTable.nameStatus.abnormal" defaultMessage="异常" />
|
|
165
|
|
- // ),
|
|
166
|
|
- title: '异常',
|
|
167
|
|
- status: 'Error',
|
|
168
|
|
- },
|
|
169
|
|
- },
|
|
170
|
|
- },
|
|
171
|
|
- {
|
|
172
|
|
- // title: (
|
|
173
|
|
- // <FormattedMessage id="pages.searchTable.titleUpdatedAt" defaultMessage="上次调度时间" />
|
|
174
|
|
- // ),
|
|
175
|
|
- title: '上次调度时间',
|
|
176
|
|
- sorter: true,
|
|
177
|
|
- dataIndex: 'updatedAt',
|
|
178
|
|
- valueType: 'dateTime',
|
|
179
|
|
- renderFormItem: (item, { defaultRender, ...rest }, form) => {
|
|
180
|
|
- const status = form.getFieldValue('status');
|
|
181
|
|
-
|
|
182
|
|
- if (`${status}` === '0') {
|
|
183
|
|
- return false;
|
|
184
|
|
- }
|
|
185
|
|
-
|
|
186
|
|
- if (`${status}` === '3') {
|
|
187
|
|
- return (
|
|
188
|
|
- <Input
|
|
189
|
|
- {...rest}
|
|
190
|
|
- // placeholder={intl.formatMessage({
|
|
191
|
|
- // id: 'pages.searchTable.exception',
|
|
192
|
|
- // defaultMessage: '请输入异常原因！',
|
|
193
|
|
- // })}
|
|
194
|
|
- placeholder="请输入异常原因！"
|
|
195
|
|
- />
|
|
196
|
|
- );
|
|
197
|
|
- }
|
|
198
|
|
-
|
|
199
|
|
- return defaultRender(item);
|
|
200
|
|
- },
|
|
201
|
|
- },
|
|
202
|
|
- {
|
|
203
|
|
- // title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
|
|
204
|
|
- title: '操作',
|
|
205
|
|
- dataIndex: 'option',
|
|
206
|
|
- valueType: 'option',
|
|
207
|
|
- render: (_, record) => [
|
|
208
|
|
- <a
|
|
209
|
|
- key="config"
|
|
210
|
|
- onClick={() => {
|
|
211
|
|
- handleUpdateModalVisible(true);
|
|
212
|
|
- setCurrentRow(record);
|
|
213
|
|
- }}
|
|
214
|
|
- >
|
|
215
|
|
- {/* <FormattedMessage id="pages.searchTable.config" defaultMessage="配置" /> */}
|
|
216
|
|
- 配置
|
|
217
|
|
- </a>,
|
|
218
|
|
- <a key="subscribeAlert" href="https://procomponents.ant.design/">
|
|
219
|
|
- {/* <FormattedMessage id="pages.searchTable.subscribeAlert" defaultMessage="订阅警报" /> */}
|
|
220
|
|
- 订阅警报
|
|
221
|
|
- </a>,
|
|
222
|
|
- ],
|
|
223
|
|
- },
|
|
224
|
|
- ];
|
|
225
|
|
- return (
|
|
226
|
|
- <PageContainer>
|
|
227
|
|
- <ProTable
|
|
228
|
|
- // headerTitle={intl.formatMessage({
|
|
229
|
|
- // id: 'pages.searchTable.title',
|
|
230
|
|
- // defaultMessage: '查询表格',
|
|
231
|
|
- // })}
|
|
232
|
|
- headerTitle="查询表格"
|
|
233
|
|
- actionRef={actionRef}
|
|
234
|
|
- rowKey="key"
|
|
235
|
|
- search={{
|
|
236
|
|
- labelWidth: 120,
|
|
237
|
|
- }}
|
|
238
|
|
- toolBarRender={() => [
|
|
239
|
|
- <Button
|
|
240
|
|
- type="primary"
|
|
241
|
|
- key="primary"
|
|
242
|
|
- onClick={() => {
|
|
243
|
|
- handleModalVisible(true);
|
|
244
|
|
- }}
|
|
245
|
|
- >
|
|
246
|
|
- <PlusOutlined /> 新建
|
|
247
|
|
- {/* <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" /> */}
|
|
248
|
|
- </Button>,
|
|
249
|
|
- ]}
|
|
250
|
|
- request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
|
|
251
|
|
- columns={columns}
|
|
252
|
|
- rowSelection={{
|
|
253
|
|
- onChange: (_, selectedRows) => {
|
|
254
|
|
- setSelectedRows(selectedRows);
|
|
255
|
|
- },
|
|
256
|
|
- }}
|
|
257
|
|
- />
|
|
258
|
|
- {selectedRowsState?.length > 0 && (
|
|
259
|
|
- <FooterToolbar
|
|
260
|
|
- extra={
|
|
261
|
|
- <div>
|
|
262
|
|
- {/* <FormattedMessage id="pages.searchTable.chosen" defaultMessage="已选择" /> */}
|
|
263
|
|
- 已选择{' '}
|
|
264
|
|
- <a
|
|
265
|
|
- style={{
|
|
266
|
|
- fontWeight: 600,
|
|
267
|
|
- }}
|
|
268
|
|
- >
|
|
269
|
|
- {selectedRowsState.length}
|
|
270
|
|
- </a>{' '}
|
|
271
|
|
- 项{/* <FormattedMessage id="pages.searchTable.item" defaultMessage="项" /> */}
|
|
272
|
|
-
|
|
273
|
|
- <span>
|
|
274
|
|
- {/* <FormattedMessage
|
|
275
|
|
- id="pages.searchTable.totalServiceCalls"
|
|
276
|
|
- defaultMessage="服务调用次数总计"
|
|
277
|
|
- /> */}
|
|
278
|
|
- 服务调用次数总计 {selectedRowsState.reduce((pre, item) => pre + item.callNo, 0)}{' '}
|
|
279
|
|
- {/* <FormattedMessage id="pages.searchTable.tenThousand" defaultMessage="万" /> */}
|
|
280
|
|
- 万
|
|
281
|
|
- </span>
|
|
282
|
|
- </div>
|
|
283
|
|
- }
|
|
284
|
|
- >
|
|
285
|
|
- <Button
|
|
286
|
|
- onClick={async () => {
|
|
287
|
|
- await handleRemove(selectedRowsState);
|
|
288
|
|
- setSelectedRows([]);
|
|
289
|
|
- actionRef.current?.reloadAndRest?.();
|
|
290
|
|
- }}
|
|
291
|
|
- >
|
|
292
|
|
- {/* <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" /> */}
|
|
293
|
|
- 批量删除
|
|
294
|
|
- </Button>
|
|
295
|
|
- <Button type="primary">
|
|
296
|
|
- {/* <FormattedMessage id="pages.searchTable.batchApproval" defaultMessage="批量审批" /> */}
|
|
297
|
|
- 批量审批
|
|
298
|
|
- </Button>
|
|
299
|
|
- </FooterToolbar>
|
|
300
|
|
- )}
|
|
301
|
|
- <ModalForm
|
|
302
|
|
- // title={intl.formatMessage({
|
|
303
|
|
- // id: 'pages.searchTable.createForm.newRule',
|
|
304
|
|
- // defaultMessage: '新建规则',
|
|
305
|
|
- // })}
|
|
306
|
|
- title="新建规则"
|
|
307
|
|
- width="400px"
|
|
308
|
|
- visible={createModalVisible}
|
|
309
|
|
- onVisibleChange={handleModalVisible}
|
|
310
|
|
- onFinish={async (value) => {
|
|
311
|
|
- const success = await handleAdd(value);
|
|
312
|
|
-
|
|
313
|
|
- if (success) {
|
|
314
|
|
- handleModalVisible(false);
|
|
315
|
|
-
|
|
316
|
|
- if (actionRef.current) {
|
|
317
|
|
- actionRef.current.reload();
|
|
318
|
|
- }
|
|
319
|
|
- }
|
|
320
|
|
- }}
|
|
321
|
|
- >
|
|
322
|
|
- <ProFormText
|
|
323
|
|
- rules={[
|
|
324
|
|
- {
|
|
325
|
|
- required: true,
|
|
326
|
|
- message: '规则名称为必填项',
|
|
327
|
|
- // message: (
|
|
328
|
|
- // <FormattedMessage
|
|
329
|
|
- // id="pages.searchTable.ruleName"
|
|
330
|
|
- // defaultMessage="规则名称为必填项"
|
|
331
|
|
- // />
|
|
332
|
|
- // ),
|
|
333
|
|
- },
|
|
334
|
|
- ]}
|
|
335
|
|
- width="md"
|
|
336
|
|
- name="name"
|
|
337
|
|
- />
|
|
338
|
|
- <ProFormTextArea width="md" name="desc" />
|
|
339
|
|
- </ModalForm>
|
|
340
|
|
- <UpdateForm
|
|
341
|
|
- onSubmit={async (value) => {
|
|
342
|
|
- const success = await handleUpdate(value);
|
|
343
|
|
-
|
|
344
|
|
- if (success) {
|
|
345
|
|
- handleUpdateModalVisible(false);
|
|
346
|
|
- setCurrentRow(undefined);
|
|
347
|
|
-
|
|
348
|
|
- if (actionRef.current) {
|
|
349
|
|
- actionRef.current.reload();
|
|
350
|
|
- }
|
|
351
|
|
- }
|
|
352
|
|
- }}
|
|
353
|
|
- onCancel={() => {
|
|
354
|
|
- handleUpdateModalVisible(false);
|
|
355
|
|
- setCurrentRow(undefined);
|
|
356
|
|
- }}
|
|
357
|
|
- updateModalVisible={updateModalVisible}
|
|
358
|
|
- values={currentRow || {}}
|
|
359
|
|
- />
|
|
360
|
|
-
|
|
361
|
|
- <Drawer
|
|
362
|
|
- width={600}
|
|
363
|
|
- visible={showDetail}
|
|
364
|
|
- onClose={() => {
|
|
365
|
|
- setCurrentRow(undefined);
|
|
366
|
|
- setShowDetail(false);
|
|
367
|
|
- }}
|
|
368
|
|
- closable={false}
|
|
369
|
|
- >
|
|
370
|
|
- {currentRow?.name && (
|
|
371
|
|
- <ProDescriptions
|
|
372
|
|
- column={2}
|
|
373
|
|
- title={currentRow?.name}
|
|
374
|
|
- request={async () => ({
|
|
375
|
|
- data: currentRow || {},
|
|
376
|
|
- })}
|
|
377
|
|
- params={{
|
|
378
|
|
- id: currentRow?.name,
|
|
379
|
|
- }}
|
|
380
|
|
- columns={columns}
|
|
381
|
|
- />
|
|
382
|
|
- )}
|
|
383
|
|
- </Drawer>
|
|
384
|
|
- </PageContainer>
|
|
385
|
|
- );
|
|
386
|
|
-};
|
|
387
|
|
-
|
|
388
|
|
-export default TableList;
|
Your Name
4 anos atrás