新增内容tabs标签页，关闭当前／其它／全部、刷新当前功能

CHANGELOG.md

@@ -0,0 +1,18 @@
## 更新日志
### 1.1.0
*待定*
- 更新element-ui 2.2.1 用于修复tree半选中状态项不能传给后台接口问题
- 修复本地开发找不到baseUrl问题
- 新增Mock本地开发模拟数据功能
- 更新element-ui 2.3.2 用于修复左侧菜单收缩卡顿问题
- 优化路由机制，通过meta isTab属性, 设定是否通过tab标签页展示内容
- 新增scss变量皮肤定制
- 新增内容tabs标签页，关闭当前／其它／全部、刷新当前功能
- 修复其它已知bug
### 1.0.0
*2018-02-11*

src/assets/scss/_base.scss

@@ -258,7 +258,6 @@ img {
  &--dark {
    background-color: $sidebar--background-color-dark;
    .site-sidebar__menu.el-menu {
      background-color: $sidebar--background-color-dark;
      .el-menu-item,
@@ -280,7 +279,6 @@ img {
      }
    }
  }
  &__inner {
    position: relative;
    z-index: 1;
@@ -319,6 +317,21 @@ img {
  &--tabs {
    padding: 55px 0 0;
  }
  .site-tabs__tools {
    position: fixed;
    top: 50px;
    right: 0;
    z-index: 931;
    height: 40px;
    padding: 0 12px;
    font-size: 16px;
    line-height: 40px;
    background-color: $content--background-color;
    cursor: pointer;
    .el-icon--right {
      margin-left: 0;
    }
  }
  > .el-tabs {
    .el-tabs__header {
      position: fixed;
@@ -326,7 +339,7 @@ img {
      left: 230px;
      right: 0;
      z-index: 930;
      padding: 0 15px;
      padding: 0 55px 0 15px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      background-color: #fff;
    }
@@ -341,3 +354,7 @@ img {
    }
  }
}
/* Dropdown
------------------------------ */

src/assets/scss/_variables.scss

@@ -7,6 +7,10 @@
// ---------- #1 ----------
$--color-primary: #17b3a3;
$--color-success: #67c23a;
$--color-warning: #e6a23c;
$--color-danger: #f56c6c;
$--color-info: #909399;
$--color-text-primary: #303133;

src/store/index.js

@@ -11,13 +11,14 @@ const state = {
  // 导航条, 布局风格, defalut(默认) / inverse(反向)
  navbarLayoutType: 'default',
  // 侧边栏, 布局皮肤, light(浅色) / dark(黑色)
  sidebarLayoutSkin: 'light',
  sidebarLayoutSkin: 'dark',
  // 侧边栏, 水平折叠收起状态
  sidebarCollapse: false,
  // 页面文档可视高度(随窗口改变大小)
  documentClientHeight: 0,
  // 菜单导航
  menuNavList: [],
  menuNavActiveName: '1-1',
  // 内容区域tabs标签页
  contentTabs: [],
  contentTabsActiveName: ''

src/store/mutation-types.js

@@ -4,6 +4,7 @@ export const SET_SIDEBAR_LAYOUT_SKIN = 'SET_SIDEBAR_LAYOUT_SKIN'
export const SWITCH_SIDEBAR_COLLAPSE = 'SWITCH_SIDEBAR_COLLAPSE'
export const UPDATE_DOCUMENT_CLIENT_HEIGHT = 'UPDATE_DOCUMENT_CLIENT_HEIGHT'
export const UPDATE_MENU_NAV_LIST = 'UPDATE_MENU_NAV_LIST'
export const UPDATE_MENU_NAV_ACTIVE_NAME = 'UPDATE_MENU_NAV_ACTIVE_NAME'
export const ADD_CONTENT_TAB = 'ADD_CONTENT_TAB'
export const UPDATE_CONTENT_TABS = 'UPDATE_CONTENT_TABS'
export const DELETE_CONTENT_TABS = 'DELETE_CONTENT_TABS'

src/store/mutations.js

@@ -19,6 +19,10 @@ export default {
    state.menuNavList = list
  },
  [types.UPDATE_MENU_NAV_ACTIVE_NAME] (state, { name }) {
    state.menuNavActiveName = name
  },
  [types.ADD_CONTENT_TAB] (state, tab) {
    state.contentTabs.push(tab)
  },

src/views/layout/content-tabs.vue

@@ -1,7 +1,7 @@
<template>
  <el-tabs
    v-model="tabActiveName"
    :closable="$store.state.contentTabs.length > 1"
    :closable="true"
    @tab-click="selectedTabHandle"
    @tab-remove="removeTabHandle">
    <el-tab-pane
@@ -20,6 +20,17 @@
        </keep-alive>
      </el-card>
    </el-tab-pane>
    
    <!-- tabs tools -->
    <el-dropdown class="site-tabs__tools" @command="toolsCommandHandle" :show-timeout="0">
      <i class="el-icon-arrow-down el-icon--right"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="closeCurrent">关闭当前标签页</el-dropdown-item>
        <el-dropdown-item command="closeOther">关闭其它标签页</el-dropdown-item>
        <el-dropdown-item command="closeAll">关闭全部标签页</el-dropdown-item>
        <el-dropdown-item command="refreshCurrent">刷新当前标签页</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-tabs>
</template>
@@ -36,8 +47,16 @@
        get () {
          return this.$store.state.contentTabsActiveName
        },
        set (val) {
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name: val })
        set (name) {
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name })
        }
      }
    },
    watch: {
      '$store.state.contentTabs' (tabs) {
        if (tabs.length <= 0) {
          this.UPDATE_MENU_NAV_ACTIVE_NAME({ name: '' })
          this.$router.push({ name: 'home' })
        }
      }
    },
