最新版本541200007

jiangping

2025-03-11 35a90e467732d7f33cf0ebbaa5b3f20ed67982cb

 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)"
      >
@@ -42,7 +42,7 @@
// 这个就是导入vuex的数据，配合下面...map用
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
  data () {
    return {
      // 右键菜单隐藏对应布尔值
      visible: false,
@@ -59,15 +59,16 @@
  },
  watch: {
    // 监听右键菜单的值是否为true，如果是就创建全局监听点击事件，触发closeMenu事件隐藏菜单，如果是false就删除监听
    visible(value) {
    visible (value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    },
    $route(to, from) {
    $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() {
  mounted () {
    // window.addEventListener('resize', this.computeTableHeight)
    this.$refs.tags.addEventListener('scroll', e => {
      if (this.$refs.tags.scrollLeft > 0) {
        this.leftStatus = true
@@ -98,7 +103,7 @@
    // 引入vuex中mutation方法，可以直接this.xxx调用他
    ...mapMutations(['closeTab', 'cleartagsview']),
    // 点击叉叉删除的事件
    rightClose() {
    rightClose () {
      this.visible = false
      if (this.tags.length == 1) {
        return
@@ -106,7 +111,7 @@
      const index = this.tags.indexOf(this.selectedTag)
      this.handleClose(this.selectedTag, index)
    },
    handleClose(item, index) {
    handleClose (item, index) {
      if (this.tags.length == 1) {
        return
      }
@@ -129,71 +134,101 @@
          }
        } else {
          // 那么，如果上面的条件都不成立，没有length=0.也就是说你还有好几个标签，并且你删除的是最后一位标签，那么就往左边挪一位跳转路由
          this.$router.push({ path: this.tags[index - 1].url,query:{param: this.tags[index - 1].params} })
          this.$router.push({ path: this.tags[index - 1].url, query: { param: this.tags[index - 1].params } })
        }
      } else {
        // 如果你点击不是最后一位标签，点的前面的，那就往右边跳转
        this.$router.push({ path: this.tags[index].url ,query:{param: this.tags[index].params}})
        this.$router.push({ path: this.tags[index].url, query: { param: this.tags[index].params } })
      }
    },
    // 点击跳转路由
    tagsmenu(item, index) {
    tagsmenu (item, index) {
      console.log('tagsmenu')
      // 判断：当前路由不等于当前选中项的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)
        // 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 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)
          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)
    isActive (route, params, index) {
      const res = (route === this.$route.path && params == this.$route.query.index)
      return res
    },
    scrollToStart() {
    scrollToStart () {
      const tagsDiv = document.getElementById('tags-box')
      tagsDiv.scrollTo(0, 0)
    },
    scrollToEnd() {
    scrollToEnd () {
      const tagsDiv = document.getElementById('tags-box')
      tagsDiv.scrollTo(tagsDiv.scrollWidth, 0)
    },
    // 右键事件，显示右键菜单，并固定好位置。
    openMenu(tag, e) {
    openMenu (tag, e) {
      this.visible = true
      this.selectedTag = tag
      const offsetLeft = this.$el.getBoundingClientRect().left
      console.log(tag, e)
      this.left = e.clientX - offsetLeft + 60 // 右键菜单距离左边的距离
      this.top = e.clientY + 20 // 右键菜单距离上面的距离           这两个可以更改，看看自己的右键菜单在什么位置，自己调
      // this.computeTableHeight()
    },
    // 隐藏右键菜单
    closeMenu() {
    closeMenu () {
      this.visible = false
    },
    // 右键菜单关闭所有选项，触发vuex中的方法，把当前路由当参数传过去用于判断
    cleartags(val) {
    cleartags (val) {
      this.visible = false
      this.cleartagsview(val)
    }