liukangdong
2025-03-11 6cfd5d9a0c8f7bacbe2d3d1b1d84511207789ca6
admin/src/components/common/tagsview.vue
@@ -12,7 +12,7 @@
        :key="index"
        :id="'tags-box-' + index"
        @contextmenu.prevent="openMenu(item, $event)"
        :class="isActive(item.url, item.params,index) ? 'active' : ''"
        :class="isActive(item.url, item.index,index) ? 'active' : ''"
        class="tagsview"
        @click="tagsmenu(item, index)"
      >
@@ -68,6 +68,7 @@
    },
    $route(to, from) {
      this.tags.forEach((item, index) => {
        // if (item.url === to.path && item.index === to.query.index) {
        if (item.url === to.path && item.index === to.query.index) {
          const tagsDiv = document.getElementById('tags-box')
          if (index) {
@@ -77,10 +78,14 @@
          }
        }
      })
     /* var that =this
      this.$nextTick(() => {
        setTimeout(function(){ that.computeTableHeight()},1000)
      })*/
    }
  },
  mounted() {
    // window.addEventListener('resize', this.computeTableHeight)
    this.$refs.tags.addEventListener('scroll', e => {
      if (this.$refs.tags.scrollLeft > 0) {
        this.leftStatus = true
@@ -142,33 +147,62 @@
      // 判断:当前路由不等于当前选中项的url,也就代表你点击的不是现在选中的标签,是另一个标签就跳转过去,如果你点击的是现在已经选中的标签就不用跳转了,因为你已经在这个路由了还跳什么呢。
      if (this.$route.path !== item.url) {
        // 用path的跳转方法把当前项的url当作地址跳转。
        this.$router.push({ path: item.url ,query:{param: this.tags[index].params}})
        this.$router.push({ path: item.url, query: { index: this.tags[index].index, param: this.tags[index].params, time: (Math.random().toString())} })
        // this.$router.push( item.url)
        const tagsDiv = document.getElementById('tags-box')
        if (index) {
          tagsDiv.scrollTo(index * 110, 0)
        }
      }
      this.computeTableHeightView();
      // this.computeTableHeight()
    },
    computeTableHeightView () { state.tags = []
    computeTableHeight () {
      this.$nextTick(() => {
        let height = window.innerHeight
        let height6 = (document.getElementsByClassName('common-header') && document.getElementsByClassName('common-header')[0] ? document.getElementsByClassName('common-header')[0].clientHeight:0)
        const height = window.innerHeight
        console.log('toolbar********************************', document.getElementsByClassName('toolbar').length)
        // console.log('main_app========================:' + height)
        const height13 = this.getEleHeghtByClassName('common-header', 0)
        const height5 = document.getElementsByTagName('thead') && document.getElementsByTagName('thead')[0] ? document.getElementsByTagName('thead')[0].clientHeight : 0
        if (document.getElementsByClassName('main_app') && document.getElementsByClassName('main_app')[0]) {
          // console.log('main_app========================')
        // alert(height)
        let height1 = (document.getElementsByClassName('table-search-form') && document.getElementsByClassName('table-search-form')[0])? document.getElementsByClassName('table-search-form')[document.getElementsByClassName('table-search-form').length-1].clientHeight:0
        height1 = height1===0? 40:height1+10
        let height3 = document.getElementsByClassName('main-header') && document.getElementsByClassName('main-header')[0]?document.getElementsByClassName('main-header')[0].clientHeight:0
        let height4 = document.getElementsByClassName('table-pagination') && document.getElementsByClassName('table-pagination')[0]? document.getElementsByClassName('table-pagination')[0].clientHeight:0
        let height2 = document.getElementsByClassName('toolbar') && document.getElementsByClassName('toolbar')[0]?document.getElementsByClassName('toolbar')[0].clientHeight:0
        let height5 = document.getElementsByTagName('thead') && document.getElementsByTagName('thead')[0]? document.getElementsByTagName('thead')[0].clientHeight:0
        // this.tableHeightNew = height-height4-height3-height2-height1-height5-height6-height7-height8-height9 -height10// 打印高度
        console.log('view',height,height6,height3 ,height1,height2,height4,height4)
        console.log('view', height-height4-height3-height2-height1-height5 -height6)
          const height3 = this.getEleHeghtByClassName('main-header', 0)
          const height4 = this.getEleHeghtByClassName('table-pagination', 0)
          const height2 = this.getEleHeghtByClassName('toolbar', 0)
          const height6 = this.getEleHeghtByClassName('doumee-filter', 0, 16)
          const height7 = this.getEleHeghtByClassName('pt16', 0, 0)
          const height9 = this.getEleHeghtByClassName('static_wrap', 0)
          const height10 = this.getEleHeghtByClassName('query_btns', 0)
          const height11 = this.getEleHeghtByClassName('el-tabs-ele', 0)
          const height12 = this.getEleHeghtByClassName('platgroup_tabs', 0)
          this.$router.app.$store.commit('setTableHeightNew', height - height13 - height3 - height5 - height6 - height2 - height7 - height4 - height9 - height10 - height11 - height12)
          // console.log('gableHeightNew', this.$router.app.$store.state.tableHeightNew)
        } else {
          // console.log('tableLayout========================')
          const height1 = this.getEleHeghtByClassName('table-search-form', 40, 16)
          const height3 = this.getEleHeghtByClassName('main-header', 0)
          const height4 = this.getEleHeghtByClassName('table-pagination', 0)
          const height2 = this.getEleHeghtByClassName('toolbar', 0)
          // console.log('defualtlength', document.getElementsByClassName('table-search-form').length)
          this.$router.app.$store.commit('setTableHeightNew', height - height4 - height3 - height2 - height1 - height5 - height13)
          // console.log('gableHeightNew', this.$router.app.$store.state.tableHeightNew)
        }
      })
    },
    getEleHeghtByClassName (name, dv, margin) {
      if ((document.getElementsByClassName(name) && document.getElementsByClassName(name)[0])) {
        let t = 0
        document.getElementsByClassName(name).forEach(e => {
          // console.log(name + '========================' + t + ':' + e.clientHeight)
          t++
        })
        return document.getElementsByClassName(name)[document.getElementsByClassName(name).length - 1].clientHeight + (margin || 0)
      }
      return dv || 0
    },
    // 通过判断路由一致返回布尔值添加class,添加高亮效果
    isActive(route,params, index) {
      const res =(route === this.$route.path && params== this.$route.query.param)
      const res = (route === this.$route.path && params == this.$route.query.index)
      return res
    },
    scrollToStart() {
@@ -187,6 +221,7 @@
      console.log(tag, e)
      this.left = e.clientX - offsetLeft + 60 // 右键菜单距离左边的距离
      this.top = e.clientY + 20 // 右键菜单距离上面的距离           这两个可以更改,看看自己的右键菜单在什么位置,自己调
      // this.computeTableHeight()
    },
    // 隐藏右键菜单
    closeMenu() {