@中文描述:sidebar显示问题 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:sidebar显示问题 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent e8c5cec commit 9e9646fe6eb5af6c9b8a72e6e405b96e1bce13a1 20278 authored on 7 May

Showing 2 changed files

Ignore Space Show notes View project/hivuiLogin/views/register.vue
<template> <div class="register"> <div class="register_hd"> <div class="register_logo" :style="register_logo_style"> <img :src="config.loginLogoImg"> </div> <div class="register_text">{{$t('hivuiLogin_register_title')}}</div> </div> <div class="register_main" :style="bgStyle"> <div class="register_box"> <h3>{{$t('hivuiLogin_register_box_title')}}</h3> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="username"> <el-input ref="username" v-model="registerForm.username" type="text" :placeholder="$t('hivuiLogin_register_user')"></el-input> </el-form-item> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_register_phone')"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw1"> <el-input ref="pw1" v-model="registerForm.pw1" type="password" :placeholder="$t('hivuiLogin_register_pw1')"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field" prop="pw2"> <el-input ref="pw2" v-model="registerForm.pw2" type="password" :placeholder="$t('hivuiLogin_register_pw2')"></el-input> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_register_captcha')"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha" >{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button> </el-form-item> <!-- <el-form-item class="register_field" prop="email"> <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input> </el-form-item>--> <el-button class="register_submit" :loading="registerLoading" type="primary" @click="register" >{{$t('hivuiLogin_register_submit')}}</el-button> </el-form> <div class="register_tips"> {{$t('hivuiLogin_register_tiptext1')}} <span @click="goLoginPage">{{$t('hivuiLogin_register_tiptext2')}}</span> </div> </div> </div> <div class="register_ft" v-html="config.copyright"></div> </div> </template> <script> import _loginLogoImg from "../assets/Logo1.png" import _registerBgImg from "../assets/register/bg.png" import { captcha, register } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "register", components: { pwStrength }, data() { return { registerForm: { phone: "", pw1: "", pw2: "", captcha: "", email: "" }, minPw: 4, registerRules: { username: [ { required: true, message: this.$t('hivuiLogin_register_valid_user'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length > 20) { callback(new Error(this.$t('hivuiLogin_register_valid_user2'))); } else { callback(); } }, trigger: "blur" } ], phone: [ { required: true, message: this.$t('hivuiLogin_register_valid_phone'), trigger: "blur" }, { validator: (rule, value, callback) => { if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error(this.$t('hivuiLogin_register_valid_phone2'))); } else { callback(); } }, trigger: "blur" } ], pw1: [ { required: true, message: this.$t('hivuiLogin_register_valid_pw'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length < this.minPw) { callback(new Error(this.$t('hivuiLogin_register_valid_pw_msg') + this.minPw + this.$t('hivuiLogin_register_valid_pw_msg2'))); } else { callback(); } }, trigger: "blur" } ], pw2: [ { required: true, message: this.$t('hivuiLogin_register_valid_pw2'), trigger: "blur" }, { validator: (rule, value, callback) => { if (value !== this.registerForm.pw1) { callback(new Error(this.$t('hivuiLogin_register_valid_pw2_msg'))); } else { callback(); } }, trigger: "blur" } ], captcha: [{ required: true, message: this.$t('hivuiLogin_register_valid_captcha'), trigger: "blur" }] /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading: false, registerLoading: false, captchaTimer: 0, config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|206, registerBgImg: window.customSysCofig?.registerBgImg\|\|_registerBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.registerBgImg + ")", }; }, register_logo_style(){ return { "width":(this.config.loginLogoImg_width / 1920) * 100+"vw", "height":(this.config.loginLogoImg_height / 1920) * 100+"vw", } } }, mounted() {}, methods: { //获取验证码 getCaptcha() { this.$refs.registerForm.validateField("phone", errMsg => { if (!errMsg) { let me = this; me.captchaTimer = 60; me.captchaLoading = true; captcha({ phone: me.registerForm.phone }) .then(res => { me.captchaLoading = false; }) .catch(err => { me.captchaLoading = false; }); let _timer = setInterval(() => { --me.captchaTimer; if (me.captchaTimer == 0) { clearInterval(_timer); } }, 1000); } }); }, //注册 register() { let me = this; this.$refs.registerForm.validate(valid => { if (valid) { me.registerLoading = true; register({ type: "phone", username:me.registerForm.username, phone: me.registerForm.phone, password: md5(me.registerForm.pw2), captcha: me.registerForm.captcha }) .then(res => { me.$message({ message: me.$t('hivuiLogin_register_success'), type: "success" }); setTimeout(() => { this.$router.push("/"); }, 1000 * 2); }) .catch(err => { me.registerLoading = false; }); } }); }, goLoginPage() { this.$router.push("/"); } } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } $headH: px2vw(130); $footH: px2vw(172); .register { height: 100%; overflow: hidden; .register_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .register_logo { width: px2vw(206); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .register_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .register_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/register/bg.png") no-repeat center center; background-size: cover; .register_box { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(1200); height: px2vw(655); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(360) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .register_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } ::v-deep.el-form-item__content{ line-height: px2vw(50); font-size: px2vw(14); } ::v-deep.el-form-item__error{ padding-top: px2vw(4); } .register_pwStrength { margin-top: px2vw(10); } &.register_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .register_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit { height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top: px2vw(10); } .register_tips { padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } } } .register_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; ::v-deep a{ margin-left:5px; color:#0f406c; &:hover{ color:#409eff; } } } } </style> <template> <div class="register"> <div class="register_hd"> <div class="register_logo" :style="register_logo_style"> <img :src="config.loginLogoImg"> </div> <div class="register_text">{{$t('hivuiLogin_register_title')}}</div> </div> <div class="register_main" :style="bgStyle"> <div class="register_box"> <h3>{{$t('hivuiLogin_register_box_title')}}</h3> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="username"> <el-input ref="username" v-model="registerForm.username" type="text" :placeholder="$t('hivuiLogin_register_user')"></el-input> </el-form-item> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_register_phone')"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw1"> <el-input ref="pw1" v-model="registerForm.pw1" type="password" :placeholder="$t('hivuiLogin_register_pw1')"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field" prop="pw2"> <el-input ref="pw2" v-model="registerForm.pw2" type="password" :placeholder="$t('hivuiLogin_register_pw2')"></el-input> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_register_captcha')"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha" >{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button> </el-form-item> <!-- <el-form-item class="register_field" prop="email"> <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input> </el-form-item>--> <el-button class="register_submit" :loading="registerLoading" type="primary" @click="register" >{{$t('hivuiLogin_register_submit')}}</el-button> </el-form> <div class="register_tips"> {{$t('hivuiLogin_register_tiptext1')}} <span @click="goLoginPage">{{$t('hivuiLogin_register_tiptext2')}}</span> </div> </div> </div> <div class="register_ft" v-html="config.copyright"></div> </div> </template> <script> import _loginLogoImg from "../assets/Logo1.png" import _registerBgImg from "../assets/register/bg.png" import { captcha, register } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "register", components: { pwStrength }, data() { return { registerForm: { phone: "", pw1: "", pw2: "", captcha: "", email: "" }, minPw: 4, registerRules: { username: [ { required: true, message: this.$t('hivuiLogin_register_valid_user'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length > 20) { callback(new Error(this.$t('hivuiLogin_register_valid_user2'))); } else { callback(); } }, trigger: "blur" } ], phone: [ { required: true, message: this.$t('hivuiLogin_register_valid_phone'), trigger: "blur" }, { validator: (rule, value, callback) => { if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error(this.$t('hivuiLogin_register_valid_phone2'))); } else { callback(); } }, trigger: "blur" } ], pw1: [ { required: true, message: this.$t('hivuiLogin_register_valid_pw'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length < this.minPw) { callback(new Error(this.$t('hivuiLogin_register_valid_pw_msg') + this.minPw + this.$t('hivuiLogin_register_valid_pw_msg2'))); } else { callback(); } }, trigger: "blur" } ], pw2: [ { required: true, message: this.$t('hivuiLogin_register_valid_pw2'), trigger: "blur" }, { validator: (rule, value, callback) => { if (value !== this.registerForm.pw1) { callback(new Error(this.$t('hivuiLogin_register_valid_pw2_msg'))); } else { callback(); } }, trigger: "blur" } ], captcha: [{ required: true, message: this.$t('hivuiLogin_register_valid_captcha'), trigger: "blur" }] /email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]/ }, captchaLoading: false, registerLoading: false, captchaTimer: 0, config: { title: window.customSysCofig?.loginTitle\|\|this.$t('hivuiLogin_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo\|\|_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h\|\|56, loginLogoImg_width: window.customSysCofig?.loginLogo_w\|\|236, registerBgImg: window.customSysCofig?.registerBgImg\|\|_registerBgImg, copyright: window.customSysCofig?.copyright\|\|this.$t('hivuiLogin_main_def_copyright'), }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.registerBgImg + ")", }; }, register_logo_style(){ return { "width":(this.config.loginLogoImg_width / 1920) * 100+"vw", "height":(this.config.loginLogoImg_height / 1920) * 100+"vw", } } }, mounted() {}, methods: { //获取验证码 getCaptcha() { this.$refs.registerForm.validateField("phone", errMsg => { if (!errMsg) { let me = this; me.captchaTimer = 60; me.captchaLoading = true; captcha({ phone: me.registerForm.phone }) .then(res => { me.captchaLoading = false; }) .catch(err => { me.captchaLoading = false; }); let _timer = setInterval(() => { --me.captchaTimer; if (me.captchaTimer == 0) { clearInterval(_timer); } }, 1000); } }); }, //注册 register() { let me = this; this.$refs.registerForm.validate(valid => { if (valid) { me.registerLoading = true; register({ type: "phone", username:me.registerForm.username, phone: me.registerForm.phone, password: md5(me.registerForm.pw2), captcha: me.registerForm.captcha }) .then(res => { me.$message({ message: me.$t('hivuiLogin_register_success'), type: "success" }); setTimeout(() => { this.$router.push("/"); }, 1000 * 2); }) .catch(err => { me.registerLoading = false; }); } }); }, goLoginPage() { this.$router.push("/"); } } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } $headH: px2vw(130); $footH: px2vw(172); .register { height: 100%; overflow: hidden; .register_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .register_logo { width: px2vw(236); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .register_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .register_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/register/bg.png") no-repeat center center; background-size: cover; .register_box { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(1200); height: px2vw(655); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(360) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .register_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } ::v-deep.el-form-item__content{ line-height: px2vw(50); font-size: px2vw(14); } ::v-deep.el-form-item__error{ padding-top: px2vw(4); } .register_pwStrength { margin-top: px2vw(10); } &.register_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .register_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit { height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top: px2vw(10); } .register_tips { padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } } } .register_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; ::v-deep a{ margin-left:5px; color:#0f406c; &:hover{ color:#409eff; } } } } </style>

Ignore Space Show notes View

project/hivuiLogin/views/register.vue

<template>
  <div class="register">
    <div class="register_hd">
      <div class="register_logo" :style="register_logo_style">
        <img :src="config.loginLogoImg">
      </div>
      <div class="register_text">{{$t('hivuiLogin_register_title')}}</div>
    </div>
    <div class="register_main" :style="bgStyle">
      <div class="register_box">
        <h3>{{$t('hivuiLogin_register_box_title')}}</h3>
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules">
          <el-form-item class="register_field" prop="username">
            <el-input ref="username" v-model="registerForm.username" type="text" :placeholder="$t('hivuiLogin_register_user')"></el-input>
          </el-form-item>
          <el-form-item class="register_field" prop="phone">
            <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('hivuiLogin_register_phone')"></el-input>
          </el-form-item>
          <el-form-item class="register_field" prop="pw1">
            <el-input ref="pw1" v-model="registerForm.pw1" type="password" :placeholder="$t('hivuiLogin_register_pw1')"></el-input>
            <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength>
          </el-form-item>
          <el-form-item class="register_field" prop="pw2">
            <el-input ref="pw2" v-model="registerForm.pw2" type="password" :placeholder="$t('hivuiLogin_register_pw2')"></el-input>
          </el-form-item>
          <el-form-item class="register_field register_row" prop="captcha">
            <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('hivuiLogin_register_captcha')"></el-input>
            <el-button
              class="register_capbtn"
              :loading="captchaLoading"
              type="primary"
              :disabled="captchaTimer==0?false:true"
              @click="getCaptcha"
            >{{captchaTimer==0?$t('hivuiLogin_reset_getCaptcha'):(captchaTimer+$t('hivuiLogin_reset_getAgain'))}}</el-button>
          </el-form-item>
          
          <el-button
            class="register_submit"
            :loading="registerLoading"
            type="primary"
            @click="register"
          >{{$t('hivuiLogin_register_submit')}}</el-button>
        </el-form>
        <div class="register_tips">
          {{$t('hivuiLogin_register_tiptext1')}}
          <span @click="goLoginPage">{{$t('hivuiLogin_register_tiptext2')}}</span>
        </div>
      </div>
    </div>
    <div class="register_ft" v-html="config.copyright"></div>
  </div>
</template>

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="fullScreenTabHandleStyle" @mouseenter="showTab"></div> <Header v-show="!isFullscreen" :hasTitle="hasTitle" :logoWidth="logoWidth" 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="fullScreenTabHandleStyle" @mouseenter="showTab"></div> <Header ref="Header" :logoWidth="logoWidth" 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,requestUrl} from '@main/config' import {getMenus} from '@main/api/menu' import {checkUrl} from '@main/utils/index' 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.ssoUrl\|\|item.resUrl,item.name,item.resId,item.callback,item.nearest,item.openType); // 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: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'141px'):'71px', sideWidth: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'140px'):'70px', logoWidth:'140px', totop: 50, isFullscreen: false, top: '', left: '', mainTop: '', navTop: '', timeout: null, sysConfig: this.$store.state.app.config, } }, computed:{ hasQuickNav(){ return this.$store.getters.navs.length; }, layout(){ return window.localStorage.getItem('layout'); }, isTitle(){ return this.hasTitle; }, fullScreenTabHandleStyle(){ let baseStyle={ position: "absolute", left: 0, top: 0, "z-index": 10000, }; if(this.layout=="level"){ Object.assign(baseStyle,{ height: "100%", width: "1px", }); }else{ Object.assign(baseStyle,{ height: "1px", width: "100%", }); } return baseStyle; } }, methods:{ addTab(url,title,uid,callback,nearest,openType){ console.log('layout addTab :',baseURL,codeProjectName,url); let __url=url; if(!checkUrl(url)){ //根据setting配置是否带e5 __url=(window._global?location.origin:window.HIVUI_SETTING.serverUrl)+url; } if(openType==2){//弹窗 this.$refs.Main.menuOpenList.push({ title:title, url:__url, uid:uid, }); }else if(openType==3){//浏览器标签打开 window.open(__url,"_blank"); }else{//主界面框架标签打开 window.Sys.addTab(__url,title,uid,callback,nearest); } }, hideTitle(name){ this.hasTitle = name; this.toleft = name?'71px':'49px'; this.sideWidth = name?'70px':'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' if(!this.sysConfig.isSinglePage){ this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block'; } if(layout != 'level'&&hasQuickNav&&!isFullscreen){ 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(()=>{ if(!this.sysConfig.isSinglePage){ 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' if(this.sysConfig.isSinglePage){ this.$refs.Sidebar.$el.style.top = '0px' }else{ 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(); } } }, created(){ //单页模式强制左右布局 if(this.sysConfig.isSinglePage){ window.localStorage.setItem('layout','level'); }else if(this.sysConfig.layout&&!window.localStorage.getItem('layout')){ if(this.sysConfig.layout=="top"){ window.localStorage.setItem('layout','vertical'); }else if(this.sysConfig.layout=="left"){ window.localStorage.setItem('layout','level'); } } }, 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) } this.onchange(); window.onresize = () => { // 全屏下监控是否按键了ESC if (!this.checkFull()) { // 全屏下按键esc后要执行的动作 this.isFullscreen = false } this.isFullscreen=screenfull.isFullscreen this.onchange() }, window.addEventListener("keydown", this.KeyDown, true);//监听按键事件 } } </script> <style lang="less" scoped> .menuOpenDialog{ ::v-deep .el-dialog__body{ padding-top:0; } } </style> <template> <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''"> <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div> <Header v-show="!isFullscreen" :hasTitle="hasTitle" :logoWidth="logoWidth" 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="fullScreenTabHandleStyle" @mouseenter="showTab"></div> <Header ref="Header" :logoWidth="logoWidth" 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,requestUrl} from '@main/config' import {getMenus} from '@main/api/menu' import {checkUrl} from '@main/utils/index' 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.ssoUrl\|\|item.resUrl,item.name,item.resId,item.callback,item.nearest,item.openType); // 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: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'141px'):'71px', sideWidth: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'140px'):'70px', logoWidth:'140px', totop: 50, isFullscreen: false, top: '', left: '', mainTop: '', navTop: '', timeout: null, sysConfig: this.$store.state.app.config, } }, computed:{ hasQuickNav(){ return this.$store.getters.navs.length; }, layout(){ return window.localStorage.getItem('layout'); }, isTitle(){ return this.hasTitle; }, fullScreenTabHandleStyle(){ let baseStyle={ position: "absolute", left: 0, top: 0, "z-index": 10000, }; if(this.layout=="level"){ Object.assign(baseStyle,{ height: "100%", width: "1px", }); }else{ Object.assign(baseStyle,{ height: "1px", width: "100%", }); } return baseStyle; } }, methods:{ addTab(url,title,uid,callback,nearest,openType){ console.log('layout addTab :',baseURL,codeProjectName,url); let __url=url; if(!checkUrl(url)){ //根据setting配置是否带e5 __url=(window._global?location.origin:window.HIVUI_SETTING.serverUrl)+url; } if(openType==2){//弹窗 this.$refs.Main.menuOpenList.push({ title:title, url:__url, uid:uid, }); }else if(openType==3){//浏览器标签打开 window.open(__url,"_blank"); }else{//主界面框架标签打开 window.Sys.addTab(__url,title,uid,callback,nearest); } }, hideTitle(name){ this.hasTitle = name; this.toleft = name?'71px':'49px'; this.sideWidth = name?'70px':'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' if(!this.sysConfig.isSinglePage){ 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(()=>{ if(!this.sysConfig.isSinglePage){ 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' if(this.sysConfig.isSinglePage){ this.$refs.Sidebar.$el.style.top = '0px' }else{ 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(); } } }, created(){ //单页模式强制左右布局 if(this.sysConfig.isSinglePage){ window.localStorage.setItem('layout','level'); }else if(this.sysConfig.layout&&!window.localStorage.getItem('layout')){ if(this.sysConfig.layout=="top"){ window.localStorage.setItem('layout','vertical'); }else if(this.sysConfig.layout=="left"){ window.localStorage.setItem('layout','level'); } } }, 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) } this.onchange(); window.onresize = () => { // 全屏下监控是否按键了ESC if (!this.checkFull()) { // 全屏下按键esc后要执行的动作 this.isFullscreen = false } this.isFullscreen=screenfull.isFullscreen this.onchange() }, window.addEventListener("keydown", this.KeyDown, true);//监听按键事件 } } </script> <style lang="less" scoped> .menuOpenDialog{ ::v-deep .el-dialog__body{ padding-top:0; } } </style>

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="fullScreenTabHandleStyle" @mouseenter="showTab"></div>
        <Header v-show="!isFullscreen" :hasTitle="hasTitle" :logoWidth="logoWidth" 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="fullScreenTabHandleStyle" @mouseenter="showTab"></div>
        <Header ref="Header" :logoWidth="logoWidth" 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,requestUrl} from '@main/config'
