2
0
mirror of https://github.com/YMFE/yapi.git synced 2025-02-23 13:59:28 +08:00

feat: 开始变量部分的编写

This commit is contained in:
gaoxiaolin.gao 2017-11-22 12:16:47 +08:00
parent 8d4a209491
commit a626e363b2
5 changed files with 197 additions and 45 deletions

View File

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

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

View File

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

View File

@ -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:"";
}
}

View File

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