gateWay.jsx

import React, { useEffect, useState } from 'react';
import { Card, Form, Switch, message, Divider, Row, Col, Spin } from 'antd';
import styles from './gateWay.less';
import { GetGateWay, UpdateGeteWay } from '@/services/platform/hostmanager';
import configuration from '../../../../assets/images/icons/消息.svg';

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

  const [flag, setFlag] = useState(1);
  const [currentConfig, setCurrentConfig] = useState();

  const OperateNginx = checked => {
    console.log(checked);
    UpdateGeteWay({ isUsed: checked }).then(res => {
      if (res.code === 0) {
        setFlag(flag + 1);
        message.success('设置成功');
      } else {
        message.error('设置失败');
      }
    });
  };
  useEffect(() => {
    if (currentConfig) {
      localStorage.setItem('panda-publish', 'getway');
    } else {
      localStorage.setItem('panda-publish', '');
    }
  }, [currentConfig]);

  useEffect(() => {
    GetGateWay().then(res => {
      if (res.code === 0) {
        setCurrentConfig(res.data);
        console.log(res.data);
        console.log(currentConfig);
      }
    });
  }, [flag]);

  return (
    <div className={styles.gateWay_container}>
      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
        <Spin spinning={loading} tip="loading">
          <div
            style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}
          >
            <img src={configuration} style={{ height: '16px' }} alt="" />
            <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>
              服务管理
            </span>
          </div>
          <Divider />
          <div className={styles.operate_container}>
            <Row
              gutter={[20, 25]}
              style={{ display: 'flex', alignItems: 'center' }}
            >
              <Col span={2}>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'flex-end',
                    marginRight: '-10px',
                  }}
                >
                  服务运行
                </div>
              </Col>
              <Col span={22}>
                {console.log(currentConfig)}
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  checked={currentConfig}
                  onChange={OperateNginx}
                  style={{ marginLeft: '30px' }}
                />
              </Col>
            </Row>
          </div>
        </Spin>
      </Card>
    </div>
  );
};
export default GateConfig;