From d482d3b9679ef12048cd2f8b47d99f9a62a796aa Mon Sep 17 00:00:00 2001 From: zwjamnsss Date: Thu, 17 Aug 2017 20:24:07 +0800 Subject: [PATCH] feat: col-menu --- .../containers/Project/Interface/Interface.js | 12 +--- .../InterfaceCol/InterfaceColContent.js | 48 ++++++++++++++++ .../InterfaceCol/InterfaceColMenu.js | 55 +++++++++++++------ client/reducer/modules/interfaceCol.js | 28 +++++++--- 4 files changed, 109 insertions(+), 34 deletions(-) diff --git a/client/containers/Project/Interface/Interface.js b/client/containers/Project/Interface/Interface.js index b846aee5..3ecb176c 100644 --- a/client/containers/Project/Interface/Interface.js +++ b/client/containers/Project/Interface/Interface.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { Row, Col, Tabs } from 'antd'; -import { Route } from 'react-router-dom'; +import { Route, Redirect } from 'react-router-dom'; import './interface.scss' @@ -43,20 +43,14 @@ class Interface extends Component { console.log(this.props) } - // componentWillReceiveProps(nextProps) { - // - // } - onChange = (action) => { - // this.setState({ - // curkey: key - // }) let params = this.props.match.params; + this.props.history.push('/project/'+params.id + '/interface/' + action) } render() { - const action = this.props.match.params.action; + const { action, id } = this.props.match.params; return
diff --git a/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js b/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js index b94829d2..c4d69f6f 100644 --- a/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js +++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js @@ -1,10 +1,58 @@ import React, { Component } from 'react' +import { connect } from 'react-redux'; +import PropTypes from 'prop-types' +import { withRouter } from 'react-router' +import { fetchInterfaceColList, fetchInterfaceCaseList, setColData } from '../../../../reducer/modules/interfaceCol' +@connect( + state => { + return { + interfaceColList: state.interfaceCol.interfaceColList, + currColId: state.interfaceCol.currColId, + currCaseId: state.interfaceCol.currCaseId, + isShowCol: state.interfaceCol.isShowCol + } + }, + { + fetchInterfaceColList, + fetchInterfaceCaseList, + setColData + } +) +@withRouter export default class InterfaceColContent extends Component { + + static propTypes = { + match: PropTypes.object, + interfaceColList: PropTypes.array, + fetchInterfaceColList: PropTypes.func, + fetchInterfaceCaseList: PropTypes.func, + setColData: PropTypes.func, + history: PropTypes.object, + currColId: PropTypes.number, + currCaseId: PropTypes.number, + isShowCol: PropTypes.bool + } + constructor(props) { super(props) } + async componentWillMount() { + const result = await this.props.fetchInterfaceColList(this.props.match.params.id) + let { currColId, currCaseId, isShowCol } = this.props; + const params = this.props.match.params; + const { actionId } = params; + currColId = +actionId || +currColId || result.payload.data.data[0]._id; + currCaseId = currCaseId || result.payload.data.data[0].caseList[0]._id; + if (isShowCol) { + this.props.history.push('/project/' + params.id + '/interface/col/' + currColId) + } else { + this.props.history.push('/project/' + params.id + '/interface/case/' + currCaseId) + } + this.props.setColData({currColId, currCaseId}) + } + render() { return

hello colContent

} diff --git a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js index 56b7648d..a219c41b 100644 --- a/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js +++ b/client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux'; import { withRouter } from 'react-router' import PropTypes from 'prop-types' -import { fetchInterfaceColList, fetchInterfaceCaseList } from '../../../../reducer/modules/interfaceCol' +import { fetchInterfaceColList, fetchInterfaceCaseList, setColData } from '../../../../reducer/modules/interfaceCol' import { autobind } from 'core-decorators'; import axios from 'axios'; import { Input, Icon, Tag, Modal, Row, Col, message, Tooltip, Tree } from 'antd'; @@ -15,12 +15,16 @@ import './InterfaceColMenu.scss' @connect( state => { return { - interfaceColList: state.interfaceCol.interfaceColList + interfaceColList: state.interfaceCol.interfaceColList, + currColId: state.interfaceCol.currColId, + currCaseId: state.interfaceCol.currCaseId, + isShowCol: state.interfaceCol.isShowCol } }, { fetchInterfaceColList, - fetchInterfaceCaseList + fetchInterfaceCaseList, + setColData } ) @withRouter @@ -31,7 +35,11 @@ export default class InterfaceColMenu extends Component { interfaceColList: PropTypes.array, fetchInterfaceColList: PropTypes.func, fetchInterfaceCaseList: PropTypes.func, - history: PropTypes.object + setColData: PropTypes.func, + history: PropTypes.object, + currColId: PropTypes.number, + currCaseId: PropTypes.number, + isShowCol: PropTypes.bool } state = { @@ -44,13 +52,13 @@ export default class InterfaceColMenu extends Component { super(props) } - async componentWillMount() { - const result = await this.props.fetchInterfaceColList(this.props.match.params.id) - let params = this.props.match.params; - if(!params.actionId){ - this.props.history.push('/project/'+params.id + '/interface/col/' + result.payload.data.data[0]._id) - } - } + // async componentWillMount() { + // const result = await this.props.fetchInterfaceColList(this.props.match.params.id) + // let params = this.props.match.params; + // if(!params.actionId){ + // this.props.history.push('/project/'+params.id + '/interface/col/' + result.payload.data.data[0]._id) + // } + // } // async componentWillReceiveProps(nextProps) { // const result = await nextProps.fetchInterfaceColList(nextProps.match.params.id) @@ -77,13 +85,24 @@ export default class InterfaceColMenu extends Component { } @autobind - async selectCol(key, e, col) { - if (!col.interfaceCaseList) { - await this.props.fetchInterfaceCaseList(col._id) + async onSelect(key) { + const type = key.split('_')[0]; + const id = key.split('_')[1]; + if (type === 'col') { + this.props.setColData({ + isShowCol: true, + currColId: id + }) + } else { + this.props.setColData({ + isShowCol: false, + currCaseId: id + }) } } render() { + const { currColId, currCaseId, isShowCol } = this.props; return (
@@ -94,21 +113,21 @@ export default class InterfaceColMenu extends Component {
{ this.props.interfaceColList.map((col) => ( {col.name}} > { col.caseList && col.caseList.map((interfaceCase) => ( )) diff --git a/client/reducer/modules/interfaceCol.js b/client/reducer/modules/interfaceCol.js index 3e1a0bec..1eb4083a 100644 --- a/client/reducer/modules/interfaceCol.js +++ b/client/reducer/modules/interfaceCol.js @@ -2,6 +2,7 @@ import axios from 'axios' // Actions const FETCH_INTERFACE_COL_LIST = 'yapi/interfaceCol/FETCH_INTERFACE_COL_LIST'; const FETCH_INTERFACE_CASE_LIST = 'yapi/interfaceCol/FETCH_INTERFACE_CASE_LIST'; +const SET_COL_DATA = 'yapi/interfaceCol/SET_COL_DATA'; // Reducer const initialState = { @@ -13,13 +14,13 @@ const initialState = { desc: '', add_time: 0, up_time: 0, - interfaceCaseList: [ + caseList: [ {} ] }], isShowCol: true, - currInterfaceColId: 0, - currInterfaceCaseId: 0 + currColId: 0, + currCaseId: 0 } export default (state = initialState, action) => { @@ -30,15 +31,21 @@ export default (state = initialState, action) => { interfaceColList: action.payload.data.data } case FETCH_INTERFACE_CASE_LIST: { - const interfaceCaseList = state.interfaceColList.map(col => { - if (col._id === state.currInterfaceColId) { - return col.interfaceCaseList = action.payload.data.data; + const caseList = state.interfaceColList.map(col => { + if (col._id === state.currColId) { + return col.caseList = action.payload.data.data; } return col; }) return { ...state, - interfaceCaseList + caseList + } + } + case SET_COL_DATA: { + return { + ...state, + ...action.payload.data } } default: @@ -61,3 +68,10 @@ export function fetchInterfaceCaseList(colId){ payload: axios.get('/api/col/case_list?col_id=' + colId) } } + +export function setColData(data){ + return { + type: SET_COL_DATA, + payload: data + } +}