feat: use selector to choose methods (#1082)

* fix: "method" can be null value * Update RequestConfigView.tsx Co-authored-by: 琚致远 <[email protected]>
apache · Dec 21, 2020 · e23e95e · e23e95e
1 parent 565de4d
commit e23e95e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/web/src/pages/Route/components/Step1/RequestConfigView.tsx b/web/src/pages/Route/components/Step1/RequestConfigView.tsx
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 import Form from 'antd/es/form';
-import { Checkbox, Button, Input, Select, Row, Col, InputNumber } from 'antd';
+import { Button, Input, Select, Row, Col, InputNumber } from 'antd';
 import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { useIntl } from 'umi';
 import { PanelSection } from '@api7-dashboard/ui';
@@ -259,16 +259,28 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
       <Form.Item
         label={formatMessage({ id: 'page.route.form.itemLabel.httpMethod' })}
         name="methods"
-        rules={[
-          {
-            required: true,
-            message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage({
-              id: 'page.route.form.itemLabel.httpMethod',
-            })}`,
-          },
-        ]}
       >
-        <Checkbox.Group options={HTTP_METHOD_OPTION_LIST} disabled={disabled} />
+        <Select
+          mode="multiple"
+          style={{ width: '100%' }}
+          optionLabelProp="label"
+          disabled={disabled}
+          onChange={(value) => {
+            if ((value as string[]).includes('ALL')) {
+              form.setFieldsValue({
+                methods: ['ALL'],
+              });
+            }
+          }}
+        >
+          {['ALL'].concat(HTTP_METHOD_OPTION_LIST).map((item) => {
+            return (
+              <Select.Option key={item} value={item}>
+                {item}
+              </Select.Option>
+            );
+          })}
+        </Select>
       </Form.Item>
       <Form.Item
         label={formatMessage({ id: 'page.route.form.itemLabel.priority' })}

diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
@@ -53,6 +53,8 @@ export const transformStepData = ({
       }
       return [key, operator, value];
     }),
+    // @ts-ignore
+    methods: form1Data.methods.includes("ALL") ? [] : form1Data.methods
   };
 
   if (Object.keys(redirect).length === 0 || redirect.http_to_https) {
@@ -135,7 +137,7 @@ export const transformRouteData = (data: RouteModule.Body) => {
   const {
     name,
     desc,
-    methods,
+    methods = [],
     uris,
     uri,
     hosts,
@@ -154,7 +156,8 @@ export const transformRouteData = (data: RouteModule.Body) => {
     hosts: hosts || (host && [host]) || [''],
     uris: uris || (uri && [uri]) || [],
     remote_addrs: remote_addrs || [''],
-    methods,
+    // @ts-ignore
+    methods: methods.length ? methods : ["ALL"],
     priority,
   };