longchuang-vue/src/views/main-sidebar.vue

<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-openeds="isOpenAll ? openMenuList : []"
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <el-menu-item style=" padding-left: -5px;" :class="$store.state.common.sidebarLayoutSkin === 'light'?'menu-light':'menu-dark'">
          <span slot="title">
            <el-input v-model="search" placeholder="搜索" class="custom-input" @keyup.enter.native="searchMenu1" style="margin-left: -2px"></el-input></span>
          <i type="primary" class="el-icon-search" style="font-size: small" @click="searchMenu1()"></i>
        </el-menu-item>
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">{{ pageLanguage.homePage }}</span>
        </el-menu-item>

        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>

        <sub-menu
          v-for="menu in this.favoriteList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>

      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import {isURL} from '@/utils/validate'
import {userFavoriteList} from '@/api/userFavorite.js'
import {treeDataTranslate} from '@/utils'
import {
  searchFunctionButtonList,
} from "@/api/sysLanguage.js"
import {EventBus} from "../main";

export default {
  data() {
    return {
      dynamicMenuRoutes: [],
      search: '',
      categoryList: [],
      uFavoriteList: [],
      favoriteList: [],
      newMenuList: [],
      list: [],
      isOpenAll: true,
      openMenuList: [],
      pageLanguage: {
        homePage: '首页'
      }
    }
  },
  components: {
    SubMenu
  },
  computed: {
    sidebarLayoutSkin: {
      get() {
        return this.$store.state.common.sidebarLayoutSkin
      }
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold
      }
    },
    menuList:
      {
        get() {
          return this.$store.state.common.menuList
        },
        set(val) {
          this.$store.commit('common/updateMenuList', val)
        }
      },
    menuActiveName: {
      get() {
        return this.$store.state.common.menuActiveName
      },
      set(val) {
        this.$store.commit('common/updateMenuActiveName', val)
      }
    },
    mainTabs: {
      get() {

        return this.$store.state.common.mainTabs
      },
      set(val) {
        this.$store.commit('common/updateMainTabs', val)
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.common.mainTabsActiveName
      },
      set(val) {
        this.$store.commit('common/updateMainTabsActiveName', val)
      }
    }
  },
  watch: {
    $route: 'routeHandle'
  },
  created() {
    EventBus.$on('updateFavoriteList', this.updateFavoriteList);
    this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId != 999)
    this.openMenuList = this.getAllOpenMenu(this.menuList)
    this.favoriteList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId == 999)
    this.userFavorites()
    this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
    this.routeHandle(this.$route)
    this.getFunctionButtonList()
    this.changeStyle()
  },
  destroyed() {
    EventBus.$off('updateFavoriteList', this.updateFavoriteList);
  },
  methods: {
    // 获取所有需要展开的菜单ID
    getAllOpenMenu(menuList) {
      let result = []
      const loop = (list) => {
        list.forEach(item => {
          if (item.list && item.list.length > 0) {
            result.push(String(item.menuId))
            loop(item.list)
          }
        })
      }
      loop(menuList)
      return result
    },
    changeStyle(){
      let data= JSON.parse(sessionStorage.getItem('userConfig') || '{}')
      this.$store.commit('common/updateNavbarLayoutType', data.navbarLayoutType)
      this.$store.commit('common/updateSidebarLayoutSkin', data.sidebarLayoutSkin)
    },
    // 获取 首页菜单
    // 获取页面多语言数据
    getFunctionButtonList() {
      let queryButton = {
        functionId: 'systemInformation',
        tableId: 'systemInformation',
        languageCode: this.$i18n.locale,
        objectId: 'homePage'
      }
      searchFunctionButtonList(queryButton).then(({data}) => {
        if (data.code == 0 ) {
          this.pageLanguage = data.data
        }
      })
    },
    // 用户收藏夹
    userFavorites() {
      let query = {
        userId: this.$store.state.user.id,
        languageCode: this.$i18n.locale
      }
      userFavoriteList(query).then(({data}) => {
        if (data.list.length > 0) {
          this.favoriteList[0].list = data.list
        }
      })
    },
    updateFavoriteList(){
      this.userFavorites()
    },
    // 更具 当前节点id 获取上级节点
    getParent(val, sum) {
      if (val == 0) {
        return;
      }
      let parent = this.list.filter(item => item.menuId == val)
      if (parent.length > 0) {
        parent[0].list.length = 0
        sum.push(parent[0])
        this.getParent(parent[0].parentId, sum)
      }
    },
    // 搜索菜单方式1 start
    searchMenu1() {
      if (this.search == "") {
        this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId != 999)
      } else {
        let menuPlus = []
        this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]').filter(item => item.menuId != 999)

        // this.menuList = this.treeFindPath(this.menuList).filter(this.search)
        // 转换成list
        this.list = this.treeFindPath(this.menuList)
        let list = this.treeFindPath(this.menuList)
        list = this.distinct(list, list);
        // list中获取菜单
        this.menuList = list.filter(item => item.name.indexOf(this.search) != -1)
        let menuSum = []
        for (let data of this.menuList) {
          menuSum.push(data)
          this.getParent(data.parentId, menuSum)
        }
        menuSum = Array.from(new Set([...menuSum]))

        if (menuSum.length > 0) {
          let menuList = menuSum.filter(item => item.parentId == 0);
          this.menuList = menuList
          this.treeList(menuList, menuSum)
        }
      }
    },
    // 封装树形结构
    treeList(menuList, menuSum) {
      for (let m1 of menuList) {
        for (let m2 of menuSum) {
          if (m1.menuId == m2.parentId) {
            m1.list.push(m2)
            this.treeList(m1.list, menuSum)
          }
        }
      }
    },
    // 搜索菜单方式1 树结构菜单转换list
    treeFindPath(tree, path = []) {
      if (!tree) return []
      for (const data of tree) {
        path.push(data)
        // if (data.list != null) {
        //   path.push(...data.list)
        //   delete data.list
        // }
        this.treeFindPath(data.list, path)
      }
      return path
    },
    // 搜索菜单方式1 去重
    distinct(a, b) {
      return Array.from(new Set([...a, ...b]))
    },
    // 路由操作
    routeHandle(route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter(item => item.name === route.name)[0]
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
            if (!route) {
              return console.error('未能找到可用标签页!')
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
            iframeUrl: route.meta.iframeUrl || '',
            params: route.params,
            query: route.query
          }
          this.mainTabs = this.mainTabs.concat(tab)
        }
        this.menuActiveName = tab.menuId + ''
        this.mainTabsActiveName = tab.name
      }
    }
  }
}
</script>
<style>
.menu-dark .el-input__inner {
  background: transparent;
  width: 195px;
  font-size: 12px;
  color: #FFFFFF;
  border: #0BB2D4;
}
.menu-light .el-input__inner {
  background: transparent;
  width: 195px;
  font-size: 12px;
  color: #000;
  border: #0BB2D4;
}
.custom-input .el-input__inner::placeholder {
  font-size: 15px; /* 更改此处为您需要的字体大小 */
  color: #999;     /* 更改此处为您所需的颜色 */
}

</style>