数据采集站

doum

2026-06-11 d9c657aa78cf0ebe31933a87e63ca92edd8a8da3

 admin/src/components/common/Menu.vue

@@ -3,11 +3,12 @@
    <scrollbar>
      <el-menu
        ref="menu"
        :default-active="activeIndex"
        :key="menuRenderKey"
        :default-active="activeMenuIndex"
        text-color="#333333"
        active-text-color="#207FF7"
        :collapse="menuData.collapse"
        :default-openeds="defaultOpeneds"
        :default-openeds="openMenuIndexes"
        :collapse-transition="false"
        unique-opened
        @select="handleSelect"
@@ -24,47 +25,81 @@
</template>

<script>
import { mapState } from 'vuex'
import { mapState, mapMutations } from 'vuex'
import MenuItems from './MenuItems'
import Scrollbar from './Scrollbar'
import { findMenuByRoute } from '@/utils/menuRoute'

export default {
  name: 'Menu',
  components: { Scrollbar, MenuItems },
  computed: {
    ...mapState(['menuData']),
    // 选中的菜单index
    activeIndex() {
      let path = this.$route.path
      if (path.endsWith('/')) {
        path = path.substring(0, path.length - 1)
  data () {
    return {
      activeMenuIndex: '',
      openMenuIndexes: [],
      menuRenderKey: 0
      }
      const menuConfig = this.__getMenuConfig(path, 'index', this.menuData.list)
      if (menuConfig == null) {
        return null
      } else {
        this.$store.commit('pushtags', menuConfig)
      }
      // console.log(menuConfig.index);
      return menuConfig.index
    },
    // 默认展开的菜单index
    defaultOpeneds() {
      // return this.menuData.list.map(menu => menu.index)
      return [this.menuData.list[0].index]
    }
  computed: {
    ...mapState(['menuData', 'topMenuList'])
  },
  watch: {
   /* $route (to, from) {
      var that =this
      this.$nextTick(() => {
        setTimeout(function(){ that.computeTableHeight()},1000)
      })
    }*/
    '$route' () {
      this.syncMenuFromRoute()
    },
    'menuData.list' () {
      this.syncMenuFromRoute()
    }
  },
  mounted () {
    this.syncMenuFromRoute()
  },
  methods: {
    ...mapMutations(['pushtags', 'syncTopMenuFromRoute']),
    syncMenuFromRoute () {
      const path = this.normalizePath(this.$route.path)
      const menuIndex = this.$route.query.index
      const result = findMenuByRoute(this.topMenuList.list, path, menuIndex)
      if (result == null) {
        return
      }
      if (result.topMenu.id !== this.$store.state.topMenuCurrent.id) {
        this.syncTopMenuFromRoute({
          topMenu: result.topMenu,
          topIndex: result.topIndex
        })
      }
      this.activeMenuIndex = result.menu.index
      this.openMenuIndexes = result.parents.map(item => item.index)
      this.menuRenderKey += 1
      this.pushtags(result.menu)
      this.$nextTick(() => {
        this.openParentMenus()
      })
    },
    openParentMenus () {
      const menuRef = this.$refs.menu
      if (!menuRef || this.openMenuIndexes.length === 0) {
        return
      }
      this.openMenuIndexes.forEach(index => {
        if (typeof menuRef.open === 'function') {
          menuRef.open(index)
        }
      })
    },
    normalizePath (path) {
      if (path == null || path === '') {
        return ''
      }
      return path.endsWith('/') ? path.substring(0, path.length - 1) : path
    },
    // 处理菜单选中
    handleSelect(menuIndex) {
      const menuConfig = this.__getMenuConfig(menuIndex, 'index', this.menuData.list)
      if (menuConfig == null) {
        return
      }
      // 找不到页面
      try {
        require('@/views' + menuConfig.url)
@@ -73,20 +108,15 @@
        return
      }
      // 点击当前菜单不做处理
      if (menuConfig.url === this.$route.path && (menuConfig.params == null || menuConfig.params == undefined || menuConfig.params == '' || menuConfig.params === this.$route.query.param)) {
      if (menuConfig.url === this.$route.path && (menuConfig.params == null || menuConfig.params === undefined || menuConfig.params === '' || menuConfig.params === this.$route.query.param)) {
        return
      }
      if (menuConfig.url == null || menuConfig.url.trim().length === 0) {
        return
      }
      if (menuConfig.params != null && menuConfig.params != '') {
        // this.$router.push({ path: menuConfig.url, query: { index: menuConfig.index, param: menuConfig.params } })
      } else {
        // this.$router.push(menuConfig.url)
      }

      this.$router.push({ path: menuConfig.url, query: { index: menuConfig.index, param: menuConfig.params, time: (Math.random().toString()) } })
      this.$store.commit('pushtags', menuConfig)
      this.pushtags(menuConfig)
    },
    // 获取菜单配置
    __getMenuConfig(value, key, menus) {
@@ -106,12 +136,9 @@
    computeTableHeight () {
      this.$nextTick(() => {
        const height = window.innerHeight
        // 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)
@@ -122,16 +149,12 @@
          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)
        }
      })
    },
@@ -139,7 +162,6 @@
      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)