feat - mock

client/containers/AddInterface/AddInterface.js

@@ -108,6 +108,15 @@ class AddInterface extends Component {
     props.addReqHeader(req_headers)
   }
 
+  editState2 () {
+    const props = this.props
+    props.pushInputValue(props.url)
+    // props.pushInterfaceName(title)
+    // props.getReqParams(req_params_other)
+    props.getResParams(props.resParams)
+    // props.addReqHeader(req_headers)
+  }
+
   initInterfaceData (interfaceId) {
     const params = { id: interfaceId }
 
@@ -165,9 +174,11 @@ class AddInterface extends Component {
     this.setLoading(true)
 
     axios.post(postURL, params)
-      .then(() => {
+      .then(data => {
+        console.log(data)
         this.setLoading()
-        this.routerPage()
+        this.editState2()
+        // this.routerPage()
       })
       .catch(e => {
         console.log(e)

client/containers/AddInterface/AddInterface.scss

@@ -8,7 +8,7 @@
     max-width: 11rem;
     margin: 0 auto;
     background: #FFF;
-    padding: 10px 20px;
+    padding: 10px 20px 50px 20px;
 
     .save {
       float: right;
@@ -131,13 +131,29 @@
       textarea {
         width: 100%;
         border: 1px #CCC solid;
-        height: 200px;
+        height: 300px;
+      }
+
+      pre {
+        padding: 10px;
+        box-sizing: border-box;
+        width: 100%;
+        border: 1px #CCC solid;
+        height: 300px;
+        overflow-x: hidden;
+        overflow-y: auto; 
+        line-height: 1.2;
       }
       
       .ant-tabs {
         -webkit-box-flex: 1;
       }
     }
+
+    .dynamic-delete-button {
+      margin: 0 0 0 10px;
+      color: #CCC;
+    }
   }
 
   .loading {

client/containers/AddInterface/ReqHeader/ReqList.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Select, Input } from 'antd'
+import { Select, Input, Icon } from 'antd'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { autobind } from 'core-decorators'
@@ -64,7 +64,7 @@ class ReqList extends Component {
     let newSeqGroup = []
     let seqGroup = this.props.seqGroup
     let id = this.props.value.id
-    console.log(this.props)
+
     seqGroup.map(value => {
       if (+id !== value.id) {
         newSeqGroup.push(value)
@@ -91,7 +91,7 @@ class ReqList extends Component {
         </Select>
         <em className="title">头部内容</em>
         <Input defaultValue={value} placeholder="Basic usage" className="req-content" size="large" onBlur={this.handleBlur} />
-        <span className="close" onClick={this.deleteReqHeader}>×</span>
+        <Icon className="dynamic-delete-button" type="minus-circle-o" onClick={this.deleteReqHeader} />
       </li>
     )
   }

client/containers/AddInterface/ResParams/ResParams.js

@@ -35,15 +35,17 @@ class ResParams extends Component {
   }
 
   componentDidMount () {
-    const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+/g
+    const reg = /(<p>)|(<\/p>)|&nbsp;|(<br>)|\s+|<div>|<\/div>/g
     editor.customConfig.menus = []
     editor.customConfig.onchange = html => {
+      html = html.match(/{.*}/g)[0]
       html = html.replace(reg, '')
+      console.log(html)
       this.props.getResParams(html)
     }
     setTimeout(() => {
       this.initResParams()
-    }, 200)
+    }, 400)
     editor.create()
   }
 

client/containers/AddInterface/Result/Result.js

@@ -1,24 +1,45 @@
 import React, { Component } from 'react'
 import { Tabs } from 'antd'
+import Mock from 'mockjs'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+
+@connect(
+  state => {
+    return {
+      resParams: state.addInterface.resParams,
+      reqParams: state.addInterface.reqParams
+    }
+  }
+)
 
 class Result extends Component {
+  static propTypes = {
+    resParams: PropTypes.string,
+    reqParams: PropTypes.string
+  }
+
   constructor(props) {
     super(props)
   }
 
-  callback () {
-
-  }
-
-  render () {
-    const TabPane = Tabs.TabPane
-
+  render () { 
+    console.log(1)
+    let TabPane = Tabs.TabPane
+    let resParams = ''
+    let json = ''
+    
+    if(this.props.resParams){
+      console.log(this.props.resParams)
+      resParams = JSON.parse(this.props.resParams)
+      json = JSON.stringify(Mock.mock(resParams), null, 2)
+    }
     return (
       <div className="result">
         <strong className="res-h3">返回示例 :</strong>
-        <Tabs defaultActiveKey="1" onChange={this.callback}>
+        <Tabs defaultActiveKey="1">
           <TabPane tab="成功结果" key="1">
-            <textarea></textarea>
+            <pre>{json}</pre>
           </TabPane>
         </Tabs>
       </div>
@@ -26,4 +47,4 @@ class Result extends Component {
   }
 }
 
-export default Result
+export default Result

index.html

@@ -10,4 +10,4 @@
 <div id="yapi" style="height: 100%;"></div>
 <script src="prd/index@dev.js"></script>
 </body>
-</html>
+</html>

package.json

@@ -30,6 +30,7 @@
     "koa-session-minimal": "^3.0.3",
     "koa-static": "^3.0.0",
     "koa-views": "^5.2.0",
+    "mock": "^0.1.1",
     "mockjs": "^1.0.1-beta3",
     "moment": "^2.18.1",
     "mongoose": "4.10.8",