From baf90a38e3f11f3eb278a5ca717ba0fb7e275a4a Mon Sep 17 00:00:00 2001
From: Dong Xia <dev12301@linx-info.com>
Date: Mon, 6 Feb 2023 03:04:19 +0000
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90tab=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Dong Xia <dev12301@linx-info.com>
---
 src/pages/layout/content-tab.vue | 70 ++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/pages/layout/content-tab.vue

diff --git a/src/pages/layout/content-tab.vue b/src/pages/layout/content-tab.vue
new file mode 100644
index 0000000..9d8d060
--- /dev/null
+++ b/src/pages/layout/content-tab.vue
@@ -0,0 +1,70 @@
+<template>
+  <a-tabs v-model="activeKey" class="my-tabs" hide-add type="editable-card" @edit="onEdit" @change="changeTab">
+    <a-tab-pane v-for="tab in getTabList" :key="tab.key" :closeable="tab.closeable">
+      <div slot="tab">
+        <a-tooltip title="刷新页面">
+          <a-button v-if="activeKey===tab.key" type="link" size="small" style="margin:0 0 0 10px;" @click="refreshPage"><a-icon type="sync" /></a-button>
+        </a-tooltip>
+        <span>{{ tab.title }}</span>
+      </div>
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  inject: ['reload'],
+  computed: {
+    ...mapGetters([
+      'getActiveTabKey',
+      'getTabList'
+    ]),
+    activeKey: {
+      get() {
+        return this.getActiveTabKey
+      },
+      set(value) {
+        const index = this.getTabList.findIndex(ele => ele.key === value)
+        const activeTab = this.getTabList[index]
+        this.$router.push(activeTab.path)
+      }
+    }
+  },
+  methods: {
+    onEdit(key, action) {
+      if (action === 'remove') {
+        if (this.getTabList.length === 1) {
+          this.$notification.warn({
+            message: '不能关闭了',
+            duration: 2
+          })
+          return
+        }
+        this.$store.dispatch('removeTab', key).then(() => {
+          const index = this.getTabList.findIndex(ele => ele.key === this.activeKey)
+          const activeTab = this.getTabList[index]
+          this.$router.push(activeTab.path)
+        })
+      }
+    },
+    changeTab(activekey) {
+      const index = this.getTabList.findIndex(ele => ele.key === activekey)
+      const currentTab = this.getTabList[index]
+      this.$store.dispatch('activeMenu', currentTab.id)
+    },
+    refreshPage() {
+      this.reload()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.my-tabs {
+  flex: 1;
+  margin-right: 20px;
+  align-self: center;
+  height: 40px;
+}
+</style>
-- 
Gitee