feat:http参数接入调整

platform/example/src/App.tsx

@@ -21,9 +21,82 @@ const TmpDndList: StepDragType<Content>[] = [
  }
 })
 const dndList = [
- {id: 1, label: "组件1", value: "组件1",},
+ {id: 1,
- {id: 2, label: "组件2", value: "组件2"},
+ label: "组件1",
- {id: 3, label: "组件3", value: "组件3"},
+ value: "组件1",
+ header:[],
+ params:[],
+ extract:[],
+ body:{
+ code:"string",
+ contentype:"string"
+ },
+ host:{
+ agreement:"string",
+ port:111,
+ host:"string"
+ },
+ url:{
+ path:"",
+ method:"GET"
+ },
+ options:{
+ code:"string",
+ uploadType:"string",
+ requestSwitch:true,
+ timeout:5000,
+ redirect:true
+ }
+ },
+ {id: 2,
+ label: "组件2",
+ value: "组件2",
+ header:[],
+ body:{
+ code:"string",
+ contentype:"string"
+ },
+ host:{
+ agreement:"string",
+ port:111,
+ host:"string"
+ },
+ url:{
+ path:"",
+ method:"GET"
+ },
+ options:{
+ code:"string",
+ uploadType:"string",
+ requestSwitch:true,
+ timeout:5000,
+ redirect:true
+ }},
+ {id: 3,
+ label: "组件3",
+ value: "组件3",
+ header:[],
+ body:{
+ code:"string",
+ contentype:"string"
+ },
+ host:{
+ agreement:"string",
+ port:111,
+ host:"string"
+ },
+ url:{
+ path:"",
+ method:"GET"
+ },
+ options:{
+ code:"string",
+ uploadType:"string",
+ requestSwitch:true,
+ timeout:5000,
+ redirect:true
+ }
+ },
 ].map((item: any, index) => {
  let content: Content = {...item}
  content.label = content.label += Math.random()

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

@@ -2,6 +2,7 @@ import React, {ChangeEvent, Component} from "react";
 import {Input, InputNumber, Select, Switch} from "antd";
 import style from "./Http.module.less"
 import MonacoEditor from 'react-monaco-editor';
+import {BodyData, HttpProps, HttpState} from "@/component/step/http/type";
 // import "monaco-editor/min/vs/editor/editor.main.css"
 // import scheme from "monaco-editor/min/vs/basic-languages/scheme/scheme"
 // import js from "monaco-editor/min/vs/basic-languages/javascript/javascript"
@@ -502,11 +503,16 @@ class Body extends Component<HttpProps<BodyData>,HttpState<BodyData>>{
  }
  }
  editorDidMount(editor, monaco) {
- console.log('editorDidMount', editor);
  editor.focus();
  }
+ dataChange(){
+ this.props.onchange("body",this.state.options)
+ }
  onChange(newValue, e) {
- console.log('onChange', newValue, e);
+ const state = this.state
+ state.options.code = newValue
+ this.setState(state);
+ this.dataChange()
  }
  handleChange (value:string){
  console.log(value)
@@ -538,7 +544,7 @@ class Body extends Component<HttpProps<BodyData>,HttpState<BodyData>>{
  theme="vs-dark"
  value={code}
  options={options}
- onChange={this.onChange}
+ onChange={(newValue, e)=>this.onChange(newValue, e)}
  editorDidMount={this.editorDidMount}
  />
  </div>

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

@@ -3,6 +3,7 @@ import {Dropdown, Form, Input, InputRef, LabeledValue, MenuProps, Select, Space,
 import {FormInstance} from "antd/es/form";
 import style from "@/component/step/http/Http.module.less";
 import {PlusOutlined} from "@ant-design/icons";
+import {CheckData, CheckDataType, HeaderData, HttpProps} from "@/component/step/http/type";
 
 type EditableTableProps = Parameters<typeof Table>[0];
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
@@ -12,24 +13,19 @@ interface EditableRowProps {
  index: number;
 }
 
-type HandleSave = (record: DataType) => void;
+type HandleSave = (record: CheckDataType) => void;
 
 interface EditableCellProps {
  title: React.ReactNode;
  editable: boolean;
  children: React.ReactNode;
- dataIndex: keyof DataType;
+ dataIndex: keyof CheckDataType;
- record: DataType;
+ record: CheckDataType;
  handleSave: HandleSave
 
 }
 
-interface DataType {
+
- key: number
- obj: React.Key
- condition: CheckEnum
- check: string
-}
 
 enum SelectAddEnum {
  ADD,
@@ -132,7 +128,6 @@ const EditableCell: React.FC<EditableCellProps> = ({
  </div>
  );
  }
- console.log(children)
  return <td {...restProps}>{childNode}</td>;
 };
 
@@ -150,22 +145,26 @@ const addSelectItem: MenuProps['items'] = [
  ),
  }
 ]
-
+const defaultData = [
-const Check = () => {
+ {
- const [dataSource, setDataSource] = useState<DataType[]>([
+ key: 0,
- {
+ condition: CheckEnum.lessEqual,
- key: 0,
+ check: '',
- condition: CheckEnum.lessEqual,
+ obj: '',
- check: '',
+ },
- obj: '',
+]
- },
+const Check = (props:HttpProps<CheckDataType[]>) => {
- ]);
+ const data = props?.data||defaultData
+ const [dataSource, setDataSource] = useState<CheckDataType[]>(data);
 
  const [count, setCount] = useState(1);
-
+ const dataChange = ()=>{
+ props.onchange("header",dataSource)
+ }
  const handleDelete = (key: React.Key) => {
  const newData = dataSource.filter((item) => item.key !== key);
  setDataSource(newData);
+ dataChange()
  };
  // 用户操作
  const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
@@ -180,16 +179,14 @@ const Check = () => {
  default:
  break
  }
- console.log(key)
  }
  const funcChange = (key: number, value: number) => {
- console.log(key, value)
  const data = dataSource[Number(key)]
- console.log(data)
  data.condition = Number(value)
  handleSave(data)
+ dataChange()
  }
- const paramsRender = (type: CheckEnum, value: DataType, handleSave: HandleSave) => {
+ const paramsRender = (type: CheckEnum, value: CheckDataType, handleSave: HandleSave) => {
  return <div>123123</div>
  }
  const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
@@ -203,7 +200,7 @@ const Check = () => {
  title: '检查条件',
  dataIndex: 'condition',
  width: "200px",
- render: (_, record:DataType) => {
+ render: (_, record:CheckDataType) => {
  return (<div>
  <Select
  defaultValue={String(CheckEnum.absent)}
@@ -239,7 +236,7 @@ const Check = () => {
 
  },
  dataIndex: 'index',
- render: (_, record: DataType) =>
+ render: (_, record: CheckDataType) =>
  dataSource.length >= 1 ? (
  <span className={style.HttpHandleAdd} onClick={() => handleDelete(record.key)}>删除</span>
  ) : null,
@@ -247,7 +244,7 @@ const Check = () => {
  ];
 
  const handleAdd = () => {
- const newData: DataType = {
+ const newData: CheckDataType = {
  key: count,
  obj: '0',
  condition: CheckEnum.absent,
@@ -255,9 +252,10 @@ const Check = () => {
  };
  setDataSource([...dataSource, newData]);
  setCount(count + 1);
+ dataChange()
  };
 
- const handleSave = (row: DataType) => {
+ const handleSave = (row: CheckDataType) => {
  const newData = [...dataSource];
  const index = newData.findIndex((item) => row.key === item.key);
  const item = newData[index];
@@ -266,6 +264,7 @@ const Check = () => {
  ...row,
  });
  setDataSource(newData);
+ dataChange()
  };
 
  const components = {
@@ -281,7 +280,7 @@ const Check = () => {
  }
  return {
  ...col,
- onCell: (record: DataType) => ({
+ onCell: (record: CheckDataType) => ({
  record,
  editable: col.editable,
  dataIndex: col.dataIndex,

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

@@ -4,6 +4,7 @@ import type {LabeledValue} from 'antd';
 import {Dropdown, Form, Input, InputRef, MenuProps, Select, Space, Table} from "antd";
 import {PlusOutlined} from "@ant-design/icons";
 import {FormInstance} from "antd/es/form";
+import {ExtractData, HeaderData, HttpProps} from "@/component/step/http/type";
 
 type EditableTableProps = Parameters<typeof Table>[0];
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
@@ -144,28 +145,33 @@ const addSelectItem: MenuProps['items'] = [
  ),
  }
 ]
-
+const defaultData:DataType[] = [
-const Extract = () =>{
+ {
- const [dataSource, setDataSource] = useState<DataType[]>([
+ key:0,
- {
+ var: '0',
- key:0,
+ func: FuncEnum.JSON,
- var: '0',
+ handle:{
- func: FuncEnum.JSON,
+ data:"",
- handle:{
+ expression:"",
- data:"",
+ mate:"",
- expression:"",
- mate:"",
- },
- params: '',
  },
- ]);
+ params: '',
+ },
+]
+const Extract = (props:HttpProps<DataType[]>) =>{
+ const data = props?.data||defaultData
+ const [dataSource, setDataSource] = useState<DataType[]>(data);
 
  const [count, setCount] = useState(2);
 
  const handleDelete = (key: React.Key) => {
  const newData = dataSource.filter((item) => item.key !== key);
  setDataSource(newData);
+ ExtractdataChange()
  };
+ const ExtractdataChange = ()=>{
+ props.onchange("extract",dataSource)
+ }
  // 用户操作
  const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
  const SelectKey = Number(key)
@@ -186,19 +192,23 @@ const Extract = () =>{
  const data = dataSource[Number(key)]
  data.func = Number(value)
  handleSave(data)
+ ExtractdataChange()
  }
  const paramsRender=(type:FuncEnum,value:DataType,handleSave:HandleSave) =>{
  const dataChange = (data:ChangeEvent<HTMLInputElement>)=>{
  value.handle.data = data.target.value
  handleSave(value)
+ ExtractdataChange()
  }
  const expressionChange = (data:ChangeEvent<HTMLInputElement>)=>{
  value.handle.expression = data.target.value
  handleSave(value)
+ ExtractdataChange()
  }
  const mateChange = (data:ChangeEvent<HTMLInputElement>)=>{
  value.handle.mate = data.target.value
  handleSave(value)
+ ExtractdataChange()
  }
  switch (Number(type)) {
  case FuncEnum.ALL:
@@ -314,6 +324,7 @@ const Extract = () =>{
  };
  setDataSource([...dataSource, newData]);
  setCount(count + 1);
+ ExtractdataChange()
  };
 
  const handleSave = (row: DataType) => {
@@ -325,6 +336,7 @@ const Extract = () =>{
  ...row,
  });
  setDataSource(newData);
+ ExtractdataChange
  };
 
  const components = {

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

@@ -130,8 +130,9 @@ const addSelectItem: MenuProps['items'] = [
 
 
 
-const Headers = (props:HttpProps<HeaderData>) => {
+const Headers = (props:HttpProps<HeaderDataType[]>) => {
- const [dataSource, setDataSource] = useState<HeaderDataType[]>(props.data.data);
+ const data = props?.data||[]
+ const [dataSource, setDataSource] = useState<HeaderDataType[]>(data);
 
  const [count, setCount] = useState(2);
  const [isModalOpen, setIsModalOpen] = useState(false);
@@ -190,16 +191,19 @@ const Headers = (props:HttpProps<HeaderData>) => {
  setIsModalOpen(false);
  setParamsImport("")
  setQueryString("")
+ dataChange()
  };
 
  const handleCancel = () => {
  setIsModalOpen(false);
  setParamsImport("")
  setQueryString("")
+ dataChange()
  };
  const handleDelete = (key: React.Key) => {
  const newData = dataSource.filter((item) => item.key !== key);
  setDataSource(newData);
+ dataChange()
  };
  // 用户操作
  const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
@@ -263,6 +267,7 @@ const Headers = (props:HttpProps<HeaderData>) => {
  };
  setDataSource([...dataSource, newData]);
  setCount(count + 1);
+ dataChange()
  };
  // 保存
  const handleSave = (row: HeaderDataType) => {
@@ -274,6 +279,7 @@ const Headers = (props:HttpProps<HeaderData>) => {
  ...row,
  });
  setDataSource(newData);
+ dataChange()
  };
 
  const components = {
@@ -334,6 +340,9 @@ logactid=1234567890&showTab=10000&opType=showpv&mod=superman%3Alib&submod=index&
  </div>,
  },
  ];
+ const dataChange = ()=>{
+ props.onchange("header",dataSource)
+ }
  const onImportChange = (key: string) => {
  console.log(key)
  }

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

@@ -1,6 +1,7 @@
 import {ChangeEvent, Component} from "react";
 import {Input, InputNumber} from "antd";
 import style from "./Http.module.less"
+import {HostData, HttpProps, HttpState} from "@/component/step/http/type";
 
 class Host extends Component<HttpProps<HostData>,HttpState<HostData>>{
  constructor(props:HttpProps<HostData>) {
@@ -8,6 +9,7 @@ class Host extends Component<HttpProps<HostData>,HttpState<HostData>>{
  this.state = {
  options:Object.assign({},this.props.data)
  }
+ console.log(this.state.options)
  }
  domChange(e:ChangeEvent<HTMLInputElement>,key:string){
  const value = e.target.value

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

@@ -1,6 +1,7 @@
 import {ChangeEvent, Component} from "react";
 import {Input, InputNumber, Switch} from "antd";
 import style from "./Http.module.less"
+import {HttpProps, HttpState, OptionsData, OptionsDataType} from "./type";
 const defaultData:OptionsData = {
  code: "UTF-8",
  redirect: false,
@@ -17,6 +18,7 @@ class Options extends Component<HttpProps<OptionsData>,HttpState<OptionsData>>{
  options:Object.assign({},defaultData,this.props.data)
  }
  }
+
  domChange(e:ChangeEvent<HTMLInputElement>,key:OptionsDataType){
  const value = e.target.value
  const options = this.state.options
@@ -77,7 +79,7 @@ class Options extends Component<HttpProps<OptionsData>,HttpState<OptionsData>>{
  <p>跟随重定向，会详细记录重定向的过程，可以卡电脑多个重定向的请求</p>
  </div>
  <div>
- <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked checked={this.state.options.redirect} />
+ <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(e)=>this.valueChange(e,"redirect")} defaultChecked checked={this.state.options.redirect} />
  </div>
  </div>
  </div>;

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

@@ -5,6 +5,7 @@ import type {FormInstance} from 'antd/es/form';
 import style from "./Http.module.less"
 import {DownOutlined, PlusOutlined} from "@ant-design/icons";
 import TextArea from "antd/es/input/TextArea";
+import {HeaderData, HttpProps, ParamsData, ParamsDataType, ParamsDict} from "@/component/step/http/type";
 
 const EditableContext = React.createContext<FormInstance<any> | null>(null);
 
@@ -22,11 +23,7 @@ interface EditableRowProps {
 
 type EditableTableProps = Parameters<typeof Table>[0];
 
-interface DataType {
+
- key: React.Key;
- name: string;
- value: string;
-}
 
 type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
 
@@ -129,19 +126,21 @@ const addSelectItem: MenuProps['items'] = [
  ),
  }
 ]
-const Params: React.FC = () => {
+const defaultData = [
- const [dataSource, setDataSource] = useState<DataType[]>([
+ {
- {
+ key: '0',
- key: '0',
+ name: '',
- name: '',
+ value: '',
- value: '',
+ },
- },
+ {
- {
+ key: '1',
- key: '1',
+ name: '',
- name: '',
+ value: '',
- value: '',
+ },
- },
+]
- ]);
+const Params = (props:HttpProps<ParamsDataType[]>) => {
+ const data = props?.data||defaultData
+ const [dataSource, setDataSource] = useState<ParamsDataType[]>(data);
 
  const [count, setCount] = useState(2);
  // 弹框 params
@@ -152,6 +151,7 @@ const Params: React.FC = () => {
  const handleDelete = (key: React.Key) => {
  const newData = dataSource.filter((item) => item.key !== key);
  setDataSource(newData);
+ dataChange()
  };
  // 用户操作
  const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
@@ -207,18 +207,19 @@ const Params: React.FC = () => {
  ];
 
  const handleAdd = () => {
- const newData: DataType = {
+ const newData: ParamsDataType = {
  key: count,
  name: ``,
  value: ``,
  };
  setDataSource([...dataSource, newData]);
  setCount(count + 1);
+ dataChange()
  };
  const showModal = () => {
  setIsModalOpen(true);
  };
- const handleSave = (row: DataType) => {
+ const handleSave = (row: ParamsDataType) => {
  const newData = [...dataSource];
  const index = newData.findIndex((item) => row.key === item.key);
  const item = newData[index];
@@ -227,6 +228,7 @@ const Params: React.FC = () => {
  ...row,
  });
  setDataSource(newData);
+ dataChange()
  };
 
  const components = {
@@ -242,7 +244,7 @@ const Params: React.FC = () => {
  }
  return {
  ...col,
- onCell: (record: DataType) => ({
+ onCell: (record: ParamsDataType) => ({
  record,
  editable: col.editable,
  dataIndex: col.dataIndex,
@@ -256,8 +258,6 @@ const Params: React.FC = () => {
  const QueryDict:ParamsDict = {}
  const paramsDict:ParamsDict = {}
  const QueryValue = QueryString.split("&")
- console.log(QueryString)
- console.log(paramsImport)
  const paramsValue = paramsImport.split("\n")
  let key = Number(dataSource[dataSource.length - 1].key)
  paramsValue.forEach(params => {
@@ -299,12 +299,16 @@ const Params: React.FC = () => {
  setIsModalOpen(false);
  setParamsImport("")
  setQueryString("")
+ dataChange()
  };
-
+ const dataChange = ()=>{
+ props.onchange("params",dataSource)
+ }
  const handleCancel = () => {
  setIsModalOpen(false);
  setParamsImport("")
  setQueryString("")
+ dataChange()
  };
  const importplaceholder = `请粘贴如下格式信息
 Accept:*/*

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

@@ -1,4 +1,4 @@
-import React, {Component} from "react";
+import React, {ChangeEvent, Component} from "react";
 import {Input, Select, Space, Tabs, TabsProps} from "antd";
 import Heads from "./Headers"
 import Host from "./Host"
@@ -12,6 +12,7 @@ import Options from "@/component/step/http/Options";
 import style from "@/component/step/http/Http.module.less";
 import {stepProps} from "@/component/step/type";
 import Body from "./Body";
+import {allData, HttpData, OptionsDataType} from "@/component/step/http/type";
 
 interface State {
  data:HttpData
@@ -27,18 +28,23 @@ const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(
 class HttpEditComponent extends Component<stepProps, State> {
  constructor(props: stepProps) {
  super(props);
- const content = props.data.content||"{}"
+ const content = props.data
+ console.log(props.data)
  this.state = {
- data:JSON.parse(content)
+ data:content
  }
+ console.log(this.state.data)
  }
  updateData(){
  this.props.updateData(JSON.stringify(this.state.data))
  }
  handleChange(value:string){
  console.log(value)
+ const state = this.state
+ state.data.url.method = value
+ this.setState(state)
  }
- onChange = (key:string,data: allData) => {
+ onChange = (key:keyof HttpData,data: allData) => {
  console.log(key,data);
  const state = this.state.data
  state[key] = data
@@ -47,7 +53,6 @@ class HttpEditComponent extends Component<stepProps, State> {
  console.log(this.state.data)
  };
 
-
  items = (): TabsProps['items'] =>{
  return [
  {
@@ -66,7 +71,7 @@ class HttpEditComponent extends Component<stepProps, State> {
  key: 'Params',
  label: `Params`,
  closable: false,
- children: <Params/>,
+ children: <Params data={this.state.data.params} onchange={this.onChange}/>,
  },{
  key: 'Body',
  label: `Body`,
@@ -76,7 +81,7 @@ class HttpEditComponent extends Component<stepProps, State> {
  key: 'Path',
  label: `Path`,
  closable: false,
- children: <Path/>,
+ children: <Path data={this.state.data.path} onchange={this.onChange}/>,
  }, {
  key: 'BeforeRequest',
  label: `请求预处理`,
@@ -91,12 +96,12 @@ class HttpEditComponent extends Component<stepProps, State> {
  key: 'Check',
  label: `校验`,
  closable: false,
- children: <Check/>,
+ children: <Check data={this.state.data.check} onchange={this.onChange}/>,
  }, {
  key: 'Extract',
  label: `提取`,
  closable: false,
- children: <Extract/>,
+ children: <Extract data={this.state.data.extract} onchange={this.onChange}/>,
  }, {
  key: 'Options',
  label: `选项`,
@@ -108,6 +113,12 @@ class HttpEditComponent extends Component<stepProps, State> {
  tabChange = (key:string) =>{
  console.log(key)
  }
+ domChange(e:ChangeEvent<HTMLInputElement>,key:OptionsDataType){
+ const value = e.target.value
+ const state = this.state
+ state.data.url.path = value
+ this.setState(state)
+ }
  HttpMetod(){
  return (
  <div>
@@ -116,13 +127,14 @@ class HttpEditComponent extends Component<stepProps, State> {
  <Space wrap>
  <Select
  defaultValue="GET"
+ value={this.state.data.url.method}
  style={{ width: 120 }}
  onChange={this.handleChange}
  options={defaultMetod}
  />
  </Space>
  <span className={style.HttpLabel}>路径</span>
- <span className={style.HttpFLex1}><Input placeholder="" /></span>
+ <span className={style.HttpFLex1}><Input onChange={(e)=>this.domChange(e,"code")} value={this.state.data.url.path} placeholder="" /></span>
  </div>
  </div>
  )

platform/example/src/component/step/http/type.d.ts

@@ -34,8 +34,15 @@ interface HttpData {
  options:OptionsData
  extract:ExtractData
  body:BodyData
- [key:string]:allData
+ path:PathData
+ url:UrlData
+ // [key:string]:allData
 }
+interface UrlData {
+ method:string
+ path:string
+}
+
 interface HostData {
  agreement:string
  port:number
@@ -48,7 +55,7 @@ type BodyData ={
 }
 type BodyDataType = keyof BodyData
 interface CheckData {
-
+ data:CheckDataType[]
 }
 interface HeaderDataType {
  key: React.Key;
@@ -58,14 +65,20 @@ interface HeaderDataType {
 interface HeaderData {
  data:HeaderDataType[]
 }
-interface ParamsData {
+interface ParamsDataType{
-
+ key: React.Key;
+ name: string;
+ value: string;
 }
+type ParamsData = ParamsDataType[]
 interface BeforeRequestData {
 
 }
 interface ResponseData {
 
+}
+interface PathData {
+
 }
 
 type OptionsData = {
@@ -76,8 +89,14 @@ type OptionsData = {
  redirect:boolean
 }
 type OptionsDataType = keyof OptionsData
+interface CheckDataType {
+ key: number
+ obj: React.Key
+ condition: CheckEnum
+ check: string
+}
 interface ExtractData {
-
+ data:DataType[]
 }
 
 interface childrenProps {

platform/example/src/component/step/type.d.ts

@@ -1,8 +1,9 @@
-import {Content} from "@/component/type";
+import {Content, StepDragType} from "@/component/type";
+import {HttpData} from "@/component/step/http/type";
 
 export interface stepProps {
  updateData:(data:string)=>void
- data:Content
+ data:HttpData
 }
 export interface stepState {
  data:string