/* 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;