From 5088d267c69e87673c85ba302dd9dc62c9da4951 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期日, 16 二月 2020 18:54:49 +0800 Subject: [PATCH] 2020-02-16 --- src/components/tabview/index.jsx | 74 +++++++++++++++++++++---------------- 1 files changed, 42 insertions(+), 32 deletions(-) diff --git a/src/components/tabview/index.jsx b/src/components/tabview/index.jsx index eeefeef..ddbc7d9 100644 --- a/src/components/tabview/index.jsx +++ b/src/components/tabview/index.jsx @@ -32,47 +32,46 @@ } state = { - selectedTabId: '', // 褰撳墠閫変腑tab椤甸潰 + tabviews: null, // 鏍囩闆� iFrameHeight: 0, dict: (!sessionStorage.getItem('lang') || sessionStorage.getItem('lang') === 'zh-CN') ? mzhCN : menUS, locale: (!sessionStorage.getItem('lang') || sessionStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS } - handleTabview (menu) { + handleTabview (e, menu) { + e.stopPropagation() // 鍏抽棴tab椤碉紝閲嶆柊閫夋嫨鏄剧ず椤� - let tabs = JSON.parse(JSON.stringify(this.props.tabviews)) + let tabs = JSON.parse(JSON.stringify(this.state.tabviews)) tabs = tabs.filter(tab => { - if (tab.MenuID === this.state.selectedTabId) { - tab.selected = true - } else { - tab.selected = false - } return tab.MenuID !== menu.MenuID }) - if (menu.MenuID === this.state.selectedTabId) { + if (menu.selected) { tabs[0] && (tabs[0].selected = true) } this.props.modifyTabview(tabs) } - changeTab (menu) { + changeTab (e, menu) { + e.stopPropagation() // 绐楀彛鍒囨崲 - this.setState({ - selectedTabId: menu.MenuID - }) - let tabs = JSON.parse(JSON.stringify(this.props.tabviews)) + let tabs = JSON.parse(JSON.stringify(this.state.tabviews)) tabs = tabs.map(tab => { + tab.selected = false + if (tab.MenuID === menu.MenuID) { tab.selected = true - } else { - tab.selected = false } + return tab }) + + this.setState({ + tabviews: tabs + }) + this.props.modifyTabview(tabs) - this.resetWindow(menu) } selectcomponent (view) { @@ -129,6 +128,9 @@ } else { moment.locale('en') } + this.setState({ + tabviews: this.props.tabviews + }) } componentDidMount () { @@ -147,11 +149,11 @@ } UNSAFE_componentWillReceiveProps (nextProps) { - if (nextProps.tabviews && !is(fromJS(this.props.tabviews), fromJS(nextProps.tabviews))) { + if (nextProps.tabviews && !is(fromJS(this.state.tabviews), fromJS(nextProps.tabviews))) { // tab绐楀彛椤靛鍔犳垨鍒犻櫎 - if (nextProps.tabviews.length > this.props.tabviews.length) { + if (nextProps.tabviews.length > this.state.tabviews.length) { // 鏌ョ湅鏂皌ab椤甸渶瑕佺粍浠舵槸鍚﹀姞杞� - let MenuIDs = this.props.tabviews.map(tab => {return tab.MenuID}) + let MenuIDs = this.state.tabviews.map(tab => {return tab.MenuID}) let newtab = nextProps.tabviews.filter(tab => !MenuIDs.includes(tab.MenuID))[0] if (!Comps.Home && newtab.type === 'Home') { Comps.Home = asyncComponent(() => import('@/tabviews/home')) @@ -170,36 +172,44 @@ } } - // 璁剧疆閫変腑绐楀彛 - let view = nextProps.tabviews.filter(tab => tab.selected)[0] + // 淇濆瓨淇敼鏍囩闆� this.setState({ - selectedTabId: view ? view.MenuID : '' + tabviews: nextProps.tabviews }) - this.resetWindow(view) + + let node = document.getElementById('root').parentNode.parentNode + if (node) { + node.scrollTop = 0 + } } } - shouldComponentUpdate(nextProps, nextState) { - return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) - } + // shouldComponentUpdate(nextProps, nextState) { + // return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) + // } render () { + const { tabviews } = this.state + let view = tabviews.filter(tab => tab.selected)[0] + this.resetWindow(view) + let selectedTabId = view ? view.MenuID : '' + return ( <section className={'flex-container content-box' + (this.props.collapse ? ' collapsed' : '')}> <ConfigProvider locale={this.state.locale}> <div className="content-header"> - {this.props.tabviews && this.props.tabviews.length > 0 && - <Tabs activeKey={this.state.selectedTabId}> - {this.props.tabviews.map(view => { + {tabviews && tabviews.length > 0 && + <Tabs activeKey={selectedTabId}> + {tabviews.map(view => { return ( <Tabs.TabPane className="test" tab={ <span className="tab-control"> - <span className="tab-name" onClick={() => {this.changeTab(view)}}> + <span className="tab-name" onClick={(e) => {this.changeTab(e, view)}}> {view.MenuName} </span> - {view.type !== 'Home' ? <Icon type="close" onClick={() => {this.handleTabview(view)}}/> : null} + {view.type !== 'Home' ? <Icon type="close" onClick={(e) => {this.handleTabview(e, view)}}/> : null} </span> } key={view.MenuID} -- Gitblit v1.8.0