fj-dc-ui/.svn/pristine/e3/e3421267df6e6736c55c77f990844c05ab19b901.svn-base

<template>
  <div id="tabViewContainer">
    <div id="tabsItemBar"  v-if="turnData=='0'">
      <div class="tabsContainer" ref="tabsContainer">
        <div class="tabsContent" :style="{marginLeft: marginLeft + 'px'}">
          <div class="tabsWidth" ref="tabsWidth">
            <div
              class="tags-view-item"
              :class="isActive(tag)?'tags-view-item-active':''"
              v-for="tag in openedTagViews"
              :key="tag.id"
              @click="changeCurrentView(tag,$event)">{{tag.menuName}} <span class='el-icon-close' @click.prevent.stop='removeView(tag)'></span>
            </div>
          </div>
        </div>
      </div>
<!--      <div class="operate-tags">-->
<!--        &lt;!&ndash; <el-button type="text">暗色</el-button> &ndash;&gt;-->
<!--        <i class="el-icon-arrow-left" @click="toPriv"></i>-->
<!--        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">-->
<!--          <el-submenu index="1">-->
<!--            <template slot="title">页签操作</template>-->
<!--            <el-menu-item index="1-1">关闭当前</el-menu-item>-->
<!--            &lt;!&ndash; <el-menu-item index="1-2">全部关闭</el-menu-item> &ndash;&gt;-->
<!--            <el-menu-item index="1-3">除此之外全部关闭</el-menu-item>-->
<!--          </el-submenu>-->
<!--        </el-menu>-->
<!--        <i class="el-icon-arrow-right" @click="toNext"></i>-->
<!--      </div>-->
    </div>
    <div id="viewsItemBar" :style="{'height':viewHeight+'px'}">
      <!-- <div v-if="currentView.viewType=='component'" style="flex-basis:100%;height:100%;">
        <component  :is="currentView.content"></component>
      </div>
      <div v-if="currentView.viewType=='html'" style="flex-basis:100%;height:100%;">
        {{currentView.content}}
      </div>
      <div v-if="currentView.viewType=='iframe'" style="flex-basis:100%;height:100%;">
        <iframe :src="currentView.content" frameborder="0" style="width:100%;height:100%;"></iframe>
      </div> -->
      <transition name="fade-transform" mode="out-in">
        <router-view :key="key" @turnHandle="turnHandle" v-if="show"></router-view>
        <keep-alive v-if="!show">
          <router-view :key="key" @turnHandle="turnHandle"></router-view>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script>
    /*
      @ 模块名称:tabsView视图
      @ 介绍:模仿vue-element-admin 制作的tabs视图架子
      @ author:wxcwater
      @ version:0.1.0

      @ to-do list:
          1如果一个views都没开，要有一个默认的情况，不能展示大白板
          2没考虑如果开的模块过多了 查航条怎么滚动的问题

          3以下代码中增加的todo
    */
    import theme from '../../store/theme'
    export default {
        name: 'tabViewContainer',
        components:{
        },
        data () {
            return {
                turnData:"0",
                fullvalue:"",
                viewHeight:window.innerHeight - 86,
                editableTabsValue2: '2',
                openedTagViews: [],
                currentView: null,
                viewItemObj:{
                    path:'/zhxxfw/zhjs',
                    href:'/zhxxfw/zhjs',
                    name:'综合监视',
                    menuName:'综合监视',
                    // redirect: 'firstpage',
                    // component:mainPage,
                    haveView:true,
                    // children: [
                    //   {
                    //     path: 'firstpage',
                    //     component: () => import('../views/home/homeView.vue'),
                    //     name: 'firstpage',
                    //     meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
                    //   }
                    // ]
                },
                activeIndex: '1',
                marginLeft: '0',
                themeName:'light'
            }
        },
        mounted:function(){
            this.viewItemObj.menuName = this.viewItemObj.name
        },
        computed:{
            key() {
                return this.$route.fullPath
            },
            msg(){
                return theme.state.testMsg
            },
            show(){

                if(this.$route.fullPath=="/yearSdPlanD" || this.$route.fullPath=="/detailYearSdPlanD" || this.$route.fullPath=="/planCheckSd" || this.$route.fullPath=="/home" || this.$route.fullPath=="/jchome"){
                    return true;
                }else{
                    return false;
                }
            }
        },
        methods:{
            turnHandle(code){
                if(code=="1"){
                    this.turnData = "1";
                    this.viewHeight =  window.screen.height;
                    this.$emit('turnHandle',"1");
                }else{
                    this.turnData = "0";
                    this.viewHeight =  this.viewHeight-86;
                    this.$emit('turnHandle',"0");
                }
            },
            handleSelect(key, keyPath) {
                if(key == '1-1'){
                    this.removeView(this.currentView)
                }else if(key == '1-2'){
                    this.openedTagViews = this.openedTagViews.filter(tab => tab.href == '/zhxxfw/zhjs');
                    this.currentView = this.openedTagViews[0];
                    this.$router.push(this.openedTagViews[0].href);
                }else if(key == '1-3'){
                    this.openedTagViews = this.openedTagViews.filter(tab => tab.href == '/zhxxfw/zhjs' || tab.href == this.currentView.href);
                    this.currentView = this.openedTagViews[0];
                    this.$router.push(this.openedTagViews[0].href);
                }
            },
            isActive(tag) {
                if(tag.menuName == this.currentView.menuName){
                    return true;
                }
                return false;
            },
            addView:function(viewItem){
                //newModuleParam包含模块名称，模块类型(component/iframe/html),content(viewsId／src);
                //to-do 如果传入的模块已经在打开队列中 应当激活而并非再添加一个一样的
                var newViewObject = {
                    viewName: viewItem.menuName,
                };
                var _self = this;
                // console.log(viewItem.menuName);
                var isAdd = false;
                // console.log(this.openedTagViews)
                this.openedTagViews.forEach(item =>{
                    // console.log(item)
                    if(item.menuName == viewItem.menuName){
                        _self.changeCurrentView(item);
                        // console.log('have changed');
                        isAdd = true;
                    }
                });
                if(!isAdd && viewItem.href && viewItem.href.indexOf('http') == -1){
                    this.openedTagViews.push(viewItem);
                    this.currentView = viewItem;
                }
                if(viewItem.href == '/szygl/szygk/random'){
                    this.$router.push('/szygl/szygk/'+Math.random());
                }else if(viewItem.href && viewItem.href.indexOf('http') > -1){
                    window.open(viewItem.href)
                }else{
                    if(viewItem.href){
                        this.$router.push(viewItem.href);
                    }
                    this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕
                        if(this.$refs.tabsWidth.offsetWidth > this.$refs.tabsContainer.offsetWidth){
                            this.marginLeft = -( this.$refs.tabsWidth.offsetWidth - this.$refs.tabsContainer.offsetWidth )
                        }
                    });
                }
            },
            removeView:function(tagParam){
                // let tabs = this.openedTagViews;
                if(tagParam.href != '/zhxxfw/zhjs'){
                    let deleteViewName = tagParam.menuName;

                    this.openedTagViews = this.openedTagViews.filter(tab => tab.menuName !== deleteViewName);

                    if(tagParam == this.currentView && this.openedTagViews.length>0){
                        this.currentView = this.openedTagViews[0];
                        this.$router.push(this.openedTagViews[0].href);
                    }else if(this.openedTagViews.length==0){
                        this.$router.push('/');
                    }
                }

            },
            changeCurrentView:function(newView,event){
                // alert(newView.name);
                this.currentView = newView;
                this.$router.push(newView.href);
                // console.log(this.openedTagViews)
                // console.log(this.currentView)
                this.$emit('currentViewChange',{'newView':this.currentView});
                let e = event || window.event
                if(e.clientX < 100){
                    this.toPriv()
                }
                if(e.clientX > 1100){
                    this.toNext()
                }
            },
            toPriv(){
                this.marginLeft = '0'
            },
            toNext(){
                let clentTabsWidth = this.$refs.tabsWidth.offsetWidth + this.$refs.tabsWidth.offsetLeft
                if(this.$refs.tabsWidth.offsetWidth > this.$refs.tabsContainer.offsetWidth && clentTabsWidth > document.body.clientWidth - 200){
                    this.marginLeft = this.marginLeft - 300
                }
            }
        },
        watch:{
            msg(n,o){
                if(n == 'dark'){
                    this.themeName = 'dark';
                }else{
                    this.themeName = 'light';
                }
            },
            currentOrgId(val){
                this.localRefresh = false // 通过v-if移除router-view节点
                this.$nextTick(() => {
                    this.localRefresh = true // DOM更新后再通过v-if添加router-view节点
                })
            }
        }
    }
