2022-01-21

king

2022-01-21 46f79b491173d284a4900d19e7aecf7509481438

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
116
117
118
119
120
121
122
123
124
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: [{
      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]}, () => {
      let div = document.getElementById(item.uuid)
      div && div.click && div.click()
    })
  }
 
  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 = () => {
    let item = {
      uuid: Utils.getuuid(),
      createDate: '',
      method: 'POST',
      interface: '',
      params: [],
      headers: [],
      active: 'raw',
      raw: '',
      formData: []
    }
    this.setState({tabviews: [...this.state.tabviews, item]}, () => {
      let div = document.getElementById(item.uuid)
      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.uuid || ''}>
                    <span className="method">
                      {view.method || 'POST'}
                    </span>
                    <span className="interface">
                      {view.interface || 'Untitled Request'}
                    </span>
                    <CloseOutlined onClick={() => this.handleTabview(view)}/>
                  </span>
                }
                key={view.uuid}
              >
                <Request config={view} />
              </Tabs.TabPane>
            )
          })}
        </Tabs>
      </div>
    )
  }
}
 
export default WorkSpace