2017-09-17 13:36:51 +08:00
|
|
|
import React, { Component } from 'react'
|
|
|
|
// import { connect } from 'react-redux'
|
|
|
|
import axios from 'axios'
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { withRouter } from 'react-router-dom';
|
2017-10-24 15:32:26 +08:00
|
|
|
import { Form, Switch, Button, message, Icon, Tooltip, Radio } from 'antd';
|
|
|
|
import MockCol from './MockCol/MockCol.js'
|
2017-09-17 13:36:51 +08:00
|
|
|
import mockEditor from 'client/containers/Project/Interface/InterfaceList/mockEditor';
|
2017-10-25 21:42:19 +08:00
|
|
|
import constants from '../../client/constants/variable.js'
|
2017-09-17 13:36:51 +08:00
|
|
|
const FormItem = Form.Item;
|
|
|
|
|
|
|
|
|
|
|
|
class AdvMock extends Component {
|
|
|
|
static propTypes = {
|
|
|
|
form: PropTypes.object,
|
|
|
|
match: PropTypes.object
|
|
|
|
}
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
enable: false,
|
2017-10-24 15:32:26 +08:00
|
|
|
mock_script: '',
|
|
|
|
tab: 'case'
|
2017-09-17 13:36:51 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
handleSubmit = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
let projectId = this.props.match.params.id;
|
|
|
|
let interfaceId = this.props.match.params.actionId;
|
|
|
|
let params = {
|
|
|
|
project_id: projectId,
|
|
|
|
interface_id: interfaceId,
|
|
|
|
mock_script: this.state.mock_script,
|
|
|
|
enable: this.state.enable
|
|
|
|
}
|
|
|
|
axios.post('/api/plugin/advmock/save', params).then(res => {
|
|
|
|
if (res.data.errcode === 0) {
|
|
|
|
message.success('保存成功');
|
|
|
|
} else {
|
|
|
|
message.error(res.data.errmsg);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
this.getAdvMockData();
|
|
|
|
}
|
|
|
|
|
|
|
|
async getAdvMockData() {
|
|
|
|
let interfaceId = this.props.match.params.actionId;
|
|
|
|
let result = await axios.get('/api/plugin/advmock/get?interface_id=' + interfaceId);
|
|
|
|
if (result.data.errcode === 0) {
|
|
|
|
let mockData = result.data.data;
|
|
|
|
this.setState({
|
|
|
|
enable: mockData.enable,
|
|
|
|
mock_script: mockData.mock_script
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
let that = this;
|
|
|
|
mockEditor({
|
|
|
|
container: 'mock-script',
|
|
|
|
data: that.state.mock_script,
|
|
|
|
onChange: function (d) {
|
|
|
|
that.setState({
|
|
|
|
mock_script: d.text
|
|
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
onChange = (v) => {
|
|
|
|
this.setState({
|
|
|
|
enable: v
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2017-10-24 15:32:26 +08:00
|
|
|
handleTapChange = (e) => {
|
|
|
|
this.setState({
|
|
|
|
tab: e.target.value
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2017-09-17 13:36:51 +08:00
|
|
|
render() {
|
|
|
|
const formItemLayout = {
|
|
|
|
labelCol: {
|
|
|
|
sm: { span: 4 }
|
|
|
|
},
|
|
|
|
wrapperCol: {
|
|
|
|
sm: { span: 16 }
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const tailFormItemLayout = {
|
|
|
|
wrapperCol: {
|
|
|
|
sm: {
|
|
|
|
span: 16,
|
|
|
|
offset: 11
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2017-10-24 15:32:26 +08:00
|
|
|
const { tab } = this.state;
|
|
|
|
const isShowCase = tab === 'case';
|
2017-09-17 13:36:51 +08:00
|
|
|
return <div style={{ padding: '20px 10px' }}>
|
2017-10-24 15:32:26 +08:00
|
|
|
<div style={{textAlign: 'center', marginBottom: 20}}>
|
2017-10-24 20:39:23 +08:00
|
|
|
<Radio.Group value={tab} size="large" onChange={this.handleTapChange}>
|
2017-10-24 15:32:26 +08:00
|
|
|
<Radio.Button value="case">期望</Radio.Button>
|
|
|
|
<Radio.Button value="script">脚本</Radio.Button>
|
|
|
|
</Radio.Group>
|
|
|
|
</div>
|
|
|
|
<div style={{display: isShowCase ? 'none' : ''}}>
|
|
|
|
<Form onSubmit={this.handleSubmit}>
|
|
|
|
<FormItem
|
2017-10-25 21:42:19 +08:00
|
|
|
label={<span>是否开启 <a target="_blank" rel="noopener noreferrer" href={constants.docHref.adv_mock_script} ><Tooltip title="点击查看文档"><Icon type="question-circle-o" /></Tooltip></a></span>}
|
2017-10-24 15:32:26 +08:00
|
|
|
{...formItemLayout}
|
|
|
|
>
|
|
|
|
<Switch checked={this.state.enable} onChange={this.onChange} checkedChildren="开" unCheckedChildren="关" />
|
|
|
|
</FormItem>
|
2017-09-17 13:36:51 +08:00
|
|
|
|
2017-10-24 15:32:26 +08:00
|
|
|
<FormItem
|
|
|
|
label="Mock脚本"
|
|
|
|
{...formItemLayout}
|
|
|
|
>
|
|
|
|
<div id="mock-script" style={{ minHeight: '500px' }} ></div>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem {...tailFormItemLayout}>
|
|
|
|
<Button type="primary" htmlType="submit">保存</Button>
|
|
|
|
</FormItem>
|
2017-09-17 13:36:51 +08:00
|
|
|
|
2017-10-24 15:32:26 +08:00
|
|
|
</Form>
|
|
|
|
</div>
|
|
|
|
<div style={{display: isShowCase ? '' : 'none'}}>
|
|
|
|
<MockCol/>
|
|
|
|
</div>
|
2017-09-17 13:36:51 +08:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = Form.create()(withRouter(AdvMock));
|