import React, { useEffect, useState } from 'react'; import ProTable from '@ant-design/pro-table'; import { Button, Tag, Popconfirm, notification } from 'antd'; import { getMySQLConnString, getMySQLConnectionTest, deleteConnString, } from '@/services/database/api'; import AddModal from './AddModal'; const MySQLTable = props => { const [flag, setFlag] = useState(1); const [dataList, setDataList] = useState([]); // table数据 const [visible, setVisible] = useState(false); // 弹窗 const [tableLoading, setTableLoading] = useState(false); // tableLoading const [type, setType] = useState('add'); // 弹窗类型 const [formObj, setFormObj] = useState({}); useEffect(() => { setTableLoading(true); getMySQLConnString({ _version: 9999, _dc: Date.now(), }) .then(res => { setTableLoading(false); if (res) { setDataList(res); } }) .catch(err => { setTableLoading(false); }); }, [flag]); // 新增 const handleAdd = (val, item) => { setType('add'); setVisible(true); }; // 测试连接 const handleCon = (val, item) => { setTableLoading(true); getMySQLConnectionTest({ name: item.name, _version: 9999, _dc: Date.now(), }) .then(res => { setTableLoading(false); if (res.success) { notification.success({ message: '提示', description: '连接成功', duration: 3, }); } else { notification.error({ message: '提示', description: res.message || '连接失败', duration: 15, }); } }) .catch(err => { setTableLoading(false); console.error(err); }); }; // 删除 const handleDel = (val, item) => { const { name = '' } = item; deleteConnString({ name, _version: 9999, _dc: Date.now(), }) .then(res => { setFlag(flag + 1); if (res.success) { notification.success({ message: '提示', duration: 3, description: res.message || '删除成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.message || '删除失败', }); } }) .catch(err => console.error(err)); }; // 编辑 const handleEdit = (val, item) => { setType('edit'); setFormObj(item); setVisible(true); }; const onSubmit = prop => { console.log(prop); setVisible(false); setFlag(flag + 1); }; const columns = [ { title: '标签', dataIndex: 'name', key: 'name', width: 200, ellipsis: true, }, { title: 'IP', dataIndex: 'ip', key: 'ip', width: 150, ellipsis: true, }, { title: '数据库名', dataIndex: 'dbName', key: 'dbName', width: 200, ellipsis: true, }, { title: '用户名', dataIndex: 'userName', key: 'userName', ellipsis: true, }, { title: '密码', dataIndex: 'password', key: 'password', ellipsis: true, }, { title: '操作', dataIndex: 'options', key: 'options', width: 300, render: (val, item) => [ <Button size="small" type="primary" onClick={() => handleCon(val, item)} > 测试连接 </Button>, <Button style={{ margin: '0 10px', backgroundColor: '#fffbe6', color: '#faad14', borderColor: '#ffe58f', }} size="small" onClick={() => handleEdit(val, item)} > 编辑 </Button>, <Popconfirm title={`是否删除连接${item.name}`} cancelText="取消" okText="确认" // placement="right" onConfirm={() => handleDel(val, item)} > <Button size="small" danger> 删除 </Button> </Popconfirm>, ], }, ]; return ( <> <ProTable headerTitle="MySQL数据库" rowKey="key" search={false} columns={columns} bordered loading={tableLoading} dataSource={dataList} options={{ reload: false, fullScreen: false }} toolBarRender={() => [ <Button type="primary" onClick={() => { handleAdd(); }} > 添加连接 </Button>, ]} /> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} formObj={formObj} /> </> ); }; export default MySQLTable;