mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-06 12:45:22 +08:00
Merge branch 'dev' of http://gitlab.corp.qunar.com/mfe/yapi into dev
This commit is contained in:
qitmac000249
commit
41164ef611
@ -46,7 +46,7 @@ exports.logoSVG = (length) => (<svg className="svg" width={length} height={lengt
|
|||||||
// this.func = debounce(this.func, 400);
|
// this.func = debounce(this.func, 400);
|
||||||
exports.debounce = (func, wait) => {
|
exports.debounce = (func, wait) => {
|
||||||
let timeout;
|
let timeout;
|
||||||
return function() {
|
return function () {
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
timeout = setTimeout(func, wait);
|
timeout = setTimeout(func, wait);
|
||||||
};
|
};
|
||||||
@ -57,7 +57,7 @@ exports.pickRandomProperty = (obj) => {
|
|||||||
let result;
|
let result;
|
||||||
let count = 0;
|
let count = 0;
|
||||||
for (let prop in obj)
|
for (let prop in obj)
|
||||||
if (Math.random() < 1/++count) result = prop;
|
if (Math.random() < 1 / ++count) result = prop;
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,3 +65,24 @@ exports.getImgPath = (path, type) => {
|
|||||||
let rate = window.devicePixelRatio >= 2 ? 2 : 1;
|
let rate = window.devicePixelRatio >= 2 ? 2 : 1;
|
||||||
return `${path}@${rate}x.${type}`;
|
return `${path}@${rate}x.${type}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function trim(str) {
|
||||||
|
if (!str) {
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
str = str + '';
|
||||||
|
|
||||||
|
return str.replace(/(^\s*)|(\s*$)/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
exports.trim = trim;
|
||||||
|
|
||||||
|
exports.handlePath = (path) => {
|
||||||
|
path = trim(path);
|
||||||
|
if (!path) return path;
|
||||||
|
if (path === '/') return '';
|
||||||
|
path = path[0] !== '/' ? '/' + path : path;
|
||||||
|
path = path[path.length - 1] === '/' ? path.substr(0, path.length - 1) : path;
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,348 +0,0 @@
|
|||||||
import './AddInterface.scss'
|
|
||||||
import React, { Component } from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import axios from 'axios'
|
|
||||||
import Mock from 'mockjs'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import { autobind } from 'core-decorators'
|
|
||||||
import { Button, Tabs, message, Affix, Spin } from 'antd'
|
|
||||||
import ReqMethod from './ReqMethod/ReqMethod.js'
|
|
||||||
import ReqHeader from './ReqHeader/ReqHeader.js'
|
|
||||||
import ReqParams from './ReqParams/ReqParams.js'
|
|
||||||
import ResParams from './ResParams/ResParams.js'
|
|
||||||
import Result from './Result/Result.js'
|
|
||||||
import MockUrl from './MockUrl/MockUrl.js'
|
|
||||||
import InterfaceTest from './InterfaceTest/InterfaceTest.js'
|
|
||||||
import {
|
|
||||||
saveForms,
|
|
||||||
getResParams,
|
|
||||||
getReqParams,
|
|
||||||
addReqHeader,
|
|
||||||
pushInputValue,
|
|
||||||
pushInterfaceName,
|
|
||||||
fetchInterfaceProject,
|
|
||||||
pushInterfaceMethod
|
|
||||||
} from '../../reducer/modules/addInterface.js'
|
|
||||||
|
|
||||||
let projectId = ''
|
|
||||||
const success = (text, arg) => {
|
|
||||||
arg ? message.success(text) : message.error(text)
|
|
||||||
}
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
reqParams: state.addInterface.reqParams,
|
|
||||||
resParams: state.addInterface.resParams,
|
|
||||||
method: state.addInterface.method,
|
|
||||||
url: state.addInterface.url,
|
|
||||||
seqGroup: state.addInterface.seqGroup,
|
|
||||||
interfaceName: state.addInterface.interfaceName,
|
|
||||||
server_ip: state.user.server_ip,
|
|
||||||
clipboard: state.addInterface.clipboard
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
saveForms,
|
|
||||||
getReqParams,
|
|
||||||
getResParams,
|
|
||||||
addReqHeader,
|
|
||||||
pushInputValue,
|
|
||||||
pushInterfaceName,
|
|
||||||
fetchInterfaceProject,
|
|
||||||
pushInterfaceMethod
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class AddInterface extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
url: PropTypes.string,
|
|
||||||
method: PropTypes.string,
|
|
||||||
server_ip: PropTypes.string,
|
|
||||||
reqParams: PropTypes.string,
|
|
||||||
resParams: PropTypes.string,
|
|
||||||
seqGroup: PropTypes.array,
|
|
||||||
interfaceName: PropTypes.string,
|
|
||||||
saveForms: PropTypes.func,
|
|
||||||
addReqHeader: PropTypes.func,
|
|
||||||
getReqParams: PropTypes.func,
|
|
||||||
getResParams: PropTypes.func,
|
|
||||||
pushInputValue: PropTypes.func,
|
|
||||||
pushInterfaceName: PropTypes.func,
|
|
||||||
clipboard: PropTypes.func
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor (props) {
|
|
||||||
super(props)
|
|
||||||
this.state = {
|
|
||||||
isLoading: '',
|
|
||||||
isSave: false,
|
|
||||||
mockJson: '',
|
|
||||||
mockURL: '',
|
|
||||||
projectData: {},
|
|
||||||
tagName: '添加接口',
|
|
||||||
showMock: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount () {
|
|
||||||
const ifTrue = this.verificationURL()
|
|
||||||
const initData = [{
|
|
||||||
id: 0,
|
|
||||||
name: '',
|
|
||||||
value: ''
|
|
||||||
}]
|
|
||||||
let interfaceId = undefined
|
|
||||||
if (ifTrue) {
|
|
||||||
interfaceId = this.getInterfaceId()
|
|
||||||
this.initInterfaceData(interfaceId)
|
|
||||||
this.modifyTagName('编辑接口')
|
|
||||||
this.setState({showMock: 'show-mock'})
|
|
||||||
} else {
|
|
||||||
const props = this.props
|
|
||||||
props.pushInputValue('')
|
|
||||||
props.pushInterfaceName('')
|
|
||||||
props.getReqParams(JSON.stringify({
|
|
||||||
"id": 1,
|
|
||||||
"name": "xxx"
|
|
||||||
}))
|
|
||||||
props.getResParams(JSON.stringify({
|
|
||||||
errcode: "@natural",
|
|
||||||
"data|3-8": {
|
|
||||||
uid: "@id",
|
|
||||||
name: "@name",
|
|
||||||
email: "@email"
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
props.addReqHeader(initData)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getInterfaceId () {
|
|
||||||
const reg = /add-interface\/edit\/(\d+)/g
|
|
||||||
const regTwo = /add-interface\/(\d+)/g
|
|
||||||
const url = location.href
|
|
||||||
|
|
||||||
if ( url.match(reg) ) {
|
|
||||||
return RegExp.$1
|
|
||||||
} else {
|
|
||||||
url.match(regTwo)
|
|
||||||
return RegExp.$1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
modifyTagName (tagName) {
|
|
||||||
this.setState({
|
|
||||||
tagName
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
verificationURL () {
|
|
||||||
const dir = 'add-interface/edit'
|
|
||||||
const url = location.href
|
|
||||||
if (url.includes(dir)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getMockURL (project_id, result) {
|
|
||||||
const params = {id: project_id}
|
|
||||||
axios.get('/api/project/get', {params: params}).
|
|
||||||
then( data => {
|
|
||||||
const { prd_host, basepath } = data.data.data
|
|
||||||
const mockURL = `http://${prd_host}${basepath}${result.path}`
|
|
||||||
this.setState({
|
|
||||||
mockURL: mockURL,
|
|
||||||
projectData: data.data.data
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
editState (data) {
|
|
||||||
const props = this.props
|
|
||||||
const { path, title, req_params_other, res_body, req_headers, project_id, method } = data
|
|
||||||
this.setState({
|
|
||||||
apiData: data
|
|
||||||
})
|
|
||||||
props.pushInputValue(path)
|
|
||||||
props.pushInterfaceMethod(method)
|
|
||||||
props.pushInterfaceName(title)
|
|
||||||
props.getReqParams(req_params_other)
|
|
||||||
props.getResParams(res_body)
|
|
||||||
props.addReqHeader(req_headers)
|
|
||||||
props.fetchInterfaceProject(project_id)
|
|
||||||
projectId = project_id
|
|
||||||
}
|
|
||||||
|
|
||||||
initInterfaceData (interfaceId) {
|
|
||||||
const params = { id: interfaceId }
|
|
||||||
|
|
||||||
axios.get('/interface/get', {params: params})
|
|
||||||
.then(result => {
|
|
||||||
result = result.data.data
|
|
||||||
result.req_headers.map((value, key) => {
|
|
||||||
value.id = key
|
|
||||||
return value
|
|
||||||
})
|
|
||||||
this.editState(result)
|
|
||||||
// 初始化 mock
|
|
||||||
this.mockData()
|
|
||||||
|
|
||||||
this.getMockURL(projectId, result)
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.log(e)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
initInterfaceDataTwo (interfaceId) {
|
|
||||||
const params = { id: interfaceId }
|
|
||||||
|
|
||||||
axios.get('/interface/get', {params: params})
|
|
||||||
.then(result => {
|
|
||||||
result = result.data.data
|
|
||||||
this.getMockURL(result.project_id, result)
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.log(e)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading (boolean) {
|
|
||||||
this.setState({
|
|
||||||
isLoading: boolean ? 'is-loading' : ''
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
routerPage () {
|
|
||||||
const origin = location.origin
|
|
||||||
const pathname = location.pathname
|
|
||||||
location.href = `${origin}${pathname}#/interface`
|
|
||||||
}
|
|
||||||
|
|
||||||
changeState (ifTrue) {
|
|
||||||
this.setState({
|
|
||||||
isSave: ifTrue
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
mockData () { // mock 数据
|
|
||||||
let resParams = ''
|
|
||||||
let json = ''
|
|
||||||
|
|
||||||
if(this.props.resParams){
|
|
||||||
resParams = JSON.parse(this.props.resParams)
|
|
||||||
json = JSON.stringify(Mock.mock(resParams), null, 2)
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
mockJson: json
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
jumpEditUrl (_id) {
|
|
||||||
const origin = location.origin
|
|
||||||
const pathname = location.pathname
|
|
||||||
location.href = `${origin}${pathname}#/add-interface/edit/${_id}`
|
|
||||||
this.initInterfaceDataTwo(_id)
|
|
||||||
setTimeout(() => {
|
|
||||||
this.props.clipboard()
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
saveForms () {
|
|
||||||
let postURL = undefined
|
|
||||||
const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props
|
|
||||||
const ifTrue = this.verificationURL()
|
|
||||||
const interfaceId = this.getInterfaceId()
|
|
||||||
const params = {
|
|
||||||
title: interfaceName,
|
|
||||||
path: url,
|
|
||||||
method: method,
|
|
||||||
req_headers: seqGroup,
|
|
||||||
project_id: interfaceId,
|
|
||||||
req_params_type: 'json',
|
|
||||||
req_params_other: reqParams,
|
|
||||||
res_body_type: 'json',
|
|
||||||
res_body: resParams
|
|
||||||
}
|
|
||||||
if (ifTrue) {
|
|
||||||
params.id = interfaceId
|
|
||||||
postURL = '/interface/up'
|
|
||||||
} else {
|
|
||||||
postURL = '/interface/add'
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setLoading(true)
|
|
||||||
|
|
||||||
axios.post(postURL, params)
|
|
||||||
.then(data => {
|
|
||||||
if(data.data.errcode !== 0){
|
|
||||||
this.setLoading()
|
|
||||||
success(data.data.errmsg, false)
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const id = data.data.data._id
|
|
||||||
const _id = id || interfaceId
|
|
||||||
this.setLoading()
|
|
||||||
success('保存成功!', true)
|
|
||||||
this.changeState(true)
|
|
||||||
// 初始化 mock
|
|
||||||
this.mockData()
|
|
||||||
|
|
||||||
if (id) {
|
|
||||||
this.setState({showMock: 'show-mock'})
|
|
||||||
}
|
|
||||||
|
|
||||||
this.jumpEditUrl(_id)
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
this.setLoading()
|
|
||||||
success('程序出错，请联系管理员检查!', false)
|
|
||||||
console.log(error)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const TabPane = Tabs.TabPane
|
|
||||||
const { server_ip } = this.props
|
|
||||||
const { isLoading, isSave, mockJson='', mockURL, tagName, showMock } = this.state
|
|
||||||
let Pane = ''
|
|
||||||
let mockGroup = ''
|
|
||||||
if (showMock) {
|
|
||||||
Pane = <TabPane tab="请求接口" key="3"><InterfaceTest /></TabPane>
|
|
||||||
mockGroup = <MockUrl mockURL={mockURL} serverIp={server_ip} projectData={this.state.projectData} showMock={showMock}/>
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<section className="add-interface-box">
|
|
||||||
<div className="content">
|
|
||||||
<Tabs type="card">
|
|
||||||
<TabPane tab={tagName} key="1">
|
|
||||||
<h3 className="req-title">请求部分</h3>
|
|
||||||
<ReqMethod />
|
|
||||||
<ReqHeader />
|
|
||||||
<ReqParams data={this.props} />
|
|
||||||
{mockGroup}
|
|
||||||
<h3 className="req-title">返回部分</h3>
|
|
||||||
<ResParams />
|
|
||||||
<Result isSave={isSave} mockJson={mockJson} />
|
|
||||||
</TabPane>
|
|
||||||
{Pane}
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
<Affix offsetBottom={0} className="save-button">
|
|
||||||
<Button type="primary" onClick={this.saveForms}>保存</Button>
|
|
||||||
</Affix>
|
|
||||||
<div className={`loading ${isLoading}`}>
|
|
||||||
<div className="loading-css">
|
|
||||||
<Spin />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AddInterface
|
|
||||||
@ -1,350 +0,0 @@
|
|||||||
@import '../../styles/mixin.scss';
|
|
||||||
|
|
||||||
.add-interface-box {
|
|
||||||
@include row-width-limit;
|
|
||||||
margin: 0 auto;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
min-height: 5rem;
|
|
||||||
font-size: .14rem;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
font-size: .12rem;
|
|
||||||
|
|
||||||
.content {
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
background: #FFF;
|
|
||||||
padding: 10px 20px 0 20px;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 1172px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.ant-tabs {
|
|
||||||
padding: 0 0 50px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-tabs-content {
|
|
||||||
padding: 0 0 50px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
zoom: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-card-body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-tabs-nav {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.req-title {
|
|
||||||
margin: 40px 0 0 30px;
|
|
||||||
color: #666;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mock {
|
|
||||||
float: right;
|
|
||||||
margin: 0 15px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
margin: 20px 0 0 40px;
|
|
||||||
|
|
||||||
th {
|
|
||||||
padding:0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 11px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select {
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h3 {
|
|
||||||
font-size: .12rem;
|
|
||||||
margin: 0 10px 0 15px;
|
|
||||||
width: 100px;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url {
|
|
||||||
width: 16%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
font-size: .25rem;
|
|
||||||
color: #C44;
|
|
||||||
display: block;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .req-header.css */
|
|
||||||
.req-header {
|
|
||||||
display: -webkit-box;
|
|
||||||
line-height: 32px;
|
|
||||||
margin: 12px 0 0 58px;
|
|
||||||
|
|
||||||
.req-h3 {
|
|
||||||
line-height: 32px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
margin: 0 0 0 24px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: -webkit-box;
|
|
||||||
margin: 0 0 16px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0 10px 0 20px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.req-content {
|
|
||||||
width: 220px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.req-save, .res-save {
|
|
||||||
margin: 0 0 0 167px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .req-params.css */
|
|
||||||
.req-params {
|
|
||||||
display: -webkit-box;
|
|
||||||
margin: 22px 0 0 92px;
|
|
||||||
width: 562px;
|
|
||||||
height: 200px;
|
|
||||||
.req-h3 {
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0 0 0 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.res-params-box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 530px;
|
|
||||||
float: left;
|
|
||||||
margin: 30px 0 0 50px;
|
|
||||||
|
|
||||||
/* .req-save.css */
|
|
||||||
.res-params {
|
|
||||||
display: -webkit-box;
|
|
||||||
line-height: 32px;
|
|
||||||
padding: 20px 0 0 0;
|
|
||||||
border-top: 1px #EEE solid;
|
|
||||||
margin: 20px 0 0 0;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
margin: 0 0 0 24px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: -webkit-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.required {
|
|
||||||
margin: 0 10px 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin: 0 10px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Result.css */
|
|
||||||
.result {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 32px;
|
|
||||||
margin: 29px 0 0 20px;
|
|
||||||
width: 500px;
|
|
||||||
float: left;
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px #CCC solid;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
padding: 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 330px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-tabs {
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-card-head {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dynamic-delete-button {
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
color: #CCC;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-affix, .save-button {
|
|
||||||
padding: 20px 0;
|
|
||||||
background: #f1f3f6;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
button {
|
|
||||||
margin: 0 auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .mock-url-box.css */
|
|
||||||
.mock-url-box {
|
|
||||||
clear: both;
|
|
||||||
padding: 10px 0 0 0;
|
|
||||||
margin: 14px 0 0 96px;
|
|
||||||
zoom: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
display: none;
|
|
||||||
.title {
|
|
||||||
float: left;
|
|
||||||
line-height: 35px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
width: 47.3%;
|
|
||||||
height: 35px;
|
|
||||||
line-height: 35px;
|
|
||||||
border: 1px #DDD solid;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px 0 8px;
|
|
||||||
padding: 0 0 0 10px;
|
|
||||||
float: left;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.host {
|
|
||||||
margin: 10px 0 0 80px;
|
|
||||||
}
|
|
||||||
#mock-clipboard {
|
|
||||||
margin: 3px 0 0 0;
|
|
||||||
background: #108ee9;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px 20px;
|
|
||||||
border: none;
|
|
||||||
color: #FFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-mock {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
background-size: 30%;
|
|
||||||
z-index: 10000;
|
|
||||||
.loading-css {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.is-loading {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active,
|
|
||||||
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
|
|
||||||
font-size: .12rem;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
.w-e-text {
|
|
||||||
p, h1, h2, h3, h4, h5, table, pre {
|
|
||||||
line-height: auto;
|
|
||||||
margin: 0;
|
|
||||||
font-size: .12rem;
|
|
||||||
color: #777;
|
|
||||||
font-family: 'Microsoft Yahei';
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.w-e-toolbar {
|
|
||||||
// display: none;
|
|
||||||
height: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.w-e-text {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#toolbar-container {
|
|
||||||
border: 1px solid #EEE;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
#toolbar-container:after {
|
|
||||||
display: table;
|
|
||||||
content: '';
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
#editor-toolbar {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#btn-container {
|
|
||||||
float: right;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
#editor-text {
|
|
||||||
border: 1px solid #EEE;
|
|
||||||
border-top: 0;
|
|
||||||
height: 300px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
#req-cover {
|
|
||||||
padding: 0 20px;
|
|
||||||
border: 1px #DDD solid;
|
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
margin: 0 0 0 12px;
|
|
||||||
}
|
|
||||||
#res-cover {
|
|
||||||
background-color: #FFF;
|
|
||||||
height: 330px;
|
|
||||||
padding: 0 20px;
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
}
|
|
||||||
@ -1,511 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import { Button, Input, Select, Card, Alert, Spin, Icon, message } from 'antd'
|
|
||||||
import { autobind } from 'core-decorators';
|
|
||||||
import crossRequest from 'cross-request';
|
|
||||||
import { withRouter } from 'react-router';
|
|
||||||
import axios from 'axios';
|
|
||||||
import URL from 'url';
|
|
||||||
|
|
||||||
import {
|
|
||||||
} from '../../../reducer/modules/group.js'
|
|
||||||
|
|
||||||
import './InterfaceTest.scss'
|
|
||||||
|
|
||||||
const { TextArea } = Input;
|
|
||||||
const InputGroup = Input.Group;
|
|
||||||
const Option = Select.Option;
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => ({
|
|
||||||
reqParams: state.addInterface.reqParams,
|
|
||||||
method: state.addInterface.method,
|
|
||||||
url: state.addInterface.url,
|
|
||||||
seqGroup: state.addInterface.seqGroup,
|
|
||||||
interfaceName: state.addInterface.interfaceName,
|
|
||||||
interfaceProject: state.addInterface.project
|
|
||||||
})
|
|
||||||
)
|
|
||||||
@withRouter
|
|
||||||
export default class InterfaceTest extends Component {
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
reqParams: PropTypes.string,
|
|
||||||
method: PropTypes.string,
|
|
||||||
url: PropTypes.string,
|
|
||||||
interfaceName: PropTypes.string,
|
|
||||||
seqGroup: PropTypes.array,
|
|
||||||
match: PropTypes.object,
|
|
||||||
interfaceProject: PropTypes.object
|
|
||||||
}
|
|
||||||
|
|
||||||
state = {
|
|
||||||
res: '',
|
|
||||||
method: 'GET',
|
|
||||||
domains: [],
|
|
||||||
pathname: '',
|
|
||||||
query: {},
|
|
||||||
params: {},
|
|
||||||
paramsNotJson: false,
|
|
||||||
headers: {},
|
|
||||||
currDomain: '',
|
|
||||||
paramsType: 'from'
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
this.getInterfaceState()
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
this.getInterfaceState(nextProps)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
getInterfaceState(nextProps) {
|
|
||||||
const props = nextProps || this.props;
|
|
||||||
const { method, url, seqGroup, interfaceProject } = props;
|
|
||||||
const { prd_host, basepath, protocol, env } = interfaceProject;
|
|
||||||
const pathname = (basepath + url).replace(/\/+/g, '/');
|
|
||||||
|
|
||||||
const domains = {prd: protocol + '://' + prd_host};
|
|
||||||
env.forEach(item => {
|
|
||||||
domains[item.name] = item.domain;
|
|
||||||
})
|
|
||||||
|
|
||||||
const query = [];
|
|
||||||
let params = [];
|
|
||||||
let reqParams = this.props.reqParams ? this.props.reqParams : '{}';
|
|
||||||
let paramsNotJson = false;
|
|
||||||
try {
|
|
||||||
reqParams = JSON.parse(reqParams);
|
|
||||||
// paramsNotJson = false;
|
|
||||||
} catch (e) {
|
|
||||||
// paramsNotJson = true;
|
|
||||||
reqParams = {};
|
|
||||||
message.error('请求参数不是 JSON 格式');
|
|
||||||
}
|
|
||||||
if (method === 'GET') {
|
|
||||||
Object.keys(reqParams).forEach(key => {
|
|
||||||
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
|
|
||||||
query.push({key, value})
|
|
||||||
})
|
|
||||||
} else if (method === 'POST') {
|
|
||||||
// params = reqParams;
|
|
||||||
Object.keys(reqParams).forEach(key => {
|
|
||||||
const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString();
|
|
||||||
query.push({key, value, type: 'text'})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const headers = []
|
|
||||||
let contentTypeIndex = -1;
|
|
||||||
seqGroup.forEach((headerItem, index) => {
|
|
||||||
if (headerItem.name) {
|
|
||||||
// TODO 'Content-Type' 排除大小写不同格式影响
|
|
||||||
if (headerItem.name === 'Content-Type'){
|
|
||||||
contentTypeIndex = index;
|
|
||||||
headerItem.value = headerItem.value || 'application/x-www-form-urlencoded';
|
|
||||||
}
|
|
||||||
headers.push({name: headerItem.name, value: headerItem.value});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (contentTypeIndex === -1) {
|
|
||||||
headers.push({name: 'Content-Type', value: 'application/x-www-form-urlencoded'});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
method,
|
|
||||||
domains,
|
|
||||||
pathname,
|
|
||||||
query,
|
|
||||||
params,
|
|
||||||
paramsNotJson,
|
|
||||||
headers,
|
|
||||||
currDomain: domains.prd,
|
|
||||||
loading: false,
|
|
||||||
paramsType: 'form'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
requestInterface() {
|
|
||||||
const { headers, params, currDomain, method, pathname, query } = this.state;
|
|
||||||
const urlObj = URL.parse(currDomain);
|
|
||||||
|
|
||||||
const href = URL.format({
|
|
||||||
protocol: urlObj.protocol || 'http',
|
|
||||||
host: urlObj.host,
|
|
||||||
pathname,
|
|
||||||
query: this.getQueryObj(query)
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setState({ loading: true })
|
|
||||||
|
|
||||||
crossRequest({
|
|
||||||
url: href,
|
|
||||||
method,
|
|
||||||
headers: this.getHeadersObj(headers),
|
|
||||||
data: this.arrToObj(params),
|
|
||||||
files: this.getFiles(params),
|
|
||||||
success: (res) => {
|
|
||||||
try {
|
|
||||||
res = JSON.parse(res)
|
|
||||||
} catch (e) {
|
|
||||||
null
|
|
||||||
}
|
|
||||||
this.setState({res})
|
|
||||||
this.setState({ loading: false })
|
|
||||||
},
|
|
||||||
error: (err) => {
|
|
||||||
this.setState({res: err || '请求失败'})
|
|
||||||
this.setState({ loading: false })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
changeDomain(value) {
|
|
||||||
this.setState({ currDomain: value });
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
selectDomain(value) {
|
|
||||||
this.setState({ currDomain: value });
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
changeHeader(e, index, isName) {
|
|
||||||
const headers = JSON.parse(JSON.stringify(this.state.headers));
|
|
||||||
const v = e.target.value;
|
|
||||||
if (isName) {
|
|
||||||
headers[index].name = v;
|
|
||||||
} else {
|
|
||||||
headers[index].value = v;
|
|
||||||
}
|
|
||||||
this.setState({ headers });
|
|
||||||
}
|
|
||||||
@autobind
|
|
||||||
addHeader() {
|
|
||||||
const { headers } = this.state;
|
|
||||||
this.setState({headers: headers.concat([{name: '', value: ''}])})
|
|
||||||
}
|
|
||||||
@autobind
|
|
||||||
deleteHeader(index) {
|
|
||||||
const { headers } = this.state;
|
|
||||||
this.setState({headers: headers.filter((item, i) => +index !== +i)});
|
|
||||||
}
|
|
||||||
@autobind
|
|
||||||
setContentType(type) {
|
|
||||||
const headersObj = this.getHeadersObj(this.state.headers);
|
|
||||||
headersObj['Content-Type'] = type;
|
|
||||||
this.setState({headers: this.objToArr(headersObj, 'name')})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
changeQuery(e, index, isKey) {
|
|
||||||
const query = JSON.parse(JSON.stringify(this.state.query));
|
|
||||||
const v = e.target.value;
|
|
||||||
if (isKey) {
|
|
||||||
query[index].key = v;
|
|
||||||
} else {
|
|
||||||
query[index].value = v;
|
|
||||||
}
|
|
||||||
this.setState({ query });
|
|
||||||
}
|
|
||||||
@autobind
|
|
||||||
addQuery() {
|
|
||||||
const { query } = this.state;
|
|
||||||
this.setState({query: query.concat([{key: '', value: ''}])})
|
|
||||||
}
|
|
||||||
@autobind
|
|
||||||
deleteQuery(index) {
|
|
||||||
const { query } = this.state;
|
|
||||||
this.setState({query: query.filter((item, i) => +index !== +i)});
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
changeParams(e, index, type) {
|
|
||||||
const params = JSON.parse(JSON.stringify(this.state.params));
|
|
||||||
switch (type) {
|
|
||||||
case 'key':
|
|
||||||
params[index].key = e.target.value
|
|
||||||
break;
|
|
||||||
case 'type':
|
|
||||||
params[index].type = e
|
|
||||||
break;
|
|
||||||
case 'value':
|
|
||||||
if (params[index].type === 'file') {
|
|
||||||
params[index].value = e.target.id
|
|
||||||
} else {
|
|
||||||
params[index].value = e.target.value
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (type === 'type' && e === 'file') {
|
|
||||||
this.setContentType('multipart/form-data')
|
|
||||||
}
|
|
||||||
this.setState({ params });
|
|
||||||
}
|
|
||||||
@autobind
|
|
||||||
addParams() {
|
|
||||||
const { params } = this.state;
|
|
||||||
this.setState({params: params.concat([{key: '', value: '', type: 'text'}])})
|
|
||||||
}
|
|
||||||
@autobind
|
|
||||||
deleteParams(index) {
|
|
||||||
const { params } = this.state;
|
|
||||||
this.setState({params: params.filter((item, i) => +index !== +i)});
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
changeMethod(value) {
|
|
||||||
this.setState({ method: value });
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
changePath(e) {
|
|
||||||
const path = e.target.value;
|
|
||||||
const urlObj = URL.parse(path, true);
|
|
||||||
this.setState({
|
|
||||||
query: this.objToArr(urlObj.query),
|
|
||||||
pathname: urlObj.pathname
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
changeParamsType(value) {
|
|
||||||
this.setState({paramsType: value})
|
|
||||||
}
|
|
||||||
|
|
||||||
hasCrossRequestPlugin() {
|
|
||||||
const dom = document.getElementById('y-request');
|
|
||||||
return dom.getAttribute('key') === 'yapi';
|
|
||||||
}
|
|
||||||
|
|
||||||
objToArr(obj, key, value) {
|
|
||||||
const keyName = key || 'key';
|
|
||||||
const valueName = value || 'value';
|
|
||||||
const arr = []
|
|
||||||
Object.keys(obj).forEach((_key) => {
|
|
||||||
if (_key) {
|
|
||||||
arr.push({[keyName]: _key, [valueName]: obj[_key]});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return arr;
|
|
||||||
}
|
|
||||||
arrToObj(arr) {
|
|
||||||
const obj = {};
|
|
||||||
arr.forEach(item => {
|
|
||||||
if (item.key && item.type !== 'file') {
|
|
||||||
obj[item.key] = item.value || '';
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
getFiles(params) {
|
|
||||||
const files = {};
|
|
||||||
params.forEach(item => {
|
|
||||||
if (item.key && item.type === 'file') {
|
|
||||||
files[item.key] = item.value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return files;
|
|
||||||
}
|
|
||||||
getQueryObj(query) {
|
|
||||||
const queryObj = {};
|
|
||||||
query.forEach(item => {
|
|
||||||
if (item.key) {
|
|
||||||
queryObj[item.key] = item.value || '';
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return queryObj;
|
|
||||||
}
|
|
||||||
getHeadersObj(headers) {
|
|
||||||
const headersObj = {};
|
|
||||||
headers.forEach(item => {
|
|
||||||
if (item.name && item.value) {
|
|
||||||
headersObj[item.name] = item.value;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return headersObj;
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
fileChange(e, index) {
|
|
||||||
console.log(e)
|
|
||||||
console.log(index)
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
|
|
||||||
const { interfaceName } = this.props;
|
|
||||||
const { method, domains, pathname, query, headers, params, currDomain, paramsType } = this.state;
|
|
||||||
const hasPlugin = this.hasCrossRequestPlugin();
|
|
||||||
const search = decodeURIComponent(URL.format({query: this.getQueryObj(query)}));
|
|
||||||
|
|
||||||
console.log(axios)
|
|
||||||
window.axios = axios
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="interface-test">
|
|
||||||
<div style={{padding: '0 20%'}}>
|
|
||||||
{ hasPlugin ? '' :
|
|
||||||
<Alert
|
|
||||||
message={
|
|
||||||
<div>
|
|
||||||
温馨提示：当前正在使用接口测试服务，请安装我们为您免费提供的
|
|
||||||
<a
|
|
||||||
target="blank"
|
|
||||||
href="https://chrome.google.com/webstore/detail/cross-request/cmnlfmgbjmaciiopcgodlhpiklaghbok?hl=en-US"
|
|
||||||
>
|
|
||||||
测试增强插件 [点击获取]！
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
type="warning"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div className="interface-name">{interfaceName}</div>
|
|
||||||
|
|
||||||
{/* url */}
|
|
||||||
<div className="req-part">
|
|
||||||
<div className="req-row href">
|
|
||||||
<InputGroup compact style={{display: 'inline-block', width: 680, border: 0, background: '#fff', marginBottom: -4}}>
|
|
||||||
<Input value="Method" disabled style={{display: 'inline-block', width: 80, border: 0, background: '#fff'}} />
|
|
||||||
<Input value="Domain" disabled style={{display: 'inline-block', width: 300, border: 0, background: '#fff'}} />
|
|
||||||
<Input value="Basepath + Url + [Query]" disabled style={{display: 'inline-block', width: 300, border: 0, background: '#fff'}} />
|
|
||||||
</InputGroup>
|
|
||||||
<InputGroup compact style={{display: 'inline-block', width: 680}}>
|
|
||||||
<Select value={method} style={{display: 'inline-block', width: 80}} onChange={this.changeMethod} >
|
|
||||||
<Option value="GET">GET</Option>
|
|
||||||
<Option value="POST">POST</Option>
|
|
||||||
</Select>
|
|
||||||
<Select value={currDomain} mode="combobox" filterOption={() => true} style={{display: 'inline-block', width: 300}} onChange={this.changeDomain} onSelect={this.selectDomain}>
|
|
||||||
{
|
|
||||||
Object.keys(domains).map((key, index) => (<Option value={domains[key]} key={index}>{key + '：' + domains[key]}</Option>))
|
|
||||||
}
|
|
||||||
</Select>
|
|
||||||
<Input value={pathname + search} onChange={this.changePath} spellCheck="false" style={{display: 'inline-block', width: 300}} />
|
|
||||||
</InputGroup>
|
|
||||||
<Button
|
|
||||||
onClick={this.requestInterface}
|
|
||||||
type="primary"
|
|
||||||
style={{marginLeft: 10}}
|
|
||||||
loading={this.state.loading}
|
|
||||||
>发送</Button>
|
|
||||||
<span style={{fontSize: 12, color: 'rgba(0, 0, 0, 0.25)'}}>（请求测试真实接口）</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card title="Query" noHovering style={{marginTop: 10}}>
|
|
||||||
{
|
|
||||||
query.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<div key={index}>
|
|
||||||
<Input value={item.key} onChange={e => this.changeQuery(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
|
|
||||||
<Input value={item.value} onChange={e => this.changeQuery(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
|
|
||||||
<Icon type="close" className="icon-btn" onClick={() => this.deleteQuery(index)} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
<Button type="primary" icon="plus" onClick={this.addQuery} style={{margin: 10}}>Add query parameter</Button>
|
|
||||||
</Card>
|
|
||||||
<Card title="HEADERS" noHovering style={{marginTop: 10}} >
|
|
||||||
<div className="req-row headers">
|
|
||||||
{
|
|
||||||
headers.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<div key={index}>
|
|
||||||
<Input value={item.name} onChange={e => this.changeHeader(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
|
|
||||||
<Input value={item.value} onChange={e => this.changeHeader(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
|
|
||||||
<Icon type="close" className="icon-btn" onClick={() => this.deleteHeader(index)} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
<Button type="primary" icon="plus" onClick={this.addHeader} style={{margin: 10}}>Add header</Button>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
<Card title="Body" noHovering style={{marginTop: 10}}>
|
|
||||||
<div className="req-row params">
|
|
||||||
<div>
|
|
||||||
<Select style={{margin: 10, float: 'right'}} defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? 'floatfix' : 'floatfix hidden'}>
|
|
||||||
<Option value="text">Text</Option>
|
|
||||||
<Option value="file">File</Option>
|
|
||||||
<Option value="form">Form</Option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
{ method === 'POST' && paramsType !== 'form' && paramsType !== 'file' &&
|
|
||||||
<div>
|
|
||||||
<TextArea
|
|
||||||
value={params}
|
|
||||||
style={{margin: 10}}
|
|
||||||
autosize={{ minRows: 2, maxRows: 6 }}
|
|
||||||
></TextArea>
|
|
||||||
<div>{paramsType}</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
{
|
|
||||||
method === 'POST' && paramsType === 'form' && (
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
params.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<div key={index}>
|
|
||||||
<Input value={item.key} onChange={e => this.changeParams(e, index, 'key')} style={{display: 'inline-block', width: 200, margin: 10}} />
|
|
||||||
[<Select value={item.type} onChange={e => this.changeParams(e, index, 'type')}>
|
|
||||||
<Option value="file">File</Option>
|
|
||||||
<Option value="text">Text</Option>
|
|
||||||
</Select>]{' = '}
|
|
||||||
{item.type === 'file' ?
|
|
||||||
<Input type="file" id={'file_' + index} onChange={e => this.changeParams(e, index, 'value')} multiple style={{display: 'inline-block', width: 200, margin: 10}} /> :
|
|
||||||
<Input value={item.value} onChange={e => this.changeParams(e, index, 'value')} style={{display: 'inline-block', width: 200, margin: 10}} />
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
<Button type="primary" icon="plus" onClick={this.addParams} style={{margin: 10}}>Add form parameter</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
method === 'POST' && paramsType === 'file' && (
|
|
||||||
<div>
|
|
||||||
<Input type="file"></Input>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
{
|
|
||||||
method !== 'POST' && (
|
|
||||||
<div style={{margin: 10}}>GET 请求没有 Body。</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
<Card title="返回结果" noHovering style={{marginTop: 10}}>
|
|
||||||
<Spin spinning={this.state.loading}>
|
|
||||||
<div className="res-part">
|
|
||||||
<div style={{padding: 10}}>
|
|
||||||
<TextArea
|
|
||||||
value={typeof this.state.res === 'object' ? JSON.stringify(this.state.res, null, 2) : this.state.res.toString()}
|
|
||||||
autosize={{ minRows: 2, maxRows: 6 }}
|
|
||||||
></TextArea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Spin>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
.interface-test {
|
|
||||||
.interface-name {
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.icon-btn {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
.icon-btn:hover {
|
|
||||||
color: #108ee9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.floatfix:after{
|
|
||||||
content:"";
|
|
||||||
display:table;
|
|
||||||
clear:both;
|
|
||||||
}
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
import '../AddInterface.scss'
|
|
||||||
import React, { Component } from 'react'
|
|
||||||
import { message } from 'antd'
|
|
||||||
import Clipboard from 'clipboard'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import {
|
|
||||||
addInterfaceClipboard
|
|
||||||
} from '../../../reducer/modules/addInterface.js'
|
|
||||||
|
|
||||||
const success = () => {
|
|
||||||
message.success('复制成功!')
|
|
||||||
}
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
() => {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
addInterfaceClipboard
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class MockUrl extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
mockURL: PropTypes.string,
|
|
||||||
serverIp: PropTypes.string,
|
|
||||||
mockData: PropTypes.string,
|
|
||||||
showMock: PropTypes.string,
|
|
||||||
projectData: PropTypes.object,
|
|
||||||
addInterfaceClipboard: PropTypes.func
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount () {
|
|
||||||
this.props.addInterfaceClipboard(this.clipboard)
|
|
||||||
setTimeout(this.clipboard, 500)
|
|
||||||
}
|
|
||||||
|
|
||||||
clipboard () {
|
|
||||||
document.querySelector('#clipboard-button').innerHTML = '<button id="mock-clipboard">复制</button>'
|
|
||||||
const btn = document.querySelector('#mock-clipboard')
|
|
||||||
const txt = document.querySelector('#mock-p').innerHTML
|
|
||||||
|
|
||||||
new Clipboard(btn, {
|
|
||||||
text: () => txt,
|
|
||||||
target () {
|
|
||||||
success()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { serverIp, showMock } = this.props
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className={`mock-url-box ${showMock}`}>
|
|
||||||
<span className="title">mock地址 : </span>
|
|
||||||
<p id="mock-p">{this.props.mockURL}</p>
|
|
||||||
<span id="clipboard-button"></span>
|
|
||||||
<div className="host"><label>请配置host:</label> { serverIp } {this.props.projectData.prd_host} </div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MockUrl
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import { Button } from 'antd'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import { autobind } from 'core-decorators'
|
|
||||||
import ReqList from './ReqList.js'
|
|
||||||
import {
|
|
||||||
addReqHeader
|
|
||||||
} from '../../../reducer/modules/addInterface.js'
|
|
||||||
|
|
||||||
// 重新渲染页面
|
|
||||||
const getReqList = function (self) {
|
|
||||||
const [reqList, seqGroup] = [[], self.props.seqGroup]
|
|
||||||
seqGroup.map((value, key) => {
|
|
||||||
reqList.push(<ReqList key={key} value={value} dataNum={value.id} />)
|
|
||||||
})
|
|
||||||
return reqList
|
|
||||||
}
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
seqGroup: state.addInterface.seqGroup
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
addReqHeader
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class ReqHeader extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
seqGroup: PropTypes.array,
|
|
||||||
addReqHeader: PropTypes.func
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
addSeqGroup () {
|
|
||||||
let newSeqGroup = []
|
|
||||||
let seqGroup = this.props.seqGroup
|
|
||||||
let length = seqGroup.length
|
|
||||||
let id = length ? seqGroup[length-1].id : 0
|
|
||||||
let list = {
|
|
||||||
id: ++id,
|
|
||||||
value: '',
|
|
||||||
name: ''
|
|
||||||
}
|
|
||||||
seqGroup.push(list)
|
|
||||||
newSeqGroup.push(...seqGroup)
|
|
||||||
this.props.addReqHeader(newSeqGroup)
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<section>
|
|
||||||
<div className="req-header">
|
|
||||||
<ul>
|
|
||||||
{ getReqList(this) }
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<Button type="primary" className="req-save" onClick={this.addSeqGroup}>添加</Button>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ReqHeader
|
|
||||||
@ -1,135 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import { Select, Input, Icon } from 'antd'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import { autobind } from 'core-decorators'
|
|
||||||
import {
|
|
||||||
reqTagValue,
|
|
||||||
reqHeaderValue,
|
|
||||||
deleteReqHeader,
|
|
||||||
addReqHeader
|
|
||||||
} from '../../../reducer/modules/addInterface.js'
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
seqGroup: state.addInterface.seqGroup,
|
|
||||||
reqTagValue: state.addInterface.reqTagValue,
|
|
||||||
reqHeaderValue: state.addInterface.reqHeaderValue
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
reqTagValue,
|
|
||||||
reqHeaderValue,
|
|
||||||
deleteReqHeader,
|
|
||||||
addReqHeader
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class ReqList extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
seqGroup: PropTypes.array,
|
|
||||||
reqTagValue: PropTypes.func,
|
|
||||||
reqHeaderValue: PropTypes.func,
|
|
||||||
deleteReqHeader: PropTypes.func,
|
|
||||||
addReqHeader: PropTypes.func,
|
|
||||||
_id: PropTypes.number,
|
|
||||||
dataNum: PropTypes.number,
|
|
||||||
value: PropTypes.object
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
handleChange (value) {
|
|
||||||
const dir = 'AddInterface/edit'
|
|
||||||
const url = location.href
|
|
||||||
const newObject = []
|
|
||||||
|
|
||||||
if (url.includes(dir)) {
|
|
||||||
const { seqGroup, value: { id } } = this.props
|
|
||||||
seqGroup.forEach(v => {
|
|
||||||
if (id == v.id) {
|
|
||||||
v.name = value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
seqGroup.forEach(v => {
|
|
||||||
const {id, name, value} = v
|
|
||||||
newObject.push({id, name, value})
|
|
||||||
})
|
|
||||||
this.props.addReqHeader( newObject )
|
|
||||||
} else {
|
|
||||||
const { seqGroup, dataNum } = this.props
|
|
||||||
seqGroup.forEach(v => {
|
|
||||||
if (dataNum == v.id) {
|
|
||||||
v.name = value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
seqGroup.forEach(v => {
|
|
||||||
const {id, name, value} = v
|
|
||||||
newObject.push({id, name, value})
|
|
||||||
})
|
|
||||||
this.props.addReqHeader(newObject)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
handleBlur (e) {
|
|
||||||
const value = e.target.value
|
|
||||||
const { seqGroup, value: { id } } = this.props
|
|
||||||
const newObject = []
|
|
||||||
seqGroup.forEach(v => {
|
|
||||||
if (id == v.id) {
|
|
||||||
v.value = value
|
|
||||||
}
|
|
||||||
})
|
|
||||||
seqGroup.forEach(v => {
|
|
||||||
const {id, name, value} = v
|
|
||||||
newObject.push({id, name, value})
|
|
||||||
})
|
|
||||||
this.props.addReqHeader(newObject)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
deleteReqHeader () {
|
|
||||||
let newSeqGroup = []
|
|
||||||
let seqGroup = this.props.seqGroup
|
|
||||||
let id = this.props.value.id
|
|
||||||
|
|
||||||
seqGroup.map(value => {
|
|
||||||
if (+id !== value.id) {
|
|
||||||
newSeqGroup.push(value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.props.deleteReqHeader(newSeqGroup)
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const propsValue = this.props.value
|
|
||||||
const Option = Select.Option
|
|
||||||
const value = propsValue.value || ''
|
|
||||||
const name = propsValue.name || ''
|
|
||||||
|
|
||||||
const headers = ["Accept","Accept-Charset","Accept-Encoding","Accept-Language","Accept-Datetime","Authorization","Cache-Control","Connection","Cookie","Content-Disposition","Content-Length","Content-MD5","Content-Type","Date","Expect","From","Host","If-Match","If-Modified-Since","If-None-Match","If-Range","If-Unmodified-Since","Max-Forwards","Origin","Pragma","Proxy-Authorization","Range","Referer","TE","User-Agent","Upgrade","Via","Warning","X-Requested-With","DNT","X-Forwarded-For","X-Forwarded-Host","X-Forwarded-Proto","Front-End-Https","X-Http-Method-Override","X-ATT-DeviceId","X-Wap-Profile","Proxy-Connection","X-UIDH","X-Csrf-Token"]
|
|
||||||
const headersOptions = headers.map( (item, index) => {
|
|
||||||
return <Option key={index} value={item}>{item}</Option>
|
|
||||||
} )
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li>
|
|
||||||
<em className="title">头部标签 : </em>
|
|
||||||
<Select value={name} style={{ width: 180 }} onChange={this.handleChange} size="large">
|
|
||||||
<Option value="">选择请求头</Option>
|
|
||||||
{headersOptions}
|
|
||||||
</Select>
|
|
||||||
<em className="title">头部内容 : </em>
|
|
||||||
<Input value={value} placeholder="Basic usage" className="req-content" size="large" onInput={this.handleBlur} />
|
|
||||||
<Icon className="dynamic-delete-button" type="minus-circle-o" onClick={this.deleteReqHeader} />
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ReqList
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import React, { Component } from 'react'
|
|
||||||
import { Select, Input } from 'antd'
|
|
||||||
import { autobind } from 'core-decorators'
|
|
||||||
import {
|
|
||||||
pushInputValue,
|
|
||||||
pushInterfaceName,
|
|
||||||
pushInterfaceMethod
|
|
||||||
} from '../../../reducer/modules/addInterface.js'
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
method: state.addInterface.method,
|
|
||||||
url: state.addInterface.url,
|
|
||||||
interfaceName: state.addInterface.interfaceName
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pushInputValue,
|
|
||||||
pushInterfaceName,
|
|
||||||
pushInterfaceMethod
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class ReqMethod extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
pushInputValue: PropTypes.func,
|
|
||||||
pushInterfaceName: PropTypes.func,
|
|
||||||
pushInterfaceMethod: PropTypes.func,
|
|
||||||
url: PropTypes.string,
|
|
||||||
method: PropTypes.string,
|
|
||||||
interfaceName: PropTypes.string
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
handleChange (value) {
|
|
||||||
this.props.pushInterfaceMethod(value)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
getInputVal (e) {
|
|
||||||
const url = e.target.value
|
|
||||||
this.props.pushInputValue(url)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
getInterfaceValue (e) {
|
|
||||||
const name = e.target.value
|
|
||||||
this.props.pushInterfaceName(name)
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { Option } = Select
|
|
||||||
const { url, interfaceName, method } = this.props
|
|
||||||
|
|
||||||
return (
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span className="h3">请求方式 : </span>
|
|
||||||
<Select value={method} style={{ width: 180 }} onChange={this.handleChange} size="large">
|
|
||||||
<Option value="GET">GET</Option>
|
|
||||||
<Option value="POST">POST</Option>
|
|
||||||
<Option value="PUT">PUT</Option>
|
|
||||||
<Option value="DELETE">DELETE</Option>
|
|
||||||
</Select>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span className="h3">URL : </span>
|
|
||||||
<Input
|
|
||||||
placeholder="填写 URL"
|
|
||||||
className="url"
|
|
||||||
size="large"
|
|
||||||
onInput={this.getInputVal}
|
|
||||||
value={url}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<span className="h3">名称 : </span>
|
|
||||||
<Input
|
|
||||||
placeholder="接口名称"
|
|
||||||
className="url"
|
|
||||||
size="large"
|
|
||||||
value={interfaceName}
|
|
||||||
onInput={this.getInterfaceValue}
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ReqMethod
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
// import React, { Component } from 'react'
|
|
||||||
// import { Select, Input } from 'antd'
|
|
||||||
// import PropTypes from 'prop-types'
|
|
||||||
// import { autobind } from 'core-decorators'
|
|
||||||
// import { connect } from 'react-redux'
|
|
||||||
// import { deleteReqParams } from '../../../reducer/modules/addInterface.js'
|
|
||||||
// import json2html from 'json2html'
|
|
||||||
|
|
||||||
// @connect(
|
|
||||||
// state => {
|
|
||||||
// return {
|
|
||||||
// reqParams: state.addInterface.reqParams
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// deleteReqParams
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
|
|
||||||
// class ParamsList extends Component {
|
|
||||||
// static propTypes = {
|
|
||||||
// reqParams: PropTypes.array,
|
|
||||||
// dataNum: PropTypes.number,
|
|
||||||
// deleteReqParams: PropTypes.func
|
|
||||||
// }
|
|
||||||
|
|
||||||
// constructor(props) {
|
|
||||||
// super(props)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// @autobind
|
|
||||||
// deleteReqParams (e) {
|
|
||||||
// let newSeqParams = []
|
|
||||||
// let reqParams = this.props.reqParams
|
|
||||||
// let dataNum = e.target.getAttribute('data-num')
|
|
||||||
// reqParams.map(value => {
|
|
||||||
// if (+dataNum !== value.id) {
|
|
||||||
// newSeqParams.push(value)
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// this.props.deleteReqParams(newSeqParams)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// render () {
|
|
||||||
// const Option = Select.Option
|
|
||||||
// const dataNum = this.props.dataNum
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <li>
|
|
||||||
// <Select defaultValue="选填" style={{ width: 'auto' }} onChange={this.handleChange} size="large" className="required">
|
|
||||||
// <Option value="必填">必填</Option>
|
|
||||||
// <Option value="选填">选填</Option>
|
|
||||||
// </Select>
|
|
||||||
// <em className="title">参数名称</em>
|
|
||||||
// <Input placeholder="参数名称" className="name" size="large" />
|
|
||||||
// <em className="title">参数说明</em>
|
|
||||||
// <Input placeholder="参数说明" className="name" size="large" />
|
|
||||||
// <span className="close" onClick={this.deleteReqParams} data-num={dataNum}>×</span>
|
|
||||||
// </li>
|
|
||||||
// )
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// export default ParamsList
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
// import wangEditor from 'wangeditor'
|
|
||||||
import { getReqParams } from '../../../reducer/modules/addInterface.js'
|
|
||||||
|
|
||||||
//const editor = new wangEditor('#req-cover')
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
reqParams: state.addInterface.reqParams
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
getReqParams
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class ReqParams extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
reqParams: PropTypes.string,
|
|
||||||
getReqParams: PropTypes.func
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
// initParams () {
|
|
||||||
// const { reqParams } = this.props
|
|
||||||
// if (reqParams) {
|
|
||||||
// editor.txt.html(reqParams)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
componentDidMount () {
|
|
||||||
function json_parse(json){
|
|
||||||
try{
|
|
||||||
return JSON.stringify(JSON.parse(json), null, "\t");
|
|
||||||
}catch(e){
|
|
||||||
return json
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let editor2 = this.editor = window.ace.edit("req-cover")
|
|
||||||
editor2.getSession().setMode("ace/mode/json");
|
|
||||||
setTimeout( () => {
|
|
||||||
editor2.setValue(json_parse(this.props.reqParams))
|
|
||||||
} ,400)
|
|
||||||
|
|
||||||
editor2.getSession().on('change', ()=> {
|
|
||||||
this.props.getReqParams(editor2.getValue())
|
|
||||||
});
|
|
||||||
// const reg = /(<p>)|(<\/p>)| |(<br>)|\s+/g
|
|
||||||
// let json = ''
|
|
||||||
// editor.customConfig.menus = []
|
|
||||||
// editor.customConfig.onchange = html => {
|
|
||||||
// json = html.replace(reg, '')
|
|
||||||
// this.props.getReqParams(json)
|
|
||||||
// }
|
|
||||||
// setTimeout(() => {
|
|
||||||
// this.initParams()
|
|
||||||
// }, 500)
|
|
||||||
// editor.create()
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<section className="req-params-box">
|
|
||||||
<div className="req-params">
|
|
||||||
<strong className="req-h3">请求参数 :</strong>
|
|
||||||
<div id="req-cover"></div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ReqParams
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import { Select, Input } from 'antd'
|
|
||||||
|
|
||||||
class ParamsList extends Component {
|
|
||||||
constructor (props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const Option = Select.Option
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li>
|
|
||||||
<Select defaultValue="选填" style={{ width: 'auto' }} onChange={this.handleChange} size="large" className="required">
|
|
||||||
<Option value="必填">必填</Option>
|
|
||||||
<Option value="选填">选填</Option>
|
|
||||||
</Select>
|
|
||||||
<em className="title">参数名称</em>
|
|
||||||
<Input placeholder="参数名称" className="name" size="large" />
|
|
||||||
<em className="title">参数说明</em>
|
|
||||||
<Input placeholder="参数说明" className="name" size="large" />
|
|
||||||
<span className="close">×</span>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ParamsList
|
|
||||||
@ -1,124 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
// import wangEditor from 'wangeditor'
|
|
||||||
import { Card } from 'antd'
|
|
||||||
import { getResParams } from '../../../reducer/modules/addInterface.js'
|
|
||||||
|
|
||||||
//const editor = new wangEditor('#res-cover')
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
resParams: state.addInterface.resParams
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
getResParams
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class ResParams extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
resParams: PropTypes.string,
|
|
||||||
getResParams: PropTypes.func
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
// initResParams () {
|
|
||||||
// const { resParams } = this.props
|
|
||||||
// if (resParams) {
|
|
||||||
// editor.txt.html(resParams)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
//const reg = /(<p>)|(<\/p>)| |(<br>)|\s+|<div>|<\/div>/g
|
|
||||||
//editor.customConfig.menus = []
|
|
||||||
// editor.customConfig.onchange = html => {
|
|
||||||
// html = html.replace(reg, '')
|
|
||||||
// this.props.getResParams(html)
|
|
||||||
// }
|
|
||||||
// setTimeout(() => {
|
|
||||||
// this.initResParams()
|
|
||||||
// }, 400)
|
|
||||||
//editor.create()
|
|
||||||
|
|
||||||
function json_parse(json) {
|
|
||||||
try {
|
|
||||||
return JSON.stringify(JSON.parse(json), null, "\t");
|
|
||||||
} catch (e) {
|
|
||||||
return json
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
var langTools = window.ace.require("ace/ext/language_tools");
|
|
||||||
let editor = this.editor = window.ace.edit("res-cover")
|
|
||||||
editor.getSession().setMode("ace/mode/json");
|
|
||||||
editor.setOptions({
|
|
||||||
enableBasicAutocompletion: true,
|
|
||||||
enableSnippets: true,
|
|
||||||
enableLiveAutocompletion: true
|
|
||||||
});
|
|
||||||
|
|
||||||
var rhymeCompleter = {
|
|
||||||
identifierRegexps: [/[@]/],
|
|
||||||
getCompletions: function (editor, session, pos, prefix, callback) {
|
|
||||||
if (prefix.length === 0) { callback(null, []); return }
|
|
||||||
var wordList = [
|
|
||||||
{ name: '字符串', mock: '@string' },
|
|
||||||
{ name: '自然数', mock: '@natural' },
|
|
||||||
{ name: '布尔', mock: '@boolean' },
|
|
||||||
{ name: '标题', mock: '@title' },
|
|
||||||
{ name: '姓名', mock: '@name' },
|
|
||||||
{ name: 'url', mock: '@url' },
|
|
||||||
{ name: '域名', mock: '@domain' },
|
|
||||||
{ name: 'ip地址', mock: '@ip' },
|
|
||||||
{ name: 'id', mock: '@id' },
|
|
||||||
{ name: 'guid', mock: '@guid' },
|
|
||||||
{ name: '当前时间', mock: '@now' },
|
|
||||||
{ name: '整数', mock: '@integer' },
|
|
||||||
{ name: '浮点数', mock: '@float' },
|
|
||||||
{ name: 'email', mock: '@email' },
|
|
||||||
{ name: '大段文本', mock: '@text' },
|
|
||||||
{ name: '句子', mock: '@sentence' },
|
|
||||||
{ name: '单词', mock: '@word' },
|
|
||||||
{ name: '地址', mock: '@region' }
|
|
||||||
]
|
|
||||||
callback(null, wordList.map(function (ea) {
|
|
||||||
return { name: ea.mock, value: ea.mock, score: ea.mock, meta: ea.name }
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
langTools.addCompleter(rhymeCompleter);
|
|
||||||
|
|
||||||
editor.getSession().on('change', () => {
|
|
||||||
// console.log( JSON.parse(editor.getValue()));
|
|
||||||
|
|
||||||
this.props.getResParams(editor.getValue());
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
|
|
||||||
editor.setValue(json_parse(this.props.resParams))
|
|
||||||
}, 400)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<section className="res-params-box">
|
|
||||||
<Card title="返回 Mock" style={{ width: 500 }}>
|
|
||||||
<div id="res-cover"></div>
|
|
||||||
</Card>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ResParams
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import { Card } from 'antd'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import Mock from 'mockjs'
|
|
||||||
import parseCommon from '../../../parseCommon';
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
resParams: state.addInterface.resParams,
|
|
||||||
reqParams: state.addInterface.reqParams
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
class Result extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
resParams: PropTypes.string,
|
|
||||||
reqParams: PropTypes.string,
|
|
||||||
isSave: PropTypes.bool,
|
|
||||||
mockJson: PropTypes.string
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { mockJson, resParams } = this.props
|
|
||||||
let json, j;
|
|
||||||
try{
|
|
||||||
json = JSON.parse(resParams);
|
|
||||||
json = parseCommon.regexp_parse(json);
|
|
||||||
}catch(e){
|
|
||||||
json = false;
|
|
||||||
}
|
|
||||||
if(json !== false){
|
|
||||||
try{
|
|
||||||
j = JSON.stringify(Mock.mock(json), null, " ");
|
|
||||||
}catch(e){
|
|
||||||
j = ""
|
|
||||||
}
|
|
||||||
|
|
||||||
}else{
|
|
||||||
j = mockJson
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="result">
|
|
||||||
<Card title="Mock 结果" style={{ width: 500 }}>
|
|
||||||
<pre>{j}</pre>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Result
|
|
||||||
@ -9,7 +9,7 @@ const { TextArea } = Input;
|
|||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
const Option = Select.Option;
|
const Option = Select.Option;
|
||||||
const RadioGroup = Radio.Group;
|
const RadioGroup = Radio.Group;
|
||||||
import { pickRandomProperty } from '../../common';
|
import { pickRandomProperty, handlePath } from '../../common';
|
||||||
import constants from '../../constants/variable.js';
|
import constants from '../../constants/variable.js';
|
||||||
import { withRouter } from 'react-router';
|
import { withRouter } from 'react-router';
|
||||||
import './Addproject.scss';
|
import './Addproject.scss';
|
||||||
@ -55,6 +55,13 @@ class ProjectList extends Component {
|
|||||||
fetchGroupList: PropTypes.func
|
fetchGroupList: PropTypes.func
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handlePath = (e)=>{
|
||||||
|
let val = e.target.value
|
||||||
|
this.props.form.setFieldsValue({
|
||||||
|
basepath: handlePath(val)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 确认添加项目
|
// 确认添加项目
|
||||||
@autobind
|
@autobind
|
||||||
handleOk(e) {
|
handleOk(e) {
|
||||||
@ -137,7 +144,7 @@ class ProjectList extends Component {
|
|||||||
required: false, message: '请输入项目基本路径'
|
required: false, message: '请输入项目基本路径'
|
||||||
}]
|
}]
|
||||||
})(
|
})(
|
||||||
<Input />
|
<Input onBlur={this.handlePath} />
|
||||||
)}
|
)}
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
|
|||||||
@ -1,91 +0,0 @@
|
|||||||
import './Interface.scss'
|
|
||||||
import React, { Component } from 'react'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import axios from 'axios'
|
|
||||||
import InterfaceList from './InterfaceList/InterfaceList.js'
|
|
||||||
import InterfaceTable from './InterfaceTable/InterfaceTable.js'
|
|
||||||
import InterfaceMode from './InterfaceMode/InterfaceMode.js'
|
|
||||||
import moment from 'moment'
|
|
||||||
import {
|
|
||||||
fetchInterfaceData,
|
|
||||||
projectMember,
|
|
||||||
closeProjectMember,
|
|
||||||
saveInterfaceProjectId
|
|
||||||
} from '../../reducer/modules/interface.js'
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
interfaceData: state.Interface.interfaceData,
|
|
||||||
modalVisible: state.Interface.modalVisible,
|
|
||||||
closeProjectMember: state.Interface.closeProjectMember
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fetchInterfaceData,
|
|
||||||
projectMember,
|
|
||||||
closeProjectMember,
|
|
||||||
saveInterfaceProjectId
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class Interface extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
fetchInterfaceData: PropTypes.func,
|
|
||||||
interfaceData: PropTypes.array,
|
|
||||||
projectMember: PropTypes.func,
|
|
||||||
saveInterfaceProjectId: PropTypes.func,
|
|
||||||
closeProjectMember: PropTypes.func,
|
|
||||||
modalVisible: PropTypes.bool
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount () {
|
|
||||||
const interfaceId = this.getInterfaceId()
|
|
||||||
const params = {
|
|
||||||
params: {
|
|
||||||
project_id: interfaceId
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.saveInterfaceProjectId(interfaceId)
|
|
||||||
axios.get('/interface/list', params)
|
|
||||||
.then(result => {
|
|
||||||
result = result.data.data
|
|
||||||
result.map(value => {
|
|
||||||
value.add_time = moment(value.add_time*1000).format('YYYY-MM-DD HH:mm:ss')
|
|
||||||
return value
|
|
||||||
})
|
|
||||||
this.props.fetchInterfaceData(result)
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.log(e)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
getInterfaceId () {
|
|
||||||
const reg = /project\/(\d+)/g
|
|
||||||
const url = location.href
|
|
||||||
url.match(reg)
|
|
||||||
return RegExp.$1
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { interfaceData, projectMember, modalVisible } = this.props
|
|
||||||
return (
|
|
||||||
<div className="g-doc">
|
|
||||||
<section className="interface-box">
|
|
||||||
<InterfaceList projectMember={projectMember} />
|
|
||||||
<InterfaceMode modalVisible={modalVisible} closeProjectMember={this.props.closeProjectMember} />
|
|
||||||
<InterfaceTable data={interfaceData} />
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Interface
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
@import '../../styles/mixin.scss';
|
|
||||||
|
|
||||||
.g-doc {
|
|
||||||
min-height: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .interface-box.css */
|
|
||||||
.interface-box {
|
|
||||||
@include row-width-limit;
|
|
||||||
margin: 0 auto .24rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
|
|
||||||
background: #FFF;
|
|
||||||
overflow: hidden;
|
|
||||||
.interface-btngroup {
|
|
||||||
margin: .24rem .24rem 0;
|
|
||||||
}
|
|
||||||
.interface-btn {
|
|
||||||
margin-right: .16rem;
|
|
||||||
}
|
|
||||||
.interface-table {
|
|
||||||
margin: .24rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .interface-mode-box.css 管理项目成员弹层 */
|
|
||||||
.interface-mode-box {
|
|
||||||
.add-user {
|
|
||||||
display: -webkit-box;
|
|
||||||
.ant-input {
|
|
||||||
width: 70%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.ant-btn {
|
|
||||||
margin: 0 0 0 15px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.users {
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
font-size: 0.14rem;
|
|
||||||
p {
|
|
||||||
line-height: 0.21rem;
|
|
||||||
}
|
|
||||||
.tags {
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
span {
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 4px 11px;
|
|
||||||
margin: 0 10px 0 0;
|
|
||||||
}
|
|
||||||
.anticon {
|
|
||||||
font-size: 17px;
|
|
||||||
margin: 0 0 0 6px;
|
|
||||||
vertical-align: 3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body .interface-mode-box .add-user .ant-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { Link } from 'react-router-dom'
|
|
||||||
import { Button } from 'antd'
|
|
||||||
|
|
||||||
class InterfaceList extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
projectMember: PropTypes.func
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
getInterfaceId () {
|
|
||||||
const reg = /project\/(\d+)/g
|
|
||||||
const url = location.href
|
|
||||||
url.match(reg)
|
|
||||||
return RegExp.$1
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const { projectMember } = this.props
|
|
||||||
const getInterfaceId = this.getInterfaceId()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="interface-btngroup">
|
|
||||||
<Link to={`/add-interface/${getInterfaceId}`}><Button className="interface-btn" type="primary" icon="plus">添加接口</Button></Link>
|
|
||||||
<Button className="interface-btn" type="primary" onClick={projectMember} icon="user">管理成员</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default InterfaceList
|
|
||||||
@ -1,167 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import { Modal, Button, AutoComplete } from 'antd'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import axios from 'axios'
|
|
||||||
import { autobind } from 'core-decorators'
|
|
||||||
import ModeTag from './ModeTags'
|
|
||||||
|
|
||||||
class InterfaceMode extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
modalVisible: PropTypes.bool,
|
|
||||||
closeProjectMember: PropTypes.func,
|
|
||||||
memberList: PropTypes.array,
|
|
||||||
dataSource: PropTypes.array,
|
|
||||||
inputValue: PropTypes.string
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
this.state = {
|
|
||||||
memberList: [],
|
|
||||||
userName: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount () {
|
|
||||||
this.getMemberList()
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
getMemberList () {
|
|
||||||
const params = {
|
|
||||||
id: this.getInterfaceId()
|
|
||||||
}
|
|
||||||
axios.get('/api/project/get_member_list', { params })
|
|
||||||
.then(data => {
|
|
||||||
this.setState({
|
|
||||||
'memberList': data.data.data
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
onSelect (userName) {
|
|
||||||
console.log(userName)
|
|
||||||
this.setState({
|
|
||||||
userName
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
closeMember (id) {
|
|
||||||
const params = {
|
|
||||||
member_uid: id,
|
|
||||||
id: this.getInterfaceId()
|
|
||||||
}
|
|
||||||
|
|
||||||
axios.post('/api/project/del_member', params)
|
|
||||||
.then(() => {
|
|
||||||
this.getMemberList()
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
addNewUser () {
|
|
||||||
const { userName } = this.state
|
|
||||||
const params = { q: userName}
|
|
||||||
axios.get('/api/user/search', { params })
|
|
||||||
.then(data => {
|
|
||||||
const member_uid = data.data.data[0].uid
|
|
||||||
const params = {id: this.getInterfaceId(), member_uid}
|
|
||||||
axios.post('/api/project/add_member', params)
|
|
||||||
.then( () => {
|
|
||||||
this.getMemberList()
|
|
||||||
})
|
|
||||||
.catch (err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch (err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
handleSearch (value) {
|
|
||||||
this.setState({
|
|
||||||
userName: value
|
|
||||||
})
|
|
||||||
const params = { q: value}
|
|
||||||
|
|
||||||
axios.get('/api/user/search', { params })
|
|
||||||
.then(data => {
|
|
||||||
const userList = []
|
|
||||||
data = data.data.data
|
|
||||||
if (data) {
|
|
||||||
data.forEach( v => userList.push(v.username) )
|
|
||||||
this.setState({
|
|
||||||
dataSource: userList
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch (err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOk (closeProjectMember) {
|
|
||||||
closeProjectMember()
|
|
||||||
}
|
|
||||||
|
|
||||||
handleCancel (closeProjectMember) {
|
|
||||||
closeProjectMember()
|
|
||||||
}
|
|
||||||
|
|
||||||
getInterfaceId () {
|
|
||||||
const reg = /project\/(\d+)/g
|
|
||||||
const url = location.href
|
|
||||||
url.match(reg)
|
|
||||||
return RegExp.$1
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { modalVisible, closeProjectMember } = this.props
|
|
||||||
const handleOk = this.handleOk.bind(this, closeProjectMember)
|
|
||||||
const handleCancel = this.handleCancel.bind(this, closeProjectMember)
|
|
||||||
const { memberList, dataSource } = this.state
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
title="项目成员管理"
|
|
||||||
onOk={ handleOk }
|
|
||||||
visible={ modalVisible }
|
|
||||||
onCancel={ handleCancel }
|
|
||||||
className="interface-mode-box"
|
|
||||||
>
|
|
||||||
<div className="add-user">
|
|
||||||
<AutoComplete
|
|
||||||
dataSource={dataSource}
|
|
||||||
style={{ width: 350 }}
|
|
||||||
onSelect={this.onSelect}
|
|
||||||
onSearch={this.handleSearch}
|
|
||||||
placeholder="input here"
|
|
||||||
/>
|
|
||||||
<Button onClick={this.addNewUser}>添 加</Button>
|
|
||||||
</div>
|
|
||||||
<article className="users">
|
|
||||||
<p>项目成员</p>
|
|
||||||
<div className="tags">
|
|
||||||
{
|
|
||||||
memberList.map((value, key) => {
|
|
||||||
return <ModeTag key={key} value={value} closeMember={this.closeMember} getMemberList={this.getMemberList} />
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default InterfaceMode
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import { autobind } from 'core-decorators'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import { Icon } from 'antd'
|
|
||||||
|
|
||||||
class ModeTags extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
value: PropTypes.object,
|
|
||||||
_id: PropTypes.number,
|
|
||||||
closeMember: PropTypes.func
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
closeTags () {
|
|
||||||
const { closeMember, value: { _id } } = this.props
|
|
||||||
closeMember(_id)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { value: { username='' } } = this.props
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span onClick={this.closeTags}>
|
|
||||||
{username}
|
|
||||||
<Icon className="dynamic-delete-button" type="minus-circle-o" />
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ModeTags
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import React, { Component } from 'react'
|
|
||||||
import { Table, Popconfirm, message } from 'antd'
|
|
||||||
import PropTypes from 'prop-types'
|
|
||||||
import axios from 'axios'
|
|
||||||
import { autobind } from 'core-decorators'
|
|
||||||
import { connect } from 'react-redux'
|
|
||||||
import { Link } from 'react-router-dom'
|
|
||||||
import { deleteInterfaceData } from '../../../reducer/modules/interface.js'
|
|
||||||
|
|
||||||
@connect(
|
|
||||||
state => {
|
|
||||||
return {
|
|
||||||
interfaceData: state.Interface.interfaceData
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deleteInterfaceData
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
class InterfaceTable extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
interfaceData: PropTypes.array,
|
|
||||||
data: PropTypes.array,
|
|
||||||
projectId: PropTypes.string,
|
|
||||||
deleteInterfaceData: PropTypes.func
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
@autobind
|
|
||||||
confirm (interfaceId) {
|
|
||||||
this.deleteInterface(interfaceId)
|
|
||||||
message.success('删除成功!');
|
|
||||||
}
|
|
||||||
|
|
||||||
deleteInterfaceData (interfaceId) {
|
|
||||||
let interfaceArr = []
|
|
||||||
let { interfaceData } = this.props
|
|
||||||
interfaceData.forEach(value => {
|
|
||||||
if (value._id !== interfaceId) {
|
|
||||||
interfaceArr.push(value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.props.deleteInterfaceData(interfaceArr)
|
|
||||||
}
|
|
||||||
|
|
||||||
deleteInterface (interfaceId) {
|
|
||||||
const params = {
|
|
||||||
id: interfaceId
|
|
||||||
}
|
|
||||||
axios.post('/api/interface/del', params)
|
|
||||||
.then(() => {
|
|
||||||
this.deleteInterfaceData(interfaceId)
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
|
||||||
const columns = [{
|
|
||||||
title: '接口名称',
|
|
||||||
dataIndex: 'title',
|
|
||||||
key: 'title'
|
|
||||||
},{
|
|
||||||
title: '接口URL',
|
|
||||||
dataIndex: 'path',
|
|
||||||
key: 'path'
|
|
||||||
},{
|
|
||||||
title: '请求方式',
|
|
||||||
dataIndex: 'method',
|
|
||||||
key: 'method'
|
|
||||||
},{
|
|
||||||
title: '更新日期',
|
|
||||||
dataIndex: 'add_time',
|
|
||||||
key: 'add_time'
|
|
||||||
}, {
|
|
||||||
title: '功能',
|
|
||||||
'key': 'action',
|
|
||||||
render: (data) => {
|
|
||||||
const confirm = this.confirm.bind(this, data._id)
|
|
||||||
return (
|
|
||||||
<span>
|
|
||||||
<Link to={`/add-interface/edit/${data._id}`}><span>编辑</span></Link>
|
|
||||||
<span className="ant-divider" />
|
|
||||||
<Popconfirm title="你确定要删除接口吗!" onConfirm={confirm} okText="Yes" cancelText="No">
|
|
||||||
<a href="">删除</a>
|
|
||||||
</Popconfirm>
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
|
|
||||||
const data = this.props.data;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className="interface-table">
|
|
||||||
<Table bordered={true} columns={columns} dataSource={data} />
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default InterfaceTable
|
|
||||||
@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
|
|||||||
import { Form, Input, Select, Button } from 'antd';
|
import { Form, Input, Select, Button } from 'antd';
|
||||||
|
|
||||||
import constants from '../../../../constants/variable.js'
|
import constants from '../../../../constants/variable.js'
|
||||||
|
import { handlePath } from '../../../../common.js'
|
||||||
const HTTP_METHOD = constants.HTTP_METHOD;
|
const HTTP_METHOD = constants.HTTP_METHOD;
|
||||||
const HTTP_METHOD_KEYS = Object.keys(HTTP_METHOD);
|
const HTTP_METHOD_KEYS = Object.keys(HTTP_METHOD);
|
||||||
|
|
||||||
@ -30,7 +31,12 @@ class AddInterfaceForm extends Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handlePath = (e)=>{
|
||||||
|
let val = e.target.value
|
||||||
|
this.props.form.setFieldsValue({
|
||||||
|
path: handlePath(val)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { getFieldDecorator, getFieldsError } = this.props.form;
|
const { getFieldDecorator, getFieldsError } = this.props.form;
|
||||||
@ -80,7 +86,7 @@ class AddInterfaceForm extends Component {
|
|||||||
required: true, message: '清输入接口路径!'
|
required: true, message: '清输入接口路径!'
|
||||||
}]
|
}]
|
||||||
})(
|
})(
|
||||||
<Input addonBefore={prefixSelector} placeholder="/path" />
|
<Input onBlur={this.handlePath} addonBefore={prefixSelector} placeholder="/path" />
|
||||||
)}
|
)}
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<br />
|
<br />
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import React, { Component } from 'react'
|
|||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import _ from 'underscore'
|
import _ from 'underscore'
|
||||||
import constants from '../../../../constants/variable.js'
|
import constants from '../../../../constants/variable.js'
|
||||||
|
import { handlePath } from '../../../../common.js'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Form, Select, Input, Tooltip,
|
Form, Select, Input, Tooltip,
|
||||||
@ -191,6 +192,10 @@ class InterfaceEditForm extends Component {
|
|||||||
|
|
||||||
handlePath = (e) => {
|
handlePath = (e) => {
|
||||||
let val = e.target.value;
|
let val = e.target.value;
|
||||||
|
val = handlePath(val)
|
||||||
|
this.props.form.setFieldsValue({
|
||||||
|
path: val
|
||||||
|
})
|
||||||
if (val && val.indexOf(":") !== -1) {
|
if (val && val.indexOf(":") !== -1) {
|
||||||
let paths = val.split("/"), name, i;
|
let paths = val.split("/"), name, i;
|
||||||
for (i = 1; i < paths.length; i++) {
|
for (i = 1; i < paths.length; i++) {
|
||||||
|
|||||||
@ -87,7 +87,6 @@ class InterfaceMenu extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onSelect = (selectedKeys) => {
|
onSelect = (selectedKeys) => {
|
||||||
const { history, match } = this.props;
|
const { history, match } = this.props;
|
||||||
let curkey = selectedKeys[0];
|
let curkey = selectedKeys[0];
|
||||||
@ -107,10 +106,13 @@ class InterfaceMenu extends Component {
|
|||||||
return message.error(res.data.errmsg);
|
return message.error(res.data.errmsg);
|
||||||
}
|
}
|
||||||
message.success('接口添加成功')
|
message.success('接口添加成功')
|
||||||
|
let interfaceId = res.data.data._id;
|
||||||
|
this.props.history.push("/project/" + this.props.projectId + "/interface/api/" + interfaceId)
|
||||||
this.props.fetchInterfaceList(this.props.projectId)
|
this.props.fetchInterfaceList(this.props.projectId)
|
||||||
this.setState({
|
this.setState({
|
||||||
visible: false
|
visible: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -323,9 +325,10 @@ class InterfaceMenu extends Component {
|
|||||||
className="interface-list"
|
className="interface-list"
|
||||||
defaultExpandedKeys={currentKes.expands}
|
defaultExpandedKeys={currentKes.expands}
|
||||||
defaultSelectedKeys={currentKes.selects}
|
defaultSelectedKeys={currentKes.selects}
|
||||||
|
selectedKeys={currentKes.selects}
|
||||||
onSelect={this.onSelect}
|
onSelect={this.onSelect}
|
||||||
>
|
>
|
||||||
<TreeNode title={<Link style={{ fontSize: '14px' }} to={"/project/" + matchParams.id + "/interface/api"}><Icon type="folder-open" style={{ marginRight: 5 }} />全部接口</Link>} key="root" />
|
<TreeNode title={<Link style={{ fontSize: '14px' }} to={"/project/" + matchParams.id + "/interface/api"}><Icon type="folder" style={{ marginRight: 5 }} />全部接口</Link>} key="root" />
|
||||||
{menuList.map((item) => {
|
{menuList.map((item) => {
|
||||||
return <TreeNode title={<div>
|
return <TreeNode title={<div>
|
||||||
<Link className="interface-item" to={"/project/" + matchParams.id + "/interface/api/cat_" + item._id} ><Icon type="folder-open" style={{ marginRight: 5 }} />{item.name}</Link>
|
<Link className="interface-item" to={"/project/" + matchParams.id + "/interface/api/cat_" + item._id} ><Icon type="folder-open" style={{ marginRight: 5 }} />{item.name}</Link>
|
||||||
|
|||||||
@ -137,6 +137,7 @@ class Profile extends Component {
|
|||||||
if(data.errcode === 0){
|
if(data.errcode === 0){
|
||||||
this.handleEdit('secureEdit', false)
|
this.handleEdit('secureEdit', false)
|
||||||
message.success('修改密码成功');
|
message.success('修改密码成功');
|
||||||
|
location.reload()
|
||||||
}else{
|
}else{
|
||||||
message.error(data.errmsg)
|
message.error(data.errmsg)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user