AddModal.jsx 5.41 KB
Newer Older
1 2
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
3
import { AddConnString, EditConnString } from '@/services/database/api';
皮倩雯's avatar
皮倩雯 committed
4
import CryptoJS from 'crypto-js';
5 6 7 8 9 10 11

const { Item } = Form;
const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => {}, type, formObj, visible } = props;
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
皮倩雯's avatar
皮倩雯 committed
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

  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();
  };
39 40 41 42 43 44 45
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
皮倩雯's avatar
皮倩雯 committed
46
          AddConnString({
47
            type: 'mysql',
48
            ...obj,
皮倩雯's avatar
皮倩雯 committed
49
            password: Encrypt(obj.password),
50 51 52
          })
            .then(res => {
              setLoading(false);
皮倩雯's avatar
皮倩雯 committed
53
              if (res.code == 0) {
54 55 56 57 58
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
59
                  description: '新增成功',
60 61 62 63 64
                });
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
65
                  description: res.msg || '新增失败',
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
                });
              }
            })
            .catch(err => {
              setLoading(false);
              console.error(err);
            });
        } else if (type === 'edit') {
          handleEdit();
        }
      }
    });
  };
  const handleEdit = () => {
    let obj = form.getFieldsValue();
皮倩雯's avatar
皮倩雯 committed
81
    EditConnString({
82
      type: 'mysql',
83 84
      ...obj,
      oldName: formObj.name,
皮倩雯's avatar
皮倩雯 committed
85
      password: Encrypt(obj.password),
86 87 88
    })
      .then(res => {
        setLoading(false);
皮倩雯's avatar
皮倩雯 committed
89
        if (res.code == 0) {
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
          form.resetFields();
          callBackSubmit();
          notification.success({
            message: '提示',
            duration: 3,
            description: res.message || '编辑成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.message || '编辑失败',
          });
        }
      })
      .catch(err => setLoading(false));
  };
Maofei94's avatar
Maofei94 committed
107
  const onFinish = value => {};
108
  useEffect(() => {
109 110 111 112 113 114
    if (visible) {
      switch (type) {
        case 'add':
          form.setFieldsValue({ port: 3306 });
          break;
        case 'edit':
皮倩雯's avatar
皮倩雯 committed
115
          form.setFieldsValue({ ...formObj, password: Decrypt(formObj.password) });
116 117 118 119 120 121 122 123 124
          if (!formObj.port) {
            form.setFieldsValue({ port: 3306 });
          }
          break;
        default:
          break;
      }
    } else {
      form.resetFields();
125 126 127 128 129 130 131 132
    }
  }, [visible]);
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
133
      span: 19,
134 135 136 137
    },
  };
  return (
    <Modal
138
      title={`${type === 'add' ? '添加' : '编辑'}MySQL数据库配置连接`}
139 140 141 142 143 144 145 146 147 148 149 150 151
      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}>
152
          <Item label="标签" name="name" rules={[{ required: true, message: '请输入标签' }]}>
153 154
            <Input placeholder="请输入标签" allowClear />
          </Item>
155
          <Item label="IP" name="ip" rules={[{ required: true, message: '请输入IP' }]}>
156 157
            <Input placeholder="请输入IP" allowClear />
          </Item>
158 159 160
          <Item label="端口" name="port" rules={[{ required: true, message: '请输入端口' }]}>
            <Input placeholder="请输入端口号" allowClear />
          </Item>
161 162 163 164 165 166 167 168 169 170 171 172 173 174
          <Item
            label="数据库名"
            name="dbName"
            rules={[{ required: true, message: '请输入数据库名' }]}
          >
            <Input placeholder="请输入数据库名" allowClear />
          </Item>
          <Item
            label="用户名"
            name="userName"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入用户名" allowClear />
          </Item>
175
          <Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
邓超's avatar
邓超 committed
176
            <Input.Password placeholder="请输入密码" allowClear />
177 178 179 180 181 182 183
          </Item>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;