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 = obj.password; if (obj.password.length < 32 || !isAlphanumeric(obj.password)) { pwd = Encrypt(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 isAlphanumeric = str => { return /^[A-Za-z0-9]+$/.test(str); }; 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: '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;