Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

client/components/Postman/Postman.js

@@ -1,21 +1,14 @@
 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, Tooltip, message } from 'antd'
 import { autobind } from 'core-decorators';
 import crossRequest from 'cross-request';
 import mockEditor from '../../containers/Project/Interface/InterfaceList/mockEditor'
-// import { withRouter } from 'react-router';
-// import axios from 'axios';
 import URL from 'url';
-// import AddColModal from './AddColModal'
-
-// import {
-// } from '../../../reducer/modules/group.js'
 
 import './Postman.scss'
 
-const { TextArea } = Input;
+// const { TextArea } = Input;
 const InputGroup = Input.Group;
 const Option = Select.Option;
 const Panel = Collapse.Panel;
@@ -42,7 +35,8 @@ export default class Run extends Component {
     headers: [],
     currDomain: '',
     bodyType: '',
-    bodyOther: ''
+    bodyOther: '',
+    isDidMount: false
   }
 
   constructor(props) {
@@ -59,6 +53,13 @@ export default class Run extends Component {
     }
   }
 
+  componentDidMount() {
+    const { bodyType } = this.state;
+    if(bodyType !== 'file' && bodyType !== 'form') {
+      this.loadBodyEditor()
+    }
+  }
+
   @autobind
   getInterfaceState(nextProps) {
     const props = nextProps || this.props;
@@ -107,6 +108,10 @@ export default class Run extends Component {
       currDomain: domain || (env[0] && env[0].domain),
       bodyType: req_body_type || 'form',
       loading: false
+    }, () => {
+      if(req_body_type !== 'file' && req_body_type !== 'form') {
+        this.loadBodyEditor()
+      }
     });
   }
 
@@ -301,7 +306,11 @@ export default class Run extends Component {
 
   @autobind
   changeBodyType(value) {
-    this.setState({bodyType: value})
+    this.setState({bodyType: value}, () => {
+      if(value !== 'file' && value !== 'form') {
+        this.loadBodyEditor()
+      }
+    })
   }
 
   hasCrossRequestPlugin() {
@@ -358,7 +367,6 @@ export default class Run extends Component {
   }
 
   bindAceEditor = () => {
-    console.log(mockEditor)
     mockEditor({
       container: 'res-body-pretty',
       data: JSON.stringify(this.state.res, null, 2),
@@ -372,6 +380,21 @@ export default class Run extends Component {
       onChange: function () {}
     })
   }
+  loadBodyEditor = () => {
+    const that = this;
+    setTimeout(function() {
+      mockEditor({
+        container: 'body-other-edit',
+        data: that.state.bodyOther,
+        onChange: function (d) {
+          if (d.format !== true) return false;
+          that.setState({
+            bodyOther: d.text
+          })
+        }
+      })
+    }, 0);
+  }
 
   @autobind
   fileChange(e, index) {
@@ -381,7 +404,7 @@ export default class Run extends Component {
 
   render () {
 
-    const { method, domains, pathParam, pathname, query, headers, bodyForm, bodyOther, currDomain, bodyType } = this.state;
+    const { method, domains, pathParam, pathname, query, headers, bodyForm, currDomain, bodyType } = this.state;
     const hasPlugin = this.hasCrossRequestPlugin();
     let path = pathname;
     pathParam.forEach(item => {
@@ -491,7 +514,7 @@ export default class Run extends Component {
                 <div style={{display: 'flex', justifyContent: 'space-between'}}>
                   <div>BODY</div>
                   <div onClick={e => e.stopPropagation()} style={{marginRight: 5}}>
-                    <Select defaultValue={bodyType} onChange={this.changeBodyType} className={method === 'POST' ? '' : 'hidden'}>
+                    <Select value={bodyType !== 'form' && bodyType !== 'file' ? 'text' : bodyType} onChange={this.changeBodyType} className={method === 'POST' ? '' : 'hidden'}>
                       <Option value="text">Text</Option>
                       <Option value="file">File</Option>
                       <Option value="form">Form</Option>
@@ -503,17 +526,12 @@ export default class Run extends Component {
             >
               { method === 'POST' && bodyType !== 'form' && bodyType !== 'file' &&
                 <div>
-                  <RadioGroup defaultValue="json">
+                  <RadioGroup value={bodyType} onChange={(e) => this.changeBodyType(e.target.value)}>
                     <RadioButton value="json">JSON</RadioButton>
                     <RadioButton value="text">TEXT</RadioButton>
                     <RadioButton value="xml">XML</RadioButton>
-                    <RadioButton value="html">HTML</RadioButton>
                   </RadioGroup>
-                  <TextArea
-                    value={bodyOther}
-                    style={{marginTop: 10}}
-                    autosize={{ minRows: 2, maxRows: 10 }}
-                  ></TextArea>
+                  <div id="body-other-edit" style={{marginTop: 10}} className="pretty-editor"></div>
                 </div>
               }
               {
@@ -566,14 +584,14 @@ export default class Run extends Component {
                   value={typeof this.state.res === 'object' ? JSON.stringify(this.state.res, null, 2) : this.state.res.toString()}
                   autosize={{ minRows: 2, maxRows: 10 }}
                 ></TextArea>*/}
-                <div id="res-body-pretty" className="pretty-editor" style={{height: 200}}></div>
+                <div id="res-body-pretty" className="pretty-editor"></div>
               </Panel>
               <Panel header="HEADERS" key="1" >
                 {/*<TextArea
                   value={typeof this.state.resHeader === 'object' ? JSON.stringify(this.state.resHeader, null, 2) : this.state.resHeader.toString()}
                   autosize={{ minRows: 2, maxRows: 10 }}
                 ></TextArea>*/}
-                <div id="res-headers-pretty" className="pretty-editor" style={{height: 200}}></div>
+                <div id="res-headers-pretty" className="pretty-editor"></div>
               </Panel>
             </Collapse>
           </Spin>

client/components/Postman/Postman.scss

@@ -2,5 +2,6 @@
   .pretty-editor {
     border: 1px solid #d9d9d9;
     border-radius: 4px;
+    height: 200px;
   }
 }

server/models/interfaceCase.js

@@ -31,10 +31,10 @@ class interfaceCase extends baseModel {
                 type: String,
                 enum: ['form', 'json', 'text', 'xml']
             },
-            res_body_form: [{
+            req_body_form: [{
                 name: String, value: String
             }],
-            res_body_other: String
+            req_body_other: String
 
         };
     }

server_dist/models/interfaceCase.js

@@ -70,10 +70,10 @@ var interfaceCase = function (_baseModel) {
                     type: String,
                     enum: ['form', 'json', 'text', 'xml']
                 },
-                res_body_form: [{
+                req_body_form: [{
                     name: String, value: String
                 }],
-                res_body_other: String
+                req_body_other: String
 
             };
         }