标签路径

08335 / hivui-platform-template

hivui平台项目模板

Browse code 标签路径 master
1 parent fda1471 commit a8918a0bd14d16ae4509904dd14c40041f24f8c8 20278 authored on 1 Sep 2021

Showing 3 changed files

Ignore Space Show notes View project/hivuiMain/components/tabpanel/panel.vue
<template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="!hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { scrollTop: 0, loaded: false, hasUrl:!(this.url==null\|\|this.url=='') } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, watch:{ active(val){ let ifm = this.$refs["iframe"]; if(val){ this.setIframeSrc(); if (ifm&&ifm.contentDocument) { this.$nextTick(()=>{ //保持原有的滚动位置 ifm.contentDocument.documentElement.scrollTop=this.scrollTop; }); } }else{ if (ifm&&ifm.contentDocument) { //保持原有的滚动位置 this.scrollTop = ifm.contentDocument.documentElement.scrollTop; } } } }, updated() { this.$parent.$emit('tab-nav-update'); }, mounted(){ if(this.active){ // console.log('___________ mounted active ! setIframeSrc') this.setIframeSrc(); } }, beforeDestroy() { // this.offIframeScroll(); }, methods:{ setIframeSrc(){ let ifm = this.$refs['iframe']; if(!this.hasUrl\|\|this.loaded==true){ if (ifm&&ifm.contentDocument) { ifm.contentWindow.document.body.scrollTop = this.scrollTop; } return; } if(ifm&&this.url.indexOf("about:blank")<0){ this.loaded = false; ifm.setAttribute('src',this.url); }else{ this.loaded = true; } }, reload(){ let ifm = this.$refs['iframe']; this.loaded=false; // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href); ifm.contentWindow.location.reload(); }, handleIframeLoad(evt){ // if(this.active==false){ // //如果没有被激活，就不加载 // return; // } let ifm = this.$refs['iframe']; if(this.title==""&& ifm.contentWindow.document.title!=""){ this.$emit("update:title", ifm.contentWindow.document.title); } if(ifm.src!=''&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } if (ifm.contentDocument) { ifm.contentWindow.window.addEventListener('beforeunload',()=>{ this.loaded=false;//右击刷新时进行加载状态 }); } this.loaded&&this.$emit('onIframeLoad',this,evt); }, } } </script> <template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="!hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { scrollTop: 0, loaded: false, hasUrl:!(this.url==null\|\|this.url=='') } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, watch:{ active(val){ let ifm = this.$refs["iframe"]; if(val){ this.setIframeSrc(); if (ifm.contentDocument) { this.$nextTick(()=>{ //保持原有的滚动位置 ifm.contentDocument.documentElement.scrollTop=this.scrollTop; }); } }else{ if (ifm.contentDocument) { //保持原有的滚动位置 this.scrollTop = ifm.contentDocument.documentElement.scrollTop; } } } }, updated() { this.$parent.$emit('tab-nav-update'); }, mounted(){ if(this.active){ // console.log('___________ mounted active ! setIframeSrc') this.setIframeSrc(); } }, beforeDestroy() { // this.offIframeScroll(); }, methods:{ setIframeSrc(){ let ifm = this.$refs['iframe']; if(!this.hasUrl\|\|this.loaded==true){ if (ifm&&ifm.contentDocument) { ifm.contentWindow.document.body.scrollTop = this.scrollTop; } return; } if(ifm&&this.url.indexOf("about:blank")<0){ this.loaded = false; ifm.setAttribute('src',this.url); }else{ this.loaded = true; } }, reload(){ let ifm = this.$refs['iframe']; this.loaded=false; // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href); ifm.contentWindow.location.reload(); }, handleIframeLoad(evt){ // if(this.active==false){ // //如果没有被激活，就不加载 // return; // } let ifm = this.$refs['iframe']; if(this.title==""&& ifm.contentWindow.document.title!=""){ this.$emit("update:title", ifm.contentWindow.document.title); } if(ifm.src!=''&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } if (ifm.contentDocument) { ifm.contentWindow.window.addEventListener('beforeunload',()=>{ this.loaded=false;//右击刷新时进行加载状态 }); } this.loaded&&this.$emit('onIframeLoad',this,evt); }, } } </script>

Ignore Space Show notes View

project/hivuiMain/components/tabpanel/panel.vue

if (ifm.contentDocument) { 
                ifm.contentWindow.window.addEventListener('beforeunload',()=>{
                    this.loaded=false;//右击刷新 时进行加载状态
                });
            }

this.loaded&&this.$emit('onIframeLoad',this,evt);
        },
    }
}
</script>

this.loaded&&this.$emit('onIframeLoad',this,evt);
        },
    }
}
</script>

