fix: '网关功能优化'

src/assets/images/icons/时间.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1666692888056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4237" data-spm-anchor-id="a313x.7781069.0.i7" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 85.33C276.36 85.33 85.33 276.36 85.33 512S276.36 938.67 512 938.67 938.67 747.64 938.67 512 747.64 85.33 512 85.33z m0 768c-188.21 0-341.33-153.12-341.33-341.33S323.79 170.67 512 170.67 853.33 323.79 853.33 512 700.21 853.33 512 853.33z" p-id="4238" fill="#1890FF"></path><path d="M512 256h-85.33v341.33h298.66V512H512z" p-id="4239" fill="#1890FF"></path></svg>
\ No newline at end of file

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

@@ -18,7 +18,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 
 const { Item } = Form;
 const AddModal = props => {
-  const { callBackSubmit = () => {}, type, pickItem, visible, onCancel } = props;
+  const { callBackSubmit = () => {}, type, pickItem, visible, onCancel, keepData } = props;
   const [loading, setLoading] = useState(false);
   const [current, setCurrent] = useState(false);
   const [advanced, setAdvanced] = useState(0);
@@ -26,6 +26,7 @@ const AddModal = props => {
 
   useEffect(() => {
     if (visible) {
+      console.log(keepData);
       if (type === 'edit') {
         let aa = pickItem.methods.replace(/\s/g, '');
         form.setFieldsValue({
@@ -298,6 +299,20 @@ const AddModal = props => {
               required: true,
               message: '请输入关键字',
             },
+            {
+              validator: (rule, value) => {
+                let aa = form.getFieldValue().Key;
+                if (type === 'edit') {
+                  if (keepData.indexOf(aa) !== -1 && pickItem.key !== aa) {
+                    return Promise.reject('关键字已存在');
+                  }
+                } else if (keepData.indexOf(aa) !== -1) {
+                  return Promise.reject('关键字已存在');
+                }
+
+                return Promise.resolve();
+              },
+            },
           ]}
         >
           <Input allowClear />

src/pages/platformCenter/hostmanager/gateWay/CheckModal.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 = () => {}, 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) {
+      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.resetFields();
+      setAdvanced(0);
+      setCurrent(false);
+    }
+  }, [visible]);
+  // 提交
+  const onSubmit = () => {
+    onCancel();
+  };
+
+  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="查看网关配置"
+      bodyStyle={{ width: '100%', maxHeight: '600px', overflow: 'scroll', minHeight: '360px' }}
+      width="700px"
+      destroyOnClose
+      maskClosable={false}
+      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}"
+            disabled
+          />
+        </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}" disabled />
+        </Item>
+        <Item
+          label="上游请求方式"
+          name="Methods"
+          rules={[
+            {
+              required: true,
+              message: '请选择上游请求方式',
+            },
+          ]}
+        >
+          <Checkbox.Group options={plainOptions} style={{ display: 'flex' }} disabled />
+        </Item>
+        <Item
+          label="下游服务地址"
+          name="Url"
+          rules={[
+            {
+              required: true,
+              message: '请输入下游服务地址',
+            },
+          ]}
+        >
+          <Input allowClear placeholder="示例:http://localhost:8050" disabled />
+        </Item>
+        <Item label="身份认证" name="IsAuthentication">
+          <Radio.Group>
+            <Radio value={true} disabled>
+              开启
+            </Radio>
+            <Radio value={false} disabled>
+              关闭
+            </Radio>
+          </Radio.Group>
+        </Item>
+        <Item
+          label="关键字"
+          name="Key"
+          rules={[
+            {
+              required: true,
+              message: '请输入关键字',
+            },
+          ]}
+        >
+          <Input allowClear disabled />
+        </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} disabled />
+            </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

