feat:component type

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}>

platform/example/src/component/step/http/edit.tsx

@@ -12,13 +12,43 @@ 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 defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(method=>{
+ return {
+ value:method,
+ label:method
+ }
+})
+class HttpEditComponent extends Component<stepProps, State> {
+ constructor(props: stepProps) {
+ super(props);
+ const content = props.data.content||"{}"
+ this.state = {
+ data:JSON.parse(content)
+ }
+ }
+ updateData(){
+ this.props.updateData(JSON.stringify(this.state.data))
+ }
+ 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)
  };
 
-const items: TabsProps['items'] = [
+
+ items = (): TabsProps['items'] =>{
+ return [
  {
  key: 'Host',
  label: `Host`,
@@ -65,28 +95,12 @@ const items: TabsProps['items'] = [
  key: 'Options',
  label: `选项`,
  closable: false,
- children: <Options/>,
+  children: <Options data={this.state.data.options} onchange={this.onChange} />,
  },
-];
-const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(method=>{
- return {
- value:method,
- label:method
+ ]
  }
-})
-class HttpEditComponent extends Component<stepProps, any> {
- constructor(props: stepProps) {
- super(props);
- const content = props.data.content||"{}"
- this.state = {
- data:JSON.parse(content)
- }
- }
- updateData(){
- this.props.updateData(JSON.stringify(this.state.data))
- }
- handleChange(value:string){
- console.log(value)
+ tabChange = (key:string) =>{
+ console.log(key)
  }
  HttpMetod(){
  return (
@@ -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>)
  }

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 {