yapi/exts/yapi-plugin-advanced-mock/AdvMock.js

140 lines
3.7 KiB
JavaScript
Raw Normal View History

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>是否开启&nbsp;<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));