import { DownOutlined, PlusOutlined } from '@ant-design/icons'; import { Button, Divider, Dropdown, Menu, message } from 'antd'; import React, { useState, useRef } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'; import { SorterResult } from 'antd/es/table/interface'; import CreateForm from './components/CreateForm'; import UpdateForm, { FormValueType } from './components/UpdateForm'; import { TableListItem } from './data.d'; import { queryRule, updateRule, addRule, removeRule } from './service'; /** * 添加节点 * @param fields */ const handleAdd = async (fields: TableListItem) => { const hide = message.loading('正在添加'); try { await addRule({ ...fields }); hide(); message.success('添加成功'); return true; } catch (error) { hide(); message.error('添加失败请重试!'); return false; } }; /** * 更新节点 * @param fields */ const handleUpdate = async (fields: FormValueType) => { const hide = message.loading('正在配置'); try { await updateRule({ name: fields.name, desc: fields.desc, key: fields.key, }); hide(); message.success('配置成功'); return true; } catch (error) { hide(); message.error('配置失败请重试!'); return false; } }; /** * 删除节点 * @param selectedRows */ const handleRemove = async (selectedRows: TableListItem[]) => { const hide = message.loading('正在删除'); if (!selectedRows) return true; try { await removeRule({ key: selectedRows.map((row) => row.key), }); hide(); message.success('删除成功,即将刷新'); return true; } catch (error) { hide(); message.error('删除失败,请重试'); return false; } }; const TableList: React.FC<{}> = () => { const [sorter, setSorter] = useState(''); const [createModalVisible, handleModalVisible] = useState(false); const [updateModalVisible, handleUpdateModalVisible] = useState(false); const [stepFormValues, setStepFormValues] = useState({}); const actionRef = useRef(); const columns: ProColumns[] = [ { title: '规则名称', dataIndex: 'name', rules: [ { required: true, message: '规则名称为必填项', }, ], }, { title: '描述', dataIndex: 'desc', valueType: 'textarea', }, { title: '服务调用次数', dataIndex: 'callNo', sorter: true, hideInForm: true, renderText: (val: string) => `${val} 万`, }, { title: '状态', dataIndex: 'status', hideInForm: true, valueEnum: { 0: { text: '关闭', status: 'Default' }, 1: { text: '运行中', status: 'Processing' }, 2: { text: '已上线', status: 'Success' }, 3: { text: '异常', status: 'Error' }, }, }, { title: '上次调度时间', dataIndex: 'updatedAt', sorter: true, valueType: 'dateTime', hideInForm: true, }, { title: '操作', dataIndex: 'option', valueType: 'option', render: (_, record) => ( <> { handleUpdateModalVisible(true); setStepFormValues(record); }} > 配置 订阅警报 ), }, ]; return ( headerTitle="查询表格" actionRef={actionRef} rowKey="key" onChange={(_, _filter, _sorter) => { const sorterResult = _sorter as SorterResult; if (sorterResult.field) { setSorter(`${sorterResult.field}_${sorterResult.order}`); } }} params={{ sorter, }} toolBarRender={(action, { selectedRows }) => [ , selectedRows && selectedRows.length > 0 && ( { if (e.key === 'remove') { await handleRemove(selectedRows); action.reload(); } }} selectedKeys={[]} > 批量删除 批量审批 } > ), ]} request={(params) => queryRule(params)} columns={columns} rowSelection={{}} /> handleModalVisible(false)} modalVisible={createModalVisible}> onSubmit={async (value) => { const success = await handleAdd(value); if (success) { handleModalVisible(false); if (actionRef.current) { actionRef.current.reload(); } } }} rowKey="key" type="form" columns={columns} rowSelection={{}} /> {stepFormValues && Object.keys(stepFormValues).length ? ( { const success = await handleUpdate(value); if (success) { handleUpdateModalVisible(false); setStepFormValues({}); if (actionRef.current) { actionRef.current.reload(); } } }} onCancel={() => { handleUpdateModalVisible(false); setStepFormValues({}); }} updateModalVisible={updateModalVisible} values={stepFormValues} /> ) : null} ); }; export default TableList;