mirror of
https://github.com/YMFE/yapi.git
synced 2025-02-23 13:59:28 +08:00
feat: 开始变量部分的编写
This commit is contained in:
parent
8d4a209491
commit
a626e363b2
@ -51,7 +51,6 @@ class MockList extends Component {
|
||||
const { click, clickValue } = this.props;
|
||||
return (
|
||||
<div className="modal-postman-form-mock">
|
||||
<h3 className="mock-title title">mock数据</h3>
|
||||
<Search
|
||||
onChange={this.onFilter}
|
||||
onSearch={this.onSearch}
|
||||
|
152
client/components/ModalPostman/VariablesSelect.js
Normal file
152
client/components/ModalPostman/VariablesSelect.js
Normal file
@ -0,0 +1,152 @@
|
||||
import React, { Component } from 'react'
|
||||
// import PropTypes from 'prop-types'
|
||||
import { Tree } from 'antd';
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
// $.{id}.params.{path}
|
||||
// $.{id}.body.{path}
|
||||
|
||||
const records = [{
|
||||
_id: 1,
|
||||
name: 'abc',
|
||||
caseList: [{
|
||||
_id: 11,
|
||||
casename: 'case-test',
|
||||
params: {
|
||||
id: '123',
|
||||
name: '小明'
|
||||
},
|
||||
body: {
|
||||
email: 'weriri@qq.com',
|
||||
arr: [{
|
||||
pid: 1,
|
||||
tt: {
|
||||
a: 1
|
||||
}
|
||||
}]
|
||||
}
|
||||
}, {
|
||||
_id: 12,
|
||||
casename: 'case-test1',
|
||||
params: {
|
||||
id: '123',
|
||||
name: '小明'
|
||||
},
|
||||
body: {
|
||||
email: 'weriri@qq.com',
|
||||
arr: [{
|
||||
pid: 1,
|
||||
tt: {
|
||||
a: 1
|
||||
}
|
||||
}]
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
_id: 2,
|
||||
name: 'abc2222',
|
||||
caseList: [{
|
||||
_id: 13,
|
||||
casename: 'case-test222',
|
||||
params: {},
|
||||
body: [{
|
||||
pid: 1,
|
||||
tt: {
|
||||
a: 1
|
||||
}
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
|
||||
// const x = 3;
|
||||
// const y = 2;
|
||||
// const z = 1;
|
||||
const gData = [];
|
||||
|
||||
// const generateData = (_level, _preKey, _tns) => {
|
||||
// const preKey = _preKey || '0';
|
||||
// const tns = _tns || gData;
|
||||
// const children = [];
|
||||
// for (let i = 0; i < x; i++) {
|
||||
// const key = `${preKey}-${i}`;
|
||||
// tns.push({ title: key, key }); // 0-0, 0-1,0-2
|
||||
// if (i < y) {
|
||||
// children.push(key);
|
||||
// }
|
||||
// }
|
||||
// if (_level < 0) {
|
||||
// return tns;
|
||||
// }
|
||||
// const level = _level - 1;
|
||||
// children.forEach((key, index) => {
|
||||
// tns[index].children = [];
|
||||
// return generateData(level, key, tns[index].children);
|
||||
// });
|
||||
// };
|
||||
// generateData(z);
|
||||
|
||||
const generateData = (records, _tns) => {
|
||||
const tns = _tns || gData;
|
||||
records.forEach((item, index) => {
|
||||
tns.push({ title: item.name, key: item._id });
|
||||
const children = [];
|
||||
// let paramsItem = []
|
||||
item.caseList.forEach((item, index) => {
|
||||
let paramsItemChildren = [];
|
||||
let paramsItem = []
|
||||
paramsItem.push({ title: 'params', key: `params${index}`, children: [] });
|
||||
for (let keys in item.params) {
|
||||
paramsItemChildren.push({ title: keys, key: item.params[keys] });
|
||||
}
|
||||
|
||||
paramsItem[0].children = paramsItemChildren;
|
||||
children.push({ title: item.casename, key: item._id, children: paramsItem })
|
||||
// children.params
|
||||
})
|
||||
|
||||
tns[index].children = children;
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
generateData(records)
|
||||
|
||||
class VariablesSelect extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
state = {
|
||||
gData
|
||||
// expandedKeys: ['0-0', '0-0-0', '0-0-0-0']
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
const loop = data => data.map((item) => {
|
||||
if (item.children && item.children.length) {
|
||||
return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;
|
||||
}
|
||||
return <TreeNode key={item.key} title={item.title} />;
|
||||
});
|
||||
|
||||
console.log('gDate', this.state.gData);
|
||||
|
||||
return (
|
||||
<div className="modal-postman-form-variable">
|
||||
<Tree
|
||||
className="draggable-tree"
|
||||
>
|
||||
{loop(this.state.gData)}
|
||||
</Tree>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default VariablesSelect;
|
@ -4,11 +4,12 @@ import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import './index.scss'
|
||||
// import { withRouter } from 'react-router-dom';
|
||||
import { Modal, Row, Col, Icon } from 'antd';
|
||||
import MockList from './MockList.js';
|
||||
import { Modal, Row, Col, Icon, Collapse, Input } from 'antd'
|
||||
import MockList from './MockList.js'
|
||||
import MethodsList from './MethodsList.js'
|
||||
import VariablesSelect from './VariablesSelect.js'
|
||||
import { handleParamsValue } from '../../common.js'
|
||||
import common from 'common/power-string.js'
|
||||
const Panel = Collapse.Panel;
|
||||
|
||||
// 深拷贝
|
||||
function deepEqual(state) {
|
||||
@ -62,12 +63,17 @@ class ModalPostman extends Component {
|
||||
return (curname, params) => {
|
||||
console.log('value', params);
|
||||
// let curname = e;
|
||||
console.log('curname', curname);
|
||||
let newParamsList = closeRightTabsAndAddNewTab(this.state.methodsParamsList, index, curname, params)
|
||||
this.setState({
|
||||
methodsParamsList: newParamsList
|
||||
})
|
||||
}
|
||||
}
|
||||
// 处理常量输入
|
||||
handleConstantsInput = (val, index) => {
|
||||
this.mockClick(index)(val);
|
||||
}
|
||||
|
||||
handleParamsInput = (e, clickIndex, paramsIndex) => {
|
||||
let newParamsList = deepEqual(this.state.methodsParamsList);
|
||||
@ -78,8 +84,8 @@ class ModalPostman extends Component {
|
||||
})
|
||||
}
|
||||
|
||||
// 方法
|
||||
MethodsListSource = (props) => {
|
||||
|
||||
return <MethodsList
|
||||
click={this.mockClick(props.index)}
|
||||
clickValue={props.value}
|
||||
@ -88,6 +94,8 @@ class ModalPostman extends Component {
|
||||
/>
|
||||
}
|
||||
|
||||
|
||||
// 处理表达式
|
||||
handleValue(val) {
|
||||
// let val = '{@string |length}'
|
||||
return handleParamsValue(val, {});
|
||||
@ -96,21 +104,21 @@ class ModalPostman extends Component {
|
||||
render() {
|
||||
const { visible, handleCancel, handleOk } = this.props
|
||||
const { methodsParamsList } = this.state;
|
||||
const { name } = methodsParamsList[0];
|
||||
// const { name } = methodsParamsList[0];
|
||||
// console.log('common', common);
|
||||
|
||||
const outputParams = () => {
|
||||
let str = '';
|
||||
let length = methodsParamsList.length;
|
||||
methodsParamsList.forEach((item, index) => {
|
||||
let isShow = item.name && length-2 !== index;
|
||||
let isShow = item.name && length - 2 !== index;
|
||||
str += item.name;
|
||||
item.params.forEach((item, index)=>{
|
||||
item.params.forEach((item, index) => {
|
||||
let isParams = index > 0;
|
||||
str += isParams ? ',': ':' ;
|
||||
str += isParams ? ' , ' : ' : ';
|
||||
str += item
|
||||
})
|
||||
str += isShow ? '|': '';
|
||||
str += isShow ? ' | ' : '';
|
||||
})
|
||||
return str
|
||||
}
|
||||
@ -123,6 +131,8 @@ class ModalPostman extends Component {
|
||||
onCancel={handleCancel}
|
||||
wrapClassName="modal-postman"
|
||||
width={1000}
|
||||
maskClosable={false}
|
||||
okText="插入"
|
||||
>
|
||||
|
||||
<Row className="modal-postman-form" type="flex">
|
||||
@ -130,8 +140,17 @@ class ModalPostman extends Component {
|
||||
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>
|
||||
<Collapse className="modal-postman-collapse" defaultActiveKey={['1']} bordered={false} accordion>
|
||||
<Panel header={<h3 className="mock-title">常量</h3>} key="1">
|
||||
<Input placeholder="基础参数值" onChange={(e) => this.handleConstantsInput(e.target.value, index)} />
|
||||
</Panel>
|
||||
<Panel header={<h3 className="mock-title">mock数据</h3>} key="2">
|
||||
<MockList click={this.mockClick(index)} clickValue={item.name}></MockList>
|
||||
</Panel>
|
||||
<Panel header={<h3 className="mock-title">变量</h3>} key="3">
|
||||
<VariablesSelect />
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</Col>
|
||||
:
|
||||
<Col span={8} className="modal-postman-col" key={index}>
|
||||
@ -141,24 +160,10 @@ class ModalPostman extends Component {
|
||||
}
|
||||
</Row>
|
||||
<Row className="modal-postman-expression">
|
||||
<Col span={6}><h3 className="title">输入值</h3></Col>
|
||||
<Col span={6}><h3 className="title">表达式</h3></Col>
|
||||
<Col span={18}>
|
||||
<span className="expression">{'{'}</span>
|
||||
{
|
||||
methodsParamsList.map((item, index) => {
|
||||
return item.name &&
|
||||
<span className="expression-item" key={index}>
|
||||
{item.name}
|
||||
(
|
||||
{
|
||||
item.params.map((item, index) => {
|
||||
return <span className="expression-item-params" key={index}>{item}</span>
|
||||
})
|
||||
}
|
||||
)
|
||||
</span>
|
||||
})
|
||||
}
|
||||
<span className="expression-item">{outputParams()}</span>
|
||||
<span className="expression">{'}'}</span>
|
||||
</Col>
|
||||
</Row>
|
||||
|
@ -42,6 +42,17 @@
|
||||
.modal-postman-preview {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.modal-postman-collapse{
|
||||
.ant-collapse-item > .ant-collapse-header{
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.ant-collapse-item > .ant-collapse-header .arrow{
|
||||
left: 0;
|
||||
font-size: 1.17em;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
border-left: 3px solid #2395f1;
|
||||
padding-left: 8px;
|
||||
@ -103,25 +114,10 @@
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.expression-item:nth-last-child(2){
|
||||
.expression-item{
|
||||
color: #2395f1;
|
||||
}
|
||||
|
||||
.expression-item:after{
|
||||
content:".";
|
||||
}
|
||||
|
||||
.expression-item:nth-last-child(2):after{
|
||||
content:"";
|
||||
}
|
||||
|
||||
.expression-item-params:after{
|
||||
content:",";
|
||||
}
|
||||
|
||||
.expression-item-params:nth-last-child(1):after{
|
||||
content:"";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -152,7 +152,7 @@ function handleSegment(str, index){
|
||||
let method, args = [];
|
||||
if(str.indexOf(methodAndArgsSeparateChar) > 0){
|
||||
str = str.split(methodAndArgsSeparateChar);
|
||||
method = str[0];
|
||||
method = str[0].trim();
|
||||
args = str[1].split(argsSeparateChar).map(item=> _handleValue(item.trim()));
|
||||
}else{
|
||||
method = str;
|
||||
|
Loading…
Reference in New Issue
Block a user