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

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 {