yiniantt
/
quality_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:http参数接入调整

This commit is contained in:
tiantang 2023-07-11 23:07:33 +08:00
parent f7a828a8ed
commit 90180fc913
11 changed files with 233 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
platform/example/src/App.tsx
View File

@ -21,9 +21,82 @@ const TmpDndList: StepDragType<Content>[] = [
}
})
const dndList = [
{id: 1, label: "组件1", value: "组件1",},
{id: 2, label: "组件2", value: "组件2"},
{id: 3, label: "组件3", value: "组件3"},
{id: 1,
label: "组件1",
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()

12
platform/example/src/component/step/http/Body.tsx
View File

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

59
platform/example/src/component/step/http/Check.tsx
View File

@ -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;
record: DataType;
dataIndex: keyof CheckDataType;
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 Check = () => {
const [dataSource, setDataSource] = useState<DataType[]>([
{
key: 0,
condition: CheckEnum.lessEqual,
check: '',
obj: '',
},
]);
const defaultData = [
{
key: 0,
condition: CheckEnum.lessEqual,
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,

40
platform/example/src/component/step/http/Extract.tsx
View File

@ -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 Extract = () =>{
const [dataSource, setDataSource] = useState<DataType[]>([
{
key:0,
var: '0',
func: FuncEnum.JSON,
handle:{
data:"",
expression:"",
mate:"",
},
params: '',
const defaultData:DataType[] = [
{
key:0,
var: '0',
func: FuncEnum.JSON,
handle:{
data:"",
expression:"",
mate:"",
},
]);
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 = {

13
platform/example/src/component/step/http/Headers.tsx
View File

@ -130,8 +130,9 @@ const addSelectItem: MenuProps['items'] = [
const Headers = (props:HttpProps<HeaderData>) => {
const [dataSource, setDataSource] = useState<HeaderDataType[]>(props.data.data);
const Headers = (props:HttpProps<HeaderDataType[]>) => {
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)
}

2
platform/example/src/component/step/http/Host.tsx
View File

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

4
platform/example/src/component/step/http/Options.tsx
View File

@ -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>;

52
platform/example/src/component/step/http/Params.tsx
View File

@ -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 [dataSource, setDataSource] = useState<DataType[]>([
{
key: '0',
name: '',
value: '',
},
{
key: '1',
name: '',
value: '',
},
]);
const defaultData = [
{
key: '0',
name: '',
value: '',
},
{
key: '1',
name: '',
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:*/*

32
platform/example/src/component/step/http/edit.tsx
View File

@ -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>
)

29
platform/example/src/component/step/http/type.d.ts vendored
View File

@ -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 {

5
platform/example/src/component/step/type.d.ts vendored
View File

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