fix(设备网关): 修复设备网关协议路由BUG

HTTP网关协议路由删除路由时数据类型错误导致白屏 fix #85
jetlinks · Jun 23, 2020 · b8b1988 · b8b1988
1 parent 67eb8ab
commit b8b1988
Showing 1 changed file with 29 additions and 20 deletions.
diff --git a/src/pages/network/gateway/save/index.tsx b/src/pages/network/gateway/save/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState, Fragment } from 'react';
-import { Modal, Form, Input, Select, Card, Row, Col, Icon } from 'antd';
+import { Modal, Form, Input, Select, Card, Row, Col, Icon, message, Divider } from 'antd';
 import { FormComponentProps } from 'antd/es/form';
-import { GatewayItem } from '../data.d';
 import apis from '@/services';
 import encodeQueryParam from '@/utils/encodeParam';
 import { randomString } from '@/utils/utils';
+import { GatewayItem } from '../data.d';
 
 interface Props extends FormComponentProps {
   data: Partial<GatewayItem>;
@@ -39,7 +39,6 @@ const Save: React.FC<Props> = props => {
   const [supportList, setSupportList] = useState(initState.supportList);
   const [routesData, setRoutesData] = useState<{ id: string, url: string, protocol: string }[]>(data.configuration?.routes || [{ id: '1001', url: '', protocol: '' }]);
 
-
   useEffect(() => {
     apis.gateway
       .providers()
@@ -152,10 +151,10 @@ const Save: React.FC<Props> = props => {
           <Fragment>
             <Form.Item label="协议路由">
               <Card>
-                {(routesData).map((i, index) => {
+                {(routesData.length > 0 ? routesData : [{ id: '1001', url: '', protocol: '' }]).map((i, index) => {
                   return (
                     <Row key={i.id} style={{ marginBottom: 5 }}>
-                      <Col span={10}>
+                      <Col span={9}>
                         <Input
                           value={i.url}
                           onChange={e => {
@@ -168,9 +167,9 @@ const Save: React.FC<Props> = props => {
                       <Col span={2} style={{ textAlign: 'center' }}>
                         <Icon type="right" />
                       </Col>
-                      <Col span={10}>
+                      <Col span={9}>
                         <Select
-                          value={routesData[index].protocol}
+                          value={routesData[index]?.protocol}
                           onChange={(e: string) => {
                             routesData[index].protocol = e;
                             setRoutesData([...routesData]);
@@ -184,25 +183,35 @@ const Save: React.FC<Props> = props => {
                         </Select>
                       </Col>
 
-                      <Col span={2} style={{ textAlign: 'center' }}>
+                      <Col span={4} style={{ textAlign: 'center' }}>
                         {index === 0 ? (
-                          <Icon
-                            type="plus"
-                            onClick={() => {
-                              routesData.push({
-                                id: randomString(8),
-                                url: '',
-                                protocol: '',
-                              });
-                              setRoutesData([...routesData]);
-                            }}
-                          />
+                          <>
+                            <Icon
+                              type="minus"
+                              onClick={() => {
+                                const tempData = routesData.filter(temp => temp.id !== i.id);
+                                setRoutesData([...tempData]);
+                              }}
+                            />
+                            <Divider type="vertical" />
+                            <Icon
+                              type="plus"
+                              onClick={() => {
+                                routesData.push({
+                                  id: randomString(8),
+                                  url: '',
+                                  protocol: '',
+                                });
+                                setRoutesData([...routesData]);
+                              }}
+                            />
+                          </>
                         ) : (
                             <Icon
                               type="minus"
                               onClick={() => {
                                 const tempData = routesData.filter(temp => temp.id !== i.id);
-                                setRoutesData({ ...tempData });
+                                setRoutesData([...tempData]);
                               }}
                             />
                           )}