fix: 修改view

2025-04-06 15:00:26 +08:00 · 2017-08-15 17:54:06 +08:00 · 2017-08-15 17:54:06 +08:00 · 8116220e79
commit 8116220e79
parent 2b3c56a0c1
4 changed files with 151 additions and 96 deletions
--- a/client/containers/Project/Interface/InterfaceList/InterfaceEditForm.js
+++ b/client/containers/Project/Interface/InterfaceList/InterfaceEditForm.js
@ -1,17 +1,20 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import _ from 'underscore'

 import {
  Form, Select, Input,
  Button, Row, Col, Radio, Icon
 } from 'antd';
+
 const FormItem = Form.Item;
 const Option = Select.Option;
 const InputGroup = Input.Group;
 const RadioGroup = Radio.Group;
 const dataTpl = {
  req_query: { name: "", required: "1", desc: "" },
-  req_headers: { name: "", required: "1", desc: "" }
+  req_headers: { name: "", required: "1", desc: "" },
+  req_params: { name: "", desc: "" }
 }

 const mockEditor = require('./mockEditor.js');
@ -32,12 +35,14 @@ class InterfaceEditForm extends Component {
    if (curdata.req_query && curdata.req_query.length === 0) delete curdata.req_query;
    if (curdata.req_headers && curdata.req_headers.length === 0) delete curdata.req_headers;
    if (curdata.req_body_form && curdata.req_body_form.length === 0) delete curdata.req_body_form;
+    if (curdata.req_params && curdata.req_params.length === 0) delete curdata.req_params;

    this.state = Object.assign({
      title: '',
      path: '',
      status: 'undone',
      method: 'get',
+      req_params: [],
      req_query: [{
        name: '',
        desc: '',
@ -66,23 +71,31 @@ class InterfaceEditForm extends Component {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (values.res_body_type === 'json') values.res_body = this.state.res_body;
+        values.req_params = this.state.req_params;
        values.req_body_json = this.state.res_body;
-        let isfile = false;
-        if(values.req_body_type === 'form'){
-          values.req_body_form.forEach((item)=>{
-            if(item.type === 'file'){
+        values.method = this.state.method;
+        let isfile = false, isHavaContentType = false;
+        if (values.req_body_type === 'form') {
+          values.req_body_form.forEach((item) => {
+            if (item.type === 'file') {
              isfile = true;
            }
          })

-          values.req_headers.filter( (item)=>{
-            item.name !== 'Content-Type'
+          values.req_headers.map((item) => {
+            if (item.name === 'Content-Type') {
+              item.value = isfile ? 'multipart/form-data' : 'application/x-www-form-urlencoded'
+              isHavaContentType = true;
+            }
          })
-          values.req_headers.unshift({
-            name: 'Content-Type',
-            value: isfile? 'multipart/form-data': 'application/x-www-form-urlencoded'
-          })
-          
+          if (isHavaContentType === false) {
+            values.req_headers.unshift({
+              name: 'Content-Type',
+              value: isfile ? 'multipart/form-data' : 'application/x-www-form-urlencoded'
+            })
+          }
+
+
        }

        this.props.onSubmit(values)
@ -101,7 +114,7 @@ class InterfaceEditForm extends Component {
        })
      }
    })
-    
+
    resBodyEditor = mockEditor({
      container: 'res_body_json',
      data: that.state.res_body,
@ -121,9 +134,10 @@ class InterfaceEditForm extends Component {
    })
  }

-  addParams = (name) => {
+  addParams = (name, data) => {
    let newValue = {}
-    newValue[name] = [].concat(this.state[name], dataTpl[name])
+    data = data || dataTpl[name]
+    newValue[name] = [].concat(this.state[name], data)
    this.setState(newValue)
  }

@ -138,6 +152,22 @@ class InterfaceEditForm extends Component {
    this.setState(newValue)
  }

+  handlePath = (e) => {
+    let val = e.target.value;
+    if (val && val.indexOf(":") !== -1) {
+      let paths = val.split("/"), name, i;
+      for(i=1; i< paths.length; i++){
+        if(paths[i][0] === ':'){
+          name = paths[i].substr(1);
+          if(!_.find(this.state.req_params, {name: name})){
+            this.addParams('req_params', { name: name })
+          }
+        }
+      }
+      
+    }
+  }
+
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
@ -241,6 +271,33 @@ class InterfaceEditForm extends Component {
      </Row>
    }

+    const paramsTpl = (data, index) => {
+      return <Row key={index}>
+        <Col span="6">
+          {getFieldDecorator('req_params[' + index + '].name', {
+            initialValue: data.name
+          })(
+            <Input disabled placeholder="参数名称" />
+            )}
+        </Col>
+        <Col span="8" >
+          {getFieldDecorator('req_params[' + index + '].desc', {
+            initialValue: data.desc
+          })(
+            <Input placeholder="备注" />
+            )}
+        </Col>
+        <Col span="2" >
+          <Icon type="delete" className="interface-edit-del-icon" onClick={() => this.delParams(index, 'req_params')} />
+        </Col>
+
+      </Row>
+    }
+
+    const paramsList = this.state.req_params.map((item, index) => {
+      return paramsTpl(item, index)
+    })
+
    const QueryList = this.state.req_query.map((item, index) => {
      return queryTpl(item, index)
    })
@ -275,32 +332,34 @@ class InterfaceEditForm extends Component {
          {...formItemLayout}
          label="接口路径"
        >
-          {getFieldDecorator('path', {
-            initialValue: this.state.path,
-            rules: [{
-              required: true, message: '清输入接口路径!'
-            }]
-          })(
-            <InputGroup compact>
-              {getFieldDecorator('method', {
-                initialValue: 'GET'
-              })(
-                <Select style={{ width: "15%" }}>
-                  <Option value="GET">GET</Option>
-                  <Option value="POST">POST</Option>
-                  <Option value="PUT">PUT</Option>
-                  <Option value="DELETE">DELETE</Option>
-                </Select>
-                )}
-              <Input value={this.props.basepath} readOnly onChange={() => { }} style={{ width: '25%'}} />
-              {getFieldDecorator('path', {
-                initialValue: this.state.path
-              })(
-                <Input placeholder="/path" style={{ width: '60%' }} />
-                )}
-            </InputGroup>
+          <InputGroup compact>
+            <Select value={this.state.method} onChange={val => this.setState({ method: val })} style={{ width: "15%" }}>
+              <Option value="GET">GET</Option>
+              <Option value="POST">POST</Option>
+              <Option value="PUT">PUT</Option>
+              <Option value="DELETE">DELETE</Option>
+            </Select>
+
+
+            <Input value={this.props.basepath} readOnly onChange={() => { }} style={{ width: '25%' }} />
+
+            {getFieldDecorator('path', {
+              initialValue: this.state.path,
+              rules: [{
+                required: true, message: '清输入接口路径!'
+              }]
+            })(
+              <Input onBlur={this.handlePath} placeholder="/path" style={{ width: '60%' }} />
+              )}
+          </InputGroup>
+          <Row className="interface-edit-item">
+            <Col span={18} offset={0}>
+              {paramsList}
+            </Col>
+
+          </Row>
+

-            )}
        </FormItem>

        <FormItem
@ -462,7 +521,7 @@ class InterfaceEditForm extends Component {
          label="预览"
        >
          <div id="mock-preview" style={{ backgroundColor: "#eee", lineHeight: "20px", minHeight: "300px" }}>
-            
+
          </div>
        </FormItem>

@ -470,7 +529,7 @@ class InterfaceEditForm extends Component {
        <Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('res_body_type') === 'raw' ? 'block' : 'none' }}>
          <Col span={18} offset={4} >
            {getFieldDecorator('res_body', { initialValue: this.state.res_body })(
-              <Input.TextArea style={{minHeight: "150px"}} placeholder="备注信息" />
+              <Input.TextArea style={{ minHeight: "150px" }} placeholder="备注信息" />
            )}
          </Col>

--- a/client/containers/Project/Interface/InterfaceList/Run.js
+++ b/client/containers/Project/Interface/InterfaceList/Run.js
@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Button, Input, Select, Card, Alert, Spin, Icon, message, Collapse } from 'antd'
+import { Button, Input, Select, Card, Alert, Spin, Icon, message, Collapse, Radio } from 'antd'
 import { autobind } from 'core-decorators';
 import crossRequest from 'cross-request';
 import { withRouter } from 'react-router';
@ -17,6 +17,8 @@ const { TextArea } = Input;
 const InputGroup = Input.Group;
 const Option = Select.Option;
 const Panel = Collapse.Panel;
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;

@connect(
  state => ({
@ -376,8 +378,6 @@ export default class Run extends Component {
          }
        </div>

-        {/*<div className="interface-name">{interfaceName}</div>*/}
-
        <Card title="请求部分" noHovering className="req-part">
          <div className="url">
            <InputGroup compact style={{display: 'flex'}}>
@ -421,7 +421,8 @@ export default class Run extends Component {
                headers.map((item, index) => {
                  return (
                    <div key={index} className="key-value-wrap">
-                      <Input value={item.name} onChange={e => this.changeHeader(e, index, true)} className="key" />{' = '}
+                      <Input value={item.name} onChange={e => this.changeHeader(e, index, true)} className="key" />
+                      <span className="eq-symbol">=</span>
                      <Input value={item.value} onChange={e => this.changeHeader(e, index)} className="value" />
                      <Icon type="delete" className="icon-btn" onClick={() => this.deleteHeader(index)} />
                    </div>
@ -447,49 +448,55 @@ export default class Run extends Component {
            >
              { method === 'POST' && paramsType !== 'form' && paramsType !== 'file' &&
                <div>
+                  <RadioGroup defaultValue="json">
+                    <RadioButton value="json">JSON</RadioButton>
+                    <RadioButton value="text">TEXT</RadioButton>
+                    <RadioButton value="xml">XML</RadioButton>
+                    <RadioButton value="html">HTML</RadioButton>
+                  </RadioGroup>
                  <TextArea
                    value={params}
-                    style={{margin: 10}}
+                    style={{marginTop: 10}}
                    autosize={{ minRows: 2, maxRows: 6 }}
                  ></TextArea>
-                  <div>{paramsType}</div>
                </div>
              }
              {
-                method === 'POST' && paramsType === 'form' && (
-                  <div>
-                    {
-                      params.map((item, index) => {
-                        return (
-                          <div key={index}>
-                            <Input value={item.key} onChange={e => this.changeParams(e, index, 'key')} style={{display: 'inline-block', width: 200, margin: 10}} />
-                            [<Select value={item.type} onChange={e => this.changeParams(e, index, 'type')}>
-                              <Option value="file">File</Option>
-                              <Option value="text">Text</Option>
-                            </Select>]{' = '}
-                            {item.type === 'file' ?
-                              <Input type="file" id={'file_' + index} onChange={e => this.changeParams(e, index, 'value')} multiple style={{display: 'inline-block', width: 200, margin: 10}} /> :
-                              <Input value={item.value} onChange={e => this.changeParams(e, index, 'value')} style={{display: 'inline-block', width: 200, margin: 10}} />
-                            }
-                          </div>
-                        )
-                      })
-                    }
-                    <Button type="primary" icon="plus" onClick={this.addParams}>Add form parameter</Button>
-                  </div>
-                )
+                method === 'POST' && paramsType === 'form' &&
+                <div>
+                  {
+                    params.map((item, index) => {
+                      return (
+                        <div key={index} className="key-value-wrap">
+                          <Input value={item.key} onChange={e => this.changeParams(e, index, 'key')} className="key" />
+                          <span>[</span>
+                          <Select value={item.type} onChange={e => this.changeParams(e, index, 'type')}>
+                            <Option value="file">File</Option>
+                            <Option value="text">Text</Option>
+                          </Select>
+                          <span>]</span>
+                          <span className="eq-symbol">=</span>
+                          {
+                            item.type === 'file' ? <Input type="file" id={'file_' + index} onChange={e => this.changeParams(e, index, 'value')} multiple className="value" /> :
+                            <Input value={item.value} onChange={e => this.changeParams(e, index, 'value')} className="value" />
+                          }
+                          <Icon type="delete" className="icon-btn" onClick={() => this.deleteParams(index)} />
+                        </div>
+                      )
+                    })
+                  }
+                  <Button type="primary" icon="plus" onClick={this.addParams}>Add form parameter</Button>
+                </div>
              }
              {
-                method === 'POST' && paramsType === 'file' && (
-                  <div>
-                    <Input type="file"></Input>
-                  </div>
-                )
+                method === 'POST' && paramsType === 'file' &&
+                <div>
+                  <Input type="file"></Input>
+                </div>
              }
              {
-                method !== 'POST' && (
-                  <div style={{margin: 10}}>GET 请求没有 Body。</div>
-                )
+                method !== 'POST' &&
+                <div>GET 请求没有 BODY。</div>
              }
            </Panel>
          </Collapse>
--- a/client/containers/Project/Interface/InterfaceList/View.js
+++ b/client/containers/Project/Interface/InterfaceList/View.js
@ -30,17 +30,17 @@ class View extends Component {
  componentDidMount() {
    let that = this;
    mockEditor({
-      container: 'req_body_json',
+      container: 'vreq_body_json',
      data: that.props.req_body_form,
      onChange: function () {}
    })
    mockEditor({
-      container: 'res_body_json',
+      container: 'vres_body_json',
      data: that.props.res_body,
      onChange: function () {}
    })
    mockEditor({
-      container: 'req_query_json',
+      container: 'vreq_query_json',
      data: that.props.req_query,
      onChange: function () {}
    })
@ -106,15 +106,15 @@ class View extends Component {
      </div>
      <div className="colQuery">
        <span className="colKey">Query：</span>
-        <div span={18} offset={4} id="req_query_json" style={{ minHeight: "150px" }}></div>
+        <div span={18} offset={4} id="vreq_query_json" style={{ minHeight: "150px" }}></div>
      </div>
      <div className="colBody">
        <span className="colKey">请求Body：</span>
-        <div span={18} offset={4} id="req_body_json" style={{ minHeight: "300px" }}></div>
+        <div span={18} offset={4} id="vreq_body_json" style={{ minHeight: "300px" }}></div>
      </div>
      <div className="colBody">
        <span className="colKey">响应Body：</span>
-        <div span={18} offset={4} id="res_body_json" style={{ minHeight: "300px" }}></div>
+        <div span={18} offset={4} id="vres_body_json" style={{ minHeight: "300px" }}></div>
      </div>
      
      
--- a/exampleCode/api/project/list.json
+++ b/exampleCode/api/project/list.json
@ -2,7 +2,6 @@
    "errcode": 0,
    "errmsg": "success",
    "data": {
-        "total": 2,
        "list": [
            {
                "_id": 529,
@ -148,16 +147,6 @@
                    "107"
                ]
            }
-        ],
-        "userinfo": {
-            "107": {
-                "_id": 107,
-                "username": "admin",
-                "email": "admin@admin.com",
-                "role": "admin",
-                "add_time": 1500280333,
-                "up_time": 1500373530
-            }
-        }
+        ]
    }
 }