@@ -17,6 +17,7 @@ import {
   Popconfirm,
   Table,
   notification,
+  Tag,
 } from 'antd';
 import {
   EditTwoTone,
@@ -37,6 +38,7 @@ import { get, PUBLISH_SERVICE } from '@/services/index';
 import configuration from '../../../../assets/images/icons/消息.svg';
 
 import AddModal from './AddModal';
+import CheckModal from './CheckModal';
 
 const GateConfig = () => {
   const [loading, setLoading] = useState(false); // 加载
@@ -49,8 +51,10 @@ const GateConfig = () => {
   const [searchWord, setSearchWord] = useState(''); // 关键字
   const [searchWord1, setSearchWord1] = useState(''); // 关键字
   const [addVisible, setAddVisible] = useState(false);
+  const [checkVisible, setCheckVisible] = useState(false);
   const [pickItem, setPickItem] = useState('');
   const [type, setType] = useState('');
+  const [keepData, setKeepData] = useState([]); // 保存关键字
   const { Search } = Input;
 
   const OperateNginx = checked => {
@@ -112,17 +116,6 @@ const GateConfig = () => {
       if (res.code === 0) {
         setCurrentConfig(res.data);
         console.log(currentConfig);
-        if (res.data) {
-          GetReRoutes({
-            UpstreamPathTemplate: '',
-            key: '',
-          }).then(resdata => {
-            setLoading(false);
-            if (resdata.code === 0) {
-              setTableData(resdata.data);
-            }
-          });
-        }
       }
     });
     // .catch(err => {
@@ -140,9 +133,52 @@ const GateConfig = () => {
     //     }
     //   });
     // });
+    // if (res.data) {
+    GetReRoutes({
+      UpstreamPathTemplate: '',
+      key: '',
+    }).then(resdata => {
+      setLoading(false);
+      if (resdata.code === 0) {
+        console.log(resdata.data);
+        let data = [];
+        resdata.data.map(i => {
+          data.push(i.key);
+        });
+        setKeepData(data);
+        setTableData(resdata.data);
+      }
+    });
+    // }
   }, [flag]);
 
   const columns = [
+    {
+      title: '关键字',
+      dataIndex: 'key',
+      key: 'key',
+      align: 'center',
+      width: 150,
+      render: (text, record) => {
+        if (record.key === 'CityServer') {
+          return (
+            <Tooltip placement="top" title={text}>
+              <span>
+                {searchStyle1(text)} <Tag color="cyan">万能模板</Tag>
+              </span>
+            </Tooltip>
+          );
+        } else {
+          return (
+            <span>
+              <Tooltip placement="top" title={text}>
+                {searchStyle1(text)}
+              </Tooltip>
+            </span>
+          );
+        }
+      },
+    },
     {
       title: '上游路由模板',
       dataIndex: 'upstreamPathTemplate',
@@ -178,7 +214,7 @@ const GateConfig = () => {
       key: 'url',
       align: 'center',
       ellipsis: true,
-      width: 250,
+      width: 200,
       render: (text, record) => (
         <span>
           <Tooltip placement="top" title={text}>
@@ -201,20 +237,6 @@ const GateConfig = () => {
         </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',
@@ -223,9 +245,9 @@ const GateConfig = () => {
       width: 120,
       render: (text, record) => {
         if (text == true) {
-          return <span>是</span>;
+          return <Tag color="#87d068">是</Tag>;
         } else {
-          return <span>否</span>;
+          return <Tag color="#2db7f5">否</Tag>;
         }
       },
     },
@@ -250,7 +272,9 @@ const GateConfig = () => {
       key: 'action',
       width: 100,
       align: 'center',
-      render: record => (
+      render: record => {
+        if (record.key != 'CityServer') {
+          return (
             <Space size="middle">
               <Tooltip title="编辑">
                 <EditTwoTone onClick={() => edit(record)} style={{ fontSize: '16px' }} />
@@ -272,7 +296,17 @@ const GateConfig = () => {
                 </Popconfirm>
               </Tooltip>
             </Space>
-      ),
+          );
+        } else {
+          return (
+            <Space size="middle">
+              <Tooltip title="查看">
+                <SearchOutlined onClick={() => look(record)} style={{ fontSize: '16px' }} />
+              </Tooltip>
+            </Space>
+          );
+        }
+      },
     },
   ];
 
@@ -352,6 +386,11 @@ const GateConfig = () => {
     setAddVisible(true);
   };
 
+  const look = e => {
+    setPickItem(e);
+    setCheckVisible(true);
+  };
+
   const dele = e => {
     setPickItem(e);
     let data = [];
@@ -417,7 +456,7 @@ const GateConfig = () => {
                 marginLeft: '35px',
               }}
             >
-              网关开启
+              网关状态
               <Switch
                 checkedChildren="开启"
                 unCheckedChildren="关闭"
@@ -428,7 +467,11 @@ const GateConfig = () => {
             </div>
             {console.log(currentConfig)}
           </div>
-          {currentConfig ? (
+          {/* {currentConfig ? (
+          
+          ) : (
+            <></>
+          )} */}
           <div className={styles.head1}>
             <span>快速搜索上游路由模板：</span>
             <Input
@@ -467,11 +510,12 @@ const GateConfig = () => {
               新增
             </Button>
           </div>
+        </div>
+        {/* {currentConfig ? (
+        
         ) : (
           <></>
-          )}
-        </div>
-        {currentConfig ? (
+        )} */}
         <Spin spinning={loading} tip="loading">
           <div className={styles.table}>
             <Table
@@ -497,17 +541,20 @@ const GateConfig = () => {
             />
           </div>
         </Spin>
-        ) : (
-          <></>
-        )}
 
         <AddModal
           visible={addVisible}
           pickItem={pickItem}
+          keepData={keepData}
           onCancel={() => setAddVisible(false)}
           type={type}
           callBackSubmit={onSubmit}
         />
+        <CheckModal
+          visible={checkVisible}
+          pickItem={pickItem}
+          onCancel={() => setCheckVisible(false)}
+        />
       </Card>
     </div>
   );

src/services/hostmanager/hostmanager.js

@@ -54,9 +54,9 @@ export const GetGateWay = param => get(`${PUBLISH_SERVICE}/HostManager/GetGateWa
 export const UpdateGeteWay = param => get(`${PUBLISH_SERVICE}/HostManager/UpdateGeteWay`, param);
 // 网关配置
 // export const GetReRoutesFirst = param => get(`/OcelotSettings/GetReRoutes`, param);
-export const GetReRoutes = param => get(`/OcelotSettings/GetReRoutes`, param);
-export const SaveRoutes = param => post(`/OcelotSettings/SaveRoutes`, param);
-export const DelRoutes = param => get(`/OcelotSettings/DelRoutes`, param);
+export const GetReRoutes = param => get(`/PandaCore/GateWay/OcelotSettings/GetReRoutes`, param);
+export const SaveRoutes = param => post(`/PandaCore/GateWay/OcelotSettings/SaveRoutes`, param);
+export const DelRoutes = param => get(`/PandaCore/GateWay/OcelotSettings/DelRoutes`, param);
 
 // 代理服务老接口
 export const GetNginxConfigInfoOLD = param =>