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