fix(tab): 修复多标签页拖拽排序后首页 tab 变为可关闭的状态，并使用更合理的方法控制首页标签不可关闭

FairyEver · FairyEver · commit 606e14380d66 · 2020-04-21T15:15:30.000+08:00
#fix 273
diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss
@@ -255,9 +255,6 @@
                 &:hover {
                   padding: 0px 20px;
                 }
-                .el-icon-close {
-                  display: none;
-                }
               }
             }
             .el-tabs__item.is-active {
diff --git a/src/layout/header-aside/components/tabs/index.vue b/src/layout/header-aside/components/tabs/index.vue
@@ -2,23 +2,36 @@
   <div class="d2-multiple-page-control-group" flex>
     <div class="d2-multiple-page-control-content" flex-box="1">
       <div class="d2-multiple-page-control-content-inner">
-        <d2-contextmenu :visible.sync="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">
-          <d2-contextmenu-list :menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList" @rowClick="contextmenuClick"/>
+        <d2-contextmenu
+          :visible.sync="contextmenuFlag"
+          :x="contentmenuX"
+          :y="contentmenuY">
+          <d2-contextmenu-list
+            :menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList"
+            @rowClick="contextmenuClick"/>
         </d2-contextmenu>
         <el-tabs
           class="d2-multiple-page-control d2-multiple-page-sort"
           :value="current"
           type="card"
-          :closable="true"
           @tab-click="handleClick"
-          @edit="handleTabsEdit"
+          @tab-remove="handleTabRemove"
           @contextmenu.native="handleContextmenu">
-          <el-tab-pane v-for="page in opened" :key="page.fullPath" :label="page.meta.title || '未命名'" :name="page.fullPath"/>
+          <el-tab-pane
+            v-for="page in opened"
+            :key="page.fullPath"
+            :label="page.meta.title || '未命名'"
+            :name="page.fullPath"
+            :closable="isTabClosable(page)"/>
         </el-tabs>
       </div>
     </div>
     <div class="d2-multiple-page-control-btn" flex-box="0">
-      <el-dropdown size="default" split-button @click="closeAll" @command="command => handleControlItemClick(command)">
+      <el-dropdown
+        size="default"
+        split-button
+        @click="closeAll"
+        @command="command => handleControlItemClick(command)">
         <d2-icon name="times-circle"/>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item command="left">
@@ -46,6 +59,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import Sortable from 'sortablejs'
+
 export default {
   components: {
     D2Contextmenu: () => import('../contextmenu'),
@@ -83,12 +97,20 @@ export default {
       'closeAll',
       'openedSort'
     ]),
+    /**
+     * @description 计算某个标签页是否可关闭
+     * @param {Object} page 其中一个标签页
+     */
+    isTabClosable (page) {
+      return page.name !== 'index'
+    },
     /**
      * @description 右键菜单功能点击
+     * @param {Object} event 事件
      */
     handleContextmenu (event) {
       let target = event.target
-      // 解决 https://github.com/d2-projects/d2-admin/issues/54
+      // fix https://github.com/d2-projects/d2-admin/issues/54
       let flag = false
       if (target.className.indexOf('el-tabs__item') > -1) flag = true
       else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
@@ -105,59 +127,45 @@ export default {
       }
     },
     /**
-     * @description 右键菜单的row-click事件
+     * @description 右键菜单的 row-click 事件
+     * @param {String} command 事件类型
      */
     contextmenuClick (command) {
       this.handleControlItemClick(command, this.tagName)
     },
     /**
      * @description 接收点击关闭控制上选项的事件
+     * @param {String} command 事件类型
+     * @param {String} tagName tab 名称
      */
     handleControlItemClick (command, tagName = null) {
-      if (tagName) {
-        this.contextmenuFlag = false
-      }
-      const params = {
-        pageSelect: tagName
-      }
+      if (tagName) this.contextmenuFlag = false
+      const params = { pageSelect: tagName }
       switch (command) {
-        case 'left':
-          this.closeLeft(params)
-          break
-        case 'right':
-          this.closeRight(params)
-          break
-        case 'other':
-          this.closeOther(params)
-          break
-        case 'all':
-          this.closeAll()
-          break
-        default:
-          this.$message.error('无效的操作')
-          break
+        case 'left': this.closeLeft(params); break
+        case 'right': this.closeRight(params); break
+        case 'other': this.closeOther(params); break
+        case 'all': this.closeAll(); break
+        default: this.$message.error('无效的操作'); break
       }
     },
     /**
      * @description 接收点击 tab 标签的事件
+     * @param {object} tab 标签
+     * @param {object} event 事件
      */
     handleClick (tab, event) {
       // 找到点击的页面在 tag 列表里是哪个
       const page = this.opened.find(page => page.fullPath === tab.name)
       const { name, params, query } = page
-      if (page) {
-        this.$router.push({ name, params, query })
-      }
+      if (page) this.$router.push({ name, params, query })
     },
     /**
-     * @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
+     * @description 点击 tab 上的删除按钮触发这里
+     * @param {String} tagName tab 名称
      */
-    handleTabsEdit (tagName, action) {
-      if (action === 'remove') {
-        this.close({
-          tagName
-        })
-      }
+    handleTabRemove (tagName) {
+      this.close({ tagName })
     }
   },
   mounted () {

Original file line number	Diff line number	Diff line change
`@@ -255,9 +255,6 @@`
`255`	`255`	`&:hover {`
`256`	`256`	`padding: 0px 20px;`
`257`	`257`	`}`
`258`		`- .el-icon-close {`
`259`		`- display: none;`
`260`		`- }`
`261`	`258`	`}`
`262`	`259`	`}`
`263`	`260`	`.el-tabs__item.is-active {`