import {getMenus} from '@main/api/menu'
import {checkUrl} from '@main/utils/index'
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.ssoUrl||item.resUrl,item.name,item.resId,item.callback,item.nearest,item.openType);
                // 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: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'141px'):'71px',
            sideWidth: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'140px'):'70px',
            logoWidth:'140px',
            totop: 50,
            isFullscreen: false,
            top: '',
            left: '',
            mainTop: '',
            navTop: '',
            timeout: null,
            sysConfig: this.$store.state.app.config,
        }
    },
    computed:{
        hasQuickNav(){
            return this.$store.getters.navs.length;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        isTitle(){
            return this.hasTitle;
        },
        fullScreenTabHandleStyle(){
            let baseStyle={
                position: "absolute",
                left: 0,
                top: 0,
                "z-index": 10000,
            };
            if(this.layout=="level"){
                Object.assign(baseStyle,{
                    height: "100%",
                    width: "1px",
                });
            }else{
                Object.assign(baseStyle,{
                    height: "1px",
                    width: "100%",
                });
            }
            return baseStyle;
        }
    },
    methods:{
        addTab(url,title,uid,callback,nearest,openType){
            console.log('layout addTab :',baseURL,codeProjectName,url);
            let __url=url;
            if(!checkUrl(url)){
                //根据setting配置是否带e5
                __url=(window._global?location.origin:window.HIVUI_SETTING.serverUrl)+url;
            }
            if(openType==2){//弹窗
                this.$refs.Main.menuOpenList.push({
                    title:title,
                    url:__url,
                    uid:uid,
                });
            }else if(openType==3){//浏览器标签打开
                window.open(__url,"_blank");
            }else{//主界面框架标签打开
                window.Sys.addTab(__url,title,uid,callback,nearest);
            }
        },
        hideTitle(name){
            this.hasTitle = name;
            this.toleft = name?'71px':'49px';
            this.sideWidth = name?'70px':'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'
                if(!this.sysConfig.isSinglePage){
                    this.$refs.Main.$refs['cmp-tabs'].$refs['domTabHead'].style.display='block';
                }
                if(layout != 'level'&&hasQuickNav&&!isFullscreen){
                    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(()=>{
                    if(!this.sysConfig.isSinglePage){
                        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'
                        if(this.sysConfig.isSinglePage){
                            this.$refs.Sidebar.$el.style.top = '0px'
                        }else{
                            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();
            }
        }
    },
    created(){
        //单页模式强制左右布局
        if(this.sysConfig.isSinglePage){
            window.localStorage.setItem('layout','level');
        }else if(this.sysConfig.layout&&!window.localStorage.getItem('layout')){
            if(this.sysConfig.layout=="top"){
                window.localStorage.setItem('layout','vertical');
            }else if(this.sysConfig.layout=="left"){
                window.localStorage.setItem('layout','level');
            }
        }
    },
    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)
        }
        this.onchange();
        window.onresize = () => {
            // 全屏下监控是否按键了ESC
            if (!this.checkFull()) {
            // 全屏下按键esc后要执行的动作
                this.isFullscreen = false
            }
            this.isFullscreen=screenfull.isFullscreen
            this.onchange()
        },
        window.addEventListener("keydown", this.KeyDown, true);//监听按键事件
    }
}
</script>
<style lang="less" scoped>
    .menuOpenDialog{
        ::v-deep .el-dialog__body{
            padding-top:0;
        }
    }
</style>

<template>
    <div v-if="layout == 'level'" class="pl-page" :class="isFullscreen?'showTab':''">
        <div :style="fullScreenTabHandleStyle" @mouseenter="showTab"></div>
        <Header v-show="!isFullscreen" :hasTitle="hasTitle" :logoWidth="logoWidth" 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="fullScreenTabHandleStyle" @mouseenter="showTab"></div>
        <Header ref="Header" :logoWidth="logoWidth" 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,requestUrl} from '@main/config'
