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

<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>