1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
| import React, {Component} from 'react'
| import { Icon, Tabs } from 'antd'
|
| 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: [{
| uuid: 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.uuid = Utils.getuuid()
| this.setState({tabviews: [...this.state.tabviews, item]})
| }
|
| handleTabview = (view) => {
| let tabviews = fromJS(this.state.tabviews).toJS()
| tabviews = tabviews.filter(item => item.uuid !== view.uuid)
|
| this.setState({tabviews}, () => {
| if (tabviews.length > 0) return
|
| setTimeout(() => {
| this.setState({tabviews: [{
| uuid: Utils.getuuid(),
| createDate: '',
| method: 'POST',
| interface: '',
| params: [],
| headers: [],
| active: 'raw',
| raw: '',
| formData: []
| }]})
| }, 300)
| })
| }
|
| handleAdd = () => {
| this.setState({tabviews: [...this.state.tabviews, {
| uuid: Utils.getuuid(),
| createDate: '',
| method: 'POST',
| interface: '',
| params: [],
| headers: [],
| active: 'raw',
| raw: '',
| formData: []
| }]})
| }
|
| render () {
| const { tabviews } = this.state
|
| return (
| <div className="workspace-wrap">
| <Icon className="add-view" type="plus" onClick={this.handleAdd} />
| <Tabs type="card">
| {tabviews.map(view => {
| return (
| <Tabs.TabPane
| tab={
| <span className="control">
| <span className="method">
| {view.method || 'POST'}
| </span>
| <span className="interface">
| {view.interface || 'Untitled Request'}
| </span>
| <Icon type="close" onClick={() => this.handleTabview(view)}/>
| </span>
| }
| key={view.uuid}
| >
| <Request config={view} />
| </Tabs.TabPane>
| )
| })}
| </Tabs>
| </div>
| )
| }
| }
|
| export default WorkSpace
|
|