import {getMenus} from '@main/api/menu'
import {checkUrl} from '@main/utils/index'
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.ssoUrl||item.resUrl,item.name,item.resId,item.callback,item.nearest,item.openType);
                // 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: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'141px'):'71px',
            sideWidth: window.__sysConfig.isMenuWordwrap?(window.__sysConfig.leftMenuWidth?(window.__sysConfig.leftMenuWidth+"px"):'140px'):'70px',
            logoWidth:'140px',
            totop: 50,
            isFullscreen: false,
            top: '',
            left: '',
            mainTop: '',
            navTop: '',
            timeout: null,
            sysConfig: this.$store.state.app.config,
        }
    },
    computed:{
        hasQuickNav(){
            return this.$store.getters.navs.length;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        isTitle(){
            return this.hasTitle;
        },
        fullScreenTabHandleStyle(){
            let baseStyle={
                position: "absolute",
                left: 0,
                top: 0,
                "z-index": 10000,
            };
            if(this.layout=="level"){
                Object.assign(baseStyle,{
                    height: "100%",
                    width: "1px",
                });
            }else{
                Object.assign(baseStyle,{
                    height: "1px",
                    width: "100%",
                });
            }
            return baseStyle;
        }
    },
    methods:{
        addTab(url,title,uid,callback,nearest,openType){
            console.log('layout addTab :',baseURL,codeProjectName,url);
            let __url=url;
            if(!checkUrl(url)){
                //根据setting配置是否带e5
                __url=(window._global?location.origin:window.HIVUI_SETTING.serverUrl)+url;
            }
            if(openType==2){//弹窗
                this.$refs.Main.menuOpenList.push({
                    title:title,
                    url:__url,
                    uid:uid,
                });
            }else if(openType==3){//浏览器标签打开
                window.open(__url,"_blank");
            }else{//主界面框架标签打开
                window.Sys.addTab(__url,title,uid,callback,nearest);
            }
        },
        hideTitle(name){
            this.hasTitle = name;
            this.toleft = name?'71px':'49px';
            this.sideWidth = name?'70px':'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'
                if(!this.sysConfig.isSinglePage){
                    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(()=>{
                    if(!this.sysConfig.isSinglePage){
                        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'
                        if(this.sysConfig.isSinglePage){
                            this.$refs.Sidebar.$el.style.top = '0px'
                        }else{
                            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