diff --git a/client/actions/addInterFace.js b/client/actions/addInterFace.js index 998bc730..45706b00 100644 --- a/client/actions/addInterFace.js +++ b/client/actions/addInterFace.js @@ -4,10 +4,11 @@ import { FETCH_ADD_INTERFACE_HEADER_VALUE, ADD_INTERFACE_SEQ_HEADER, DELETE_INTERFACE_SEQ_HEADER, - ADD_INTERFACE_REQ_PARAMS, - DELETE_INTERFACE_REQ_PARAMS, - ADD_INTERFACE_RES_PARAMS, - DELETE_INTERFACE_RES_PARAMS + GET_INTERFACE_REQ_PARAMS, + GET_INTERFACE_RES_PARAMS, + SAVE_INTERFACE_FORMS + // ADD_INTERFACE_RES_PARAMS, + // DELETE_INTERFACE_RES_PARAMS } from '../constants/action-types.js' export function pushInputValue (value) { @@ -45,31 +46,45 @@ export function deleteReqHeader (value) { }; } -export function addReqParams (value) { +export function getReqParams (value) { return { - type: ADD_INTERFACE_REQ_PARAMS, + type: GET_INTERFACE_REQ_PARAMS, payload: value }; } -export function deleteReqParams (value) { +export function getResParams (value) { return { - type: DELETE_INTERFACE_REQ_PARAMS, + type: GET_INTERFACE_RES_PARAMS, payload: value }; } -export function addResParams (value) { +export function saveForms (value) { return { - type: ADD_INTERFACE_RES_PARAMS, + type: SAVE_INTERFACE_FORMS, payload: value }; } -export function deleteResParams (value) { - return { - type: DELETE_INTERFACE_RES_PARAMS, - payload: value - }; -} +// export function deleteReqParams (value) { +// return { +// type: DELETE_INTERFACE_REQ_PARAMS, +// payload: value +// }; +// } + +// export function addResParams (value) { +// return { +// type: ADD_INTERFACE_RES_PARAMS, +// payload: value +// }; +// } + +// export function deleteResParams (value) { +// return { +// type: DELETE_INTERFACE_RES_PARAMS, +// payload: value +// }; +// } diff --git a/client/actions/addInterface.js b/client/actions/addInterface.js index 998bc730..45706b00 100644 --- a/client/actions/addInterface.js +++ b/client/actions/addInterface.js @@ -4,10 +4,11 @@ import { FETCH_ADD_INTERFACE_HEADER_VALUE, ADD_INTERFACE_SEQ_HEADER, DELETE_INTERFACE_SEQ_HEADER, - ADD_INTERFACE_REQ_PARAMS, - DELETE_INTERFACE_REQ_PARAMS, - ADD_INTERFACE_RES_PARAMS, - DELETE_INTERFACE_RES_PARAMS + GET_INTERFACE_REQ_PARAMS, + GET_INTERFACE_RES_PARAMS, + SAVE_INTERFACE_FORMS + // ADD_INTERFACE_RES_PARAMS, + // DELETE_INTERFACE_RES_PARAMS } from '../constants/action-types.js' export function pushInputValue (value) { @@ -45,31 +46,45 @@ export function deleteReqHeader (value) { }; } -export function addReqParams (value) { +export function getReqParams (value) { return { - type: ADD_INTERFACE_REQ_PARAMS, + type: GET_INTERFACE_REQ_PARAMS, payload: value }; } -export function deleteReqParams (value) { +export function getResParams (value) { return { - type: DELETE_INTERFACE_REQ_PARAMS, + type: GET_INTERFACE_RES_PARAMS, payload: value }; } -export function addResParams (value) { +export function saveForms (value) { return { - type: ADD_INTERFACE_RES_PARAMS, + type: SAVE_INTERFACE_FORMS, payload: value }; } -export function deleteResParams (value) { - return { - type: DELETE_INTERFACE_RES_PARAMS, - payload: value - }; -} +// export function deleteReqParams (value) { +// return { +// type: DELETE_INTERFACE_REQ_PARAMS, +// payload: value +// }; +// } + +// export function addResParams (value) { +// return { +// type: ADD_INTERFACE_RES_PARAMS, +// payload: value +// }; +// } + +// export function deleteResParams (value) { +// return { +// type: DELETE_INTERFACE_RES_PARAMS, +// payload: value +// }; +// } diff --git a/client/constants/action-types.js b/client/constants/action-types.js index ca3bb954..794956fc 100644 --- a/client/constants/action-types.js +++ b/client/constants/action-types.js @@ -9,10 +9,11 @@ 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' -export const ADD_INTERFACE_REQ_PARAMS = 'ADD_INTERFACE_REQ_PARAMS' -export const DELETE_INTERFACE_REQ_PARAMS = 'DELETE_INTERFACE_REQ_PARAMS' -export const ADD_INTERFACE_RES_PARAMS = 'ADD_INTERFACE_RES_PARAMS' -export const DELETE_INTERFACE_RES_PARAMS = 'DELETE_INTERFACE_RES_PARAMS' +export const GET_INTERFACE_REQ_PARAMS = 'GET_INTERFACE_REQ_PARAMS' +export const GET_INTERFACE_RES_PARAMS = 'GET_INTERFACE_RES_PARAMS' +export const SAVE_INTERFACE_FORMS = 'SAVE_INTERFACE_FORMS' +// export const ADD_INTERFACE_RES_PARAMS = 'ADD_INTERFACE_RES_PARAMS' +// export const DELETE_INTERFACE_RES_PARAMS = 'DELETE_INTERFACE_RES_PARAMS' // group export const FETCH_GROUP_LIST = 'FETCH_GROUP_LIST' diff --git a/client/containers/AddInterface/AddInterface.js b/client/containers/AddInterface/AddInterface.js index 6ce132d6..5e52a9cb 100644 --- a/client/containers/AddInterface/AddInterface.js +++ b/client/containers/AddInterface/AddInterface.js @@ -1,33 +1,80 @@ import './AddInterface.scss' import React, { Component } from 'react' -// import PropTypes from 'prop-types' -// import { connect } from 'react-redux' +import PropTypes from 'prop-types' +import axios from 'axios' +import { connect } from 'react-redux' +import { autobind } from 'core-decorators' import { Button } from 'antd' import ReqMethod from './ReqMethod/ReqMethod.js' import ReqHeader from './ReqHeader/ReqHeader.js' import ReqParams from './ReqParams/ReqParams.js' import ResParams from './ResParams/ResParams.js' import Result from './Result/Result.js' +import { saveForms } from '../../actions/addInterface.js' + +@connect( + state => { + return { + reqParams: state.addInterface.reqParams + } + }, + { + saveForms + } +) class AddInterface extends Component { - // static propTypes = { - - // } + static propTypes = { + reqParams: PropTypes.string, + saveForms: PropTypes.func + } constructor (props) { super(props) } + @autobind saveForms () { - console.log(this) + // const config = { + // url: '/interface/add', + // method: 'POST', + // headers: {'Content-Type': 'application/json'}, + // params: { + // method: 'POST', + // project_id: 8, + // req_headers: [], + // req_params_type: 'json', + // req_params: this.props.reqParams + // } + // } + const params = { + url: '/interface/add', + method: 'POST', + params: { + method: 'POST', + project_id: 8, + req_headers: [], + req_params_type: 'json', + req_params: this.props.reqParams + } + } + + axios.post('/interface/add', params) + .then(data => { + console.log(data) + }) + .catch(e => { + console.log(e) + }) + + console.log(this.props.reqParams) } render () { - const saveForms = this.saveForms.bind(this) return (
- + diff --git a/client/containers/AddInterface/AddInterface.scss b/client/containers/AddInterface/AddInterface.scss index 49e8000b..b4b8e5c2 100644 --- a/client/containers/AddInterface/AddInterface.scss +++ b/client/containers/AddInterface/AddInterface.scss @@ -89,29 +89,9 @@ /* .req-params.css */ .req-params { display: -webkit-box; - line-height: 32px; padding: 20px 0 0 0; - border-top: 1px #EEE solid; margin: 20px 0 0 0; - - ul { - -webkit-box-flex: 1; - margin: 0 0 0 24px; - - li { - display: -webkit-box; - margin: 0 0 10px 0; - } - - .required { - margin: 0 10px 0 20px; - } - - .title { - margin: 0 10px; - display: block; - } - } + border-top: 1px #EEE solid; } /* .req-save.css */ @@ -147,19 +127,76 @@ padding: 20px 0 0 0; border-top: 1px #EEE solid; margin: 20px 0 0 0; + + textarea { + width: 100%; + border: 1px #CCC solid; + height: 200px; + } .ant-tabs { -webkit-box-flex: 1; } - - textarea { - width: 100%; - border: 1px #DDD solid; - border-radius: 3px; - padding: 10px; - font-size: .14rem; - height: 150px; - } } } +} + +#container { + max-width: 800px; + margin: 0 auto; +} +body { + .w-e-text { + p, h1, h2, h3, h4, h5, table, pre { + line-height: auto; + margin: 0; + font-size: .14rem; + color: #777; + font-family: 'Microsoft Yahei'; + font-weight: normal; + } + } + .w-e-toolbar { + // display: none; + height: 1px; + overflow: hidden; + border: none; + } + .w-e-text { + padding: 15px; + } +} +#toolbar-container { + border: 1px solid #EEE; + background-color: #fff; +} +#toolbar-container:after { + display: table; + content: ''; + clear: both; +} +#editor-toolbar { + float: left; +} +#btn-container { + float: right; + text-align: right; +} +#editor-text { + border: 1px solid #EEE; + border-top: 0; + height: 300px; + background-color: #fff; +} +#req-cover { + height: 330px; + padding: 0 20px; + background-color: #FFF; + -webkit-box-flex: 1; +} +#res-cover { + height: 330px; + padding: 0 20px; + background-color: #FFF; + -webkit-box-flex: 1; } \ No newline at end of file diff --git a/client/containers/AddInterface/ReqParams/ReqParams.js b/client/containers/AddInterface/ReqParams/ReqParams.js index 448ea573..02b1a663 100644 --- a/client/containers/AddInterface/ReqParams/ReqParams.js +++ b/client/containers/AddInterface/ReqParams/ReqParams.js @@ -1,21 +1,9 @@ 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' - -// 重新渲染页面 -const getReqList = function (self) { - const [reqList, reqParams] = [[], self.props.reqParams] - reqParams.map((value, key) => { - reqList.push() - }) - return reqList -} +// import { autobind } from 'core-decorators' +import wangEditor from 'wangeditor' +import { getReqParams } from '../../../actions/addInterface.js' @connect( state => { @@ -24,51 +12,42 @@ const getReqList = function (self) { } }, { - addReqParams + getReqParams } ) class ReqParams extends Component { static propTypes = { - addReqParams: PropTypes.func, - reqParams: PropTypes.array + reqParams: PropTypes.string, + getReqParams: PropTypes.func } constructor(props) { super(props) } - @autobind - addSeqParams () { - console.log(1) - let newSeqParams= [] - let reqParams = this.props.reqParams - let id = reqParams[reqParams.length-1].id - let list = { - id: ++id, - paramsName: '', - describe: '' + componentDidMount () { + const reg = /(

)|(<\/p>)| |(
)|\s+/g + const E = wangEditor + const editor = new E('#req-cover') + editor.customConfig.menus = [] + editor.customConfig.onchange = html => { + html = html.replace(reg, '') + this.props.getReqParams(html) } - reqParams.push(list) - newSeqParams.push(...reqParams) - console.log(newSeqParams) - this.props.addReqParams(newSeqParams) + editor.create() } - + render () { return (

请求参数 : -
    - { getReqList(this) } -
+
- -
) } } -export default ReqParams \ No newline at end of file +export default ReqParams diff --git a/client/containers/AddInterface/ResParams/ResParams.js b/client/containers/AddInterface/ResParams/ResParams.js index 976f882f..24fb64ca 100644 --- a/client/containers/AddInterface/ResParams/ResParams.js +++ b/client/containers/AddInterface/ResParams/ResParams.js @@ -1,10 +1,8 @@ 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 ParamsList from './ParamsList.js' -import { addResParams } from '../../../actions/addInterface.js' +import wangEditor from 'wangeditor' +import { getResParams } from '../../../actions/addInterface.js' @connect( state => { @@ -13,33 +11,28 @@ import { addResParams } from '../../../actions/addInterface.js' } }, { - addResParams + getResParams } ) class ResParams extends Component { static propTypes = { - resParams: PropTypes.array, - addResParams: PropTypes.func + resParams: PropTypes.string, + getResParams: PropTypes.func } constructor(props) { super(props) } - @autobind - addResParams () { - let newResParams = [] - let resParams = this.props.resParams - let id = resParams[resParams.length-1].id - let list = { - id: ++id, - tag: '', - content: '' + componentDidMount () { + var E = wangEditor + var editor = new E('#res-cover') + editor.customConfig.menus = [] + editor.customConfig.onchange = html => { + this.props.getResParams(html) } - resParams.push(list) - newResParams.push(...resParams) - this.props.addResParams(newResParams) + editor.create() } render () { @@ -47,12 +40,8 @@ class ResParams extends Component {
返回参数 : -
    - -
+
- -
) } diff --git a/client/containers/AddInterface/Result/Result.js b/client/containers/AddInterface/Result/Result.js index a5bcb1d3..5c13c18e 100644 --- a/client/containers/AddInterface/Result/Result.js +++ b/client/containers/AddInterface/Result/Result.js @@ -20,9 +20,6 @@ class Result extends Component { - - -
) diff --git a/client/reducer/addInterface/addInterface.js b/client/reducer/addInterface/addInterface.js index 8610f7a0..36adc588 100644 --- a/client/reducer/addInterface/addInterface.js +++ b/client/reducer/addInterface/addInterface.js @@ -4,10 +4,11 @@ import { FETCH_ADD_INTERFACE_HEADER_VALUE, ADD_INTERFACE_SEQ_HEADER, DELETE_INTERFACE_SEQ_HEADER, - ADD_INTERFACE_REQ_PARAMS, - DELETE_INTERFACE_REQ_PARAMS, - ADD_INTERFACE_RES_PARAMS, - DELETE_INTERFACE_RES_PARAMS + GET_INTERFACE_REQ_PARAMS, + GET_INTERFACE_RES_PARAMS, + SAVE_INTERFACE_FORMS + // ADD_INTERFACE_RES_PARAMS, + // DELETE_INTERFACE_RES_PARAMS } from '../../constants/action-types.js' const initialState = { @@ -22,20 +23,8 @@ const initialState = { content: '' } ], - reqParams: [ - { - id: 0, - paramsName: '', - describe: '' - } - ], - resParams: [ - { - id: 0, - paramsName: '', - describe: '' - } - ] + reqParams: '', + resParams: '' } export default (state = initialState, action) => { @@ -65,26 +54,31 @@ export default (state = initialState, action) => { ...state, seqGroup: action.payload } - case ADD_INTERFACE_REQ_PARAMS: + case GET_INTERFACE_REQ_PARAMS: return { ...state, reqParams: action.payload } - case DELETE_INTERFACE_REQ_PARAMS: + case GET_INTERFACE_RES_PARAMS: return { ...state, - reqParams: action.payload + resParams: action.payload } - case ADD_INTERFACE_RES_PARAMS: + case SAVE_INTERFACE_FORMS: return { ...state, - reqParams: action.payload - } - case DELETE_INTERFACE_RES_PARAMS: - return { - ...state, - reqParams: action.payload + resParams: action.payload } + // case ADD_INTERFACE_RES_PARAMS: + // return { + // ...state, + // reqParams: action.payload + // } + // case DELETE_INTERFACE_RES_PARAMS: + // return { + // ...state, + // reqParams: action.payload + // } default: return state } diff --git a/package.json b/package.json index f0677163..8054dcb4 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "request": "^2.81.0", "sha1": "^1.1.1", "universal-cookie": "^2.0.8", + "wangeditor": "^3.0.4", "ykit-config-antd": "^0.1.3", "ykit-config-react": "^0.4.4" },