fix: '网关配置模块'

src/pages/bsmanager/maintenance/AddModal.jsx

@@ -30,7 +30,7 @@ const AddModal = props => {
     feedbackName: '',
     doRole: '',
   });
-  const { callBackSubmit = () => {}, visible, type, formObj } = props;
+  const { callBackSubmit = () => {}, visible, type, formObj, keepTableData } = props;
 
   const [Type1, setType1] = useState('');
   const [Type2, setType2] = useState('');
@@ -297,6 +297,21 @@ const AddModal = props => {
                   required: true,
                   message: '请输入业务名称',
                 },
+                {
+                  validator: (rule, value) => {
+                    let aa = form.getFieldValue().businessName;
+                    if (type === 'add' && keepTableData.indexOf(aa) != -1) {
+                      return Promise.reject('业务名称已存在');
+                    } else if (
+                      type === 'edit' &&
+                      keepTableData.indexOf(aa) != -1 &&
+                      aa != formObj.businessName
+                    ) {
+                      return Promise.reject('业务名称已存在');
+                    }
+                    return Promise.resolve();
+                  },
+                },
               ]}
             >
               <Input placeholder="业务名称不可重复" />
@@ -613,7 +628,7 @@ const AddModal = props => {
           </Col>
           <Col span={23}>
             <Item label="台账过滤条件" name="filterCondition" labelCol={{ span: 4 }}>
-              <TextArea placeholder="设备对应的Scada台账名称,可多选" />
+              <TextArea placeholder="例如：and 泵房品牌='熊猫'" />
             </Item>
           </Col>
         </Row>

src/pages/bsmanager/maintenance/maintenance.jsx

@@ -20,6 +20,7 @@ const maintenance = () => {
   const [flag, setFlag] = useState(0);
   const [sortVisible, setSortVisible] = useState(false);
   const [tableData, setTableData] = useState([]);
+  const [keepTableData, setKeepTableData] = useState([]);
 
   const columns = [
     {
@@ -265,6 +266,11 @@ const maintenance = () => {
       setTreeLoading(false);
       if (res.msg === 'Ok') {
         setTableData(res.data);
+        let list = [];
+        res.data.map(i => {
+          list.push(i.businessName);
+        });
+        setKeepTableData(list);
       }
     });
   }, [flag]);
@@ -388,6 +394,7 @@ const maintenance = () => {
           onClose={() => setAddVisible(false)}
           callBackSubmit={onSubmit}
           formObj={formObj}
+          keepTableData={keepTableData}
           placement="right"
         />
         <SortModal

src/pages/platformCenter/hostmanager/gateWay/AddModal.jsx

+/* eslint-disable react/jsx-boolean-value */
+import React, { useState, useEffect } from 'react';
+import {
+  Form,
+  Modal,
+  Input,
+  notification,
+  Radio,
+  InputNumber,
+  Checkbox,
+  Switch,
+  Tooltip,
+  Row,
+  Col,
+} from 'antd';
+import { SaveRoutes } from '@/services/hostmanager/hostmanager';
+import { InfoCircleOutlined } from '@ant-design/icons';
+
+const { Item } = Form;
+const AddModal = props => {
+  const { callBackSubmit = () => {}, type, pickItem, visible, onCancel } = props;
+  const [loading, setLoading] = useState(false);
+  const [current, setCurrent] = useState(false);
+  const [advanced, setAdvanced] = useState(0);
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (visible) {
+      if (type === 'edit') {
+        let aa = pickItem.methods.replace(/\s/g, '');
+        form.setFieldsValue({
+          UpstreamPathTemplate: pickItem.upstreamPathTemplate,
+          DownstreamPathTemplate: pickItem.downstreamPathTemplate,
+          Methods: aa.split(','),
+          Url: pickItem.url,
+          IsAuthentication: pickItem.isAuthentication,
+          Key: pickItem.key,
+          Priority: pickItem.priority,
+          UpstreamHost: pickItem.upstreamHost,
+          AddHeasersToRequest: pickItem.addHeasersToRequest,
+          UpstreamHeaderTransform: pickItem.upstreamHeaderTransform,
+          DownstreamHeaderTransform: pickItem.downstreamHeaderTransform,
+          Timeout: pickItem.timeout,
+          QoSOptions: pickItem.qoSOptions,
+          RateLimitOptions: pickItem.rateLimitOptions,
+          CacheOptions: pickItem.cacheOptions,
+          LoadBalancerOptions: pickItem.loadBalancerOptions,
+          SecurityOptions: pickItem.securityOptions,
+          RequestIdKey: pickItem.requestIdKey,
+          ServiceName: pickItem.serviceName,
+          ServiceNamespace: pickItem.serviceNamespace,
+          DelegatingHandlers: pickItem.delegatingHandlers,
+          ReRouteIsCaseSensitive: pickItem.reRouteIsCaseSensitive,
+          DownstreamHttpMethod: pickItem.downstreamHttpMethod,
+        });
+        if (
+          pickItem.upstreamHost ||
+          pickItem.addHeasersToRequest ||
+          pickItem.upstreamHeaderTransform ||
+          pickItem.downstreamHeaderTransform ||
+          pickItem.timeout ||
+          pickItem.qoSOptions ||
+          pickItem.rateLimitOptions ||
+          pickItem.cacheOptions ||
+          pickItem.loadBalancerOptions ||
+          pickItem.securityOptions ||
+          pickItem.requestIdKey ||
+          pickItem.serviceName ||
+          pickItem.serviceNamespace ||
+          pickItem.delegatingHandlers ||
+          pickItem.reRouteIsCaseSensitive ||
+          pickItem.downstreamHttpMethod
+        ) {
+          setAdvanced(1);
+          setCurrent(true);
+        }
+      } else {
+        form.setFieldsValue({ IsAuthentication: true });
+      }
+    } else {
+      form.resetFields();
+      setAdvanced(0);
+      setCurrent(false);
+    }
+  }, [visible]);
+  // 提交
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        setLoading(true);
+        let obj = form.getFieldsValue();
+        console.log(obj.IsAuthentication);
+        console.log(obj.Ptiority);
+        let aa = obj.Methods.toString();
+        obj.Methods = aa.replace(/\s/g, '');
+        console.log(obj.Methods);
+        let data = {
+          UpstreamPathTemplate: obj.UpstreamPathTemplate || null,
+          DownstreamPathTemplate: obj.DownstreamPathTemplate || null,
+          Methods: obj.Methods || null,
+          Url: obj.Url || null,
+          IsAuthentication: obj.IsAuthentication,
+          Key: obj.Key || null,
+          Priority: obj.Priority || null,
+          UpstreamHost: obj.UpstreamHost || null,
+          AddHeasersToRequest: obj.AddHeasersToRequest || null,
+          UpstreamHeaderTransform: obj.UpstreamHeaderTransform || null,
+          DownstreamHeaderTransform: obj.DownstreamHeaderTransform || null,
+          Timeout: obj.Timeout || null,
+          QoSOptions: obj.QoSOptions || null,
+          RateLimitOptions: obj.RateLimitOptions || null,
+          CacheOptions: obj.CacheOptions || null,
+          LoadBalancerOptions: obj.LoadBalancerOptions || null,
+          SecurityOptions: obj.SecurityOptions || null,
+          RequestIdKey: obj.RequestIdKey || null,
+          ServiceName: obj.ServiceName || null,
+          ServiceNamespace: obj.ServiceNamespace || null,
+          DelegatingHandlers: obj.DelegatingHandlers || null,
+          ReRouteIsCaseSensitive: obj.ReRouteIsCaseSensitive || null,
+          DownstreamHttpMethod: obj.DownstreamHttpMethod || null,
+        };
+        if (type === 'add') {
+          SaveRoutes([
+            {
+              ...data,
+              IsEnable: 1,
+            },
+          ])
+            .then(res => {
+              setLoading(false);
+              if (res.code === 0) {
+                onCancel();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: res.msg || '新增成功',
+                });
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.msg || '新增失败',
+                });
+              }
+            })
+            .catch(err => {
+              setLoading(false);
+            });
+        } else {
+          SaveRoutes([
+            {
+              id: pickItem.id,
+              ...data,
+              IsEnable: 1,
+            },
+          ])
+            .then(res => {
+              setLoading(false);
+              if (res.code === 0) {
+                onCancel();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: res.msg || '编辑成功',
+                });
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.msg || '编辑失败',
+                });
+              }
+            })
+            .catch(err => {
+              setLoading(false);
+            });
+        }
+      }
+    });
+  };
+
+  const layout = {
+    layout: 'horizontal',
+    labelCol: { span: 4 },
+    wrapperCol: { span: 18 },
+  };
+
+  const plainOptions = ['GET', 'POST', 'PUT', 'DELETE'];
+
+  const change = (e, event) => {
+    if (e) {
+      setAdvanced(1);
+      setCurrent(true);
+    } else {
+      setAdvanced(0);
+      setCurrent(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={type === 'add' ? '新增网关配置' : '编辑网关配置'}
+      bodyStyle={{ width: '100%', maxHeight: '600px', overflow: 'scroll', minHeight: '360px' }}
+      width="700px"
+      destroyOnClose
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+      forceRender={true}
+      getContainer={false}
+    >
+      <Form form={form} {...layout}>
+        <Item
+          label="上游路由模板"
+          name="UpstreamPathTemplate"
+          rules={[
+            {
+              validator: (rule, value) => {
+                let aa = form.getFieldValue().UpstreamPathTemplate;
+                console.log(aa.startsWith('/'));
+                if (!aa.startsWith('/')) {
+                  return Promise.reject('必须以/开头');
+                }
+                return Promise.resolve();
+              },
+            },
+            {
+              required: true,
+              message: '请输入上游路由模板',
+            },
+          ]}
+        >
+          <Input allowClear style={{ width: '100%' }} placeholder="示例:/PandaOMS/PandaOMS/{url}" />
+        </Item>
+        <Item
+          label="下游路由模板"
+          name="DownstreamPathTemplate"
+          rules={[
+            {
+              validator: (rule, value) => {
+                let aa = form.getFieldValue().DownstreamPathTemplate;
+                console.log(aa.startsWith('/'));
+                if (!aa.startsWith('/')) {
+                  return Promise.reject('必须以/开头');
+                }
+                return Promise.resolve();
+              },
+            },
+            {
+              required: true,
+              message: '请输入下游路由模板',
+            },
+          ]}
+        >
+          <Input allowClear placeholder="示例:/{url}" />
+        </Item>
+        <Item
+          label="上游请求方式"
+          name="Methods"
+          rules={[
+            {
+              required: true,
+              message: '请选择上游请求方式',
+            },
+          ]}
+        >
+          <Checkbox.Group options={plainOptions} style={{ display: 'flex' }} />
+        </Item>
+        <Item
+          label="下游服务地址"
+          name="Url"
+          rules={[
+            {
+              required: true,
+              message: '请输入下游服务地址',
+            },
+          ]}
+        >
+          <Input allowClear placeholder="示例:http://localhost:8050" />
+        </Item>
+        <Item label="身份认证" name="IsAuthentication">
+          <Radio.Group>
+            <Radio value={true}>开启</Radio>
+            <Radio value={false}>关闭</Radio>
+          </Radio.Group>
+        </Item>
+        <Item
+          label="关键字"
+          name="Key"
+          rules={[
+            {
+              required: true,
+              message: '请输入关键字',
+            },
+          ]}
+        >
+          <Input allowClear />
+        </Item>
+        <Row>
+          <Col span={8}>
+            <Item
+              // label={
+              //   <div>
+              //     <Tooltip title="0默认级别最低，10最高，优先级越高越先匹配">
+              //       <InfoCircleOutlined
+              //         style={{
+              //           color: 'rgb(24, 144, 255)',
+              //           marginLeft: '0px',
+              //           marginRight: '5px',
+              //         }}
+              //       />
+              //     </Tooltip>
+              //     <span>优先级</span>
+              //   </div>
+              // }
+              label="优先级"
+              name="Priority"
+              labelCol={{ span: 12 }}
+            >
+              <InputNumber min={0} max={10} defaultValue={0} />
+            </Item>
+          </Col>
+          <Col span={16}>
+            <Item>
+              <span style={{ color: 'red' }}>0默认级别最低，10最高，优先级越高越先匹配</span>
+            </Item>
+          </Col>
+        </Row>
+        {/* <Switch
+          checkedChildren="高级设置"
+          unCheckedChildren="高级设置"
+          onChange={change}
+          checked={current}
+          style={{ marginLeft: '40px', marginBottom: '15px' }}
+        />
+        {advanced === 1 ? (
+          <>
+            <Item label="上游host" name="UpstreamHost">
+              <Input allowClear />
+            </Item>
+            <Item label="头部信息" name="AddHeasersToRequest">
+              <Input allowClear />
+            </Item>
+            <Item label="上游头信息转发" name="UpstreamHeaderTransform">
+              <Input allowClear />
+            </Item>
+            <Item label="下游头信息转发" name="DownstreamHeaderTransform">
+              <Input allowClear />
+            </Item>
+
+            <Item label="超时设置" name="Timeout">
+              <Input allowClear />
+            </Item>
+            <Item label="服务质量与熔断" name="QoSOptions">
+              <Input allowClear />
+            </Item>
+            <Item label="限流配置" name="RateLimitOptions">
+              <Input allowClear />
+            </Item>
+            <Item label="缓存" name="CacheOptions">
+              <Input allowClear />
+            </Item>
+            <Item label="负载均衡" name="LoadBalancerOptions">
+              <Input allowClear />
+            </Item>
+            <Item label="安全配置" name="SecurityOptions">
+              <Input allowClear />
+            </Item>
+            <Item label="请求Id Key" name="RequestIdKey">
+              <Input allowClear />
+            </Item>
+            <Item label="服务名" name="ServiceName">
+              <Input allowClear />
+            </Item>
+            <Item label="服务空间" name="ServiceNamespace">
+              <Input allowClear />
+            </Item>
+            <Item label="委托配置" name="DelegatingHandlers">
+              <Input allowClear />
+            </Item>
+            <Item label="路由大小写敏感" name="ReRouteIsCaseSensitive">
+              <Radio.Group>
+                <Radio value={0}>否</Radio>
+                <Radio value={1}>是</Radio>
+              </Radio.Group>
+            </Item>
+            <Item label="下游请求方式" name="DownstreamHttpMethod">
+              <Checkbox.Group options={plainOptions} />
+            </Item>
+          </>
+        ) : (
+          ''
+        )} */}
+      </Form>
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/platformCenter/hostmanager/gateWay/gateWay.jsx

+/* eslint-disable no-else-return */
 import React, { useEffect, useState } from 'react';
-import { Card, Form, Switch, message, Divider, Row, Col, Spin } from 'antd';
+import {
+  Card,
+  Form,
+  Switch,
+  message,
+  Divider,
+  Row,
+  Col,
+  Spin,
+  Tooltip,
+  Input,
+  Space,
+  Button,
+  Popconfirm,
+  Table,
+  notification,
+} from 'antd';
+import {
+  EditTwoTone,
+  DeleteOutlined,
+  PlusOutlined,
+  SyncOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
 import styles from './gateWay.less';
-import { GetGateWay, UpdateGeteWay } from '@/services/hostmanager/hostmanager';
+import {
+  GetGateWay,
+  UpdateGeteWay,
+  GetReRoutes,
+  DelRoutes,
+} from '@/services/hostmanager/hostmanager';
 import configuration from '../../../../assets/images/icons/消息.svg';
 
+import AddModal from './AddModal';
+
 const GateConfig = () => {
   const [loading, setLoading] = useState(false); // 加载
   const [form] = Form.useForm();
 
   const [flag, setFlag] = useState(1);
   const [currentConfig, setCurrentConfig] = useState();
+  const [tableData, setTableData] = useState([]);
+  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
+  const [searchWord, setSearchWord] = useState(''); // 关键字
+  const [searchWord1, setSearchWord1] = useState(''); // 关键字
+  const [addVisible, setAddVisible] = useState(false);
+  const [pickItem, setPickItem] = useState('');
+  const [type, setType] = useState('');
+  const { Search } = Input;
 
   const OperateNginx = checked => {
     console.log(checked);
@@ -34,22 +73,250 @@ const GateConfig = () => {
     GetGateWay().then(res => {
       if (res.code === 0) {
         setCurrentConfig(res.data);
-        console.log(res.data);
         console.log(currentConfig);
       }
     });
+    setLoading(true);
+    GetReRoutes({
+      UpstreamPathTemplate: '',
+      key: '',
+    }).then(res => {
+      setLoading(false);
+      if (res.code === 0) {
+        setTableData(res.data);
+      }
+    });
   }, [flag]);
 
+  const columns = [
+    {
+      title: '上游路由模板',
+      dataIndex: 'upstreamPathTemplate',
+      key: 'upstreamPathTemplate',
+      align: 'center',
+      ellipsis: true,
+      render: (text, record) => (
+        <span>
+          <Tooltip placement="top" title={text}>
+            {searchStyle(text)}
+          </Tooltip>
+        </span>
+      ),
+    },
+    {
+      title: '上游请求方式',
+      dataIndex: 'methods',
+      key: 'methods',
+      align: 'center',
+      ellipsis: true,
+      width: 200,
+      render: (text, record) => (
+        <span>
+          <Tooltip placement="top" title={text}>
+            {text}
+          </Tooltip>
+        </span>
+      ),
+    },
+    {
+      title: '下游服务地址',
+      dataIndex: 'url',
+      key: 'url',
+      align: 'center',
+      ellipsis: true,
+      width: 250,
+      render: (text, record) => (
+        <span>
+          <Tooltip placement="top" title={text}>
+            {text}
+          </Tooltip>
+        </span>
+      ),
+    },
+    {
+      title: '下游路由模板',
+      dataIndex: 'downstreamPathTemplate',
+      key: 'downstreamPathTemplate',
+      ellipsis: true,
+      align: 'center',
+      render: (text, record) => (
+        <span>
+          <Tooltip placement="top" title={text}>
+            {text}
+          </Tooltip>
+        </span>
+      ),
+    },
+    {
+      title: '关键字',
+      dataIndex: 'key',
+      key: 'key',
+      align: 'center',
+      width: 100,
+      render: (text, record) => (
+        <span>
+          <Tooltip placement="top" title={text}>
+            {searchStyle1(text)}
+          </Tooltip>
+        </span>
+      ),
+    },
+    {
+      title: '开启身份认证',
+      dataIndex: 'isAuthentication',
+      key: 'isAuthentication',
+      align: 'center',
+      width: 120,
+      render: (text, record) => {
+        if (text == true) {
+          return <span>是</span>;
+        } else {
+          return <span>否</span>;
+        }
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      align: 'center',
+      render: record => (
+        <Space size="middle">
+          <Tooltip title="编辑">
+            <EditTwoTone onClick={() => edit(record)} style={{ fontSize: '16px' }} />
+          </Tooltip>
+          <Tooltip title="删除">
+            <Popconfirm
+              placement="bottomRight"
+              title={
+                <p>
+                  即将删除 <span>{record.loginName}</span>
+                  ，是否确认删除？
+                </p>
+              }
+              okText="确认"
+              cancelText="取消"
+              onConfirm={() => dele(record)}
+            >
+              <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
+            </Popconfirm>
+          </Tooltip>
+        </Space>
+      ),
+    },
+  ];
+
+  // 模糊查询匹配的样式
+  const searchStyle = val => {
+    let n;
+    if (showSearchStyle) {
+      n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
+    } else {
+      n = val;
+    }
+    return <div dangerouslySetInnerHTML={{ __html: n }} />;
+  };
+
+  // 模糊查询匹配的样式
+  const searchStyle1 = val => {
+    let n;
+    if (showSearchStyle) {
+      n = val.replace(
+        new RegExp(searchWord1, 'g'),
+        `<span style='color:red'>${searchWord1}</span>`,
+      );
+    } else {
+      n = val;
+    }
+    return <div dangerouslySetInnerHTML={{ __html: n }} />;
+  };
+
+  const handleReset = () => {
+    setSearchWord('');
+    setSearchWord1('');
+    setShowSearchStyle(false);
+    setFlag(flag + 1);
+  };
+
+  const handleSearch = e => {
+    setSearchWord(e.target.value);
+  };
+
+  const handleSearch1 = e => {
+    setSearchWord1(e.target.value);
+  };
+
+  const submitSearch = () => {
+    setLoading(true);
+    GetReRoutes({ UpstreamPathTemplate: searchWord, Key: searchWord1 }).then(resnew => {
+      setLoading(false);
+      if (resnew.code === 0) {
+        setTableData(resnew.data);
+        setShowSearchStyle(true);
+      } else {
+        notification.error({
+          message: '查询失败',
+          description: resnew.msg,
+        });
+      }
+    });
+  };
+
+  const add = () => {
+    setType('add');
+    setAddVisible(true);
+  };
+
+  const edit = e => {
+    setType('edit');
+    setPickItem(e);
+    setAddVisible(true);
+  };
+
+  const dele = e => {
+    setPickItem(e);
+    let data = [];
+    data.push(e.id);
+    console.log(data);
+    if (e.id == 1) {
+      notification.error({
+        message: '删除失败',
+        description: '默认数据无法删除',
+      });
+    } else {
+      DelRoutes({
+        Ids: e.id,
+      }).then(res => {
+        if (res.code === 0) {
+          setFlag(flag + 1);
+          notification.success({
+            message: '删除成功',
+            description: res.msg,
+          });
+        } else {
+          notification.error({
+            message: '删除失败',
+            description: res.msg,
+          });
+        }
+      });
+    }
+  };
+
+  const onSubmit = () => {
+    setFlag(flag + 1);
+  };
+
   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: '10px' }}>
           <img src={configuration} style={{ height: '16px' }} alt="" />
           <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>网关配置</span>
         </div>
         <Divider />
-          <div className={styles.operate_container}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
             <div
               style={{
                 marginLeft: '35px',
@@ -66,7 +333,86 @@ const GateConfig = () => {
             </div>
             {console.log(currentConfig)}
           </div>
+          {currentConfig ? (
+            <div className={styles.head1}>
+              <span>快速搜索上游路由模板：</span>
+              <Input
+                value={searchWord}
+                placeholder="请输入上游路由模板"
+                style={{ width: 200 }}
+                onChange={handleSearch}
+              />
+              <span style={{ marginLeft: '20px' }}>快速搜索关键字：</span>
+              <Input
+                value={searchWord1}
+                placeholder="请输入键值"
+                style={{ width: 200 }}
+                onChange={handleSearch1}
+              />
+              <Button
+                type="primary"
+                icon={<SearchOutlined />}
+                onClick={submitSearch}
+                style={{ marginLeft: '20px' }}
+              >
+                搜索
+              </Button>
+              <Button icon={<SyncOutlined />} onClick={handleReset} style={{ marginLeft: '20px' }}>
+                重置
+              </Button>
+              <Button
+                icon={<PlusOutlined className={styles.icon} />}
+                onClick={add}
+                style={{
+                  verticalAlign: 'middle',
+                  marginTop: '-3px',
+                  marginLeft: '20px',
+                }}
+              >
+                新增
+              </Button>
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
+        {currentConfig ? (
+          <Spin spinning={loading} tip="loading">
+            <div className={styles.table}>
+              <Table
+                size="small"
+                bordered
+                rowKey={record => record.Id}
+                columns={columns}
+                dataSource={tableData}
+                scroll={{ y: 'calc(100vh - 380px)', x: 'max-content' }}
+                onRow={record => ({
+                  onDoubleClick: event => {
+                    event.stopPropagation();
+                    edit(record);
+                  }, // 双击
+                })}
+                pagination={{
+                  showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+                  pageSizeOptions: [10, 20, 50, 100],
+                  defaultPageSize: 20,
+                  showQuickJumper: true,
+                  showSizeChanger: true,
+                }}
+              />
+            </div>
           </Spin>
+        ) : (
+          <></>
+        )}
+
+        <AddModal
+          visible={addVisible}
+          pickItem={pickItem}
+          onCancel={() => setAddVisible(false)}
+          type={type}
+          callBackSubmit={onSubmit}
+        />
       </Card>
     </div>
   );

src/pages/platformCenter/hostmanager/gateWay/gateWay.less

-.getWay_container{
+.getWay_container {
   display: flex;
   height: 100%;
   width: 100%;
   flex-direction: row;
   justify-content: flex-start;
-    .operate_container{
+  .operate_container {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-        width: 100%;
-        height: 100%;
-        .operate_item{
+    .operate_item {
       display: flex;
       flex-direction: row;
-            justify-content:flex-start;
+      justify-content: flex-start;
       align-items: center;
       height: 50px;
-            margin-left:25px;
+      margin-left: 25px;
+    }
+  }
+  .head {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    .head1 {
+      display: flex;
+      align-items: center;
     }
-        
   }
 }
 .anticon svg {
-    margin-top:-5px;
+  margin-top: -5px;
 }

src/pages/userCenter/siteManage/SiteManage.less

@@ -42,12 +42,12 @@
     line-height: 1;
   }
 
-  .ant-dropdown-menu-item>.anticon:first-child {
+  .ant-dropdown-menu-item > .anticon:first-child {
     vertical-align: 0.15em !important;
   }
 
   .ant-table-tbody {
-    .ant-table-row:hover>td {
+    .ant-table-row:hover > td {
       background: #aed8fa !important;
     }
   }
@@ -114,7 +114,7 @@
   }
 
   .ant-tree-treenode:hover {
-    .iconWraper1>span {
+    .iconWraper1 > span {
       margin-left: 12px;
       font-size: 18px;
       display: inline-block;
@@ -260,7 +260,6 @@
   }
   .ant-card-body {
     height: 100%;
-    
   }
 }
 
@@ -271,7 +270,7 @@
   min-width: 600px;
 }
 
-.siteCheckbox .ant-collapse-content>.ant-collapse-content-box {
+.siteCheckbox .ant-collapse-content > .ant-collapse-content-box {
   padding: 16px 16px 0;
 }
 
@@ -320,7 +319,7 @@
   overflow: auto;
 }
 
-.sitePanel .ant-checkbox-wrapper+.ant-checkbox-wrapper {
+.sitePanel .ant-checkbox-wrapper + .ant-checkbox-wrapper {
   margin: 0;
 }
 
@@ -356,7 +355,8 @@
     li {
       height: 35px;
       line-height: 35px;
-      background: rgba(24, 144, 255, 0.16) url('../../../assets/images/icons/close.png') no-repeat 170px;
+      background: rgba(24, 144, 255, 0.16) url('../../../assets/images/icons/close.png') no-repeat
+        170px;
       background-size: 20px;
       background-position: center right;
       margin: 0 10px 10px 0;
@@ -369,7 +369,8 @@
   }
 }
 
-.siteline {}
+.siteline {
+}
 
 .siteBtn {
   width: 100%;
@@ -389,7 +390,7 @@
 
   .ant-checkbox-group .ant-checkbox-group-item {
     margin-right: 0px !important;
-    min-width: 300px !important;
+    width: 300px;
   }
 
   .ant-tree-list-holder {

src/services/hostmanager/hostmanager.js

-import { get, post, PUBLISH_SERVICE, CITY_SERVICE } from '@/services/index';
+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 17:26:14
+ * @LastEditTime: 2022-06-23 16:42:21
+ * @LastEditors: leizhe
+ */
+import { get, post, PUBLISH_SERVICE, CITY_SERVICE, PandaCore } from '@/services/index';
 
 // 基础信息展示
 export const GetDataBaseConfig = param =>
@@ -32,6 +39,10 @@ export const ReloadNginx = param => get(`${PUBLISH_SERVICE}/HostManager/ReloadNg
 // 获取网关配置
 export const GetGateWay = param => get(`${PUBLISH_SERVICE}/HostManager/GetGateWay`, param);
 export const UpdateGeteWay = param => get(`${PUBLISH_SERVICE}/HostManager/UpdateGeteWay`, param);
+// 网关配置
+export const GetReRoutes = param => get(`${PandaCore}/OcelotSettings/GetReRoutes`, param);
+export const SaveRoutes = param => post(`/OcelotSettings/SaveRoutes`, param);
+export const DelRoutes = param => get(`/OcelotSettings/DelRoutes`, param);
 
 // 代理服务老接口
 export const GetNginxConfigInfoOLD = param =>

src/services/index.js

@@ -7,6 +7,7 @@ const PUBLISH_SERVICE = '/PandaOMS/OMS';
 const WebSERVICE = '/Publish/Web';
 const CoreSERVICE = '/PandaCore/GCK';
 const PANDA_GIS = '/PandaGIS/MapServer';
+const PandaCore = '/PandaCore/GateWay';
 const get = async (url, params, options = {}) =>
   request({
     url,
@@ -29,4 +30,14 @@ const postForm = async (url, params = {}, options = {}) => {
   return post(url, formData, options);
 };
 
-export { get, post, postForm, CITY_SERVICE, PUBLISH_SERVICE, WebSERVICE, CoreSERVICE, PANDA_GIS };
+export {
+  get,
+  post,
+  postForm,
+  CITY_SERVICE,
+  PUBLISH_SERVICE,
+  WebSERVICE,
+  CoreSERVICE,
+  PANDA_GIS,
+  PandaCore,
+};

src/services/tablemanager/tablemanager.js

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 17:26:14
+ * @LastEditTime: 2022-06-23 20:21:47
+ * @LastEditors: leizhe
+ */
 import { get, post, PUBLISH_SERVICE, CITY_SERVICE } from '@/services/index';
 // 1.获取所有已附加的表
 export const CM_Table_LoadTable = param => get(`${PUBLISH_SERVICE}/CaseManage/LoadTable`, param);
@@ -57,3 +64,7 @@ export const LoadFieldsByGroup = param =>
 
 // 18.根据分组名加载字段集
 export const ChangeOrder = data => post(`${PUBLISH_SERVICE}/CaseManage/ChangeOrder`, data);
+
+// 加载台账
+export const LoadLedgers = query =>
+  get(`${PUBLISH_SERVICE}/WorkOrderCenter/GetCM_Ledger_LoadLedgers`, query);