AddModal.jsx 4.98 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
            ...obj,
48
            type: 'oracle',
皮倩雯'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: 'oracle',
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 109 110
  useEffect(() => {
    switch (type) {
      case 'add':
111
        form.resetFields();
112 113
        break;
      case 'edit':
皮倩雯's avatar
皮倩雯 committed
114
        form.setFieldsValue({ ...formObj, password: Decrypt(formObj.password) });
115 116 117 118 119 120 121 122 123 124 125
        break;
      default:
        break;
    }
  }, [visible]);
  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
126
      span: 19,
127 128 129 130
    },
  };
  return (
    <Modal
131
      title={`${type === 'add' ? '添加' : '编辑'}Oracle数据库配置连接`}
132 133 134 135 136 137 138 139 140 141 142 143 144
      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}>
145
          <Item label="标签" name="name" rules={[{ required: true, message: '请输入标签' }]}>
146 147 148 149 150 151
            {/* <Select>
            <Option value={item.value}>{item.title}</Option>
          </Select> */}
            <Input placeholder="请输入标签" allowClear />
          </Item>
          <Item
152
            label="网络服务名"
153
            name="dbName"
154
            rules={[{ required: true, message: '请输入网络服务名' }]}
155
          >
156
            <Input placeholder="请输入网络服务名" allowClear />
157 158 159 160 161 162 163 164
          </Item>
          <Item
            label="用户名"
            name="userName"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入用户名" allowClear />
          </Item>
165
          <Item label="密码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
邓超's avatar
邓超 committed
166
            <Input.Password placeholder="请输入密码" allowClear />
167 168 169 170 171 172 173
          </Item>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;