fix: '达梦数据库'

src/pages/database/InitDataBase/InitDataBase.less

@@ -21,12 +21,19 @@
 }
 
 .InitDataBaseContainer {
+  width: 100%;
+  height: 100%;
+
   .ant-card-body {
     padding-bottom: 0px !important;
   }
 
-  .mgTop20 {
-    margin-top: 20px;
+  .cardTop {
+    height: 350px;
+    width: 100%;
+  }
+
+  .cardBottom {
     height: calc(100% - 350px);
   }
 

src/pages/database/databaseConfig/DatabaseConfig.jsx

-import React, { useState, useEffect } from 'react';
-import { Card, Tabs, Form, Input, Button, notification } from 'antd';
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { SaveMainServer, GetMainServer, DeleteMainServer } from '@/services/database/api';
+import React, { useEffect } from 'react';
+import { Card, notification } from 'antd';
 import PageContainer from '@/components/BasePageContainer';
 import SQLServerTable from './sqlServer/SQLServerTable';
+import DmTable from './dm/DmTable';
 import OracleTable from './oracle/OracleTable';
 import MongDBTable from './mongDB/MongDBTable';
 import MySQLTable from './mysqltable/MySQLTable';
 import MasterTable from './master/MasterTable';
 
-const { TabPane } = Tabs;
-const dataArr = [
-  {
-    title: 'SQLServer数据库连接',
-    key: '0',
-    component: <SQLServerTable />,
-  },
-  {
-    title: 'Oracle数据库连接',
-    key: '1',
-    component: <OracleTable />,
-  },
-  {
-    title: 'MongoDB数据库连接',
-    key: '2',
-    component: <MongDBTable />,
-  },
-  {
-    title: 'MySQL数据库连接',
-    key: '3',
-    component: <MySQLTable />,
-  },
-];
-const Hr = () => <hr style={{ width: 'calc( 100% - 40px)' }} />;
 const DatabaseConnectConfig = props => {
-  const [form] = Form.useForm();
-  const [flag, setFlag] = useState(false);
-  const [active, setActive] = useState('0');
-  const [isLink, setIsLink] = useState(false); //主站配置是否连接
-  useEffect(() => {
-    getData();
-  }, []);
-
-  const handleChange = e => {
-    setActive(e);
-  };
-  const getData = () => {
-    GetMainServer().then(res => {
-      if (res.code === 0) {
-        form.setFieldsValue({ url: res.data });
-        // if (res.data) {
-        //   setIsLink(true);
-        //   form.setFieldsValue({ url: res.data });
-        // } else {
-        //   setIsLink(false);
-        //   form.setFieldsValue({ url: window.location.origin });
-        // }
-      }
-    });
-  };
-  const deleteConfig = () => {
-    DeleteMainServer().then(res => {
-      if (res.code === 0) {
-        notification.success({ message: '提示', duration: 3, description: '删除成功' });
-        getData();
-      } else {
-        notification.error({ message: '提示', duration: 3, description: res.msg });
-      }
-    });
-  };
-  // 提交主站配置
-  const onFinish = values => {
-    console.log('Success:', values);
-    SaveMainServer(values).then(res => {
-      if (res.code === 0) {
-        notification.success({
-          message: '提示',
-          duration: 3,
-          description: '保存成功',
-        });
-        getData();
-      } else {
-        notification.error({
-          message: '提示',
-          duration: 3,
-          description: res.msg,
-        });
-      }
-    });
-  };
-
   return (
     <PageContainer>
       <div style={{ width: '100%', height: '100%', overflowY: 'scroll' }}>
         <Card>
-          {/* <Tabs activeKey={active} onChange={e => handleChange(e)}>
-          {dataArr.map(item => (
-            <TabPane tab={item.title} key={item.key}>
-              {active === item.key && item.component}
-            </TabPane>
-          ))}
-        </Tabs> */}
           <div style={{ marginBottom: '15px' }}>
             <SQLServerTable />
           </div>
+          <div style={{ marginBottom: '15px' }}>
+            <DmTable />
+          </div>
           <div style={{ marginBottom: '15px' }}>
             <OracleTable />
           </div>

src/pages/database/databaseConfig/dm/AddModal.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, notification } from 'antd';
+import { AddConnString, EditConnString } from '@/services/database/api';
+import CryptoJS from 'crypto-js';
+
+const { Item } = Form;
+const { Option } = Select;
+const AddModal = props => {
+  const { callBackSubmit = () => {}, type, formObj, visible } = props;
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+
+  const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); // 十六位十六进制数作为密钥
+  const iv = CryptoJS.enc.Utf8.parse('1234567890000000');
+
+  // 解密
+  const Decrypt = word => {
+    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
+    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+    return decryptedStr.toString();
+  };
+
+  // 加密
+  const Encrypt = word => {
+    let srcs = CryptoJS.enc.Utf8.parse(word);
+    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.ciphertext.toString().toUpperCase();
+  };
+  // 提交
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        setLoading(true);
+        let obj = form.getFieldsValue();
+        let pwd =
+          Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+            ? Encrypt(obj.password)
+            : obj.password;
+        if (type === 'add') {
+          AddConnString({
+            ...obj,
+            type: 'dm',
+            password: pwd,
+          })
+            .then(res => {
+              setLoading(false);
+              if (res.code == 0) {
+                form.resetFields();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: '新增成功',
+                });
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.msg,
+                });
+              }
+            })
+            .catch(err => {
+              setLoading(false);
+              console.error(err);
+            });
+        } else if (type === 'edit') {
+          handleEdit();
+        }
+      }
+    });
+  };
+  const handleEdit = () => {
+    let obj = form.getFieldsValue();
+    let pwd =
+      Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+        ? Encrypt(obj.password)
+        : obj.password;
+    EditConnString({
+      ...obj,
+      oldName: formObj.name,
+      type: 'dm',
+      password: pwd,
+    })
+      .then(res => {
+        setLoading(false);
+        if (res.code == 0) {
+          form.resetFields();
+          callBackSubmit();
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: res.message || '编辑成功',
+          });
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.message || '编辑失败',
+          });
+        }
+      })
+      .catch(err => setLoading(false));
+  };
+  const onFinish = value => {};
+  useEffect(() => {
+    switch (type) {
+      case 'add':
+        form.resetFields();
+        break;
+      case 'edit':
+        form.setFieldsValue({ ...formObj, password: formObj.password });
+        break;
+      default:
+        break;
+    }
+  }, [visible]);
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 4,
+    },
+    wrapperCol: {
+      span: 19,
+    },
+  };
+  return (
+    <Modal
+      title={`${type === 'add' ? '添加' : '编辑'}SQL数据库配置连接`}
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: '150px' }}
+      width="700px"
+      destroyOnClose
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+    >
+      {visible && (
+        <Form form={form} {...layout} onFinish={onFinish}>
+          <Item label="标签" name="name" rules={[{ required: true, message: '请输入标签' }]}>
+            {/* <Select>
+            <Option value={item.value}>{item.title}</Option>
+          </Select> */}
+            <Input placeholder="请输入标签" allowClear />
+          </Item>
+          <Item label="IP" name="ip" rules={[{ required: true, message: '请输入IP' }]}>
+            <Input placeholder="请输入IP" allowClear />
+          </Item>
+          <Item
+            label="数据库名"
+            name="dbName"
+            rules={[{ required: true, message: '请输入数据库名' }]}
+          >
+            <Input placeholder="请输入数据库名" allowClear />
+          </Item>
+          <Item
+            label="用户名"
+            name="userName"
+            rules={[{ required: true, message: '请输入用户名' }]}
+          >
+            <Input placeholder="请输入用户名" allowClear />
+          </Item>
+          <Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
+            <Input.Password placeholder="请输入密码" allowClear />
+          </Item>
+        </Form>
+      )}
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/database/databaseConfig/dm/DmTable.jsx

