feat: add function of disable closing page; :star: 新增：禁用关闭页面功能；

chenghongxing

2020-09-30 3d3e56de125f1c15c71b101c11ce6003b89520f3

feat: add function of disable closing page; :star:
新增：禁用关闭页面功能；

 src/layouts/tabs/TabsHead.vue

@@ -16,9 +16,9 @@
      </a-tooltip>
      <a-tab-pane v-for="page in pageList" :key="page.fullPath">
        <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.fullPath, e)">
          <a-icon v-if="page.fullPath === active || page.loading" @click="onRefresh(page)" class="icon-sync" :type="page.loading ? 'loading' : 'sync'" />
          <span @click="onTabClick(page.fullPath)" >{{pageName(page)}}</span>
          <a-icon @click="onClose(page.fullPath)" class="icon-close" type="close"/>
          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.fullPath !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
          <div class="title" @click="onTabClick(page.fullPath)" >{{pageName(page)}}</div>
          <a-icon v-if="!page.unclose" @click="onClose(page.fullPath)" class="icon-close" type="close"/>
        </div>
      </a-tab-pane>
    </a-tabs>
@@ -107,6 +107,11 @@
    padding: 0 16px;
    font-size: 14px;
    user-select: none;
    transition: all 0.2s;
    .title{
      display: inline-block;
      height: 100%;
    }
    .icon-close{
      font-size: 12px;
      margin-left: 6px;
@@ -119,9 +124,14 @@
    .icon-sync{
      margin-left: -4px;
      color: @primary-4;
      transition: all 0.3s ease-in-out;
      &:hover{
        color: @primary-color;
      }
      font-size: 14px;
      &.hide{
        font-size: 0;
      }
    }
  }
  .tabs-head{

 src/layouts/tabs/TabsView.vue

@@ -153,8 +153,9 @@
    },
    closeOthers (pageKey) {
      // 清除缓存
      this.clearCaches = this.pageList.filter(item => item.fullPath !== pageKey).map(item => item.cachedKey)
      this.pageList = this.pageList.filter(item => item.fullPath === pageKey)
      const clearPages = this.pageList.filter(item => item.fullPath !== pageKey && !item.unclose)
      this.clearCaches = clearPages.map(item => item.cachedKey)
      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
      // 判断跳转
      if (this.activePage != pageKey) {
        this.activePage = pageKey
@@ -164,8 +165,9 @@
    closeLeft (pageKey) {
      const index = this.pageList.findIndex(item => item.fullPath === pageKey)
      // 清除缓存
      this.clearCaches = this.pageList.filter((item, i) => i < index).map(item => item.cachedKey)
      this.pageList = this.pageList.slice(index)
      const clearPages = this.pageList.filter((item, i) => i < index && !item.unclose)
      this.clearCaches = clearPages.map(item => item.cachedKey)
      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
      // 判断跳转
      if (!this.pageList.find(item => item.fullPath === this.activePage)) {
        this.activePage = pageKey
@@ -175,8 +177,9 @@
    closeRight (pageKey) {
      // 清除缓存
      const index = this.pageList.findIndex(item => item.fullPath === pageKey)
      this.clearCaches = this.pageList.filter((item, i) => i > index).map(item => item.cachedKey)
      this.pageList = this.pageList.slice(0, index + 1)
      const clearPages = this.pageList.filter((item, i) => i > index && !item.unclose)
      this.clearCaches = clearPages.map(item => item.cachedKey)
      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
      // 判断跳转
      if (!this.pageList.find(item => item.fullPath === this.activePage)) {
        this.activePage = pageKey
@@ -243,7 +246,11 @@
      sessionStorage.setItem(process.env.VUE_APP_TBAS_KEY, JSON.stringify(tabs))
    },
    createPage(route) {
      return {keyPath: route.matched[route.matched.length - 1].path, fullPath: route.fullPath, loading: false}
      return {
        keyPath: route.matched[route.matched.length - 1].path,
        fullPath: route.fullPath, loading: false,
        unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
      }
    },
    /**
     * 设置页面缓存的key
@@ -251,6 +258,7 @@
     */
    setCachedKey(route) {
      const page = this.pageList.find(item => item.fullPath === route.fullPath)
      page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
      if (!page._init_) {
        page.cachedKey = this.$refs.tabContent.$vnode.key
        page._init_ = true

 src/router/config.js

@@ -37,6 +37,11 @@
            {
              path: 'workplace',
              name: '工作台',
              meta: {
                page: {
                  closable: false
                }
              },
              component: () => import('@/pages/dashboard/workplace'),
            },
            {