axwen-test31 2.0.0

package/src/layout/layout-nav.vue

@@ -0,0 +1,583 @@
+<template>
+    <nav class="layout-nav">
+        <div class="nav">
+            <div class="nav-prev" @click="handlePrev">
+                <yt-icon icon="el-icon-arrow-left"></yt-icon>
+            </div>
+            <div class="nav-container" ref="container">
+                <div class="nav-list" ref="list" :style="navListStyle" >
+                    <yt-button v-for="(nav, index) in navList" :key="nav.key" :ref="nav.key"
+                        :class="{
+                            active: isActive(nav)
+                        }"
+                        :title="nav.title" 
+                        :draggable="!isAffix(nav)"
+                        @click="handleSelect(nav)"
+                        @contextmenu.native.prevent="handleContextmenu(nav, index, $event)"
+                        @dragstart.native="handleDragStart($event, index)"
+                        @dragenter.native="handleDragEnter($event, nav, index)"
+                    >
+                        <span>{{ nav.title }}</span>
+                        <yt-icon v-if="!isAffix(nav)" class="ml-1 nav-close" icon="el-icon-close"
+                            @click.stop="handleClose(nav)" />
+                    </yt-button>
+                </div>
+            </div>
+            <div class="nav-next" @click="handleNext">
+                <yt-icon icon="el-icon-arrow-right" />
+            </div>
+            <el-dropdown class="nav-down" trigger="hover">
+                <span class="el-dropdown-link">
+                    <yt-icon icon="el-icon-arrow-down" />
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item class="nav-down-item" 
+                        v-for="nav in navList" 
+                        :key="`dropdown_${nav.key}`"
+                        :class="{ active: isActive(nav) }" 
+                        @click.native.stop="handleSelect(nav)">
+                        {{ nav.title }}
+                    </el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+            <yt-button size="mini" @click="closeAll">全部关闭</yt-button>
+        </div>
+        <div class="nav-menu" :style="menuStyle" v-clickoutside="closeMenu">
+            <div class="nav-menu-item" 
+                v-for="menu in operateMenuList" 
+                :key="menu.key" 
+                @click="handleMenuSelect(menu.key)">
+                {{ menu.title }}
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script>
+
+import path from 'path';
+import clickoutside from '@/utils/clickoutside'
+import { MAX_OVER_MESSAGE } from '@/utils/variable'
+import { mapState, mapMutations, mapActions } from 'vuex'
+import _ from 'lodash'
+
+export default {
+    name: 'layout-nav',
+    inject: ['reload'],
+    directives: { clickoutside },
+    data() {
+        return {
+            // 导航栏向左偏移位置
+            navLeft: 0,
+            // 每次向左或向右的偏移量
+            navOffset: 400,
+            activeMenuIndex: 0, // 打开 右键菜单 时标记的第几个 nav
+            contextMenuTop: -1000, // 右键菜单 上边距
+            contextMenuLeft: 0, // 右键菜单 左边距
+            affixNavList: [],
+            operateMenuList: [
+                { key: 'reload', title: '刷新' },
+                { key: 'close', title: '关闭' },
+                { key: 'closeAll', title: '关闭全部' },
+                { key: 'closeOther', title: '关闭其它' },
+                { key: 'closeLeft', title: '关闭左侧' },
+                { key: 'closeRight', title: '关闭右侧' }
+            ],
+            watingCloseTabs:[],
+            closeTimer:null,
+        }
+    },
+    computed: {
+        ...mapState({
+            menuList: state => state.common.menuList,
+            max: state => state.config.NAV_MAX_SIZE ? + state.config.NAV_MAX_SIZE : 1000,
+            navList: state => state.nav.navList,
+            activeNav: state => state.nav.activeNav,
+           
+        }),
+        activeNavKey(){
+            return this.activeNav?.key || this.$route?.path || '' // 刷新浏览器后需要重新赋值
+        },
+        navListStyle() {
+            return {
+                left: -this.navLeft + 'px'
+            }
+        },
+        menuStyle() {
+            return {
+                top: this.contextMenuTop + 'px',
+                left: this.contextMenuLeft + 'px'
+            }
+        }
+    },
+    watch: {
+        $route: {
+            handler(val) {
+                const nav = this.insertNav(val);
+                if(nav){
+                    this.SET_ACTIVE_NAV(nav.key)
+                    this.$nextTick(()=>{
+                        this.moveToVisble(nav)
+                    })
+                }
+               
+            },
+            immediate: true
+        },
+        menuList:{
+            handler(){
+                this.initNavList()
+            },
+            immediate: true
+           
+        },
+    },
+    methods: {
+        ...mapMutations('nav',[
+            'SET_ACTIVE_NAV',
+            'SWAP_NAV',
+            'ADD_NAV',
+        ]),
+        ...mapActions('nav',[
+            'removeNav',
+            'removeAllNavs',
+            'removeOthersNavs',
+            'removeLeftNavs',
+            'removeRightNavs',
+        ]),
+        isAffix(tag) {
+            return !!tag.meta?.affix;
+        },
+        isActive(tab) {
+            const { key } = tab;
+            return key === this.activeNavKey;
+        },
+        filterAffixNavs(routes, basePath = '/') {
+            let tabs = [];
+            routes.forEach((route) => {
+                if (route.meta && route.meta.affix) {
+                    const tagPath = path.resolve(basePath, route.path);
+                    tabs.push({
+                        fullPath: tagPath,
+                        path: tagPath,
+                        name: route.name,
+                        meta: { ...route.meta }
+                    });
+                }
+                if (route.children) {
+                    const temptabs = this.filterAffixNavs(route.children, route.path);
+                    if (temptabs.length >= 1) {
+                        tabs = [...tabs, ...temptabs];
+                    }
+                }
+            });
+            return tabs;
+        },
+        initNavList() {
+            let affixNavList = this.filterAffixNavs(this.$router.options.routes);
+            if(affixNavList.length === 0 && this.menuList.length > 0){
+                const first = this.menuList[0]
+                const link = first.link ? first.link : first.children[0].link
+                const target = this.$router.match(link)
+                if(target){
+                    const { fullPath, path, name, meta } = target || {}
+                    affixNavList.push({
+                        fullPath,
+                        path,
+                        name,
+                        meta: { 
+                            ...meta,
+                            affix: true
+                        }
+                    })
+                }
+                
+            }
+            this.affixNavList = affixNavList
+            affixNavList.forEach(item=>{
+                if (item.name) {
+                    this.insertNav(item);
+                }
+            })
+        },
+        insertNav(nav) {
+            // debugger
+            if (this.navList.length >= this.max && this.navList.every(item => item.key !== nav.path)) {
+                this.$info(MAX_OVER_MESSAGE)
+                this.$router.back()
+                return
+            }
+            const { 
+                name,
+                path,
+                fullPath, 
+                meta = {}, 
+                query,
+                params = {} 
+            } = nav;
+            if(name === 'base'|| meta.hidden){
+                return  
+            }
+            const temp = {
+                path,
+                fullPath,
+                query,
+                params,
+                meta,
+                title: params?.title || meta?.title || name,
+                key: path,
+                name
+            }
+            let map = {
+                nav: temp,
+                menuList: this.menuList
+            }
+            this.ADD_NAV(map);
+            return temp
+        },
+        closeTab(tab){
+            if(!tab){
+                this.doClose()
+                return 
+            }
+            const targetNav = this.navList.find(item => item.fullPath === tab.fullPath)
+            if(targetNav && targetNav.meta?.closable !== false){
+                this.watingCloseTabs.push(targetNav)
+            }
+            clearTimeout(this.closeTimer);
+            this.closeTimer = setTimeout(this.doClose, 100); 
+        },
+        doClose(){
+            this.closeTimer = null
+            const { watingCloseTabs } = this
+           
+            console.log('afterClosed____watingCloseTabs___________', this.activeNav)
+            if(!Array.isArray(watingCloseTabs) || watingCloseTabs.length === 0){
+                return 
+            }
+            const { fullPath } = this.activeNav
+            const index = watingCloseTabs.findIndex(tab => tab.fullPath === fullPath)
+            const needClosedtabs = watingCloseTabs
+            let waitAfterRouterChangeCloseTabs = []
+            if(index !== -1){
+                waitAfterRouterChangeCloseTabs.push(watingCloseTabs[index])
+                needClosedtabs.splice(index,1)
+            }
+            this.$emit('close', needClosedtabs)
+            this.watingCloseTabs = waitAfterRouterChangeCloseTabs
+            console.log('afterClosed____watingCloseTabs___________',this.watingCloseTabs)
+        },
+        // 往左移动 ←
+        handlePrev() {
+            let { navLeft, navOffset } = this
+            navLeft -= navOffset
+            navLeft = this.getStartLeft(navLeft)
+            this.navLeft = navLeft
+        },
+        // 往右移动 →
+        handleNext() {
+            let { navLeft, navOffset } = this
+            navLeft += navOffset
+            navLeft = this.getEndLeft(navLeft)
+            navLeft = this.getStartLeft(navLeft)
+            this.navLeft = navLeft
+        },
+        // 小于左边边界返回左边界
+        getStartLeft(navLeft) {
+            const min = 0
+            return navLeft < min ? min : navLeft
+        },
+        // 大于有边界返回右边界
+        getEndLeft(navLeft) {
+            if (!this.$refs.container) return
+            const containerWidth = this.$refs.container.offsetWidth // 容器宽度
+            const listWidth = this.$refs.list.offsetWidth // 内容宽度
+            const max = listWidth - containerWidth // 最多可移动到的有边界距离
+            navLeft = navLeft > max ? max : navLeft
+            return navLeft
+        },
+        // nav 选择
+        handleSelect(nav) {
+            // 针对事件模块
+            if(nav.name === 'sub-event-add'){
+                let backUpNav = _.cloneDeep(nav)
+                delete backUpNav.name
+                this.$router.push(backUpNav)
+                return;
+            }
+            // 针对事件模块
+            this.$router.push(nav)
+        },
+        // 将选中的 nav 移动到可显示的位置
+        moveToVisble(nav) {
+            let { navLeft } = this
+            const $targetNav = this.$refs[nav.key][0]?.$el
+            if (!this.$refs.container) return
+            const containerWidth = this.$refs.container.offsetWidth // 容器宽度
+            const listWidth = this.$refs.list.offsetWidth // 内容宽度
+            const offsetLeft = $targetNav.offsetLeft
+            const offsetWidth = $targetNav.offsetWidth
+            // 在可视范围内
+            if (listWidth < containerWidth || offsetLeft < containerWidth - offsetWidth) {
+                navLeft = 0
+                // 不在可视范围内
+            } else if (offsetLeft > containerWidth - offsetWidth) {
+                navLeft = offsetLeft - containerWidth / 2
+                navLeft = this.getStartLeft(navLeft)
+            }
+            this.navLeft = navLeft
+        },
+        // 右键点击导航弹出菜单
+        handleContextmenu(nav, index, e) {
+            if (nav.meta?.affix) return
+            this.activeMenuIndex = index
+            const offsetLeft = this.$el.getBoundingClientRect().left
+            this.contextMenuTop = e.pageY - 40
+            this.contextMenuLeft = e.pageX - offsetLeft
+        },
+        // 关闭菜单
+        closeMenu() {
+            this.contextMenuTop = -1000
+            this.activeMenuIndex = -1
+        },
+        // 菜单选择
+        handleMenuSelect(key) {
+            const handler = this[key]
+            if(handler){
+                handler()
+                this.closeMenu()
+            }  
+        },
+        afterRemovedNav(removedNavs = [], contextMenuNav){
+            this.$nextTick(()=>{
+                const closedActiveNav = removedNavs.find(item => item.key === this.activeNavKey)
+                if(closedActiveNav){
+                    let targetNavIndex = null
+                    if(!contextMenuNav){ // 关闭全部
+                        targetNavIndex = 0
+                    }else{
+                        const nowIndex = this.navList.findIndex(item => item.key === contextMenuNav.key)
+                        targetNavIndex = nowIndex !== -1 ? nowIndex : Math.max(closedActiveNav.index - 1, 0)
+                    }
+                    const targetNav = this.navList[targetNavIndex]
+                    // 针对事件模块
+                    if(targetNav.name === 'sub-event-add'){
+                        let backUpNav = _.cloneDeep(targetNav)
+                        delete backUpNav.name
+                        this.$router.push(backUpNav).then(()=>{
+                            this.moveToVisble(backUpNav)
+                            this.$emit('close', removedNavs)
+                        })
+                        return;
+                    }
+                    this.$router.push(targetNav).then(()=>{
+                        this.moveToVisble(targetNav)
+                        this.$emit('close', removedNavs)
+                    })
+                }else{
+                    this.$emit('close', removedNavs)
+                }   
+            }) 
+        },
+        async handleClose(nav) {
+            const removedNavs = await this.removeNav(nav) 
+            this.afterRemovedNav(removedNavs,nav)
+        },
+        close() {
+            const contextMenuNav = this.navList[this.activeMenuIndex]
+            this.handleClose(contextMenuNav)
+        },
+        async closeAll() {
+            const removedNavs = await this.removeAllNavs()
+            this.afterRemovedNav(removedNavs)
+        },
+        async closeOther() {
+            const contextMenuNav = this.navList[this.activeMenuIndex]
+            const removedNavs = await this.removeOthersNavs(contextMenuNav)
+            this.afterRemovedNav(removedNavs,contextMenuNav)
+        },
+        async closeLeft() {
+            const contextMenuNav = this.navList[this.activeMenuIndex]
+            const removedNavs = await this.removeLeftNavs(contextMenuNav)
+            this.afterRemovedNav(removedNavs,contextMenuNav)
+        },
+        async closeRight() {
+            const contextMenuNav = this.navList[this.activeMenuIndex]
+            const removedNavs = await this.removeRightNavs(contextMenuNav)
+            this.afterRemovedNav(removedNavs,contextMenuNav)
+        },
+        handleDragStart(e, index) {
+            this.startIndex = index
+            // e.dataTransfer.setData('text/plain', index)
+        },
+        handleDragEnter(e, nav, index) {
+            if (index === this.startIndex || nav.meta?.affix) {
+                return
+            }
+            this.SWAP_NAV({
+                sourceIndex:this.startIndex,
+                targetIndex:index
+            })
+            this.startIndex = index
+        },
+        changeRoute(name) {
+            if (!name) return
+            if (this.navList.length >= this.max) {
+                this.$info(MAX_OVER_MESSAGE)
+                return
+            }
+            const { navList } = this
+            name = name.slice(1, name.length)
+            const nav = navList.find(nav => nav.name === name)
+            if (nav) {
+                this.$router.push(nav)
+            } else {
+                this.$router.push({
+                    name: name,
+                    query: {}
+                })
+            }
+        },
+        closeNav(name) {
+            return new Promise(resolve => {
+                const removedNavs = this.removeNav({ name })
+                this.$nextTick(()=>{
+                    resolve(removedNavs)
+                })
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+::v-deep.layout-nav {
+    position: relative;
+    // box-shadow: 0 0 7px 0 rgba(51, 51, 51, 0.1);
+    height: 40px;
+    padding:0 12px 0 6px;
+    .borderBottom();
+    background-color: #fff;
+    user-select: none;
+    position: relative;
+    flex-shrink: 0;
+    z-index: 99;
+
+    .nav {
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .nav-container {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .nav-list {
+        align-items: center;
+        height: 100%;
+        display: flex;
+        position: absolute;
+        white-space: nowrap;
+        transition: left 300ms;
+    }
+
+    .nav-prev,
+    .nav-next,
+    .nav-down {
+        min-width: 30px;
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        cursor: pointer;
+    }
+
+    .nav-prev,
+    .nav-next {
+        width: 30px;
+        z-index: 1;
+        position: relative;
+    }
+
+    .yt-button {
+        height: 28px;
+        margin: 5px 8px 5px 0px;
+        padding: 0 12px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        text-align: center;
+
+
+        &.active {
+            color:  @primary;;
+            border-color: transparent;
+            background: rgba(22, 100, 255, 0.1);
+
+            .nav-close {
+                margin-left: 5px;
+                color:  @primary;;
+
+                &:hover {
+                    color:  @primary;;
+                }
+            }
+        }
+
+        &:hover {
+            color: @primary;
+            border: 1px solid  @primary;;
+        }
+    }
+
+}
+    .nav-down {
+        padding: 0;
+        z-index: 1;
+        position: relative;
+
+        &:hover {
+            .nav-down-menu {
+                display: block;
+            }
+        }
+
+        .el-dropdown-link {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+    .nav-menu {
+        top: 0;
+        left: 300px;
+        min-width: 100px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        border-radius: @space * .5;
+        padding: @space 0;
+        .border();
+        background-color: #fff;
+        z-index: 12;
+        position: absolute;
+    }
+
+
+    .nav-down-item,
+    .nav-menu-item {
+        padding: @space @space2;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+            color: @primary;
+            background-color: @primary-bg;
+        }
+    }
+
+</style>