✅ 成功完成 '标签关闭操作'功能; 测试完成; 注释隐藏底部 公司信息(增加页面可视面积)

src/common/containers/Layout/LayoutContainers.jsx

@@ -135,9 +135,11 @@ class LayoutContainers extends React.Component {
                     </ContentBox>
 
                     {/* 底部 */}
-                    <FooterBox>
-                        <p> 长江中心 PMS 物业管理系统 ©2016 Created by 上朝科技 </p>
-                    </FooterBox>
+                    {/*
+                        <FooterBox>
+                            <p> 长江中心 PMS 物业管理系统 ©2016 Created by 上朝科技 </p>
+                        </FooterBox>
+                    */}
                 </Layout>
             </Layout>
         )
@@ -154,14 +156,14 @@ const ContentBox = styled.div `
     border-top: 2px solid rgb(233, 233, 233);
 `
 
-const FooterBox = styled.footer`
-    position: fixed;
-    bottom: 0;
-    width: calc(100% - 220px);
-    height: ${elf.d.autoPadding * 2}px;
-    text-align: center;
-    line-height: ${elf.d.autoPadding * 2}px;
-    background: ${elf.c.background};
-`
+// const FooterBox = styled.footer`
+//     position: fixed;
+//     bottom: 0;
+//     width: calc(100% - 220px);
+//     height: ${elf.d.autoPadding * 2}px;
+//     text-align: center;
+//     line-height: ${elf.d.autoPadding * 2}px;
+//     background: ${elf.c.background};
+// `
 
 export default LayoutContainers

src/common/containers/Layout/TabsBox.jsx

@@ -34,7 +34,7 @@ const TabsBox = ({
             // actions
             onAddPane={ actions.addPane }
             onActivePane={ actions.activePane }
-            onRemovePane={ () => actions.removePane(panesState) }
+            onRemovePane={ actions.removePane }
         />
         {/* 分离内容 与 标签 */}
         <route.component { ...tabsProps } routes={ route.routes } />

src/common/containers/Layout/TabsContainers.jsx

@@ -2,14 +2,14 @@
  * @author 闫晓迪
  * @email [email protected]
  * @create date 2017-09-06 02:17:06
- * @modify date 2017-09-22 06:26:26
+ * @modify date 2017-09-24 05:39:37
  * @desc 自定义新增页签触发器(完整注释查看 commit: 4b24e5fd6a4ec91727d3043c4403919fdff94fd3)
 */
 import React from 'react'
 import cloneDeep from 'lodash/cloneDeep' // isArray
 import { hasString } from '../../../utils'
 
-import { Tabs, Row, Col, Menu, Dropdown, Icon, message } from 'antd' // Button
+import { Tabs, Row, Col, Menu, Dropdown, Icon } from 'antd' // Button, message
 const TabPane = Tabs.TabPane
 
 class TabsContainers extends React.Component {
@@ -133,16 +133,33 @@ class TabsContainers extends React.Component {
         })
     }
 
-    // 右侧下拉 功能按钮 - 按钮点击事件
-    handleButtonClick = (e) => {
-        message.info('关闭全部选项卡')
-        console.log('click left button', e)
+    closePane = (activeObj, panesArr) => {
+        this.props.onRemovePane({
+            activePane: activeObj,
+            panes: panesArr
+        })
     }
 
     // 右侧下拉 功能按钮 - 菜单点击事件
     handleMenuClick = (e) => {
-        message.info('关闭其他选项卡')
-        console.log('click', e)
+        // 关闭全部标签(首页不关)
+        if (e.key === '1') {
+            let initActiveObj = cloneDeep(this.props.panesState.panes[0])
+            let initPanesArr = [initActiveObj]
+
+            this.closePane(initActiveObj, initPanesArr)
+
+            this.props.tabsProps.history.push(initActiveObj.path) // 只有初始化状态 需要跳转 url
+        // 关闭其他标签
+        } else {
+            let currentActiveObj = cloneDeep(this.props.panesState.activePane)
+            let setPanesArr = [
+                cloneDeep(this.props.panesState.panes[0]), // 首页
+                currentActiveObj // 当前的 activePane标签
+            ]
+
+            this.closePane(currentActiveObj, setPanesArr)
+        }
     }
 
     menu = (
@@ -159,17 +176,17 @@ class TabsContainers extends React.Component {
                     <Tabs
                         hideAdd
                         type="editable-card"
-                        onEdit={this.onEdit}
-                        onChange={this.onChange}
-                        activeKey={this.state.activePane.key}
+                        onEdit={ this.onEdit }
+                        onChange={ this.onChange }
+                        activeKey={ this.state.activePane.key }
                     >
                         {
                             this.state.panes.map((pane) => (
                                 <TabPane
-                                    closable={pane.closable}
-                                    key={pane.key}
-                                    tab={pane.title}
-                                    path={pane.path}
+                                    closable={ pane.closable }
+                                    key={ pane.key }
+                                    tab={ pane.title }
+                                    path={ pane.path }
                                 />
                             ))
                         }

src/store/actions/panes.js

@@ -13,9 +13,8 @@ export const activePane = activeObj => ({
     activeObj // stringKey
 })
 
-// 删减 (参数: 当前激活 tabs面板的 Key, 目标 tabs面板的 Key)
-export const removePane = (activeKey, targetKey) => ({
+// 删减 (参数: 留下的 activePane; 其余标签删除)
+export const removePane = activePane => ({
     type: types.REMOVE_PANE,
-    activeKey,
-    targetKey
+    activePane
 })

src/store/reducers/panes.js

@@ -35,28 +35,11 @@ const setPanes = (state = initialState, action) => {
             return activeState
 
         case REMOVE_PANE:
-            let activeKey = action.activeKey
-            let lastIndex
-
-            state.panes.forEach((pane, i) => {
-                // key为 pane中 route属性值中的path属性;
-                if (pane.route.path === action.targetKey) {
-                    lastIndex = i - 1
-                }
+            let removeState = Object.assign({}, state, {
+                activePane: action.activePane.activePane,
+                panes: action.activePane.panes
             })
 
-            const panes = state.filter(pane => pane.route.path !== action.targetKey)
-
-            if (lastIndex >= 0 && activeKey === action.targetKey) {
-                activeKey = panes[lastIndex].route.path
-            }
-
-            // 返回新的 removeState; 不需要拷贝, 直接返回新对象
-            let removeState = {
-                panes,
-                activeKey
-            }
-
             return removeState
         default:
             return state