feat: 添加到集合

client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js

@@ -56,6 +56,8 @@ export default class InterfaceColMenu extends Component {
       });
       message.success('添加集合成功');
       await this.props.fetchInterfaceColList(project_id);
+    } else {
+      message.error(res.data.errmsg);
     }
   }
 
@@ -90,7 +92,7 @@ export default class InterfaceColMenu extends Component {
                 onTitleClick={(key, e) => this.selectCol(key, e, col)}
               >
                 {
-                  col.interfaceCaseList && col.interfaceCaseList.map((interfaceCase, index) => (
+                  col.caseList && col.caseList.map((interfaceCase, index) => (
                     <Menu.Item key={index}>{interfaceCase.name}</Menu.Item>
                   ))
                 }

client/containers/Project/Interface/InterfaceList/InterfaceContent.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Tabs } from 'antd';
 import Edit from './Edit.js'
 import View from './View.js'
-import Run from './Run.js'
+import Run from './Run/Run.js'
 
 const TabPane = Tabs.TabPane;
 
@@ -22,4 +22,4 @@ const Content = () => {
   </div>
 }
 
-export default Content
+export default Content

client/containers/Project/Interface/InterfaceList/Run/AddColModal.js

@@ -0,0 +1,120 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Modal, Collapse, Row, Col, Input, message, Button, Icon } from 'antd';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import { withRouter } from 'react-router'
+import { fetchInterfaceColList } from '../../../../../reducer/modules/interfaceCol'
+
+const { TextArea } = Input;
+const Panel = Collapse.Panel;
+
+@connect(
+  state => ({
+    interfaceColList: state.interfaceCol.interfaceColList
+  }),
+  {
+    fetchInterfaceColList
+  }
+)
+@withRouter
+export default class AddColModal extends Component {
+  static propTypes = {
+    visible: PropTypes.bool,
+    interfaceColList: PropTypes.array,
+    fetchInterfaceColList: PropTypes.func,
+    match: PropTypes.object,
+    onOk: PropTypes.func,
+    onCancel: PropTypes.func
+  }
+
+  state = {
+    visible: false,
+    addColName: '',
+    addColDesc: '',
+    id: 0
+  }
+
+  constructor(props) {
+    super(props)
+  }
+
+  componentWillMount() {
+    this.props.fetchInterfaceColList(this.props.match.params.id)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({id: nextProps.interfaceColList[0]._id})
+  }
+
+  addCol = async () => {
+    const { addColName: name, addColDesc: desc } = this.state;
+    const project_id = this.props.match.params.id
+    const res = await axios.post('/api/col/add_col', { name, desc, project_id })
+    if (!res.data.errcode) {
+      message.success('添加集合成功');
+      await this.props.fetchInterfaceColList(project_id);
+    } else {
+      message.error(res.data.errmsg);
+    }
+  }
+
+  select = (id) => {
+    this.setState({id})
+  }
+
+  render() {
+    const { interfaceColList = [] } = this.props;
+    const { id } = this.state;
+    return (
+      <Modal
+        className="add-col-modal"
+        title="添加到集合"
+        visible={this.props.visible}
+        onOk={() => this.props.onOk(id)}
+        onCancel={this.props.onCancel}
+      >
+        <p>请选择添加到的集合：</p>
+        <ul className="col-list">
+          {
+            interfaceColList.length ? interfaceColList.map(col =>
+              <li
+                key={col._id}
+                className={`col-item ${col._id === id ? 'selected' : ''}`}
+                onClick={() => this.select(col._id)}
+              >
+                <Icon type="folder-open" style={{marginRight: 6}} />{col.name}
+              </li>
+            ) : <span>暂无集合，请添加！</span>
+          }
+        </ul>
+        <Collapse>
+          <Panel header="添加新集合">
+            <Row gutter={6} className="modal-input">
+              <Col span="5"><div className="label">集合名：</div></Col>
+              <Col span="15">
+                <Input
+                  placeholder="请输入集合名称"
+                  value={this.state.addColName}
+                  onChange={e => this.setState({addColName: e.target.value})}></Input>
+              </Col>
+            </Row>
+            <Row gutter={6} className="modal-input">
+              <Col span="5"><div className="label">简介：</div></Col>
+              <Col span="15">
+                <TextArea
+                  rows={3}
+                  placeholder="请输入集合描述"
+                  value={this.state.addColDesc}
+                  onChange={e => this.setState({addColDesc: e.target.value})}></TextArea>
+              </Col>
+            </Row>
+            <Row type="flex" justify="end">
+              <Button style={{float: 'right'}} type="primary" onClick={this.addCol}>添 加</Button>
+            </Row>
+          </Panel>
+        </Collapse>
+      </Modal>
+    )
+  }
+}

client/containers/Project/Interface/InterfaceList/Run/Run.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Button, Input, Select, Card, Alert, Spin, Icon, Collapse, Radio } from 'antd'
+import { Button, Input, Select, Card, Alert, Spin, Icon, Collapse, Radio, Tooltip } 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 AddColModal from './AddColModal'
 
 // import {
 // } from '../../../reducer/modules/group.js'
@@ -47,7 +48,8 @@ export default class Run extends Component {
     headers: [],
     currDomain: '',
     bodyType: '',
-    bodyOther: ''
+    bodyOther: '',
+    addColModalVisible: false
   }
 
   constructor(props) {
@@ -399,17 +401,21 @@ export default class Run extends Component {
               </Select>
               <Input value={path + search} onChange={this.changePath} spellCheck="false" style={{flexBasis: 180, flexGrow: 1}} />
             </InputGroup>
-            <Button
-              onClick={this.reqRealInterface}
-              type="primary"
-              style={{marginLeft: 10}}
-              loading={this.state.loading}
-            >发送</Button>
-            <Button
-              onClick={this.reqRealInterface}
-              type="primary"
-              style={{marginLeft: 10}}
-            >保存</Button>
+            <Tooltip placement="bottom" title="请求真实接口">
+              <Button
+                onClick={this.reqRealInterface}
+                type="primary"
+                style={{marginLeft: 10}}
+                loading={this.state.loading}
+              >发送</Button>
+            </Tooltip>
+            <Tooltip placement="bottom" title="添加到集合">
+              <Button
+                onClick={() => this.setState({addColModalVisible: true})}
+                type="primary"
+                style={{marginLeft: 10}}
+              >保存</Button>
+            </Tooltip>
           </div>
 
           <Collapse defaultActiveKey={['0', '1', '2', '3']} bordered={true}>
@@ -541,6 +547,11 @@ export default class Run extends Component {
             </div>
           </Spin>
         </Card>
+        <AddColModal
+          visible={this.state.addColModalVisible}
+          onCancel={() => this.setState({addColModalVisible: false})}
+          onOk={null}
+        ></AddColModal>
       </div>
     )
   }

client/containers/Project/Interface/InterfaceList/Run/Run.scss

@@ -28,3 +28,20 @@
     color: #108ee9;
   }
 }
+.add-col-modal {
+  .col-list {
+    height: 200px;
+    overflow: auto;
+    margin: 7px 0 15px 0;
+    background: #eaeaea;
+    .col-item {
+      padding: 7px 10px 7px 10px;
+    }
+    .col-item:hover {
+      background: #fa0;
+    }
+    .col-item.selected {
+      background: #108ee9;
+    }
+  }
+}