Ignore Space Show notes View project/hivuiMain/views/layout/components/tabpanel/panel.vue
<template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="!hasUrl" :src="url" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { loaded: false, hasUrl:this.url==null\|\|this.url=='' } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, updated() { this.$parent.$emit('tab-nav-update'); }, methods:{ handleIframeLoad(evt){ let ifm = this.$refs['iframe']; if(ifm&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm&&ifm.contentWindow.document.body.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } this.loaded&&this.$emit('onIframeLoad',this,evt); } } } </script> <template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="!hasUrl" :src="url" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { loaded: false, hasUrl:this.url==null\|\|this.url=='' } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, updated() { this.$parent.$emit('tab-nav-update'); }, methods:{ handleIframeLoad(evt){ let ifm = this.$refs['iframe']; if(ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } this.loaded&&this.$emit('onIframeLoad',this,evt); } } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/tabpanel/panel.vue

Ignore Space Show notes View project/hivuiMain/views/layout/index.vue
<template> <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''"> <div style="height: 1px;width: 100%;position: absolute;left: 0;top: 0;z-index: 10000;" @mouseenter="showTab"></div> <Header v-show="!isFullscreen" :hasTitle="hasTitle" :sideWidth="sideWidth" v-on:hideTitle="hideTitle" ref="Header" style="box-shadow: 0 5px 7px rgba(221,221,221,0.5);z-index:10"></Header> <!-- <Navbar></Navbar> --> <Sidebar ref="Sidebar" :hasTitle="hasTitle" :sideWidth="sideWidth" :totop="totop" style="z-index: 11"></Sidebar> <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:toleft, top:totop+'px'}"></Main> </div> <div v-else class="pl-page" :class="isFullscreen?'showTab':''"> <div style="height: 1px;width: 100%;position: absolute;left: 0;top: 0;z-index: 10000;" @mouseenter="showTab"></div> <Header ref="Header" v-show="!isFullscreen"></Header> <Navbar ref="Navbar" v-show="!isFullscreen"></Navbar> <Sidebar ref="Sidebar" v-show="hasQuickNav&&!isFullscreen"></Sidebar> <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:hasQuickNav?71:0}"></Main> </div> </template> <script> import {baseURL,codeProjectName} from '@main/config' import {getMenus} from '@main/api/menu' import {Header,Navbar,Sidebar,Main} from "./components" import screenfull from 'screenfull' // import { setTimeout } from 'timers'; export default { components:{ Header,Navbar,Sidebar,Main }, provide(){ let me=this; return { addTab(item){ // url,title,uid,callback,nearest // this.addTab(item);//inject 提供的方法只能传一个参数 me.addTab(item.resUrl,item.name,item.resId,item.callback,item.nearest); // me.addTab(url,title,uid,callback,nearest); }, showTab(){ // console.log('layout index vue : showTab') me.showTab(); }, hideTab(){ // console.log('layout index vue : hideTab') me.hideTab(); } } }, data(){ return { hasTitle: true, toleft: '141px', sideWidth: '140px', totop: 50, isFullscreen: false, top: '', left: '', mainTop: '', navTop: '', timeout: null, } }, computed:{ hasQuickNav(){ return this.$store.getters.navs.length; }, layout(){ return window.localStorage.getItem('layout'); }, isTitle(){ return this.hasTitle; } }, methods:{ addTab(url,title,uid,callback,nearest){ console.log('layout addTab :',baseURL,codeProjectName,url); window.Sys.addTab(location.origin+url,title,uid,callback,nearest) }, hideTitle(name){ this.hasTitle = name; this.toleft = name?'141px':'49px'; this.sideWidth = name?'140px':'48px' }, /** * 是否全屏并按键ESC键的方法 / checkFull() { var isFull = document.fullscreenEnabled \|\| window.fullScreen \|\| document.webkitIsFullScreen \|\| document.msFullscreenEnabled // to fix : false \|\| undefined == undefined if (isFull === undefined) { isFull = false } return isFull }, handleFullScreen(){ screenfull.toggle() }, onchange(){ // console.log(this.isFullscreen) if(this.isFullscreen==true){ // this.$refs.Main.isFullscreen = true this.$refs.Sidebar.$el.style.top=0 this.$refs.Sidebar.$el.style.left=0 this.$refs.Main.$el.style.top=0 this.$refs.Main.$el.style.left=0 // console.log('222',this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style) this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none' this.$refs.Sidebar.$el.style.display = 'none' this.$refs.Main.$refs['cmp-tabs'].resize() }else{ // console.log(222) // console.log('top',this.top) this.$refs['Sidebar'].$el.style.top=this.mainTop+this.navTop+'px' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block' this.$refs.Sidebar.$el.style.display = 'block' if(window.localStorage.getItem('layout') === 'level'){ this.$refs['Main'].$el.style.top=this.navTop+'px' this.$refs['Main'].$el.style.left=this.left }else{ this.$refs['Main'].$el.style.top=this.mainTop+this.navTop+'px' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+this.navTop+'px' this.$refs['Main'].$el.style.left=this.left this.$refs['Navbar'].$el.style.top=this.navTop+'px' this.$refs.Navbar.$el.style.display='block' } this.$refs.Main.$refs['cmp-tabs'].resize() } }, showTab(){ if(this.isFullscreen){ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+'px' // this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top='50px' // console.log(this.$refs.Main.$el.style.top) if(window.localStorage.getItem('layout') === 'level'){ this.$refs.Sidebar.$el.style.display = 'block' this.$refs.Sidebar.$el.style.top = '39px' }else{ // this.$refs.Sidebar.$el.style.display = 'block' this.$refs.Navbar.$el.style.display='none'; this.$refs.Navbar.$el.style.top=0 this.$refs.Navbar.$el.style.display='block' } // this.$refs.Main.$refs['cmp-tabs'].resize() },0); } }, hideTab(){ if(this.isFullscreen){ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ this.$refs.Main.$el.style.top=0 this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none' if(window.localStorage.getItem('layout') === 'level'){ this.$refs.Sidebar.$el.style.display = 'none' }else{ this.$refs.Navbar.$el.style.display='none' } // this.$refs.Main.$refs['cmp-tabs'].resize() },0); } }, KeyDown(event) { if (event.keyCode === 122) { event.returnValue = false; this.handleFullScreen(); } } }, mounted(){ this.navTop = this.$refs.Header.$el.offsetHeight this.left = this.$refs.Main.$el.style.left console.log('left', this.isFullscreen) if(window.localStorage.getItem('layout') === 'level'){ this.totop = this.$refs.Header.$el.offsetHeight \|\| 50 }else{ this.mainTop = this.$refs.Navbar.$el.offsetHeight // console.log('mainTop', this.mainTop) } window.onresize = () => { // 全屏下监控是否按键了ESC if (!this.checkFull()) { // 全屏下按键esc后要执行的动作 this.isFullscreen = false } this.isFullscreen=screenfull.isFullscreen this.onchange() }, window.addEventListener("keydown", this.KeyDown, true);//监听按键事件 } } </script> <template> <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''"> <div style="height: 1px;width: 100%;position: absolute;left: 0;top: 0;z-index: 10000;" @mouseenter="showTab"></div> <Header v-show="!isFullscreen" :hasTitle="hasTitle" :sideWidth="sideWidth" v-on:hideTitle="hideTitle" ref="Header" style="box-shadow: 0 5px 7px rgba(221,221,221,0.5);z-index:10"></Header> <!-- <Navbar></Navbar> --> <Sidebar ref="Sidebar" :hasTitle="hasTitle" :sideWidth="sideWidth" :totop="totop" style="z-index: 11"></Sidebar> <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:toleft, top:totop+'px'}"></Main> </div> <div v-else class="pl-page" :class="isFullscreen?'showTab':''"> <div style="height: 1px;width: 100%;position: absolute;left: 0;top: 0;z-index: 10000;" @mouseenter="showTab"></div> <Header ref="Header" v-show="!isFullscreen"></Header> <Navbar ref="Navbar" v-show="!isFullscreen"></Navbar> <Sidebar ref="Sidebar" v-show="hasQuickNav&&!isFullscreen"></Sidebar> <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:hasQuickNav?71:0}"></Main> </div> </template> <script> import {baseURL,codeProjectName} from '@main/config' import {getMenus} from '@main/api/menu' import {Header,Navbar,Sidebar,Main} from "./components" import screenfull from 'screenfull' // import { setTimeout } from 'timers'; export default { components:{ Header,Navbar,Sidebar,Main }, provide(){ let me=this; return { addTab(item){ // url,title,uid,callback,nearest // this.addTab(item);//inject 提供的方法只能传一个参数 me.addTab(item.resUrl,item.name,item.resId,item.callback,item.nearest); // me.addTab(url,title,uid,callback,nearest); }, showTab(){ // console.log('layout index vue : showTab') me.showTab(); }, hideTab(){ // console.log('layout index vue : hideTab') me.hideTab(); } } }, data(){ return { hasTitle: true, toleft: '141px', sideWidth: '140px', totop: 50, isFullscreen: false, top: '', left: '', mainTop: '', navTop: '', timeout: null, } }, computed:{ hasQuickNav(){ return this.$store.getters.navs.length; }, layout(){ return window.localStorage.getItem('layout'); }, isTitle(){ return this.hasTitle; } }, methods:{ addTab(url,title,uid,callback,nearest){ console.log('layout addTab :',baseURL,codeProjectName,url); window.Sys.addTab(baseURL+codeProjectName+url,title,uid,callback,nearest) }, hideTitle(name){ this.hasTitle = name; this.toleft = name?'141px':'49px'; this.sideWidth = name?'140px':'48px' }, /* * 是否全屏并按键ESC键的方法 */ checkFull() { var isFull = document.fullscreenEnabled \|\| window.fullScreen \|\| document.webkitIsFullScreen \|\| document.msFullscreenEnabled // to fix : false \|\| undefined == undefined if (isFull === undefined) { isFull = false } return isFull }, handleFullScreen(){ screenfull.toggle() }, onchange(){ // console.log(this.isFullscreen) if(this.isFullscreen==true){ // this.$refs.Main.isFullscreen = true this.$refs.Sidebar.$el.style.top=0 this.$refs.Sidebar.$el.style.left=0 this.$refs.Main.$el.style.top=0 this.$refs.Main.$el.style.left=0 // console.log('222',this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style) this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none' this.$refs.Sidebar.$el.style.display = 'none' this.$refs.Main.$refs['cmp-tabs'].resize() }else{ // console.log(222) // console.log('top',this.top) this.$refs['Sidebar'].$el.style.top=this.mainTop+this.navTop+'px' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block' this.$refs.Sidebar.$el.style.display = 'block' if(window.localStorage.getItem('layout') === 'level'){ this.$refs['Main'].$el.style.top=this.navTop+'px' this.$refs['Main'].$el.style.left=this.left }else{ this.$refs['Main'].$el.style.top=this.mainTop+this.navTop+'px' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+this.navTop+'px' this.$refs['Main'].$el.style.left=this.left this.$refs['Navbar'].$el.style.top=this.navTop+'px' this.$refs.Navbar.$el.style.display='block' } this.$refs.Main.$refs['cmp-tabs'].resize() } }, showTab(){ if(this.isFullscreen){ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block' this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+'px' // this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top='50px' // console.log(this.$refs.Main.$el.style.top) if(window.localStorage.getItem('layout') === 'level'){ this.$refs.Sidebar.$el.style.display = 'block' this.$refs.Sidebar.$el.style.top = '39px' }else{ // this.$refs.Sidebar.$el.style.display = 'block' this.$refs.Navbar.$el.style.display='none'; this.$refs.Navbar.$el.style.top=0 this.$refs.Navbar.$el.style.display='block' } // this.$refs.Main.$refs['cmp-tabs'].resize() },0); } }, hideTab(){ if(this.isFullscreen){ clearTimeout(this.timeout); this.timeout = setTimeout(()=>{ this.$refs.Main.$el.style.top=0 this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none' if(window.localStorage.getItem('layout') === 'level'){ this.$refs.Sidebar.$el.style.display = 'none' }else{ this.$refs.Navbar.$el.style.display='none' } // this.$refs.Main.$refs['cmp-tabs'].resize() },0); } }, KeyDown(event) { if (event.keyCode === 122) { event.returnValue = false; this.handleFullScreen(); } } }, mounted(){ this.navTop = this.$refs.Header.$el.offsetHeight this.left = this.$refs.Main.$el.style.left console.log('left', this.isFullscreen) if(window.localStorage.getItem('layout') === 'level'){ this.totop = this.$refs.Header.$el.offsetHeight \|\| 50 }else{ this.mainTop = this.$refs.Navbar.$el.offsetHeight // console.log('mainTop', this.mainTop) } window.onresize = () => { // 全屏下监控是否按键了ESC if (!this.checkFull()) { // 全屏下按键esc后要执行的动作 this.isFullscreen = false } this.isFullscreen=screenfull.isFullscreen this.onchange() }, window.addEventListener("keydown", this.KeyDown, true);//监听按键事件 } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/index.vue

