From ea083184d6499ec4e87a396c99dd5199f08c9564 Mon Sep 17 00:00:00 2001 From: "wenbo.dong" Date: Sun, 30 Jul 2017 15:06:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=A2=E5=8C=85=E5=B1=91=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/Application.js | 4 +- client/components/Breadcrumb/Breadcrumb.js | 89 ++++++++++++++----- .../ProjectGroups/GroupList/GroupList.js | 6 +- 3 files changed, 73 insertions(+), 26 deletions(-) diff --git a/client/Application.js b/client/Application.js index 69203cc4..f473b73d 100644 --- a/client/Application.js +++ b/client/Application.js @@ -6,7 +6,7 @@ import { Home, ProjectGroups, Interface, News, AddInterface } from './containers import User from './containers/User/User.js'; import Header from './components/Header/Header'; import Footer from './components/Footer/Footer'; -import Breadcrumb from './components/Breadcrumb/Breadcrumb'; +// import Breadcrumb from './components/Breadcrumb/Breadcrumb'; import Loading from './components/Loading/Loading'; import { checkLoginState } from './actions/login'; import { requireAuthentication } from './components/AuthenticatedComponent'; @@ -50,7 +50,7 @@ export default class App extends Component {
- + {/* */} diff --git a/client/components/Breadcrumb/Breadcrumb.js b/client/components/Breadcrumb/Breadcrumb.js index 63278d46..a2b54284 100644 --- a/client/components/Breadcrumb/Breadcrumb.js +++ b/client/components/Breadcrumb/Breadcrumb.js @@ -2,6 +2,7 @@ import './Breadcrumb.scss'; import { withRouter, Link } from 'react-router-dom'; import { Breadcrumb } from 'antd'; import axios from 'axios'; +import PropTypes from 'prop-types' import React, { Component } from 'react'; @withRouter @@ -14,41 +15,87 @@ export default class BreadcrumbNavigation extends Component { breadcrumb: [] } } - getBreadcrumb = (pathSnippets) => { - console.log(pathSnippets); + static propTypes = { + location: PropTypes.object + } - if (/['project'|'group'|'add-interface']/.test(pathSnippets)) { - const type = pathSnippets[0], + getBreadcrumb = (pathSnippets) => { + // 重置 state 中的 breadcrumb，防止重复渲染 + this.setState({ + breadcrumb: [] + }); + if (/project|group|add-interface]/.test(pathSnippets[0])) { + const type = pathSnippets[0] === 'add-interface' ? 'interface' : pathSnippets[0], id = pathSnippets[1]; - const params = { - type, - id - } - axios.get('/user/nav', {params: params}).then( res => { - console.log(res); + const params = { type, id }; + axios.get('/user/nav', {params: params}).then( (res) => { + const data = res.data.data; + // 依次填入group/projec/interface + if (data.group_name) { + this.setState({ + breadcrumb: this.state.breadcrumb.concat([{ + name: data.group_name, + path: '/group/' + data.group_id + }]) + }); + } + if (data.project_name) { + this.setState({ + breadcrumb: this.state.breadcrumb.concat([{ + name: data.project_name, + path: '/project/' + data.project_id + }]) + }); + } + if (data.interface_name) { + this.setState({ + breadcrumb: this.state.breadcrumb.concat([{ + name: data.interface_name, + path: '/project/' + data.interface_id + }]) + }); + } }); + } else if (pathSnippets[0] == 'user') { + this.setState({ + breadcrumb: [{ + name: '个人中心', + path: '/' + pathSnippets.join('/') + }] + }); + } else { + console.log(2); } } componentDidMount() { + console.log(location.hash); + const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i); + this.getBreadcrumb(pathSnippets); this.setState({ - hash: location.hash + hash: location.hash.split('#')[1] }) } - shouldComponentUpdate = (nextProps, nextState) => { - // hash改变的时候才render - if (nextState.hash !== this.state.hash) { - return true; - } else { - return false; + componentWillReceiveProps(nextProps) { + // this.setState({ + // hash: nextProps.location.pathname + // }) + const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i); + // console.log(nextProps.location.pathname, this.props.location.pathname); + if (nextProps.location.pathname !== this.props.location.pathname) { + // console.log('in'); + this.getBreadcrumb(pathSnippets); + this.setState({ + hash: nextProps.location.pathname + }) } } render () { - // 获取接口路径并分割 + // console.log(this.state.hash); const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i); - this.getBreadcrumb(pathSnippets); - const extraBreadcrumbItems = this.state.breadcrumb.map((item, index) => { + // 获取接口路径并分割 + // console.log(this.state); + const extraBreadcrumbItems = this.state.breadcrumb.map((item) => { // const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; - console.log(index); return ( diff --git a/client/containers/ProjectGroups/GroupList/GroupList.js b/client/containers/ProjectGroups/GroupList/GroupList.js index 8dbc7ed0..340b012b 100644 --- a/client/containers/ProjectGroups/GroupList/GroupList.js +++ b/client/containers/ProjectGroups/GroupList/GroupList.js @@ -64,11 +64,11 @@ export default class GroupList extends Component { if(this.props.groupList[i].group_name === groupName){ currGroup = this.props.groupList[i]; }else{ - this.props.history.replace(`${currGroup.group_name}`); + this.props.history.replace(`${currGroup._id}`); } } }else if(!groupName && this.props.groupList.length){ - this.props.history.push(`/group/${this.props.groupList[0].group_name}`); + this.props.history.push(`/group/${this.props.groupList[0]._id}`); } this.setState({groupList: this.props.groupList}); this.props.setCurrGroup(currGroup) @@ -156,7 +156,7 @@ export default class GroupList extends Component { const groupId = e.key; const currGroup = this.props.groupList.find((group) => { return +group._id === +groupId }); this.props.setCurrGroup(currGroup); - this.props.history.replace(`${currGroup.group_name}`); + this.props.history.replace(`${currGroup._id}`); } @autobind