feat: col-menu

This commit is contained in:
zwjamnsss 2017-08-17 20:24:07 +08:00
parent a02b4e585a
commit d482d3b967
4 changed files with 109 additions and 34 deletions

View File

@ -1,7 +1,7 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Row, Col, Tabs } from 'antd'; import { Row, Col, Tabs } from 'antd';
import { Route } from 'react-router-dom'; import { Route, Redirect } from 'react-router-dom';
import './interface.scss' import './interface.scss'
@ -43,20 +43,14 @@ class Interface extends Component {
console.log(this.props) console.log(this.props)
} }
// componentWillReceiveProps(nextProps) {
//
// }
onChange = (action) => { onChange = (action) => {
// this.setState({
// curkey: key
// })
let params = this.props.match.params; let params = this.props.match.params;
this.props.history.push('/project/'+params.id + '/interface/' + action) this.props.history.push('/project/'+params.id + '/interface/' + action)
} }
render() { render() {
const action = this.props.match.params.action; const { action, id } = this.props.match.params;
return <div className="web-content g-row" style={{ marginBottom: "15px" }}> return <div className="web-content g-row" style={{ marginBottom: "15px" }}>
<Row gutter={16} > <Row gutter={16} >
<Col span={6}> <Col span={6}>

View File

@ -1,10 +1,58 @@
import React, { Component } from 'react' 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 { 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) { constructor(props) {
super(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() { render() {
return <h1>hello colContent</h1> return <h1>hello colContent</h1>
} }

View File

@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { withRouter } from 'react-router' import { withRouter } from 'react-router'
import PropTypes from 'prop-types' 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 { autobind } from 'core-decorators';
import axios from 'axios'; import axios from 'axios';
import { Input, Icon, Tag, Modal, Row, Col, message, Tooltip, Tree } from 'antd'; import { Input, Icon, Tag, Modal, Row, Col, message, Tooltip, Tree } from 'antd';
@ -15,12 +15,16 @@ import './InterfaceColMenu.scss'
@connect( @connect(
state => { state => {
return { return {
interfaceColList: state.interfaceCol.interfaceColList interfaceColList: state.interfaceCol.interfaceColList,
currColId: state.interfaceCol.currColId,
currCaseId: state.interfaceCol.currCaseId,
isShowCol: state.interfaceCol.isShowCol
} }
}, },
{ {
fetchInterfaceColList, fetchInterfaceColList,
fetchInterfaceCaseList fetchInterfaceCaseList,
setColData
} }
) )
@withRouter @withRouter
@ -31,7 +35,11 @@ export default class InterfaceColMenu extends Component {
interfaceColList: PropTypes.array, interfaceColList: PropTypes.array,
fetchInterfaceColList: PropTypes.func, fetchInterfaceColList: PropTypes.func,
fetchInterfaceCaseList: PropTypes.func, fetchInterfaceCaseList: PropTypes.func,
history: PropTypes.object setColData: PropTypes.func,
history: PropTypes.object,
currColId: PropTypes.number,
currCaseId: PropTypes.number,
isShowCol: PropTypes.bool
} }
state = { state = {
@ -44,13 +52,13 @@ export default class InterfaceColMenu extends Component {
super(props) super(props)
} }
async componentWillMount() { // async componentWillMount() {
const result = await this.props.fetchInterfaceColList(this.props.match.params.id) // const result = await this.props.fetchInterfaceColList(this.props.match.params.id)
let params = this.props.match.params; // let params = this.props.match.params;
if(!params.actionId){ // if(!params.actionId){
this.props.history.push('/project/'+params.id + '/interface/col/' + result.payload.data.data[0]._id) // this.props.history.push('/project/'+params.id + '/interface/col/' + result.payload.data.data[0]._id)
} // }
} // }
// async componentWillReceiveProps(nextProps) { // async componentWillReceiveProps(nextProps) {
// const result = await nextProps.fetchInterfaceColList(nextProps.match.params.id) // const result = await nextProps.fetchInterfaceColList(nextProps.match.params.id)
@ -77,13 +85,24 @@ export default class InterfaceColMenu extends Component {
} }
@autobind @autobind
async selectCol(key, e, col) { async onSelect(key) {
if (!col.interfaceCaseList) { const type = key.split('_')[0];
await this.props.fetchInterfaceCaseList(col._id) const id = key.split('_')[1];
if (type === 'col') {
this.props.setColData({
isShowCol: true,
currColId: id
})
} else {
this.props.setColData({
isShowCol: false,
currCaseId: id
})
} }
} }
render() { render() {
const { currColId, currCaseId, isShowCol } = this.props;
return ( return (
<div> <div>
<div className="interface-filter"> <div className="interface-filter">
@ -94,21 +113,21 @@ export default class InterfaceColMenu extends Component {
</div> </div>
<Tree <Tree
className="col-list-tree" className="col-list-tree"
defaultExpandedKeys={['0-0-0', '0-0-1']} defaultExpandedKeys={[''+currColId, ''+currCaseId]}
defaultSelectedKeys={['0-0-0', '0-0-1']} defaultSelectedKeys={[isShowCol ? ''+currColId : ''+currCaseId]}
onSelect={this.onSelect} onSelect={this.onSelect}
> >
{ {
this.props.interfaceColList.map((col) => ( this.props.interfaceColList.map((col) => (
<TreeNode <TreeNode
key={col._id} key={'col_' + col._id}
title={<span><Icon type="folder-open" /><span>{col.name}</span></span>} title={<span><Icon type="folder-open" /><span>{col.name}</span></span>}
> >
{ {
col.caseList && col.caseList.map((interfaceCase) => ( col.caseList && col.caseList.map((interfaceCase) => (
<TreeNode <TreeNode
style={{width: '100%'}} style={{width: '100%'}}
key={interfaceCase._id} key={'case_' + interfaceCase._id}
title={interfaceCase.casename} title={interfaceCase.casename}
></TreeNode> ></TreeNode>
)) ))

View File

@ -2,6 +2,7 @@ import axios from 'axios'
// Actions // Actions
const FETCH_INTERFACE_COL_LIST = 'yapi/interfaceCol/FETCH_INTERFACE_COL_LIST'; const FETCH_INTERFACE_COL_LIST = 'yapi/interfaceCol/FETCH_INTERFACE_COL_LIST';
const FETCH_INTERFACE_CASE_LIST = 'yapi/interfaceCol/FETCH_INTERFACE_CASE_LIST'; const FETCH_INTERFACE_CASE_LIST = 'yapi/interfaceCol/FETCH_INTERFACE_CASE_LIST';
const SET_COL_DATA = 'yapi/interfaceCol/SET_COL_DATA';
// Reducer // Reducer
const initialState = { const initialState = {
@ -13,13 +14,13 @@ const initialState = {
desc: '', desc: '',
add_time: 0, add_time: 0,
up_time: 0, up_time: 0,
interfaceCaseList: [ caseList: [
{} {}
] ]
}], }],
isShowCol: true, isShowCol: true,
currInterfaceColId: 0, currColId: 0,
currInterfaceCaseId: 0 currCaseId: 0
} }
export default (state = initialState, action) => { export default (state = initialState, action) => {
@ -30,15 +31,21 @@ export default (state = initialState, action) => {
interfaceColList: action.payload.data.data interfaceColList: action.payload.data.data
} }
case FETCH_INTERFACE_CASE_LIST: { case FETCH_INTERFACE_CASE_LIST: {
const interfaceCaseList = state.interfaceColList.map(col => { const caseList = state.interfaceColList.map(col => {
if (col._id === state.currInterfaceColId) { if (col._id === state.currColId) {
return col.interfaceCaseList = action.payload.data.data; return col.caseList = action.payload.data.data;
} }
return col; return col;
}) })
return { return {
...state, ...state,
interfaceCaseList caseList
}
}
case SET_COL_DATA: {
return {
...state,
...action.payload.data
} }
} }
default: default:
@ -61,3 +68,10 @@ export function fetchInterfaceCaseList(colId){
payload: axios.get('/api/col/case_list?col_id=' + colId) payload: axios.get('/api/col/case_list?col_id=' + colId)
} }
} }
export function setColData(data){
return {
type: SET_COL_DATA,
payload: data
}
}