@@ -70,14 +89,30 @@
      removeTabHandle (tabName) {
        var newTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
        // 当前选中tab被删除
        if (tabName === this.tabActiveName) {
        if (newTabs.length >= 1 && tabName === this.tabActiveName) {
          this.$router.push({ name: newTabs[newTabs.length - 1].name }, () => {
            this.tabActiveName = this.$route.name
          })
        }
        this.UPDATE_CONTENT_TABS(newTabs)
      },
      ...mapMutations(['UPDATE_CONTENT_TABS', 'UPDATE_CONTENT_TABS_ACTIVE_NAME'])
      // 工具操作
      toolsCommandHandle (command) {
        if (command === 'closeCurrent') {
          this.removeTabHandle(this.tabActiveName)
        } else if (command === 'closeOther') {
          this.UPDATE_CONTENT_TABS(this.$store.state.contentTabs.filter(item => item.name === this.tabActiveName))
        } else if (command === 'closeAll') {
          this.DELETE_CONTENT_TABS()
        } else if (command === 'refreshCurrent') {
          var tempTabName = this.tabActiveName
          this.removeTabHandle(tempTabName)
          this.$nextTick(() => {
            this.$router.push({ name: tempTabName })
          })
        }
      },
      ...mapMutations(['UPDATE_MENU_NAV_ACTIVE_NAME', 'UPDATE_CONTENT_TABS', 'UPDATE_CONTENT_TABS_ACTIVE_NAME', 'DELETE_CONTENT_TABS'])
    }
  }
</script>

src/views/layout/index.vue

@@ -80,7 +80,7 @@
        API.user.info().then(({data}) => {
          if (data && data.code === 0) {
            this.loading = false
            this.DELETE_CONTENT_TABS([])
            this.DELETE_CONTENT_TABS()
            this.UPDATE_USER_ID({ id: data.user.userId })
            this.UPDATE_USER_NAME({ name: data.user.username })
          }

src/views/layout/navbar.vue

@@ -36,7 +36,7 @@
          <el-menu-item index="2-3"><a href="//git.oschina.net/renrenio/renren-generator" target="_blank">代码生成器</a></el-menu-item>
        </el-submenu>
        <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown placement="bottom" :hide-on-click="false">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar.png" :alt="$store.state.user.name">
              {{ $store.state.user.name }}
@@ -96,12 +96,12 @@
        }).then(() => {
          API.common.logout().then(({data}) => {
            if (data && data.code === 0) {
              this.DELETE_CONTENT_TABS([])
              this.DELETE_CONTENT_TABS()
              this.$cookie.delete('token')
              this.$router.replace({ name: 'login' })
            }
          })
        })
        }).catch(() => {})
      },
      ...mapMutations(['SWITCH_SIDEBAR_COLLAPSE', 'DELETE_CONTENT_TABS'])
    }

src/views/layout/sidebar.vue

@@ -2,7 +2,7 @@
  <aside class="site-sidebar" :class="sidebarClasses">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuNavActive"
        :default-active="menuNavActiveName"
        :collapse="$store.state.sidebarCollapse"
        :collapseTransition="false"
        class="site-sidebar__menu">
@@ -29,13 +29,21 @@
  export default {
    data () {
      return {
        menuNavActive: '1-1'
      }
    },
    components: {
      SubMenuNav
    },
    computed: {
      menuNavActiveName: {
        get () {
          let name = this.$store.state.menuNavActiveName
          return /\S/.test(name) ? name : '1-1'
        },
        set (name) {
          this.UPDATE_MENU_NAV_ACTIVE_NAME({ name })
        }
      },
      sidebarClasses () {
        let skin = this.$store.state.sidebarLayoutSkin
        return [
@@ -84,7 +92,7 @@
              return console.error('未能找到可用tab标签页！')
            }
          }
          this.menuNavActive = tab.id + ''
          this.menuNavActiveName = tab.id + ''
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name: route.name })
        }
      },
@@ -100,7 +108,7 @@
        }
        return temp.length >= 1 ? this.getMenuNavByRouteName(name, temp) : []
      },
      ...mapMutations(['UPDATE_MENU_NAV_LIST', 'ADD_CONTENT_TAB', 'UPDATE_CONTENT_TABS_ACTIVE_NAME'])
      ...mapMutations(['UPDATE_MENU_NAV_LIST', 'UPDATE_MENU_NAV_ACTIVE_NAME', 'ADD_CONTENT_TAB', 'UPDATE_CONTENT_TABS_ACTIVE_NAME'])
    }
  }
</script>

src/views/layout/update-password.vue

@@ -82,7 +82,7 @@
                  onClose: () => {
                    this.visible = false
                    this.$nextTick(() => {
                      this.DELETE_CONTENT_TABS([])
                      this.DELETE_CONTENT_TABS()
                      this.$cookie.delete('token')
                      this.$router.replace({ name: 'login' })
                    })

static/config/index-uat.js

@@ -4,7 +4,7 @@
;(function () {
  window.SITE_CONFIG = {}
  // api请求地址
  window.SITE_CONFIG.baseUrl = '//demo.renren.io/renren-fast/'
  window.SITE_CONFIG.baseUrl = '//dev.demo.renren.io/renren-fast/'
  // 嵌套iframe地址
  window.SITE_CONFIG.nestIframeUrl = '//demo.renren.io/renren-fast/'