import React, { useEffect, useState } from 'react'; // import ProTable from '@ant-design/pro-table'; import { Button, Tag, Popconfirm, notification, Table } from 'antd'; import { getMySQLConnString, getMySQLConnectionTest, deleteConnString, GetConnString, DeleteConnString, GetConnTest, } 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); // }); GetConnString({ Type: 'MySQL', }) .then(resnew => { setTableLoading(false); if (resnew.code == 0) { let res = resnew.data; 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); // }); GetConnTest({ Type: 'MySQL', name: item.name, }) .then(res => { setTableLoading(false); if (res.code == 0) { notification.success({ message: '提示', description: '连接成功', duration: 3, }); } else { notification.error({ message: '提示', description: res.msg || '连接失败', duration: 3, }); } }) .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)); DeleteConnString({ name, }).then(res => { setFlag(flag + 1); if (res.code == 0) { notification.success({ message: '提示', duration: 3, description: res.msg || '删除成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.msg || '删除失败', }); } }); }; // 编辑 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', ellipsis: true, }, { title: 'IP', dataIndex: 'ip', key: 'ip', ellipsis: true, }, { title: '数据库名', dataIndex: 'dbName', key: 'dbName', ellipsis: true, }, { title: '用户名', dataIndex: 'userName', key: 'userName', ellipsis: true, }, // { // title: '密码', // dataIndex: 'password', // key: 'password', // ellipsis: true, // }, { title: '操作', dataIndex: 'options', key: 'options', 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 ( <> <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}> <div style={{ fontWeight: 'bold', fontSize: '16px', marginLeft: '30x', marginBottom: '10px' }} > MySQL数据库 </div> <Button type="primary" onClick={() => { handleAdd(); }} > 添加连接 </Button> </div> <Table headerTitle="MySQL数据库" rowKey="key" columns={columns} bordered loading={tableLoading} dataSource={dataList} scroll={{ x: 'max-content', y: '400px' }} /> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} formObj={formObj} /> </> ); }; export default MySQLTable;