</script>

<style>
  #tabViewContainer{
    width: 100% ;
    min-height:100%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: stretch;
  }
  #tabsItemBar{
    background: var(--theme_head_bar);
    z-index: 9;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
  }
  #tabViewContainer .light_back{
    background: linear-gradient(0deg,rgba(8,146,233,1),rgba(9,169,244,1),rgba(122,210,255,1));
  }
  #tabViewContainer .dark_back{
    background:linear-gradient(180deg,rgba(25,35,75,1),rgba(33,38,75,1));
  }
  .tabsContainer{
    width: 88%;
    overflow: hidden;
  }
  .tabsContent{
    width: 5000px;
    overflow: hidden;
    margin-left: 0;
    transition: all .8s;
    -moz-transition: all .8s;
    -webkit-transition: all .8s;
    -o-transition:all .8s;
  }
  .tabsContent .tabsWidth{
    float: left;
    /* flex-basis: 5%; */
    height: 30px;
    /* background-color: aqua; */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /* padding-left:5px; */
  }
  .operate-tags{
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    height: 28px;
    line-height: 28px;
    /*background-color: #009cee;*/
    border-radius: 5px;
  }
  .operate-tags .el-menu{
    /*background-color: #009cee;*/
  }
  .operate-tags .el-submenu__title i{
    color: #fff;
  }
  .operate-tags .el-menu--horizontal>.el-submenu .el-submenu__title{
    height: 26px;
    line-height: 26px;
    color: #fff;
  }
  /*.operate-tags .el-menu--horizontal>.is-opened .el-submenu__title{*/
  /*background-color: #009aed;*/
  /*}*/
  /*.operate-tags .el-menu--horizontal>.el-submenu .el-submenu__title:hover{*/
  /*background-color: #009aed;*/
  /*}*/
  .operate-tags .el-menu--horizontal{
    border-bottom: none;
  }
  .operate-tags .el-submenu__title{
    padding: 0 10px;
  }
  .operate-tags .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom: none;
  }
  .operate-tags .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom: none;
  }
  .operate-tags .el-icon-arrow-left,.operate-tags .el-icon-arrow-right{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px;
  }
  .operate-tags .el-icon-arrow-left:hover{
    color: #003aed;
  }
  .operate-tags .el-icon-arrow-right:hover{
    color: #003aed;
  }
  #viewsItemBar{
    /* flex-basis: 95%; */
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
  }
  .tags-view-item {
    display: inline-block;
    position: relative;
    height: 80%;
    /* line-height: 26px; */
    /* border: 1px solid #d8dce5; */
    color:rgba(255,255,255,1);
    /*background: #fff;*/
    padding: 0 4px;
    font-size: 12px;
    margin-left: 5px;
    /* margin-top: 4px; */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    transition: 0.5s all;
    cursor: pointer;
  }
  .tags-view-item:first-of-type{
    margin-left: 5px;
  }
  .tags-view-item-active{
    background:var(--theme_head_bar_active);
    color:rgba(255,255,255,1);
    border-color: #147DF4;
    border-radius: 3px;
  }
  .tags-view-item-active::before {
    content: '';
    background: #fff;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: relative;
    margin-right: 6px;
  }
  .tags-view-item .el-icon-close{
    margin-left: 4px;
    cursor: pointer;
    transform: rotate(0deg);
    transition: transform 0.1s linear;
  }
  .tags-view-item .el-icon-close:hover{
    transform: rotate(90deg)
  }
  .el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
    background: none !important;
  }
  .el-menu--horizontal {
    border-right: none;
    border-bottom: none !important;
  }
</style>