import React, { useEffect, useState } from 'react'; import ProTable from '@ant-design/pro-table'; import { Button, Tag, Popconfirm, notification } from 'antd'; import { getMongoDBConnString, deleteConnString, getMongoDBConnectionTest, GetConnString, DeleteConnString, GetConnTest } from '@/services/database/api'; import AddModal from './AddModal'; const MongDBTable = 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); // getMongoDBConnString({ // _version: 9999, // _dc: Date.now(), // }) // .then(res => { // setTableLoading(false); // if (res) { // setDataList(res); // } // }) // .catch(err => { // setTableLoading(false); // }); GetConnString({ Type:"MongoDB" }).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); // getMongoDBConnectionTest({ // 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: 3, // }); // } // }) // .catch(err => { // setTableLoading(false); // console.error(err); // }); GetConnTest({ Type:"MongoDB", 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: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 handleConfirm = () => { console.log('aaaa'); }; const columns = [ { title: '标签', dataIndex: 'name', key: 'name', width: '200px', ellipsis: true, }, { title: 'ip', dataIndex: 'ip', key: 'ip', width: 150, ellipsis: true, }, { title: '端口', dataIndex: 'port', key: 'port', // width: 200, ellipsis: true, }, { title: '数据库名', dataIndex: 'dbName', key: 'dbName', width: 200, ellipsis: true, }, { title: '类型', dataIndex: 'type', key: 'type', // width: 200, ellipsis: true, }, { title: '复制集', dataIndex: 'replicaSet', key: 'replicaSet', // width: 200, ellipsis: true, }, // { // title: '用户名', // dataIndex: 'userName', // key: 'userName', // }, // { // title: '密码', // dataIndex: 'password', // key: 'password', // }, { 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="MongDB数据库" rowKey="key" search={false} columns={columns} bordered loading={tableLoading} dataSource={dataList} options={{ reload: false, fullScreen: false }} toolBarRender={() => [ <Button type="primary" onClick={() => { handleAdd(); }} > 添加连接 </Button>, // <Popconfirm // title={ // <div> // <p> // 是否将confcenter、citytemp、buffile、log文件内容迁移至 // Mongodb数据库中(会覆盖重名文件)? // </p> // <p>(连接配置取标签mongodb)</p> // </div> // } // cancelText="取消" // okText="确认" // onConfirm={handleConfirm} // placement="rightTop" // > // <Button // style={{ // color: '#fff', // background: '#e6a23c', // borderColor: '#f5dab1', // }} // > // 文件迁移 // </Button> // </Popconfirm>, ]} /> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} formObj={formObj} /> </> ); }; export default MongDBTable;