<template>
    <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''">
        <div style="height: 1px;width: 100%;position: absolute;left: 0;top: 0;z-index: 10000;" @mouseenter="showTab"></div>
        <Header v-show="!isFullscreen" :hasTitle="hasTitle" :sideWidth="sideWidth" v-on:hideTitle="hideTitle" ref="Header" style="box-shadow: 0 5px 7px rgba(221,221,221,0.5);z-index:10"></Header>
        
        <Sidebar ref="Sidebar" :hasTitle="hasTitle" :sideWidth="sideWidth" :totop="totop" style="z-index: 11"></Sidebar>
        <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:toleft, top:totop+'px'}"></Main>
    </div>
    <div v-else class="pl-page" :class="isFullscreen?'showTab':''">
        <div style="height: 1px;width: 100%;position: absolute;left: 0;top: 0;z-index: 10000;" @mouseenter="showTab"></div>
        <Header ref="Header" v-show="!isFullscreen"></Header>
        <Navbar ref="Navbar" v-show="!isFullscreen"></Navbar>
        <Sidebar ref="Sidebar" v-show="hasQuickNav&&!isFullscreen"></Sidebar>
        <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:hasQuickNav?71:0}"></Main>
    </div>
</template>
<script>
import {baseURL,codeProjectName} from '@main/config'
import {getMenus} from '@main/api/menu'
import {Header,Navbar,Sidebar,Main} from "./components"
import screenfull from 'screenfull'
// import { setTimeout } from 'timers';
export default {    
    components:{
        Header,Navbar,Sidebar,Main
    },
    provide(){
        let me=this;
        return {
            addTab(item){
                // url,title,uid,callback,nearest                
                // this.addTab(item);//inject 提供的方法只能 传一个参数
                me.addTab(item.resUrl,item.name,item.resId,item.callback,item.nearest);
                // me.addTab(url,title,uid,callback,nearest);
            },
            showTab(){
                // console.log('layout index vue : showTab')
                me.showTab();
            },
            hideTab(){
                // console.log('layout index vue : hideTab')
                me.hideTab();
            }
        }
    },
    data(){
        return {
            hasTitle: true,
            toleft: '141px',
            sideWidth: '140px',
            totop: 50,
            isFullscreen: false,
            top: '',
            left: '',
            mainTop: '',
            navTop: '',
            timeout: null,
        }
    },
    computed:{
        hasQuickNav(){
            return this.$store.getters.navs.length;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        isTitle(){
            return this.hasTitle;
        }
    },
    methods:{
        addTab(url,title,uid,callback,nearest){
            console.log('layout addTab :',baseURL,codeProjectName,url);
            window.Sys.addTab(location.origin+url,title,uid,callback,nearest)
        },
        hideTitle(name){
            this.hasTitle = name;
            this.toleft = name?'141px':'49px';
            this.sideWidth = name?'140px':'48px'
        },
        /**
         * 是否全屏并按键ESC键的方法
         */
        checkFull() {
            var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
            // to fix : false || undefined == undefined
            if (isFull === undefined) {
                isFull = false
            }
            return isFull
        },
         handleFullScreen(){
            screenfull.toggle()
        },
        onchange(){
            // console.log(this.isFullscreen)
            if(this.isFullscreen==true){
                // this.$refs.Main.isFullscreen = true
                this.$refs.Sidebar.$el.style.top=0
                this.$refs.Sidebar.$el.style.left=0
                this.$refs.Main.$el.style.top=0
                this.$refs.Main.$el.style.left=0
                // console.log('222',this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style)
                this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none'
                this.$refs.Sidebar.$el.style.display = 'none'
                this.$refs.Main.$refs['cmp-tabs'].resize()
            }else{
                // console.log(222)
                // console.log('top',this.top)
                this.$refs['Sidebar'].$el.style.top=this.mainTop+this.navTop+'px'
                this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'
                this.$refs.Sidebar.$el.style.display = 'block'
                if(window.localStorage.getItem('layout') === 'level'){
                    this.$refs['Main'].$el.style.top=this.navTop+'px'
                    this.$refs['Main'].$el.style.left=this.left
                }else{
                    this.$refs['Main'].$el.style.top=this.mainTop+this.navTop+'px'
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+this.navTop+'px'
                    this.$refs['Main'].$el.style.left=this.left
                    this.$refs['Navbar'].$el.style.top=this.navTop+'px'
                    this.$refs.Navbar.$el.style.display='block'
                }
                this.$refs.Main.$refs['cmp-tabs'].resize()
            }
        },
        showTab(){
            if(this.isFullscreen){
                
                clearTimeout(this.timeout);
                this.timeout = setTimeout(()=>{
                    
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+'px'
                    // this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top='50px'
                    // console.log(this.$refs.Main.$el.style.top)
                    
                    if(window.localStorage.getItem('layout') === 'level'){
                        this.$refs.Sidebar.$el.style.display = 'block'
                        this.$refs.Sidebar.$el.style.top = '39px'
                    }else{
                        // this.$refs.Sidebar.$el.style.display = 'block'
                        this.$refs.Navbar.$el.style.display='none';
                        this.$refs.Navbar.$el.style.top=0
                        this.$refs.Navbar.$el.style.display='block'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].resize()

},0);
            }
        },
        hideTab(){
            if(this.isFullscreen){  
                clearTimeout(this.timeout);
                this.timeout = setTimeout(()=>{
                    this.$refs.Main.$el.style.top=0
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none'
                    if(window.localStorage.getItem('layout') === 'level'){
                        this.$refs.Sidebar.$el.style.display = 'none'
                    }else{
                        this.$refs.Navbar.$el.style.display='none'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].resize()
                },0);
                
            }
        },
        KeyDown(event) {
            if (event.keyCode === 122) {
                event.returnValue = false;
                this.handleFullScreen();
            }
        }
    },
    mounted(){
        this.navTop = this.$refs.Header.$el.offsetHeight
        this.left = this.$refs.Main.$el.style.left
        console.log('left', this.isFullscreen)
        if(window.localStorage.getItem('layout') === 'level'){
            this.totop = this.$refs.Header.$el.offsetHeight || 50
        }else{
            this.mainTop = this.$refs.Navbar.$el.offsetHeight
            // console.log('mainTop', this.mainTop)
        }
        window.onresize = () => {
            // 全屏下监控是否按键了ESC
            if (!this.checkFull()) {
            // 全屏下按键esc后要执行的动作
                this.isFullscreen = false
            }
            this.isFullscreen=screenfull.isFullscreen
            this.onchange()
        },
        window.addEventListener("keydown", this.KeyDown, true);//监听按键事件
    }
}
</script>

<template>
    <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''">
        <div style="height: 1px;width: 100%;position: absolute;left: 0;top: 0;z-index: 10000;" @mouseenter="showTab"></div>
        <Header v-show="!isFullscreen" :hasTitle="hasTitle" :sideWidth="sideWidth" v-on:hideTitle="hideTitle" ref="Header" style="box-shadow: 0 5px 7px rgba(221,221,221,0.5);z-index:10"></Header>
        
        <Sidebar ref="Sidebar" :hasTitle="hasTitle" :sideWidth="sideWidth" :totop="totop" style="z-index: 11"></Sidebar>
        <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:toleft, top:totop+'px'}"></Main>
    </div>
    <div v-else class="pl-page" :class="isFullscreen?'showTab':''">
        <div style="height: 1px;width: 100%;position: absolute;left: 0;top: 0;z-index: 10000;" @mouseenter="showTab"></div>
        <Header ref="Header" v-show="!isFullscreen"></Header>
        <Navbar ref="Navbar" v-show="!isFullscreen"></Navbar>
        <Sidebar ref="Sidebar" v-show="hasQuickNav&&!isFullscreen"></Sidebar>
        <Main ref="Main" @onFullScreen="handleFullScreen" :style="{left:hasQuickNav?71:0}"></Main>
    </div>
