fix: '多数据源增加Redis数据库'

src/pages/database/databaseConfig/DatabaseConfig.jsx

@@ -7,6 +7,7 @@ import OracleTable from './oracle/OracleTable';
 import MongDBTable from './mongDB/MongDBTable';
 import MySQLTable from './mysqltable/MySQLTable';
 import MasterTable from './master/MasterTable';
+import Redis from './redis/RedisTable';
 
 const DatabaseConnectConfig = props => {
   return (
@@ -28,6 +29,9 @@ const DatabaseConnectConfig = props => {
           <div style={{ marginBottom: '15px' }}>
             <MySQLTable />
           </div>
+          <div style={{ marginBottom: '15px' }}>
+            <Redis />
+          </div>
           <MasterTable />
         </Card>
       </div>

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

@@ -136,7 +136,7 @@ const AddModal = props => {
   };
   return (
     <Modal
-      title={`${type === 'add' ? '添加' : '编辑'}SQL数据库配置连接`}
+      title={`${type === 'add' ? '添加' : '编辑'}Dm数据库配置连接`}
       bodyStyle={{ width: '100%', minHeight: '100px' }}
       style={{ top: '150px' }}
       width="700px"

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

@@ -123,6 +123,7 @@ const SQLServerTable = props => {
       dataIndex: 'options',
       key: 'options',
       align: 'center',
+      width: 350,
       render: (val, item) => [
         <Button size="small" type="primary" onClick={() => handleCon(val, item)} key="testLink">
           测试连接
@@ -161,7 +162,7 @@ const SQLServerTable = props => {
         <div
           style={{ fontWeight: 'bold', fontSize: '16px', marginLeft: '30x', marginBottom: '10px' }}
         >
-          Dm数据库
+          达梦数据库
         </div>
         <Button
           type="primary"

src/pages/database/databaseConfig/master/MasterTable.jsx

@@ -120,6 +120,8 @@ const MasterTable = props => {
       title: '操作',
       dataIndex: 'options',
       key: 'options',
+      width: 350,
+      align: 'center',
       render: (val, item) => [
         <Button size="small" type="primary" onClick={() => handleCon(val, item)}>
           测试连接

src/pages/database/databaseConfig/mongDB/MongDBTable.jsx

@@ -215,6 +215,8 @@ const MongDBTable = props => {
       title: '操作',
       dataIndex: 'options',
       key: 'options',
+      align: 'center',
+      width: 350,
       render: (val, item) => [
         <Button size="small" type="primary" onClick={() => handleCon(val, item)}>
           测试连接

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

@@ -195,6 +195,8 @@ const MySQLTable = props => {
       title: '操作',
       dataIndex: 'options',
       key: 'options',
+      align: 'center',
+      width: 350,
       render: (val, item) => [
         <Button size="small" type="primary" onClick={() => handleCon(val, item)}>
           测试连接

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

@@ -189,6 +189,8 @@ const OracleTable = props => {
       title: '操作',
       dataIndex: 'options',
       key: 'options',
+      align: 'center',
+      width: 350,
       render: (val, item) => [
         <Button size="small" type="primary" onClick={() => handleCon(val, item)}>
           测试连接

src/pages/database/databaseConfig/redis/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: 'redis',
+            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: 'redis',
+      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' ? '添加' : '编辑'}Redis数据库配置连接`}
+      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="port" rules={[{ required: true, message: '请输入端口' }]}>
+            <Input placeholder="请输入端口号" allowClear />
+          </Item>
+          <Item
+            label="数据库"
+            name="dbName"
+            rules={[{ required: true, message: '请输入数据库名' }]}
+          >
+            <Select
+              placeholder="请选择数据库名"
+              options={[
+                { value: '0', label: '0' },
+                { value: '1', label: '1' },
+                { value: '2', label: '2' },
+                { value: '3', label: '3' },
+                { value: '4', label: '4' },
+                { value: '5', label: '5' },
+                { value: '6', label: '6' },
+                { value: '7', label: '7' },
+                { value: '8', label: '8' },
+                { value: '9', label: '9' },
+                { value: '10', label: '10' },
+                { value: '11', label: '11' },
+                { value: '12', label: '12' },
+                { value: '13', label: '13' },
+                { value: '14', label: '14' },
+                { value: '15', label: '15' },
+              ]}
+            />
+          </Item>
+          <Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
+            <Input.Password placeholder="请输入密码" allowClear />
+          </Item>
+        </Form>
+      )}
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/database/databaseConfig/redis/RedisTable.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 RedisTable = 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: 'redis',
+    })
+      .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: '12',
+      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: 'options',
+      key: 'options',
+      align: 'center',
+      width: 350,
+      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' }}
+        >
+          Redis数据库
+        </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 RedisTable;

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

@@ -188,6 +188,8 @@ const SQLServerTable = props => {
       title: '操作',
       dataIndex: 'options',
       key: 'options',
+      align: 'center',
+      width: 350,
       render: (val, item) => [
         <Button size="small" type="primary" onClick={() => handleCon(val, item)} key="testLink">
           测试连接