标签页以tab形式展示

zyplayer-doc-ui/db-ui/src/components/layouts/PageTableView.vue

@@ -0,0 +1,141 @@
+<template>
+    <div>
+        <el-tabs v-model="activePage" type="card" closable @tab-click="changePage" @tab-remove="removePageTab" style="padding: 5px 10px 0;">
+            <el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="item.fullPath" v-for="item in pageList"/>
+        </el-tabs>
+        <keep-alive>
+            <router-view/>
+        </keep-alive>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'MenuView',
+        components: {},
+        data() {
+            return {
+                pageList: [],
+                linkList: [],
+                activePage: '',
+                multiPage: true,
+                menuVisible: false,
+                menuItemList: [
+                    {key: '1', icon: 'arrow-left', text: '关闭左侧'},
+                    {key: '2', icon: 'arrow-right', text: '关闭右侧'},
+                    {key: '3', icon: 'close', text: '关闭其它'}
+                ],
+            }
+        },
+        computed: {
+            pageTabNameMap () {
+                return this.$store.state.global.pageTabNameMap;
+            }
+        },
+        created() {
+            this.pageList.push(this.$route);
+            this.linkList.push(this.$route.fullPath);
+            this.activePage = this.$route.fullPath;
+        },
+        watch: {
+            '$route': function (newRoute, oldRoute) {
+                this.activePage = newRoute.fullPath;
+                if (!this.multiPage) {
+                    this.linkList = [newRoute.fullPath];
+                    this.pageList = [newRoute];
+                } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
+                    this.linkList.push(newRoute.fullPath);
+                    this.pageList.push(newRoute);
+                }
+            },
+            'activePage': function (key) {
+                this.$router.push(key)
+            },
+        },
+        methods: {
+            changePage(key) {
+                this.activePage = key.name;
+            },
+            editPage(key, action) {
+                this[action](key);
+            },
+            removePageTab(key) {
+                if (this.pageList.length === 1) {
+                    this.$message.warning('这是最后一页，不能再关闭了啦');
+                    return
+                }
+                this.pageList = this.pageList.filter(item => item.fullPath !== key);
+                let index = this.linkList.indexOf(key);
+                this.linkList = this.linkList.filter(item => item !== key);
+                index = index >= this.linkList.length ? this.linkList.length - 1 : index;
+                this.activePage = this.linkList[index];
+            },
+            onContextmenu(e) {
+                const pagekey = this.getPageKey(e.target)
+                if (pagekey !== null) {
+                    e.preventDefault()
+                    this.menuVisible = true
+                }
+            },
+            /**
+             * 由于ant-design-vue组件库的TabPane组件暂不支持自定义监听器，无法直接获取到右键target所在标签页的 pagekey 。故增加此方法用于
+             * 查询右键target所在标签页的标识 pagekey ，以用于自定义右键菜单的事件处理。
+             * 注：TabPane组件支持自定义监听器后可去除该方法并重构 ‘自定义右键菜单的事件处理’
+             * @param target 查询开始目标
+             * @param count 查询层级深度 （查找层级最多不超过3层，超过3层深度直接返回 null）
+             * @returns {String}
+             */
+            getPageKey(target, depth) {
+                depth = depth || 0
+                if (depth > 2) {
+                    return null
+                }
+                let pageKey = target.getAttribute('pagekey')
+                pageKey = pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
+                return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
+            },
+            onMenuSelect(key, target) {
+                let pageKey = this.getPageKey(target)
+                switch (key) {
+                    case '1':
+                        this.closeLeft(pageKey)
+                        break
+                    case '2':
+                        this.closeRight(pageKey)
+                        break
+                    case '3':
+                        this.closeOthers(pageKey)
+                        break
+                    default:
+                        break
+                }
+            },
+            closeOthers(pageKey) {
+                let index = this.linkList.indexOf(pageKey)
+                this.linkList = this.linkList.slice(index, index + 1)
+                this.pageList = this.pageList.slice(index, index + 1)
+                this.activePage = this.linkList[0]
+            },
+            closeLeft(pageKey) {
+                let index = this.linkList.indexOf(pageKey)
+                this.linkList = this.linkList.slice(index)
+                this.pageList = this.pageList.slice(index)
+                if (this.linkList.indexOf(this.activePage) < 0) {
+                    this.activePage = this.linkList[0]
+                }
+            },
+            closeRight(pageKey) {
+                let index = this.linkList.indexOf(pageKey)
+                this.linkList = this.linkList.slice(0, index + 1)
+                this.pageList = this.pageList.slice(0, index + 1)
+                if (this.linkList.indexOf(this.activePage < 0)) {
+                    this.activePage = this.linkList[this.linkList.length - 1]
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>