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 isAlphanumeric = str => {
    return /^[A-Za-z0-9]+$/.test(str);
  };

  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        let pwd = obj.password;
        if (obj.password.length < 32 || !isAlphanumeric(obj.password)) {
          pwd = Encrypt(obj.password);
        }
        if (type === 'add') {
          AddConnString({
            ...obj,
            type: 'sqlserver',
            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 = obj.password;
    if (obj.password.length < 32 || !isAlphanumeric(obj.password)) {
      pwd = Encrypt(obj.password);
    }
    EditConnString({
      ...obj,
      oldName: formObj.name,
      type: 'sqlserver',
      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;