+import React, { useEffect, useState } from 'react';
+// import ProTable from '@ant-design/pro-table';
+import { Button, Popconfirm, notification, Table } from 'antd';
+import { GetConnString, DeleteConnString, GetConnTest } from '@/services/database/api';
+import AddModal from './AddModal';
+const SQLServerTable = 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);
+
+    GetConnString({
+      Type: 'Dm',
+    })
+      .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);
+    GetConnTest({
+      Type: 'Dm',
+      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,
+    }).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 => {
+    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: 'options',
+      key: 'options',
+      align: 'center',
+      render: (val, item) => [
+        <Button size="small" type="primary" onClick={() => handleCon(val, item)} key="testLink">
+          测试连接
+        </Button>,
+        <Button
+          style={{
+            margin: '0 10px',
+            backgroundColor: '#fffbe6',
+            color: '#faad14',
+            borderColor: '#ffe58f',
+          }}
+          key="bntEdit"
+          size="small"
+          onClick={() => handleEdit(val, item)}
+        >
+          编辑
+        </Button>,
+        <Popconfirm
+          key="btnDelete"
+          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' }}
+        >
+          Dm数据库
+        </div>
+        <Button
+          type="primary"
+          onClick={() => {
+            handleAdd();
+          }}
+        >
+          添加连接
+        </Button>
+      </div>
+      <Table
+        rowKey="name"
+        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 SQLServerTable;

src/pages/database/databaseConfig/mysqltable/AddModal.jsx

@@ -42,11 +42,15 @@ const AddModal = props => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
+        let pwd =
+          Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+            ? Encrypt(obj.password)
+            : obj.password;
         if (type === 'add') {
           AddConnString({
             type: 'mysql',
             ...obj,
-            password: Encrypt(obj.password),
+            password: pwd,
           })
             .then(res => {
               setLoading(false);
@@ -78,11 +82,15 @@ const AddModal = props => {
   };
   const handleEdit = () => {
     let obj = form.getFieldsValue();
+    let pwd =
+      Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+        ? Encrypt(obj.password)
+        : obj.password;
     EditConnString({
       type: 'mysql',
       ...obj,
       oldName: formObj.name,
-      password: Encrypt(obj.password),
+      password: pwd,
     })
       .then(res => {
         setLoading(false);
@@ -112,7 +120,7 @@ const AddModal = props => {
           form.setFieldsValue({ port: 3306 });
           break;
         case 'edit':
-          form.setFieldsValue({ ...formObj, password: Decrypt(formObj.password) });
+          form.setFieldsValue({ ...formObj, password: formObj.password });
           if (!formObj.port) {
             form.setFieldsValue({ port: 3306 });
           }

src/pages/database/databaseConfig/oracle/AddModal.jsx

@@ -42,11 +42,15 @@ const AddModal = props => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
+        let pwd =
+          Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+            ? Encrypt(obj.password)
+            : obj.password;
         if (type === 'add') {
           AddConnString({
             ...obj,
             type: 'oracle',
-            password: Encrypt(obj.password),
+            password: pwd,
           })
             .then(res => {
               setLoading(false);
@@ -78,11 +82,15 @@ const AddModal = props => {
   };
   const handleEdit = () => {
     let obj = form.getFieldsValue();
+    let pwd =
+      Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+        ? Encrypt(obj.password)
+        : obj.password;
     EditConnString({
       type: 'oracle',
       ...obj,
       oldName: formObj.name,
-      password: Encrypt(obj.password),
+      password: pwd,
     })
       .then(res => {
         setLoading(false);
@@ -111,7 +119,7 @@ const AddModal = props => {
         form.resetFields();
         break;
       case 'edit':
-        form.setFieldsValue({ ...formObj, password: Decrypt(formObj.password) });
+        form.setFieldsValue({ ...formObj, password: formObj.password });
         break;
       default:
         break;

src/pages/database/databaseConfig/sqlServer/AddModal.jsx

@@ -42,11 +42,15 @@ const AddModal = props => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
+        let pwd =
+          Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+            ? Encrypt(obj.password)
+            : obj.password;
         if (type === 'add') {
           AddConnString({
             ...obj,
             type: 'sqlserver',
-            password: Encrypt(obj.password),
+            password: pwd,
           })
             .then(res => {
               setLoading(false);
@@ -78,11 +82,15 @@ const AddModal = props => {
   };
   const handleEdit = () => {
     let obj = form.getFieldsValue();
+    let pwd =
+      Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+        ? Encrypt(obj.password)
+        : obj.password;
     EditConnString({
       ...obj,
       oldName: formObj.name,
       type: 'sqlserver',
-      password: Encrypt(obj.password),
+      password: pwd,
     })
       .then(res => {
         setLoading(false);
@@ -111,7 +119,7 @@ const AddModal = props => {
         form.resetFields();
         break;
       case 'edit':
-        form.setFieldsValue({ ...formObj, password: Decrypt(formObj.password) });
+        form.setFieldsValue({ ...formObj, password: formObj.password });
         break;
       default:
         break;