mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2024-12-09 05:00:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: case menu

Browse Source
This commit is contained in:
zwjamnsss 2017-08-18 17:31:48 +08:00
parent 97ad5a5b0f
commit 584640a7f2
5 changed files with 96 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/containers/Project/Interface/Interface.js
View File

@ -51,15 +51,16 @@ class Interface extends Component {
render() {
const { action } = this.props.match.params;
const activeKey = action === 'api' ? 'api' : 'colOrCase';
return <div className="web-content g-row" style={{ marginBottom: "15px" }}>
<Row gutter={16} >
<Col span={6}>
<div className="left-menu">
<Tabs type="card" activeKey={action} onChange={this.onChange}>
<Tabs type="card" activeKey={activeKey} onChange={() => this.onChange(action)}>
<Tabs.TabPane tab="接口列表" key="api">
<InterfaceMenu projectId={this.props.match.params.id} />
</Tabs.TabPane>
<Tabs.TabPane tab="接口集合" key="col" >
<Tabs.TabPane tab="接口集合" key="colOrCase" >
<InterfaceColMenu />
</Tabs.TabPane>
</Tabs>

34
client/containers/Project/Interface/InterfaceCol/InterfaceCaseContent.js
View File

@ -2,7 +2,7 @@ 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'
import { fetchInterfaceColList, setColData, fetchCaseData } from '../../../../reducer/modules/interfaceCol'
@connect(
state => {
@ -10,12 +10,13 @@ import { fetchInterfaceColList, fetchInterfaceCaseList, setColData } from '../..
interfaceColList: state.interfaceCol.interfaceColList,
currColId: state.interfaceCol.currColId,
currCaseId: state.interfaceCol.currCaseId,
currCase: state.interfaceCol.currCase,
isShowCol: state.interfaceCol.isShowCol
}
},
{
fetchInterfaceColList,
fetchInterfaceCaseList,
fetchCaseData,
setColData
}
)
@ -26,11 +27,12 @@ export default class InterfaceCaseContent extends Component {
match: PropTypes.object,
interfaceColList: PropTypes.array,
fetchInterfaceColList: PropTypes.func,
fetchInterfaceCaseList: PropTypes.func,
fetchCaseData: PropTypes.func,
setColData: PropTypes.func,
history: PropTypes.object,
currColId: PropTypes.number,
currCaseId: PropTypes.number,
currCase: PropTypes.object,
isShowCol: PropTypes.bool
}
@ -40,20 +42,30 @@ export default class InterfaceCaseContent extends Component {
async componentWillMount() {
const result = await this.props.fetchInterfaceColList(this.props.match.params.id)
let { currColId, currCaseId, isShowCol } = this.props;
let { currCaseId } = this.props;
const params = this.props.match.params;
const { actionId } = params;
currColId = +currColId || result.payload.data.data[0]._id;
currCaseId = +actionId || +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.history.push('/project/' + params.id + '/interface/case/' + currCaseId)
this.props.fetchCaseData(currCaseId)
this.props.setColData({currCaseId: +currCaseId, isShowCol: false})
}
componentWillReceiveProps(nextProps) {
const oldCaseId = this.props.match.params.actionId
const newCaseId = nextProps.match.params.actionId
if (oldCaseId !== newCaseId) {
this.props.fetchCaseData(newCaseId);
this.props.setColData({currCaseId: +newCaseId, isShowCol: false})
}
this.props.setColData({currColId: +currColId, currCaseId: +currCaseId})
}
render() {
return <h1>hello caseContent</h1>
return (
<div>
<h1>hello caseContent</h1>
{JSON.stringify(this.props.currCase, null, 2)}
</div>
)
}
}

27
client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js
View File

@ -2,7 +2,7 @@ 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'
import { fetchInterfaceColList, fetchCaseList, setColData } from '../../../../reducer/modules/interfaceCol'
@connect(
state => {
@ -15,7 +15,7 @@ import { fetchInterfaceColList, fetchInterfaceCaseList, setColData } from '../..
},
{
fetchInterfaceColList,
fetchInterfaceCaseList,
fetchCaseList,
setColData
}
)
@ -26,7 +26,7 @@ export default class InterfaceColContent extends Component {
match: PropTypes.object,
interfaceColList: PropTypes.array,
fetchInterfaceColList: PropTypes.func,
fetchInterfaceCaseList: PropTypes.func,
fetchCaseList: PropTypes.func,
setColData: PropTypes.func,
history: PropTypes.object,
currColId: PropTypes.number,
@ -40,17 +40,22 @@ export default class InterfaceColContent extends Component {
async componentWillMount() {
const result = await this.props.fetchInterfaceColList(this.props.match.params.id)
let { currColId, currCaseId, isShowCol } = this.props;
let { currColId } = 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)
currColId = +actionId || +currColId || result.payload.data.data[0].caseList[0]._id;
this.props.history.push('/project/' + params.id + '/interface/col/' + currColId)
this.props.fetchCaseList(currColId)
this.props.setColData({currColId: +currColId, isShowCol: true})
}
componentWillReceiveProps(nextProps) {
const oldCaseId = this.props.match.params.actionId
const newCaseId = nextProps.match.params.actionId
if (oldCaseId !== newCaseId) {
this.props.fetchCaseList(newCaseId);
this.props.setColData({currColId: +newCaseId, isShowCol: true})
}
this.props.setColData({currColId: +currColId, currCaseId: +currCaseId})
}
render() {

55
client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
View File

@ -53,21 +53,19 @@ 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 { isShowCol, currColId, currCaseId } = this.props;
const action = isShowCol ? 'col' : 'case';
const actionId = isShowCol ? currColId : currCaseId;
this.setState({expandedKeys: [action+'_'+actionId]})
}
// async componentWillReceiveProps(nextProps) {
// const result = await nextProps.fetchInterfaceColList(nextProps.match.params.id)
// let params = nextProps.match.params;
// if(!params.actionId){
// nextProps.history.replace('/project/'+params.id + '/interface/col/' + result.payload.data.data[0]._id)
// }
// }
async componentWillReceiveProps(nextProps) {
const { isShowCol, currColId, currCaseId } = nextProps;
const action = isShowCol ? 'col' : 'case';
const actionId = isShowCol ? currColId : currCaseId;
this.setState({expandedKeys: [action+'_'+actionId]})
}
@autobind
async addCol() {
@ -86,18 +84,23 @@ export default class InterfaceColMenu extends Component {
}
onSelect = (keys) => {
const type = keys[0].split('_')[0];
const id = keys[0].split('_')[1];
if (type === 'col') {
this.props.setColData({
isShowCol: true,
currColId: +id
})
} else {
this.props.setColData({
isShowCol: false,
currCaseId: +id
})
if (keys.length) {
const type = keys[0].split('_')[0];
const id = keys[0].split('_')[1];
const project_id = this.props.match.params.id
if (type === 'col') {
this.props.setColData({
isShowCol: true,
currColId: +id
})
this.props.history.push('/project/' + project_id + '/interface/col/' + id)
} else {
this.props.setColData({
isShowCol: false,
currCaseId: +id
})
this.props.history.push('/project/' + project_id + '/interface/case/' + id)
}
}
}

39
client/reducer/modules/interfaceCol.js
View File

@ -1,7 +1,8 @@
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 FETCH_CASE_DATA = 'yapi/interfaceCol/FETCH_CASE_DATA';
const FETCH_CASE_LIST = 'yapi/interfaceCol/FETCH_CASE_LIST';
const SET_COL_DATA = 'yapi/interfaceCol/SET_COL_DATA';
// Reducer
@ -20,26 +21,29 @@ const initialState = {
}],
isShowCol: true,
currColId: 0,
currCaseId: 0
currCaseId: 0,
currCase: {},
currCaseList: []
}
export default (state = initialState, action) => {
switch (action.type) {
case FETCH_INTERFACE_COL_LIST:
case FETCH_INTERFACE_COL_LIST:{
return {
...state,
interfaceColList: action.payload.data.data
}
case FETCH_INTERFACE_CASE_LIST: {
const caseList = state.interfaceColList.map(col => {
if (col._id === state.currColId) {
return col.caseList = action.payload.data.data;
}
return col;
})
}
case FETCH_CASE_DATA: {
return {
...state,
caseList
currCase: action.payload.data.data
}
}
case FETCH_CASE_LIST: {
return {
...state,
currCaseList: action.payload.data.data
}
}
case SET_COL_DATA: {
@ -62,10 +66,17 @@ export function fetchInterfaceColList (projectId) {
}
}
export function fetchInterfaceCaseList(colId){
export function fetchCaseData(caseId){
return {
type: FETCH_INTERFACE_CASE_LIST,
payload: axios.get('/api/col/case_list?col_id=' + colId)
type: FETCH_CASE_DATA,
payload: axios.get('/api/col/case?caseid=' + caseId)
}
}
export function fetchCaseList(colId) {
return {
type: FETCH_CASE_LIST,
payload: axios.get('/api/col/case_list/col_id=' + colId)
}
}