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' } ] }; } 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 ( ); }; // 处理表达式 handleValue(val) { return handleParamsValue(val, {}); } // 处理错误 handleError() { return ( ); } // 初始化 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 ( 高级参数设置

} visible={visible} onOk={() => this.handleOk(outputParams())} onCancel={this.handleCancel} wrapClassName="modal-postman" width={1024} maskClosable={false} okText="插入" > {methodsParamsList.map((item, index) => { return item.type === 'dataSource' ? ( 常量} key="1"> this.handleConstantsInput(e.target.value, index)} /> mock数据} key="2"> {envType === 'case' && ( 变量  } key="3" > )} ) : ( ); })}

表达式

{outputParams()}

预览

{this.handleValue(outputParams()) || (outputParams() && this.handleError())}

); } } export default ModalPostman;