index.jsx 4.55 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141
/* eslint-disable react/jsx-no-undef */
import React, { useEffect, useState } from 'react';
import { Card, Form, Input, Button, Select, Divider, Spin, message } from 'antd';
import { InfoCircleFilled } from '@ant-design/icons';
import styles from './index.less';
import dataBase from '../../../../assets/images/icons/数据库.png';
import { SaveSysConfigurate, SysConfiguration } from '@/services/hostmanager/hostmanager';

const { Item } = Form;
const RedisConfig = props => {
  const [loading, setLoading] = useState(false); // 加载
  const [form] = Form.useForm();

  useEffect(() => {
    getData();
  }, []);

  const getData = () => {
    SysConfiguration({ moduleName: 'Redis配置' }).then(res => {
      if (res.code === 0) {
        let data = res.data && JSON.parse(res.data);
        form.setFieldsValue(data);
      }
    });
  };

  const onFinish = values => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = form.getFieldsValue();
        SaveSysConfigurate({
          configName: 'Redis配置',
          configValue: JSON.stringify(obj),
        }).then(resData => {
          if (resData.code === 0) {
            message.success('配置保存成功');
          } else {
            message.error(resData.msg);
          }
        });
      }
    });
  };

  return (
    <div className={styles.iot_container}>
      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
        <Spin spinning={loading} tip="loading">
          <Form
            form={form}
            name="basic"
            initialValues={{ remember: true, configValue: 'V4' }}
            onFinish={onFinish}
          >
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <img src={dataBase} style={{ height: '16px' }} alt="" />
              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>Redis数据库</span>
            </div>
            <Divider />
            <Item
              label="IP"
              name="ip"
              rules={[{ required: true, message: '请输入IP' }]}
              style={{ marginLeft: '20px' }}
            >
              <Input
                placeholder="请输入IP"
                allowClear
                style={{ marginLeft: '30px', width: '300px' }}
              />
            </Item>
            <Item
              label="端口"
              name="port"
              rules={[{ required: true, message: '请输入端口' }]}
              style={{ marginLeft: '20px' }}
            >
              <Input
                placeholder="请输入端口号"
                allowClear
                style={{ marginLeft: '15px', width: '300px' }}
              />
            </Item>
            <Item
              label="数据库"
              name="dbName"
              rules={[{ required: true, message: '请输入数据库名' }]}
              style={{ marginLeft: '20px' }}
            >
              <Select
                placeholder="请选择数据库名"
                style={{ marginLeft: '2px', width: '300px' }}
                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="key"
              rules={[{ required: true, message: '请输入密码' }]}
              style={{ marginLeft: '18px' }}
            >
              <Input.Password
                placeholder="请输入密码"
                allowClear
                style={{ marginLeft: '18px', width: '300px' }}
              />
            </Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
                保存
              </Button>
            </Form.Item>
          </Form>
        </Spin>
      </Card>
    </div>
  );
};
export default RedisConfig;