import React, {Component} from 'react'
|
import { Tabs } from 'antd'
|
import { PlusOutlined, CloseOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import MKEmitter from '@/utils/events.js'
|
import Request from './request'
|
import './index.scss'
|
import { fromJS } from 'immutable'
|
|
|
class WorkSpace extends Component {
|
state = {
|
tabviews: [{
|
id: Utils.getuuid(),
|
createDate: '',
|
method: 'POST',
|
interface: '',
|
params: [],
|
headers: [],
|
active: 'raw',
|
raw: '',
|
formData: []
|
}]
|
}
|
|
componentDidMount() {
|
MKEmitter.addListener('useInterface', this.useInterface)
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('useInterface', this.useInterface)
|
}
|
|
useInterface = (item) => {
|
item.id = Utils.getuuid()
|
|
this.setState({tabviews: [...this.state.tabviews, item]}, () => {
|
let div = document.getElementById(item.id)
|
div && div.click && div.click()
|
})
|
}
|
|
handleTabview = (view) => {
|
let tabviews = fromJS(this.state.tabviews).toJS()
|
tabviews = tabviews.filter(item => item.id !== view.id)
|
|
this.setState({tabviews}, () => {
|
if (tabviews.length > 0) return
|
|
setTimeout(() => {
|
this.setState({tabviews: [{
|
id: Utils.getuuid(),
|
createDate: '',
|
method: 'POST',
|
interface: '',
|
params: [],
|
headers: [],
|
active: 'raw',
|
raw: '',
|
formData: []
|
}]})
|
}, 300)
|
})
|
}
|
|
handleAdd = () => {
|
let item = {
|
id: Utils.getuuid(),
|
createDate: '',
|
method: 'POST',
|
interface: '',
|
params: [],
|
headers: [],
|
active: 'raw',
|
raw: '',
|
formData: []
|
}
|
this.setState({tabviews: [...this.state.tabviews, item]}, () => {
|
let div = document.getElementById(item.id)
|
div && div.click && div.click()
|
})
|
}
|
|
render () {
|
const { tabviews } = this.state
|
|
return (
|
<div className="workspace-wrap">
|
<PlusOutlined className="add-view" onClick={this.handleAdd} />
|
<Tabs type="card">
|
{tabviews.map(view => {
|
return (
|
<Tabs.TabPane
|
tab={
|
<span className="control" id={view.id || ''}>
|
<span className="method">
|
{view.method || 'POST'}
|
</span>
|
<span className="interface">
|
{view.interface || 'Untitled Request'}
|
</span>
|
<CloseOutlined onClick={() => this.handleTabview(view)}/>
|
</span>
|
}
|
key={view.id}
|
>
|
<Request config={view} />
|
</Tabs.TabPane>
|
)
|
})}
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
|
export default WorkSpace
|
