From 3d3e56de125f1c15c71b101c11ce6003b89520f3 Mon Sep 17 00:00:00 2001
From: chenghongxing <1126263215@qq.com>
Date: Wed, 30 Sep 2020 21:50:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20function=20of=20disable=20closing?=
 =?UTF-8?q?=20page;=20:star:=20=E6=96=B0=E5=A2=9E=EF=BC=9A=E7=A6=81?=
 =?UTF-8?q?=E7=94=A8=E5=85=B3=E9=97=AD=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/tabs/TabsHead.vue | 16 +++++++++++++---
 src/layouts/tabs/TabsView.vue | 22 +++++++++++++++-------
 src/router/config.js          |  5 +++++
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/layouts/tabs/TabsHead.vue b/src/layouts/tabs/TabsHead.vue
index 69432f3..958662f 100644
--- a/src/layouts/tabs/TabsHead.vue
+++ b/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{
diff --git a/src/layouts/tabs/TabsView.vue b/src/layouts/tabs/TabsView.vue
index 94d4fbe..b8461bc 100644
--- a/src/layouts/tabs/TabsView.vue
+++ b/src/layouts/tabs/TabsView.vue
@@ -153,8 +153,9 @@ export default {
     },
     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 @@ export default {
     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 @@ export default {
     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 @@ export default {
       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 @@ export default {
      */
     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
diff --git a/src/router/config.js b/src/router/config.js
index fa95941..b90d976 100644
--- a/src/router/config.js
+++ b/src/router/config.js
@@ -37,6 +37,11 @@ const options = {
             {
               path: 'workplace',
               name: '工作台',
+              meta: {
+                page: {
+                  closable: false
+                }
+              },
               component: () => import('@/pages/dashboard/workplace'),
             },
             {