mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-15 05:10:47 +08:00
feat: 参数输入部分
This commit is contained in:
gaoxiaolin.gao
parent
a3d5b5baeb
commit
cd05b7bb43
@ -8,16 +8,19 @@ const RadioGroup = Radio.Group;
|
||||
|
||||
|
||||
const inputComponent = (props) => {
|
||||
return <Input size="small" placeholder="small size" onChange={props.input} />
|
||||
let index = props.index
|
||||
return <Input size="small" placeholder="small size" onChange={(e) => props.paramsInput(e.target.value,index)} />
|
||||
}
|
||||
|
||||
inputComponent.propTypes = {
|
||||
input: PropTypes.func
|
||||
paramsInput: PropTypes.func,
|
||||
index:PropTypes.number
|
||||
}
|
||||
|
||||
const selectComponent = (props) => {
|
||||
const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
|
||||
return <Select defaultValue="sha1" style={{ width: 150 }} size="small" onChange={props.input}>
|
||||
let index = props.index;
|
||||
return <Select defaultValue="sha1" style={{ width: 150 }} size="small" onChange={(e)=>props.paramsInput(e,index)}>
|
||||
{
|
||||
subname.map((item, index) => {
|
||||
return <Option value={item} key={index}>{item}</Option>
|
||||
@ -26,13 +29,14 @@ const selectComponent = (props) => {
|
||||
</Select>
|
||||
}
|
||||
selectComponent.propTypes = {
|
||||
input: PropTypes.func
|
||||
paramsInput: PropTypes.func,
|
||||
index: PropTypes.number
|
||||
}
|
||||
|
||||
|
||||
const handleChange = (v) => {
|
||||
console.log('value', v);
|
||||
}
|
||||
// const handleChange = (v) => {
|
||||
// console.log('value', v);
|
||||
// }
|
||||
|
||||
const METHODS_LIST = [
|
||||
{ name: 'md5', type: false },
|
||||
@ -49,16 +53,18 @@ const METHODS_LIST = [
|
||||
]
|
||||
|
||||
const MethodsListSource = (props) => {
|
||||
console.log('props', props);
|
||||
console.log("index",props.paramsIndex);
|
||||
return <div>
|
||||
{props.component && <props.component input={props.input} />}
|
||||
{props.component && <props.component paramsInput={props.paramsInput} index={props.paramsIndex}/>}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
MethodsListSource.propTypes = {
|
||||
component: PropTypes.any,
|
||||
input: PropTypes.func
|
||||
paramsInput: PropTypes.func,
|
||||
paramsIndex: PropTypes.number
|
||||
|
||||
}
|
||||
|
||||
class MethodsList extends Component {
|
||||
@ -66,7 +72,8 @@ class MethodsList extends Component {
|
||||
show: PropTypes.bool,
|
||||
click: PropTypes.func,
|
||||
clickValue: PropTypes.string,
|
||||
paramsInput:PropTypes.func
|
||||
paramsInput: PropTypes.func,
|
||||
clickIndex: PropTypes.number
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
@ -78,16 +85,6 @@ class MethodsList extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
// componentDidMount() {
|
||||
// console.log('common', common);
|
||||
// }
|
||||
|
||||
// componentWillReceiveProps(nextProps) {
|
||||
// // console.log("nextProps",nextProps);
|
||||
// if (this.props.show !== nextProps.show) {
|
||||
// this.unshowMore();
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
@ -99,6 +96,12 @@ class MethodsList extends Component {
|
||||
|
||||
}
|
||||
|
||||
// handleSelectMethod = (methodName)=>{
|
||||
// return ()=>{
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// unshowMore = () => {
|
||||
// this.setState({
|
||||
@ -109,19 +112,20 @@ class MethodsList extends Component {
|
||||
|
||||
render() {
|
||||
const { list, moreFlag } = this.state;
|
||||
const { click, paramsInput } = this.props;
|
||||
console.log('input',paramsInput);
|
||||
const { click, paramsInput, clickValue, clickIndex } = this.props;
|
||||
console.log('click', clickValue);
|
||||
|
||||
return (
|
||||
<div className="modal-postman-form-method">
|
||||
<h3 className="methods-title title">方法</h3>
|
||||
<RadioGroup onChange={click}>
|
||||
<RadioGroup onChange={click} value={clickValue} >
|
||||
{
|
||||
list.map((item, index) => {
|
||||
return <Row key={index} type="flex" align="middle" className="row methods-row" >
|
||||
return <Row key={index} type="flex" align="middle" className="row methods-row">
|
||||
<RadioButton value={item.name}>
|
||||
<span>{item.name}</span>
|
||||
<span className="input-component">
|
||||
{item.type && <MethodsListSource input={paramsInput} component={item.component} />}
|
||||
{item.type && <MethodsListSource paramsInput={paramsInput} component={item.component} paramsIndex={clickIndex}/>}
|
||||
</span>
|
||||
</RadioButton>
|
||||
|
||||
|
||||
@ -9,17 +9,26 @@ import { Modal, Row, Col, Icon } from 'antd';
|
||||
import MockList from './MockList.js';
|
||||
import MethodsList from './MethodsList.js'
|
||||
|
||||
//
|
||||
function deepEqual(state){
|
||||
// 深拷贝
|
||||
function deepEqual(state) {
|
||||
return JSON.parse(JSON.stringify(state))
|
||||
}
|
||||
|
||||
function closeRightTabsAndAddNewTab(arr,index){
|
||||
function closeRightTabsAndAddNewTab(arr, index, curname) {
|
||||
let newParamsList = [].concat(arr);
|
||||
return newParamsList.splice(index, newParamsList.length - index);
|
||||
newParamsList.splice(index + 1, newParamsList.length - index);
|
||||
newParamsList.push({
|
||||
name: '', params: []
|
||||
})
|
||||
newParamsList[index] = {
|
||||
...newParamsList[index],
|
||||
name: curname
|
||||
}
|
||||
return newParamsList;
|
||||
|
||||
}
|
||||
|
||||
|
||||
class ModalPostman extends Component {
|
||||
static propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
@ -36,95 +45,54 @@ class ModalPostman extends Component {
|
||||
methodsShowMore: false,
|
||||
methodsList: [],
|
||||
methodsParamsList: [{
|
||||
name:'',
|
||||
params:[],
|
||||
component:''
|
||||
}
|
||||
]
|
||||
name: '',
|
||||
params: [],
|
||||
type: 'dataSource'
|
||||
}]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
mockClick(index) {
|
||||
return (e) => {
|
||||
if (index === 0) {
|
||||
// let firstParamsItem = {};
|
||||
let firstParamsItem = Object.assign({},
|
||||
{
|
||||
name: e.target.value,
|
||||
params: [],
|
||||
component: this.createArrList([])
|
||||
});
|
||||
// console.log(e);
|
||||
let curname = e.target.value;
|
||||
let newParamsList = closeRightTabsAndAddNewTab(this.state.methodsParamsList, index, curname)
|
||||
// console.log(newParamsList)
|
||||
this.setState({
|
||||
clickValue: [].concat([], e.target.value),
|
||||
methodsList: [],
|
||||
methodsParamsList: [].concat([], firstParamsItem)
|
||||
methodsParamsList: newParamsList
|
||||
})
|
||||
this.createArrList([]);
|
||||
|
||||
} else {
|
||||
let newArr = [].concat(this.state.methodsList);
|
||||
let newValue = [].concat(this.state.clickValue);
|
||||
newArr.splice(index, newArr.length - index)
|
||||
newValue.splice(index, newValue.length - index)
|
||||
|
||||
let newParamsList = [].concat(this.state.methodsParamsList);
|
||||
newParamsList.splice(index, newParamsList.length - index);
|
||||
|
||||
let paramsItem = Object.assign({},
|
||||
{
|
||||
name: e.target.value,
|
||||
params: [],
|
||||
component: this.createArrList([])
|
||||
});
|
||||
|
||||
var a = JSON.parse(JSON.stringify(this.state.methodsParamsList))
|
||||
a[index].name = 1
|
||||
this.
|
||||
}
|
||||
}
|
||||
|
||||
handleParamsInput = (e,index) => {
|
||||
console.log('input', e);
|
||||
console.log('index',index);
|
||||
// this.mockClick(index+1)(e);
|
||||
let newParamsList = deepEqual(this.state.methodsParamsList);
|
||||
newParamsList[index].params.push(e);
|
||||
console.log('list',newParamsList);
|
||||
this.setState({
|
||||
clickValue: [].concat(newValue, e.target.value),
|
||||
methodsList: newArr,
|
||||
methodsParamsList: [].concat(newParamsList, paramsItem)
|
||||
methodsParamsList: newParamsList
|
||||
})
|
||||
this.createArrList(newArr)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
handleParamsInput =(e)=>{
|
||||
console.log('input',e);
|
||||
|
||||
}
|
||||
|
||||
|
||||
createArrList(arr) {
|
||||
const ListSource = (props) => {
|
||||
MethodsListSource = (props) => {
|
||||
// console.log(props.value);
|
||||
return <MethodsList
|
||||
show={this.state.methodsShowMore}
|
||||
click={this.mockClick(props.index)}
|
||||
clickValue={this.state.clickValue[props.index]}
|
||||
clickValue={props.value}
|
||||
paramsInput={this.handleParamsInput}
|
||||
clickIndex={props.index}
|
||||
/>
|
||||
}
|
||||
|
||||
this.setState({
|
||||
methodsList: [].concat(arr, ListSource)
|
||||
})
|
||||
|
||||
return ListSource;
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { visible, handleCancel, handleOk } = this.props
|
||||
const { clickValue, methodsParamsList } = this.state;
|
||||
console.log('state', this.state);
|
||||
const {name} = methodsParamsList[0];
|
||||
console.log('list',name);
|
||||
|
||||
const { name } = methodsParamsList[0];
|
||||
console.log('list', this.state.methodsParamsList);
|
||||
return (
|
||||
<Modal
|
||||
title={<p><Icon type="edit" /> 高级参数设置</p>}
|
||||
@ -136,15 +104,16 @@ class ModalPostman extends Component {
|
||||
>
|
||||
|
||||
<Row className="modal-postman-form" type="flex">
|
||||
<Col span={8} className="modal-postman-col">
|
||||
<MockList click={this.mockClick(0)} clickValue={name}></MockList>
|
||||
{
|
||||
methodsParamsList.map((item, index) => {
|
||||
return item.type === 'dataSource' ?
|
||||
<Col span={8} className="modal-postman-col" key={index}>
|
||||
<MockList click={this.mockClick(index)} clickValue={name}></MockList>
|
||||
<h3>变量</h3>
|
||||
</Col>
|
||||
{
|
||||
methodsParamsList.map((ListSourceComponent, index) => {
|
||||
return <Col span={8} className="modal-postman-col" key={index}>
|
||||
{ListSourceComponent.component&&
|
||||
<ListSourceComponent.component index={index + 1} />}
|
||||
:
|
||||
<Col span={8} className="modal-postman-col" key={index}>
|
||||
<this.MethodsListSource index={index} value={item.name} />
|
||||
</Col>
|
||||
})
|
||||
}
|
||||
|
||||
@ -29,7 +29,8 @@
|
||||
margin-bottom: 8px;
|
||||
width:100%;
|
||||
.ant-radio-button-wrapper{
|
||||
border :0
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ant-radio-button-wrapper-checked{
|
||||
color:#fff;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user