fork from bc4552c5a8
This commit is contained in:
@@ -0,0 +1,149 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Modal, Collapse, Row, Col, Input, message, Button, Icon } from 'antd';
|
||||
import PropTypes from 'prop-types';
|
||||
import axios from 'axios';
|
||||
import { withRouter } from 'react-router';
|
||||
import { fetchInterfaceColList } from '../../../../../reducer/modules/interfaceCol';
|
||||
|
||||
const { TextArea } = Input;
|
||||
const Panel = Collapse.Panel;
|
||||
|
||||
@connect(
|
||||
state => ({
|
||||
interfaceColList: state.interfaceCol.interfaceColList
|
||||
}),
|
||||
{
|
||||
fetchInterfaceColList
|
||||
}
|
||||
)
|
||||
@withRouter
|
||||
export default class AddColModal extends Component {
|
||||
static propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
interfaceColList: PropTypes.array,
|
||||
fetchInterfaceColList: PropTypes.func,
|
||||
match: PropTypes.object,
|
||||
onOk: PropTypes.func,
|
||||
onCancel: PropTypes.func,
|
||||
caseName: PropTypes.string
|
||||
};
|
||||
|
||||
state = {
|
||||
visible: false,
|
||||
addColName: '',
|
||||
addColDesc: '',
|
||||
id: 0,
|
||||
caseName: ''
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.props.fetchInterfaceColList(this.props.match.params.id);
|
||||
this.setState({ caseName: this.props.caseName });
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
this.setState({ id: nextProps.interfaceColList[0]._id });
|
||||
this.setState({ caseName: nextProps.caseName });
|
||||
}
|
||||
|
||||
addCol = async () => {
|
||||
const { addColName: name, addColDesc: desc } = this.state;
|
||||
const project_id = this.props.match.params.id;
|
||||
const res = await axios.post('/api/col/add_col', { name, desc, project_id });
|
||||
if (!res.data.errcode) {
|
||||
message.success('添加集合成功');
|
||||
await this.props.fetchInterfaceColList(project_id);
|
||||
|
||||
this.setState({ id: res.data.data._id });
|
||||
} else {
|
||||
message.error(res.data.errmsg);
|
||||
}
|
||||
};
|
||||
|
||||
select = id => {
|
||||
this.setState({ id });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { interfaceColList = [] } = this.props;
|
||||
const { id } = this.state;
|
||||
return (
|
||||
<Modal
|
||||
className="add-col-modal"
|
||||
title="添加到集合"
|
||||
visible={this.props.visible}
|
||||
onOk={() => this.props.onOk(id, this.state.caseName)}
|
||||
onCancel={this.props.onCancel}
|
||||
>
|
||||
<Row gutter={6} className="modal-input">
|
||||
<Col span="5">
|
||||
<div className="label">接口用例名：</div>
|
||||
</Col>
|
||||
<Col span="15">
|
||||
<Input
|
||||
placeholder="请输入接口用例名称"
|
||||
value={this.state.caseName}
|
||||
onChange={e => this.setState({ caseName: e.target.value })}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<p>请选择添加到的集合：</p>
|
||||
<ul className="col-list">
|
||||
{interfaceColList.length ? (
|
||||
interfaceColList.map(col => (
|
||||
<li
|
||||
key={col._id}
|
||||
className={`col-item ${col._id === id ? 'selected' : ''}`}
|
||||
onClick={() => this.select(col._id)}
|
||||
>
|
||||
<Icon type="folder-open" style={{ marginRight: 6 }} />
|
||||
{col.name}
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<span>暂无集合，请添加！</span>
|
||||
)}
|
||||
</ul>
|
||||
<Collapse>
|
||||
<Panel header="添加新集合">
|
||||
<Row gutter={6} className="modal-input">
|
||||
<Col span="5">
|
||||
<div className="label">集合名：</div>
|
||||
</Col>
|
||||
<Col span="15">
|
||||
<Input
|
||||
placeholder="请输入集合名称"
|
||||
value={this.state.addColName}
|
||||
onChange={e => this.setState({ addColName: e.target.value })}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={6} className="modal-input">
|
||||
<Col span="5">
|
||||
<div className="label">简介：</div>
|
||||
</Col>
|
||||
<Col span="15">
|
||||
<TextArea
|
||||
rows={3}
|
||||
placeholder="请输入集合描述"
|
||||
value={this.state.addColDesc}
|
||||
onChange={e => this.setState({ addColDesc: e.target.value })}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type="flex" justify="end">
|
||||
<Button style={{ float: 'right' }} type="primary" onClick={this.addCol}>
|
||||
添 加
|
||||
</Button>
|
||||
</Row>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
113
client/containers/Project/Interface/InterfaceList/Run/Run.js
Normal file
113
client/containers/Project/Interface/InterfaceList/Run/Run.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter } from 'react-router';
|
||||
import axios from 'axios';
|
||||
import { message } from 'antd';
|
||||
import { Postman } from '../../../../../components';
|
||||
import AddColModal from './AddColModal';
|
||||
|
||||
// import {
|
||||
// } from '../../../reducer/modules/group.js'
|
||||
|
||||
import './Run.scss';
|
||||
|
||||
@connect(state => ({
|
||||
currInterface: state.inter.curdata,
|
||||
currProject: state.project.currProject,
|
||||
curUid: state.user.uid
|
||||
}))
|
||||
@withRouter
|
||||
export default class Run extends Component {
|
||||
static propTypes = {
|
||||
currProject: PropTypes.object,
|
||||
currInterface: PropTypes.object,
|
||||
match: PropTypes.object,
|
||||
curUid: PropTypes.number
|
||||
};
|
||||
|
||||
state = {};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {}
|
||||
|
||||
UNSAFE_componentWillReceiveProps() {}
|
||||
|
||||
savePostmanRef = postman => {
|
||||
this.postman = postman;
|
||||
};
|
||||
|
||||
saveCase = async (colId, caseName) => {
|
||||
const project_id = this.props.match.params.id;
|
||||
const interface_id = this.props.currInterface._id;
|
||||
const {
|
||||
case_env,
|
||||
req_params,
|
||||
req_query,
|
||||
req_headers,
|
||||
req_body_type,
|
||||
req_body_form,
|
||||
req_body_other
|
||||
} = this.postman.state;
|
||||
|
||||
let params = {
|
||||
interface_id,
|
||||
casename: caseName,
|
||||
col_id: colId,
|
||||
project_id,
|
||||
case_env,
|
||||
req_params,
|
||||
req_query,
|
||||
req_headers,
|
||||
req_body_type,
|
||||
req_body_form,
|
||||
req_body_other
|
||||
};
|
||||
|
||||
if (params.test_res_body && typeof params.test_res_body === 'object') {
|
||||
params.test_res_body = JSON.stringify(params.test_res_body, null, ' ');
|
||||
}
|
||||
|
||||
const res = await axios.post('/api/col/add_case', params);
|
||||
if (res.data.errcode) {
|
||||
message.error(res.data.errmsg);
|
||||
} else {
|
||||
message.success('添加成功');
|
||||
this.setState({ saveCaseModalVisible: false });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { currInterface, currProject } = this.props;
|
||||
const data = Object.assign({}, currInterface, {
|
||||
env: currProject.env,
|
||||
pre_script: currProject.pre_script,
|
||||
after_script: currProject.after_script
|
||||
});
|
||||
data.path = currProject.basepath + currInterface.path;
|
||||
return (
|
||||
<div>
|
||||
<Postman
|
||||
data={data}
|
||||
id={currProject._id}
|
||||
type="inter"
|
||||
saveTip="保存到集合"
|
||||
save={() => this.setState({ saveCaseModalVisible: true })}
|
||||
ref={this.savePostmanRef}
|
||||
interfaceId={currInterface._id}
|
||||
projectId={currInterface.project_id}
|
||||
curUid={this.props.curUid}
|
||||
/>
|
||||
<AddColModal
|
||||
visible={this.state.saveCaseModalVisible}
|
||||
caseName={currInterface.title}
|
||||
onCancel={() => this.setState({ saveCaseModalVisible: false })}
|
||||
onOk={this.saveCase}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
|
||||
.add-col-modal {
|
||||
.col-list {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
margin: 7px 0 16px 0;
|
||||
background: #eaeaea;
|
||||
.col-item {
|
||||
padding: 7px 10px 7px 10px;
|
||||
}
|
||||
.col-item:hover {
|
||||
background: #fa0;
|
||||
}
|
||||
.col-item.selected {
|
||||
background: #2395f1;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user