</template>
<script>
import {baseURL,codeProjectName} from '@main/config'
import {getMenus} from '@main/api/menu'
import {Header,Navbar,Sidebar,Main} from "./components"
import screenfull from 'screenfull'
// import { setTimeout } from 'timers';
export default {    
    components:{
        Header,Navbar,Sidebar,Main
    },
    provide(){
        let me=this;
        return {
            addTab(item){
                // url,title,uid,callback,nearest                
                // this.addTab(item);//inject 提供的方法只能 传一个参数
                me.addTab(item.resUrl,item.name,item.resId,item.callback,item.nearest);
                // me.addTab(url,title,uid,callback,nearest);
            },
            showTab(){
                // console.log('layout index vue : showTab')
                me.showTab();
            },
            hideTab(){
                // console.log('layout index vue : hideTab')
                me.hideTab();
            }
        }
    },
    data(){
        return {
            hasTitle: true,
            toleft: '141px',
            sideWidth: '140px',
            totop: 50,
            isFullscreen: false,
            top: '',
            left: '',
            mainTop: '',
            navTop: '',
            timeout: null,
        }
    },
    computed:{
        hasQuickNav(){
            return this.$store.getters.navs.length;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        isTitle(){
            return this.hasTitle;
        }
    },
    methods:{
        addTab(url,title,uid,callback,nearest){
            console.log('layout addTab :',baseURL,codeProjectName,url);
            window.Sys.addTab(baseURL+codeProjectName+url,title,uid,callback,nearest)
        },
        hideTitle(name){
            this.hasTitle = name;
            this.toleft = name?'141px':'49px';
            this.sideWidth = name?'140px':'48px'
        },
        /**
         * 是否全屏并按键ESC键的方法
         */
        checkFull() {
            var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
            // to fix : false || undefined == undefined
            if (isFull === undefined) {
                isFull = false
            }
            return isFull
        },
         handleFullScreen(){
            screenfull.toggle()
        },
        onchange(){
            // console.log(this.isFullscreen)
            if(this.isFullscreen==true){
                // this.$refs.Main.isFullscreen = true
                this.$refs.Sidebar.$el.style.top=0
                this.$refs.Sidebar.$el.style.left=0
                this.$refs.Main.$el.style.top=0
                this.$refs.Main.$el.style.left=0
                // console.log('222',this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style)
                this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='none'
                this.$refs.Sidebar.$el.style.display = 'none'
                this.$refs.Main.$refs['cmp-tabs'].resize()
            }else{
                // console.log(222)
                // console.log('top',this.top)
                this.$refs['Sidebar'].$el.style.top=this.mainTop+this.navTop+'px'
                this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'
                this.$refs.Sidebar.$el.style.display = 'block'
                if(window.localStorage.getItem('layout') === 'level'){
                    this.$refs['Main'].$el.style.top=this.navTop+'px'
                    this.$refs['Main'].$el.style.left=this.left
                }else{
                    this.$refs['Main'].$el.style.top=this.mainTop+this.navTop+'px'
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+this.navTop+'px'
                    this.$refs['Main'].$el.style.left=this.left
                    this.$refs['Navbar'].$el.style.top=this.navTop+'px'
                    this.$refs.Navbar.$el.style.display='block'
                }
                this.$refs.Main.$refs['cmp-tabs'].resize()
            }
        },
        showTab(){
            if(this.isFullscreen){
                
                clearTimeout(this.timeout);
                this.timeout = setTimeout(()=>{
                    
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top=this.mainTop+'px'
                    // this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.top='50px'
                    // console.log(this.$refs.Main.$el.style.top)
                    
                    if(window.localStorage.getItem('layout') === 'level'){
                        this.$refs.Sidebar.$el.style.display = 'block'
                        this.$refs.Sidebar.$el.style.top = '39px'
                    }else{
                        // this.$refs.Sidebar.$el.style.display = 'block'
                        this.$refs.Navbar.$el.style.display='none';
                        this.$refs.Navbar.$el.style.top=0
                        this.$refs.Navbar.$el.style.display='block'
                    }
                    // this.$refs.Main.$refs['cmp-tabs'].resize()

Show line notes below