150 lines
4.4 KiB
JavaScript
150 lines
4.4 KiB
JavaScript
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>
|
||
);
|
||
}
|
||
}
|