From 612c6e03f92ea506d7a8af7d8f0e473b5ea8a4d0 Mon Sep 17 00:00:00 2001
From: tiantang <yiniantt@qq.com>
Date: Wed, 5 Jul 2023 23:59:21 +0800
Subject: [PATCH] feat:component type

---
 .../src/component/step/http/Options.tsx       |  27 +++-
 .../example/src/component/step/http/edit.tsx  | 126 ++++++++++--------
 .../example/src/component/step/http/type.d.ts |   3 +-
 3 files changed, 93 insertions(+), 63 deletions(-)

diff --git a/platform/example/src/component/step/http/Options.tsx b/platform/example/src/component/step/http/Options.tsx
index ad0428f..2c3e79c 100644
--- a/platform/example/src/component/step/http/Options.tsx
+++ b/platform/example/src/component/step/http/Options.tsx
@@ -1,4 +1,4 @@
-import {Component} from "react";
+import {ChangeEvent, Component} from "react";
 import {Input, InputNumber, Switch} from "antd";
 import style from "./Http.module.less"
 const defaultData:OptionsData = {
@@ -17,7 +17,22 @@ class Options extends Component<HttpOptionsProps,any>{
             options:Object.assign({},defaultData,this.props.data)
         }
     }
-
+    domChange(e:ChangeEvent<HTMLInputElement>,key:string){
+        const value = e.target.value
+        const options = this.state.options
+        options[key] =value
+        this.setState({options:Object.assign({},{...this.state.options},options)})
+        this.change()
+    }
+    valueChange(value:string|number|boolean,key:string){
+        const options = this.state.options
+        options[key] =value
+        this.setState({options:Object.assign({},{...this.state.options},options)})
+        this.change()
+    }
+    change(){
+        this.props.onchange("options",this.state.options)
+    }
     render() {
         return <div className={style.HttpContentFlex}>
                 <div className={style.HttpOptionFlex}>
@@ -26,7 +41,7 @@ class Options extends Component<HttpOptionsProps,any>{
                         <p>通常用于在发送请求时对指定内容的字符集，以防止请求出现乱码或服务器无法正确处理请求</p>
                     </div>
                     <div>
-                        <Input value={this.state.options.code} defaultValue="UTF-8" />
+                        <Input value={this.state.options.code} onChange={(e)=>this.domChange(e,"code")} defaultValue="UTF-8" />
                     </div>
                 </div>
             <div className={style.HttpOptionFlex}>
@@ -35,7 +50,7 @@ class Options extends Component<HttpOptionsProps,any>{
                     <p>所上传文件的文件类型</p>
                 </div>
                 <div>
-                    <Input value={this.state.options.code} defaultValue="UTF-8" />
+                    <Input value={this.state.options.uploadType} onChange={(e)=>this.domChange(e,"uploadType")}  defaultValue="HttpClient4" />
                 </div>
             </div>
             <div className={style.HttpOptionFlex}>
@@ -44,7 +59,7 @@ class Options extends Component<HttpOptionsProps,any>{
                     <p>对POST使用multipart/from-data</p>
                 </div>
                 <div>
-                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked checked={this.state.options.requestSwitch} />
+                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(e)=>this.valueChange(e,"requestSwitch")} defaultChecked checked={this.state.options.requestSwitch} />
                 </div>
             </div>
             <div className={style.HttpOptionFlex}>
@@ -53,7 +68,7 @@ class Options extends Component<HttpOptionsProps,any>{
                     <p>所上传文件的文件类型</p>
                 </div>
                 <div>
-                    <InputNumber  addonAfter="ms" defaultValue={5000} value={this.state.options.timeout} />
+                    <InputNumber  addonAfter="ms" defaultValue={5000} onChange={(e)=>this.valueChange(e,"timeout")} value={this.state.options.timeout} />
                 </div>
             </div>
             <div className={style.HttpOptionFlex}>
diff --git a/platform/example/src/component/step/http/edit.tsx b/platform/example/src/component/step/http/edit.tsx
index 4fa1a6f..3969ebb 100644
--- a/platform/example/src/component/step/http/edit.tsx
+++ b/platform/example/src/component/step/http/edit.tsx
@@ -12,69 +12,18 @@ import Options from "@/component/step/http/Options";
 import style from "@/component/step/http/Http.module.less";
 import {stepProps} from "@/component/step/type";
 
+interface State {
+    data:HttpData
+}
 
 
-const onChange = (key: string) => {
-    console.log(key);
-};
-
-const items: TabsProps['items'] = [
-    {
-        key: 'Host',
-        label: `Host`,
-        closable: false,
-        children: <Host/>,
-    },
-    {
-        key: 'Headers',
-        label: `Headers`,
-        closable: false,
-        children: <Heads/>,
-    },
-    {
-        key: 'Params',
-        label: `Params`,
-        closable: false,
-        children: <Params/>,
-    }, {
-        key: 'Path',
-        label: `Path`,
-        closable: false,
-        children: <Path/>,
-    }, {
-        key: 'BeforeRequest',
-        label: `请求预处理`,
-        closable: false,
-        children: <BeforeRequest/>,
-    }, {
-        key: 'Response',
-        label: `响应预处理`,
-        closable: false,
-        children: <Response/>,
-    }, {
-        key: 'Check',
-        label: `校验`,
-        closable: false,
-        children: <Check/>,
-    }, {
-        key: 'Extract',
-        label: `提取`,
-        closable: false,
-        children: <Extract/>,
-    }, {
-        key: 'Options',
-        label: `选项`,
-        closable: false,
-        children: <Options/>,
-    },
-];
 const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(method=>{
     return {
         value:method,
         label:method
     }
 })
-class HttpEditComponent extends Component<stepProps, any> {
+class HttpEditComponent extends Component<stepProps, State> {
     constructor(props: stepProps) {
         super(props);
         const content = props.data.content||"{}"
@@ -88,6 +37,71 @@ class HttpEditComponent extends Component<stepProps, any> {
     handleChange(value:string){
         console.log(value)
     }
+    onChange = (key:string,data: allData) => {
+        console.log(key,data);
+        const state = this.state.data
+        state[key] = data
+
+        this.setState({data:Object.assign({},{...this.state.data},state)})
+        console.log(this.state.data)
+    };
+
+
+    items = (): TabsProps['items'] =>{
+        return [
+            {
+                key: 'Host',
+                label: `Host`,
+                closable: false,
+                children: <Host/>,
+            },
+            {
+                key: 'Headers',
+                label: `Headers`,
+                closable: false,
+                children: <Heads/>,
+            },
+            {
+                key: 'Params',
+                label: `Params`,
+                closable: false,
+                children: <Params/>,
+            }, {
+                key: 'Path',
+                label: `Path`,
+                closable: false,
+                children: <Path/>,
+            }, {
+                key: 'BeforeRequest',
+                label: `请求预处理`,
+                closable: false,
+                children: <BeforeRequest/>,
+            }, {
+                key: 'Response',
+                label: `响应预处理`,
+                closable: false,
+                children: <Response/>,
+            }, {
+                key: 'Check',
+                label: `校验`,
+                closable: false,
+                children: <Check/>,
+            }, {
+                key: 'Extract',
+                label: `提取`,
+                closable: false,
+                children: <Extract/>,
+            }, {
+                key: 'Options',
+                label: `选项`,
+                closable: false,
+                children: <Options data={this.state.data.options} onchange={this.onChange} />,
+            },
+        ]
+    }
+    tabChange = (key:string) =>{
+        console.log(key)
+    }
     HttpMetod(){
          return (
              <div>
@@ -111,7 +125,7 @@ class HttpEditComponent extends Component<stepProps, any> {
         return (<div>
             {this.HttpMetod()}
             <div className={style.HttpTab}>
-                <Tabs defaultActiveKey="Options" type="editable-card" items={items} onChange={onChange}/>
+                <Tabs defaultActiveKey="Options" type="editable-card" items={this.items()} onChange={this.tabChange}/>
             </div>
         </div>)
     }
diff --git a/platform/example/src/component/step/http/type.d.ts b/platform/example/src/component/step/http/type.d.ts
index 34d8293..b31073e 100644
--- a/platform/example/src/component/step/http/type.d.ts
+++ b/platform/example/src/component/step/http/type.d.ts
@@ -14,7 +14,7 @@ interface HttpChilProps{
 }
 interface HttpOptionsProps{
     data:OptionsData
-    onchange:(data:HttpMethod)=>void
+    onchange:(key:string,data:HttpMethod)=>void
 }
 
 interface HttpData {
@@ -26,6 +26,7 @@ interface HttpData {
     check:CheckData
     options:OptionsData
     extract:ExtractData
+    [key:string]:allData
 }
 interface HostData {