import React, { useEffect, useState } from 'react'; import { Card, Form, Input, Button, Select, message, Divider, Spin, Row, Col } from 'antd'; import { SysConfiguration, SaveSysConfigurate } from '@/services/hostmanager/hostmanager'; import { CloseCircleFilled } from '@ant-design/icons'; import CryptoJS from 'crypto-js'; import message11 from '../../../../assets/images/icons/消息.svg'; import Yes from '../../../../assets/images/icons/正确.svg'; import styles from './index.less'; const layout = { labelCol: { span: 2 }, wrapperCol: { span: 21 }, }; const tailLayout = { wrapperCol: { offset: 11, span: 13 }, }; const MessageConfig = () => { const [loading, setLoading] = useState(false); // 加载 const [show1, setShow1] = useState('none'); const [show2, setShow2] = useState('none'); 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 onFinish = values => { SaveSysConfigurate({ configName: 'GCK平台地址', configValue: values.messageAddress }).then( res => { if (res.code === 0) { message.success('配置保存成功'); } else { message.error(res.msg); } }, ); }; useEffect(() => { // form.setFieldsValue({ messageAddress: '127.0.0.1:8231' }); SysConfiguration({ moduleName: 'GCK平台地址' }).then(res => { if (res.code === 0) { form.setFieldsValue({ messageAddress: res.data }); } else { message.info(res.msg); } }); return () => { form.resetFields(); }; }, []); return ( <div className={styles.gck_container}> <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}> <Spin spinning={loading} tip="loading"> <Form form={form} name="basic" initialValues={{ remember: true }} onFinish={onFinish}> <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', }} > <img src={message11} style={{ height: '16px' }} alt="" /> <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>GCK平台</span> </div> <Divider /> <Form.Item style={{ marginLeft: '20px', marginBottom: '0px' }}> <div style={{ display: 'flex', justifyContent: 'flex-start' }}> <Form.Item label="GCK平台地址" name="messageAddress" rules={[ { required: true, pattern: new RegExp( /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/, 'g', ), message: '请输入正确的IP例如:192.168.12.231:8231', }, ]} > <Input style={{ width: '300px', marginLeft: '15px' }} // placeholder="请输入服务地址" /> </Form.Item> <span style={{ display: show1 }}> <img src={Yes} style={{ height: '24px', marginLeft: '26px', marginTop: '10px' }} alt="" /> </span> <span style={{ display: show2 }}> <CloseCircleFilled style={{ fontSize: '24px', marginLeft: '26px', marginTop: '10px' }} /> </span> </div> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}> 保存连接 </Button> </Form.Item> </Form> </Spin> </Card> </div> ); }; export default MessageConfig;