/* 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, keepData } = props; const [loading, setLoading] = useState(false); const [current, setCurrent] = useState(false); const [advanced, setAdvanced] = useState(0); const [hidden, setHidden] = useState(false); const [form] = Form.useForm(); useEffect(() => { if (visible) { if (type === 'edit') { let data = ['CityServer', 'IOT', 'CivData', 'GIS']; if (data.indexOf(pickItem.key) != -1) { setHidden(true); } 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 { setHidden(false); 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.Priority); 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 || 0, 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, }; console.log(data); 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); console.log(aa.indexOf('/PandaCore/GateWay')); if (!aa.startsWith('/')) { return Promise.reject('必须以/开头'); } if (aa.indexOf('/PandaCore/GateWay') != -1) { return Promise.reject('无需添加/PandaCore/GateWay'); } return Promise.resolve(); }, }, { required: true, message: '请输入上游路由模板', }, ]} > <Input allowClear style={{ width: '100%' }} placeholder="示例:/CivData/{url}" disabled={hidden} /> </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={hidden} /> </Item> <Item label="上游请求方式" name="Methods" rules={[ { required: true, message: '请选择上游请求方式', }, ]} > <Checkbox.Group options={plainOptions} style={{ display: 'flex' }} disabled={hidden} /> </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} disabled={hidden}> 开启 </Radio> <Radio value={false} disabled={hidden}> 关闭 </Radio> </Radio.Group> </Item> <Item label="关键字" name="Key" rules={[ { required: true, message: '请输入关键字', }, { validator: (rule, value) => { let val = form.getFieldValue().Key; if (/[\u4E00-\u9FA5]/.test(val)) { return Promise.reject('不允许输入中文'); } if (type === 'edit') { if (keepData.indexOf(val) !== -1 && pickItem.key !== val) { return Promise.reject('关键字已存在'); } } else if (keepData.indexOf(val) !== -1) { return Promise.reject('关键字已存在'); } return Promise.resolve(); }, }, ]} > <Input allowClear disabled={hidden} /> </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={hidden} /> </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;