添加 删除 接口

client/ReduxContainer.js

@@ -4,6 +4,7 @@ import group from './reducer/group/group.js'
 import project from './reducer/group/project.js'
 import Interface from './reducer/interface/InterfaceReducer.js'
 import news from './reducer/news/news.js'
+import addInterface from './reducer/addInterface/addInterface.js'
 
 export default {
   group,
@@ -11,5 +12,6 @@ export default {
   LoginRedux,
   Interface,
   project,
-  news
+  news,
+  addInterface
 }

client/actions/addInterFace.js

@@ -1,10 +1,51 @@
 import {
-  FETCH_ADD_INTERFACE_INPUT
+  FETCH_ADD_INTERFACE_INPUT,
+  FETCH_ADD_INTERFACE_TAG_VALUE,
+  FETCH_ADD_INTERFACE_HEADER_VALUE,
+  ADD_INTERFACE_SEQ_HEADER,
+  DELETE_INTERFACE_SEQ_HEADER,
+  ADD_INTERFACE_REQ_PARAMS
 } from '../constants/action-types.js'
 
-export function pushInputVal (value) {
+export function pushInputValue (value) {
   return {
     type: FETCH_ADD_INTERFACE_INPUT,
     payload: value
   };
 }
+
+export function reqTagValue (value) {
+  return {
+    type: FETCH_ADD_INTERFACE_TAG_VALUE,
+    payload: value
+  };
+}
+
+export function reqHeaderValue (value) {
+  return {
+    type: FETCH_ADD_INTERFACE_HEADER_VALUE,
+    payload: value
+  };
+}
+
+export function addReqHeader (value) {
+  return {
+    type: ADD_INTERFACE_SEQ_HEADER,
+    payload: value
+  };
+}
+
+export function deleteReqHeader (value) {
+  return {
+    type: DELETE_INTERFACE_SEQ_HEADER,
+    payload: value
+  };
+}
+
+export function addReqParams (value) {
+  return {
+    type: ADD_INTERFACE_REQ_PARAMS,
+    payload: value
+  };
+}
+

client/actions/addInterface.js

@@ -0,0 +1,51 @@
+import {
+  FETCH_ADD_INTERFACE_INPUT,
+  FETCH_ADD_INTERFACE_TAG_VALUE,
+  FETCH_ADD_INTERFACE_HEADER_VALUE,
+  ADD_INTERFACE_SEQ_HEADER,
+  DELETE_INTERFACE_SEQ_HEADER,
+  ADD_INTERFACE_REQ_PARAMS
+} from '../constants/action-types.js'
+
+export function pushInputValue (value) {
+  return {
+    type: FETCH_ADD_INTERFACE_INPUT,
+    payload: value
+  };
+}
+
+export function reqTagValue (value) {
+  return {
+    type: FETCH_ADD_INTERFACE_TAG_VALUE,
+    payload: value
+  };
+}
+
+export function reqHeaderValue (value) {
+  return {
+    type: FETCH_ADD_INTERFACE_HEADER_VALUE,
+    payload: value
+  };
+}
+
+export function addReqHeader (value) {
+  return {
+    type: ADD_INTERFACE_SEQ_HEADER,
+    payload: value
+  };
+}
+
+export function deleteReqHeader (value) {
+  return {
+    type: DELETE_INTERFACE_SEQ_HEADER,
+    payload: value
+  };
+}
+
+export function addReqParams (value) {
+  return {
+    type: ADD_INTERFACE_REQ_PARAMS,
+    payload: value
+  };
+}
+

client/components/Header/Header.scss

@@ -7,10 +7,10 @@ $color-black-light : #404040;
 /* .header-box.css */
 .header-box {
   display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  // position: fixed;
+  // top: 0;
+  // left: 0;
+  // right: 0;
   //line-height: .64rem;
   font-size: 0.14rem;
   color: $color-white;

client/constants/action-types.js

@@ -3,6 +3,13 @@ export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA'
 export const LIST_INTERFACE_CLICK = 'LIST_INTERFACE_CLICK'
 export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE'
 
+// addInterFace
+export  const FETCH_ADD_INTERFACE_INPUT = 'FETCH_ADD_INTERFACE_INPUT'
+export  const FETCH_ADD_INTERFACE_TAG_VALUE = 'FETCH_ADD_INTERFACE_TAG_VALUE'
+export  const FETCH_ADD_INTERFACE_HEADER_VALUE = 'FETCH_ADD_INTERFACE_HEADER_VALUE'
+export  const ADD_INTERFACE_SEQ_HEADER = 'ADD_INTERFACE_SEQ_HEADER'
+export  const DELETE_INTERFACE_SEQ_HEADER = 'DELETE_INTERFACE_SEQ_HEADER'
+
 // group
 export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST'
 export const SET_CURR_GROUP = 'SET_CURR_GROUP'

client/containers/AddInterface/AddInterface.scss

@@ -68,6 +68,7 @@
 
         li {
           display: -webkit-box;
+          margin: 0 0 10px 0;
         }
 
         .title {
@@ -82,7 +83,7 @@
     }
 
     .req-save, .res-save {
-      margin: 15px 0 0 107px;
+      margin: 5px 0 0 107px;
     }
     
     /* .req-params.css */
@@ -99,6 +100,7 @@
 
         li {
           display: -webkit-box;
+          margin: 0 0 10px 0;
         }
 
         .required {

client/containers/AddInterface/ReqHeader/ReqHeader.js

@@ -1,25 +1,71 @@
 import React, { Component } from 'react'
 import { Button } from 'antd'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { autobind } from 'core-decorators'
 import ReqList from './ReqList.js'
+import { 
+  addReqHeader
+} from '../../../actions/addInterface.js'
+
+// 重新渲染页面
+const getReqList = function (self) {
+  const [reqList, seqGroup] = [[], self.props.seqGroup]
+  seqGroup.map((value, key) => {
+    reqList.push(<ReqList key={key} dataNum={value.id} />)
+  })
+  return reqList
+}
+
+@connect(
+  state => {
+    return {
+      seqGroup: state.addInterface.seqGroup
+    }
+  },
+  {
+    addReqHeader
+  }
+)
 
 class ReqHeader extends Component {
+  static propTypes = {
+    seqGroup: PropTypes.array,
+    addReqHeader: PropTypes.func
+  }
+
   constructor(props) {
     super(props)
   }
 
+  @autobind
+  addSeqGroup () {
+    let newSeqGroup = []
+    let seqGroup = this.props.seqGroup
+    let id = seqGroup[seqGroup.length-1].id    
+    let list = {
+      id: ++id,
+      tag: '',
+      content: ''
+    }
+    seqGroup.push(list)
+    newSeqGroup.push(...seqGroup)
+    this.props.addReqHeader(newSeqGroup)
+  }
+
   render () {
     return (
       <section>
         <div className="req-header">
           <strong className="req-h3">请求头部 :</strong>
           <ul>
-            <ReqList />
+            { getReqList(this) }
           </ul>
         </div>
-        <Button type="primary" className="req-save">添加</Button>
+        <Button type="primary" className="req-save" onClick={this.addSeqGroup}>添加</Button>
       </section>
     )
   }
 }
 
-export default ReqHeader
+export default ReqHeader

client/containers/AddInterface/ReqHeader/ReqList.js

@@ -1,18 +1,78 @@
 import React, { Component } from 'react'
 import { Select, Input } from 'antd'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { autobind } from 'core-decorators'
+import { 
+  reqTagValue,
+  reqHeaderValue,
+  deleteReqHeader
+} from '../../../actions/addInterface.js'
+
+@connect(
+  state => {
+    return {
+      seqGroup: state.addInterface.seqGroup,
+      tagValue: state.addInterface.tagValue,
+      headerValue: state.addInterface.headerValue,
+      reqTagValue: state.addInterface.reqTagValue,
+      reqHeaderValue: state.addInterface.reqHeaderValue
+    }
+  },
+  {
+    reqTagValue,
+    reqHeaderValue,
+    deleteReqHeader
+  }
+)
 
 class ReqList extends Component {
+  static propTypes = {
+    headerValue: PropTypes.string,
+    seqGroup: PropTypes.array,
+    tagValue: PropTypes.string,
+    reqTagValue: PropTypes.func,
+    reqHeaderValue: PropTypes.func,
+    deleteReqHeader: PropTypes.func,
+    dataNum: PropTypes.number
+  }
+
   constructor(props) {
     super(props)
   }
 
+  handleChange (value) {
+    this.props.reqTagValue(value)
+  }
+
+  handleBlur (e) {
+    const value = e.target.value
+    this.props.reqHeaderValue(value)
+  }
+
+  @autobind
+  deleteReqHeader (e) {
+    let newSeqGroup = []
+    let seqGroup = this.props.seqGroup
+    let dataNum = e.target.getAttribute('data-num')
+    seqGroup.map(value => {
+      if (+dataNum !== value.id) {
+        newSeqGroup.push(value)
+      }
+    })
+    this.props.deleteReqHeader(newSeqGroup)
+  }
+
   render () {
     const Option = Select.Option
+    const handleChange = this.handleChange.bind(this)
+    const handleBlur = this.handleBlur.bind(this)
+    const dataNum = this.props.dataNum
 
     return (
       <li>
-        <em className="title">头部标签</em>
-        <Select defaultValue="HTTP" style={{ width: 220 }} onChange={this.handleChange} size="large">
+        <em className="title">头部标签 {this.props.tagValue} {this.props.headerValue}</em>
+        <Select defaultValue="HTTP" style={{ width: 220 }} onChange={handleChange} size="large">
           <Option value="HTTP">Accept</Option>
           <Option value="Accept-Charset">Accept-Charset</Option>
           <Option value="Accept-Encoding">Accept-Encoding</Option>
@@ -20,8 +80,8 @@ class ReqList extends Component {
           <Option value="Accept-Ranges">Accept-Ranges</Option>
         </Select>
         <em className="title">头部内容</em>
-        <Input placeholder="Basic usage" className="req-content" size="large" />
-        <span className="close">×</span>
+        <Input placeholder="Basic usage" className="req-content" size="large" onBlur={handleBlur} />
+        <span className="close" onClick={this.deleteReqHeader} data-num={dataNum}>×</span>
       </li>
     )
   }

client/containers/AddInterface/ReqMethod/ReqMethod.js

@@ -3,25 +3,24 @@ import { connect } from 'react-redux'
 import React, { Component } from 'react'
 import { Select, Input } from 'antd'
 import { 
-  pushInputVal
-} from '../../../actions/addInterFace.js'
+  pushInputValue
+} from '../../../actions/addInterface.js'
 
 @connect(
-  () => {
+  state => {
     return {
-      // reqInputVal: state.Interface.interfaceData
-      reqInputVal: ''
+      reqInputVal: state.addInterface.inputValue
     }
   },
   {
-    pushInputVal
+    pushInputValue
   }
 )
 
 class ReqMethod extends Component {
   static propTypes = {
-    pushInputVal: PropTypes.func,
-    reqInputVal: PropTypes.string
+    pushInputValue: PropTypes.func,
+    inputValue: PropTypes.string
   }
 
   constructor(props) {
@@ -34,19 +33,20 @@ class ReqMethod extends Component {
 
   getInputVal (e) {
     const inputVal = e.target.value
-    this.props.pushInputVal(inputVal)
+    this.props.pushInputValue(inputVal)
   }
 
   render () {
     const { Option } = Select
     const getInputVal = this.getInputVal.bind(this)
+
     return (
       <table>
         <tbody>
           <tr>
             <th>协议 :</th>
             <td>
-              <span className="h3">请求协议 {this.props.reqInputVal}</span>
+              <span className="h3">请求协议 {this.props.inputValue}</span>
               <Select defaultValue="HTTP" style={{ width: 220}} onChange={this.handleChange} size="large">
                 <Option value="HTTP">HTTP</Option>
                 <Option value="HTTPS">HTTPS</Option>
@@ -70,4 +70,4 @@ class ReqMethod extends Component {
   }
 }
 
-export default ReqMethod
+export default ReqMethod

client/containers/AddInterface/ReqParams/ReqParams.js

@@ -1,12 +1,49 @@
 import React, { Component } from 'react'
 import { Button } from 'antd'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import ParamsList from './ParamsList.js'
+import { autobind } from 'core-decorators'
+import { 
+  addReqParams
+} from '../../../actions/addInterface.js'
+
+@connect(
+  state => {
+    return {
+      seqParams: state.addInterface.seqParams
+    }
+  },
+  {
+    addReqParams
+  }
+)
 
 class ReqParams extends Component {
+  static propTypes = {
+    addReqParams: PropTypes.func,
+    seqParams: PropTypes.array
+  }
+
   constructor(props) {
     super(props)
   }
 
+  @autobind
+  addSeqParams () {
+    let newSeqParams= []
+    let seqParams = this.props.seqParams
+    let id = seqParams[seqParams.length-1].id
+    let list = {
+      id: ++id,
+      paramsName: '',
+      describe: ''
+    }
+    seqParams.push(list)
+    newSeqParams.push(...seqParams)
+    // this.props.addReqParams(newSeqParams)
+  }
+
   render () {
     return (
       <section>
@@ -17,7 +54,7 @@ class ReqParams extends Component {
           </ul>
         </div>
 
-        <Button type="primary" className="req-save">添加</Button>
+        <Button type="primary" className="req-save" onClick={this.addSeqParams}>添加</Button>
       </section>
     )
   }

client/reducer/addInterface/addInterface.js

@@ -1,28 +1,64 @@
 import {
-  FETCH_ADD_INTERFACE_INPUT
+  FETCH_ADD_INTERFACE_INPUT,
+  FETCH_ADD_INTERFACE_TAG_VALUE,
+  FETCH_ADD_INTERFACE_HEADER_VALUE,
+  ADD_INTERFACE_SEQ_HEADER,
+  DELETE_INTERFACE_SEQ_HEADER,
+  ADD_INTERFACE_REQ_PARAMS
 } from '../../constants/action-types.js'
 
 const initialState = {
-  inputValue: null,
-  modalVisible: false
+  inputValue: '',
+  tagValue: '',
+  headerValue: '',
+  // 默认请求头部有一条数据
+  seqGroup: [
+    {
+      id: 0,
+      tag: '',
+      content: ''
+    }
+  ],
+  seqParams: [
+    {
+      id: 0,
+      paramsName: '',
+      describe: ''
+    }
+  ]
 }
 
 export default (state = initialState, action) => {
   switch (action.type) {
-    case FETCH_INTERFACE_DATA:
+    case FETCH_ADD_INTERFACE_INPUT:
       return {
         ...state,
-        interfaceData: action.payload
+        inputValue: action.payload
       }
-    case LIST_INTERFACE_CLICK:
+    case FETCH_ADD_INTERFACE_TAG_VALUE:
       return {
         ...state,
-        modalVisible: true
+        tagValue: action.payload
       }
-    case PROJECT_MEMBER_INTERFACE:
+    case FETCH_ADD_INTERFACE_HEADER_VALUE:
       return {
         ...state,
-        modalVisible: false
+        headerValue: action.payload
+      }
+    case ADD_INTERFACE_SEQ_HEADER:
+      return {
+        ...state,
+        seqGroup: action.payload
+      }
+    case DELETE_INTERFACE_SEQ_HEADER:
+      return {
+        ...state,
+        seqGroup: action.payload
+      }
+    case ADD_INTERFACE_REQ_PARAMS:
+      return {
+        ...state,
+        seqParams: action.payload
       }
     default:
       return state

package.json

@@ -15,7 +15,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@qnpm/ykit-config-qunar": "^0.8.1",
+    "@qnpm/ykit-config-qunar": "^0.8.2",
     "axios": "^0.16.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "core-decorators": "^0.17.0",
@@ -89,26 +89,26 @@
     "webpack-node-externals": "^1.6.0"
   },
   "config": {
-      "ghooks": {
-        "commit-msg": "validate-commit-msg"
-      },
-      "validate-commit-msg": {
-        "types": [
-          "feat",
-          "fix",
-          "docs",
-          "test",
-          "chore",
-          "refactor",
-          "opti"
-        ],
-        "warnOnFail": false,
-        "maxSubjectLength": 100,
-        "subjectPattern": ".+",
-        "subjectPatternErrorMsg": "请输入message信息!",
-        "helpMessage": "Commit message 格式错误, \n请查看规范: http://wiki.corp.qunar.com/pages/viewpage.action?pageId=159698767"
-      }
+    "ghooks": {
+      "commit-msg": "validate-commit-msg"
     },
+    "validate-commit-msg": {
+      "types": [
+        "feat",
+        "fix",
+        "docs",
+        "test",
+        "chore",
+        "refactor",
+        "opti"
+      ],
+      "warnOnFail": false,
+      "maxSubjectLength": 100,
+      "subjectPattern": ".+",
+      "subjectPatternErrorMsg": "请输入message信息!",
+      "helpMessage": "Commit message 格式错误, \n请查看规范: http://wiki.corp.qunar.com/pages/viewpage.action?pageId=159698767"
+    }
+  },
   "engines": {
     "node": ">= 6.0.0",
     "npm": ">= 3.0.0"