fork from bc4552c5a8
This commit is contained in:
192
client/components/ModalPostman/MethodsList.js
Normal file
192
client/components/ModalPostman/MethodsList.js
Normal file
@@ -0,0 +1,192 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Row, Icon, Input, Select, Tooltip } from 'antd';
|
||||
import _ from 'underscore';
|
||||
const Option = Select.Option;
|
||||
|
||||
// 深拷贝
|
||||
function deepEqual(state) {
|
||||
return JSON.parse(JSON.stringify(state));
|
||||
}
|
||||
|
||||
const METHODS_LIST = [
|
||||
{ name: 'md5', type: false, params: [], desc: 'md5加密' },
|
||||
{ name: 'lower', type: false, params: [], desc: '所有字母变成小写' },
|
||||
{ name: 'length', type: false, params: [], desc: '数据长度' },
|
||||
{ name: 'substr', type: true, component: 'doubleInput', params: [], desc: '截取部分字符串' },
|
||||
{ name: 'sha', type: true, component: 'select', params: ['sha1'], desc: 'sha加密' },
|
||||
{ name: 'base64', type: false, params: [], desc: 'base64加密' },
|
||||
{ name: 'unbase64', type: false, params: [], desc: 'base64解密' },
|
||||
{ name: 'concat', type: true, component: 'input', params: [], desc: '连接字符串' },
|
||||
{ name: 'lconcat', type: true, component: 'input', params: [], desc: '左连接' },
|
||||
{ name: 'upper', type: false, desc: '所有字母变成大写' },
|
||||
{ name: 'number', type: false, desc: '字符串转换为数字类型' }
|
||||
];
|
||||
|
||||
class MethodsList extends Component {
|
||||
static propTypes = {
|
||||
show: PropTypes.bool,
|
||||
click: PropTypes.func,
|
||||
clickValue: PropTypes.string,
|
||||
paramsInput: PropTypes.func,
|
||||
clickIndex: PropTypes.number,
|
||||
params: PropTypes.array
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
list: METHODS_LIST,
|
||||
moreFlag: true
|
||||
};
|
||||
}
|
||||
|
||||
showMore = () => {
|
||||
this.setState({
|
||||
moreFlag: false
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
var index = _.findIndex(METHODS_LIST, { name: this.props.clickValue });
|
||||
|
||||
let moreFlag = index > 3 ? false : true;
|
||||
this.setState({
|
||||
moreFlag
|
||||
});
|
||||
}
|
||||
|
||||
inputComponent = props => {
|
||||
let clickIndex = props.clickIndex;
|
||||
let paramsIndex = props.paramsIndex;
|
||||
let params = props.params;
|
||||
return (
|
||||
<Input
|
||||
size="small"
|
||||
placeholder="请输入参数"
|
||||
value={params[0]}
|
||||
onChange={e => this.handleParamsChange(e.target.value, clickIndex, paramsIndex, 0)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
doubleInputComponent = props => {
|
||||
let clickIndex = props.clickIndex;
|
||||
let paramsIndex = props.paramsIndex;
|
||||
let params = props.params;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder="start"
|
||||
value={params[0]}
|
||||
onChange={e => this.handleParamsChange(e.target.value, clickIndex, paramsIndex, 0)}
|
||||
/>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder="length"
|
||||
value={params[1]}
|
||||
onChange={e => this.handleParamsChange(e.target.value, clickIndex, paramsIndex, 1)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
selectComponent = props => {
|
||||
const subname = ['sha1', 'sha224', 'sha256', 'sha384', 'sha512'];
|
||||
let clickIndex = props.clickIndex;
|
||||
let paramsIndex = props.paramsIndex;
|
||||
let params = props.params;
|
||||
return (
|
||||
<Select
|
||||
value={params[0] || 'sha1'}
|
||||
placeholder="请选择"
|
||||
style={{ width: 150 }}
|
||||
size="small"
|
||||
onChange={e => this.handleParamsChange(e, clickIndex, paramsIndex, 0)}
|
||||
>
|
||||
{subname.map((item, index) => {
|
||||
return (
|
||||
<Option value={item} key={index}>
|
||||
{item}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
|
||||
// 处理参数输入
|
||||
handleParamsChange(value, clickIndex, paramsIndex, index) {
|
||||
let newList = deepEqual(this.state.list);
|
||||
newList[paramsIndex].params[index] = value;
|
||||
this.setState({
|
||||
list: newList
|
||||
});
|
||||
this.props.paramsInput(value, clickIndex, index);
|
||||
}
|
||||
|
||||
// 组件选择
|
||||
handleComponent(item, clickIndex, index, params) {
|
||||
let query = {
|
||||
clickIndex: clickIndex,
|
||||
paramsIndex: index,
|
||||
params
|
||||
};
|
||||
switch (item.component) {
|
||||
case 'select':
|
||||
return this.selectComponent(query);
|
||||
case 'input':
|
||||
return this.inputComponent(query);
|
||||
case 'doubleInput':
|
||||
return this.doubleInputComponent(query);
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { list, moreFlag } = this.state;
|
||||
const { click, clickValue, clickIndex, params } = this.props;
|
||||
let showList = moreFlag ? list.slice(0, 4) : list;
|
||||
|
||||
return (
|
||||
<div className="modal-postman-form-method">
|
||||
<h3 className="methods-title title">方法</h3>
|
||||
{showList.map((item, index) => {
|
||||
return (
|
||||
<Row
|
||||
key={index}
|
||||
type="flex"
|
||||
align="middle"
|
||||
className={'row methods-row ' + (item.name === clickValue ? 'checked' : '')}
|
||||
onClick={() => click(item.name, showList[index].params)}
|
||||
>
|
||||
<Tooltip title={item.desc}>
|
||||
<span>{item.name}</span>
|
||||
</Tooltip>
|
||||
<span className="input-component">
|
||||
{item.type &&
|
||||
this.handleComponent(
|
||||
item,
|
||||
clickIndex,
|
||||
index,
|
||||
item.name === clickValue ? params : []
|
||||
)}
|
||||
</span>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
{moreFlag && (
|
||||
<div className="show-more" onClick={this.showMore}>
|
||||
<Icon type="down" />
|
||||
<span style={{ paddingLeft: '4px' }}>更多</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MethodsList;
|
||||
67
client/components/ModalPostman/MockList.js
Normal file
67
client/components/ModalPostman/MockList.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Row, Input } from 'antd';
|
||||
import constants from '../../constants/variable.js';
|
||||
const wordList = constants.MOCK_SOURCE;
|
||||
const Search = Input.Search;
|
||||
|
||||
class MockList extends Component {
|
||||
static propTypes = {
|
||||
click: PropTypes.func,
|
||||
clickValue: PropTypes.string
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
filter: '',
|
||||
list: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
list: wordList
|
||||
});
|
||||
}
|
||||
|
||||
onFilter = e => {
|
||||
const list = wordList.filter(item => {
|
||||
return item.mock.indexOf(e.target.value) !== -1;
|
||||
});
|
||||
this.setState({
|
||||
filter: e.target.value,
|
||||
list: list
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { list, filter } = this.state;
|
||||
const { click, clickValue } = this.props;
|
||||
return (
|
||||
<div className="modal-postman-form-mock">
|
||||
<Search
|
||||
onChange={this.onFilter}
|
||||
value={filter}
|
||||
placeholder="搜索mock数据"
|
||||
className="mock-search"
|
||||
/>
|
||||
{list.map((item, index) => {
|
||||
return (
|
||||
<Row
|
||||
key={index}
|
||||
type="flex"
|
||||
align="middle"
|
||||
className={'row ' + (item.mock === clickValue ? 'checked' : '')}
|
||||
onClick={() => click(item.mock)}
|
||||
>
|
||||
<span>{item.mock}</span>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MockList;
|
||||
157
client/components/ModalPostman/VariablesSelect.js
Normal file
157
client/components/ModalPostman/VariablesSelect.js
Normal file
@@ -0,0 +1,157 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Tree } from 'antd';
|
||||
import { connect } from 'react-redux';
|
||||
import { fetchVariableParamsList } from '../../reducer/modules/interfaceCol.js';
|
||||
|
||||
const TreeNode = Tree.TreeNode;
|
||||
const CanSelectPathPrefix = 'CanSelectPath-';
|
||||
|
||||
function deleteLastObject(str) {
|
||||
return str
|
||||
.split('.')
|
||||
.slice(0, -1)
|
||||
.join('.');
|
||||
}
|
||||
|
||||
function deleteLastArr(str) {
|
||||
return str.replace(/\[.*?\]/g, '');
|
||||
}
|
||||
|
||||
@connect(
|
||||
state => {
|
||||
return {
|
||||
currColId: state.interfaceCol.currColId
|
||||
};
|
||||
},
|
||||
{
|
||||
fetchVariableParamsList
|
||||
}
|
||||
)
|
||||
class VariablesSelect extends Component {
|
||||
static propTypes = {
|
||||
click: PropTypes.func,
|
||||
currColId: PropTypes.number,
|
||||
fetchVariableParamsList: PropTypes.func,
|
||||
clickValue: PropTypes.string,
|
||||
id: PropTypes.number
|
||||
};
|
||||
state = {
|
||||
records: [],
|
||||
expandedKeys: [],
|
||||
selectedKeys: []
|
||||
};
|
||||
|
||||
handleRecordsData(id) {
|
||||
let newRecords = [];
|
||||
this.id = id;
|
||||
for (let i = 0; i < this.records.length; i++) {
|
||||
if (this.records[i]._id === id) {
|
||||
break;
|
||||
}
|
||||
newRecords.push(this.records[i]);
|
||||
}
|
||||
this.setState({
|
||||
records: newRecords
|
||||
});
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const { currColId, fetchVariableParamsList, clickValue } = this.props;
|
||||
let result = await fetchVariableParamsList(currColId);
|
||||
let records = result.payload.data.data;
|
||||
this.records = records.sort((a, b) => {
|
||||
return a.index - b.index;
|
||||
});
|
||||
this.handleRecordsData(this.props.id);
|
||||
|
||||
if (clickValue) {
|
||||
let isArrayParams = clickValue.lastIndexOf(']') === clickValue.length - 1;
|
||||
let key = isArrayParams ? deleteLastArr(clickValue) : deleteLastObject(clickValue);
|
||||
this.setState({
|
||||
expandedKeys: [key],
|
||||
selectedKeys: [CanSelectPathPrefix + clickValue]
|
||||
});
|
||||
// this.props.click(clickValue);
|
||||
}
|
||||
}
|
||||
|
||||
async UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
if (this.records && nextProps.id && this.id !== nextProps.id) {
|
||||
this.handleRecordsData(nextProps.id);
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = key => {
|
||||
this.setState({
|
||||
selectedKeys: [key]
|
||||
});
|
||||
if (key && key.indexOf(CanSelectPathPrefix) === 0) {
|
||||
key = key.substr(CanSelectPathPrefix.length);
|
||||
this.props.click(key);
|
||||
} else {
|
||||
this.setState({
|
||||
expandedKeys: [key]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onExpand = keys => {
|
||||
this.setState({ expandedKeys: keys });
|
||||
};
|
||||
|
||||
render() {
|
||||
const pathSelctByTree = (data, elementKeyPrefix = '$', deepLevel = 0) => {
|
||||
let keys = Object.keys(data);
|
||||
let TreeComponents = keys.map((key, index) => {
|
||||
let item = data[key],
|
||||
casename;
|
||||
if (deepLevel === 0) {
|
||||
elementKeyPrefix = '$';
|
||||
elementKeyPrefix = elementKeyPrefix + '.' + item._id;
|
||||
casename = item.casename;
|
||||
item = {
|
||||
params: item.params,
|
||||
body: item.body
|
||||
};
|
||||
} else if (Array.isArray(data)) {
|
||||
elementKeyPrefix =
|
||||
index === 0
|
||||
? elementKeyPrefix + '[' + key + ']'
|
||||
: deleteLastArr(elementKeyPrefix) + '[' + key + ']';
|
||||
} else {
|
||||
elementKeyPrefix =
|
||||
index === 0
|
||||
? elementKeyPrefix + '.' + key
|
||||
: deleteLastObject(elementKeyPrefix) + '.' + key;
|
||||
}
|
||||
if (item && typeof item === 'object') {
|
||||
const isDisable = Array.isArray(item) && item.length === 0;
|
||||
return (
|
||||
<TreeNode key={elementKeyPrefix} disabled={isDisable} title={casename || key}>
|
||||
{pathSelctByTree(item, elementKeyPrefix, deepLevel + 1)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
return <TreeNode key={CanSelectPathPrefix + elementKeyPrefix} title={key} />;
|
||||
});
|
||||
|
||||
return TreeComponents;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-postman-form-variable">
|
||||
<Tree
|
||||
expandedKeys={this.state.expandedKeys}
|
||||
selectedKeys={this.state.selectedKeys}
|
||||
onSelect={([key]) => this.handleSelect(key)}
|
||||
onExpand={this.onExpand}
|
||||
>
|
||||
{pathSelctByTree(this.state.records)}
|
||||
</Tree>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default VariablesSelect;
|
||||
317
client/components/ModalPostman/index.js
Normal file
317
client/components/ModalPostman/index.js
Normal file
@@ -0,0 +1,317 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './index.scss';
|
||||
import { Alert, Modal, Row, Col, Icon, Collapse, Input, Tooltip } from 'antd';
|
||||
import MockList from './MockList.js';
|
||||
import MethodsList from './MethodsList.js';
|
||||
import VariablesSelect from './VariablesSelect.js';
|
||||
import { trim } from '../../common.js';
|
||||
|
||||
const { handleParamsValue } = require('common/utils.js');
|
||||
const Panel = Collapse.Panel;
|
||||
|
||||
// 深拷贝
|
||||
function deepEqual(state) {
|
||||
return JSON.parse(JSON.stringify(state));
|
||||
}
|
||||
|
||||
function closeRightTabsAndAddNewTab(arr, index, name, params) {
|
||||
let newParamsList = [].concat(arr);
|
||||
newParamsList.splice(index + 1, newParamsList.length - index);
|
||||
newParamsList.push({
|
||||
name: '',
|
||||
params: []
|
||||
});
|
||||
|
||||
let curParams = params || [];
|
||||
let curname = name || '';
|
||||
newParamsList[index] = {
|
||||
...newParamsList[index],
|
||||
name: curname,
|
||||
params: curParams
|
||||
};
|
||||
return newParamsList;
|
||||
}
|
||||
|
||||
class ModalPostman extends Component {
|
||||
static propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
handleCancel: PropTypes.func,
|
||||
handleOk: PropTypes.func,
|
||||
inputValue: PropTypes.any,
|
||||
envType: PropTypes.string,
|
||||
id: PropTypes.number
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
methodsShow: false,
|
||||
methodsShowMore: false,
|
||||
methodsList: [],
|
||||
constantInput: '',
|
||||
activeKey: '1',
|
||||
methodsParamsList: [
|
||||
{
|
||||
name: '',
|
||||
params: [],
|
||||
type: 'dataSource'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
let { inputValue } = this.props;
|
||||
this.setState({
|
||||
constantInput: inputValue
|
||||
});
|
||||
// this.props.inputValue && this.handleConstantsInput(this.props.inputValue, 0);
|
||||
inputValue && this.handleInitList(inputValue);
|
||||
}
|
||||
|
||||
handleInitList(val) {
|
||||
val = val.replace(/^\{\{(.+)\}\}$/g, '$1');
|
||||
let valArr = val.split('|');
|
||||
|
||||
if (valArr[0].indexOf('@') >= 0) {
|
||||
this.setState({
|
||||
activeKey: '2'
|
||||
});
|
||||
} else if (valArr[0].indexOf('$') >= 0) {
|
||||
this.setState({
|
||||
activeKey: '3'
|
||||
});
|
||||
}
|
||||
|
||||
let paramsList = [
|
||||
{
|
||||
name: trim(valArr[0]),
|
||||
params: [],
|
||||
type: 'dataSource'
|
||||
}
|
||||
];
|
||||
|
||||
for (let i = 1; i < valArr.length; i++) {
|
||||
let nameArr = valArr[i].split(':');
|
||||
|
||||
let paramArr = nameArr[1] && nameArr[1].split(',');
|
||||
paramArr =
|
||||
paramArr &&
|
||||
paramArr.map(item => {
|
||||
return trim(item);
|
||||
});
|
||||
let item = {
|
||||
name: trim(nameArr[0]),
|
||||
params: paramArr || []
|
||||
};
|
||||
paramsList.push(item);
|
||||
}
|
||||
|
||||
this.setState(
|
||||
{
|
||||
methodsParamsList: paramsList
|
||||
},
|
||||
() => {
|
||||
this.mockClick(valArr.length)();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
mockClick(index) {
|
||||
return (curname, params) => {
|
||||
let newParamsList = closeRightTabsAndAddNewTab(
|
||||
this.state.methodsParamsList,
|
||||
index,
|
||||
curname,
|
||||
params
|
||||
);
|
||||
this.setState({
|
||||
methodsParamsList: newParamsList
|
||||
});
|
||||
};
|
||||
}
|
||||
// 处理常量输入
|
||||
handleConstantsInput = val => {
|
||||
val = val.replace(/^\{\{(.+)\}\}$/g, '$1');
|
||||
this.setState({
|
||||
constantInput: val
|
||||
});
|
||||
this.mockClick(0)(val);
|
||||
};
|
||||
|
||||
handleParamsInput = (e, clickIndex, paramsIndex) => {
|
||||
let newParamsList = deepEqual(this.state.methodsParamsList);
|
||||
newParamsList[clickIndex].params[paramsIndex] = e;
|
||||
this.setState({
|
||||
methodsParamsList: newParamsList
|
||||
});
|
||||
};
|
||||
|
||||
// 方法
|
||||
MethodsListSource = props => {
|
||||
return (
|
||||
<MethodsList
|
||||
click={this.mockClick(props.index)}
|
||||
clickValue={props.value}
|
||||
params={props.params}
|
||||
paramsInput={this.handleParamsInput}
|
||||
clickIndex={props.index}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// 处理表达式
|
||||
handleValue(val) {
|
||||
return handleParamsValue(val, {});
|
||||
}
|
||||
|
||||
// 处理错误
|
||||
handleError() {
|
||||
return (
|
||||
<Alert
|
||||
message="请求“变量集”尚未运行,所以我们无法从其响应中提取的值。您可以在测试集合中测试这些变量。"
|
||||
type="warning"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// 初始化
|
||||
setInit() {
|
||||
let initParamsList = [
|
||||
{
|
||||
name: '',
|
||||
params: [],
|
||||
type: 'dataSource'
|
||||
}
|
||||
];
|
||||
this.setState({
|
||||
methodsParamsList: initParamsList
|
||||
});
|
||||
}
|
||||
// 处理取消插入
|
||||
handleCancel = () => {
|
||||
this.setInit();
|
||||
this.props.handleCancel();
|
||||
};
|
||||
|
||||
// 处理插入
|
||||
handleOk = installValue => {
|
||||
this.props.handleOk(installValue);
|
||||
this.setInit();
|
||||
};
|
||||
// 处理面板切换
|
||||
handleCollapse = key => {
|
||||
this.setState({
|
||||
activeKey: key
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { visible, envType } = this.props;
|
||||
const { methodsParamsList, constantInput } = this.state;
|
||||
|
||||
const outputParams = () => {
|
||||
let str = '';
|
||||
let length = methodsParamsList.length;
|
||||
methodsParamsList.forEach((item, index) => {
|
||||
let isShow = item.name && length - 2 !== index;
|
||||
str += item.name;
|
||||
item.params.forEach((item, index) => {
|
||||
let isParams = index > 0;
|
||||
str += isParams ? ' , ' : ' : ';
|
||||
str += item;
|
||||
});
|
||||
str += isShow ? ' | ' : '';
|
||||
});
|
||||
return '{{ ' + str + ' }}';
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<p>
|
||||
<Icon type="edit" /> 高级参数设置
|
||||
</p>
|
||||
}
|
||||
visible={visible}
|
||||
onOk={() => this.handleOk(outputParams())}
|
||||
onCancel={this.handleCancel}
|
||||
wrapClassName="modal-postman"
|
||||
width={1024}
|
||||
maskClosable={false}
|
||||
okText="插入"
|
||||
>
|
||||
<Row className="modal-postman-form" type="flex">
|
||||
{methodsParamsList.map((item, index) => {
|
||||
return item.type === 'dataSource' ? (
|
||||
<Col span={8} className="modal-postman-col" key={index}>
|
||||
<Collapse
|
||||
className="modal-postman-collapse"
|
||||
activeKey={this.state.activeKey}
|
||||
onChange={this.handleCollapse}
|
||||
bordered={false}
|
||||
accordion
|
||||
>
|
||||
<Panel header={<h3 className="mock-title">常量</h3>} key="1">
|
||||
<Input
|
||||
placeholder="基础参数值"
|
||||
value={constantInput}
|
||||
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} />
|
||||
</Panel>
|
||||
{envType === 'case' && (
|
||||
<Panel
|
||||
header={
|
||||
<h3 className="mock-title">
|
||||
变量 <Tooltip
|
||||
placement="top"
|
||||
title="YApi 提供了强大的变量参数功能，你可以在测试的时候使用前面接口的 参数 或 返回值 作为 后面接口的参数，即使接口之间存在依赖，也可以轻松 一键测试~"
|
||||
>
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</h3>
|
||||
}
|
||||
key="3"
|
||||
>
|
||||
<VariablesSelect
|
||||
id={this.props.id}
|
||||
click={this.mockClick(index)}
|
||||
clickValue={item.name}
|
||||
/>
|
||||
</Panel>
|
||||
)}
|
||||
</Collapse>
|
||||
</Col>
|
||||
) : (
|
||||
<Col span={8} className="modal-postman-col" key={index}>
|
||||
<this.MethodsListSource index={index} value={item.name} params={item.params} />
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
<Row className="modal-postman-expression">
|
||||
<Col span={6}>
|
||||
<h3 className="title">表达式</h3>
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<span className="expression-item">{outputParams()}</span>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="modal-postman-preview">
|
||||
<Col span={6}>
|
||||
<h3 className="title">预览</h3>
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<h3>{this.handleValue(outputParams()) || (outputParams() && this.handleError())}</h3>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ModalPostman;
|
||||
143
client/components/ModalPostman/index.scss
Normal file
143
client/components/ModalPostman/index.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
.modal-postman {
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.modal-postman-form {
|
||||
// padding: 0 16px;
|
||||
max-height: 500px;
|
||||
min-height: 400px;
|
||||
overflow-y: scroll;
|
||||
.ant-radio-group{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.mock-search {
|
||||
padding-right: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.mock-checked{
|
||||
color:#fff;
|
||||
background-color:#2395f1;
|
||||
width:100%
|
||||
}
|
||||
.row {
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checked{
|
||||
color:#fff;
|
||||
background-color:#2395f1;
|
||||
}
|
||||
}
|
||||
.modal-postman-expression, .modal-postman-preview {
|
||||
border-top: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
line-height: 38px;
|
||||
}
|
||||
.modal-postman-preview {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
}
|
||||
.modal-postman-collapse{
|
||||
.ant-collapse-item > .ant-collapse-header{
|
||||
// padding-left: 20px;
|
||||
// margin-left: 8px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.ant-collapse-item > .ant-collapse-header .arrow{
|
||||
left: 14px;
|
||||
font-size: 1.17em;
|
||||
}
|
||||
.ant-collapse-content > .ant-collapse-content-box{
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.ant-collapse-content {
|
||||
padding: 0 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
border-left: 3px solid #2395f1;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.modal-postman-form-mock, .modal-postman-form-variable{
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.mock-title, .methods-title{
|
||||
margin-bottom: 8px
|
||||
}
|
||||
.modal-postman-form-method{
|
||||
padding-top: 16px;
|
||||
margin-left: 8px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
.methods-row{
|
||||
position: relative;
|
||||
// border-bottom: 1px solid #e9e9e9;
|
||||
.ant-input-sm{
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.methods-row:nth-child(5){
|
||||
height: 67px;
|
||||
}
|
||||
|
||||
.modal-postman-col{
|
||||
border-right: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.show-more{
|
||||
color: #2395f1;
|
||||
padding-left: 8px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.ant-row-flex {
|
||||
flex-wrap: nowrap
|
||||
}
|
||||
.input-component {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
width: 150px;
|
||||
padding-top: 2px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.modal-postman-expression{
|
||||
.expression-item,.expression {
|
||||
color: rgba(39,56,72,0.85);
|
||||
font-size: 1.17em;
|
||||
font-weight: 500;
|
||||
line-height: 1.5em;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.expression-item{
|
||||
color: #2395f1;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.modal-postman-preview{
|
||||
h3{
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user