smart_storage_web/src/layout/components/Sidebar/index.vue

<template>
  <div :class="{ 'has-logo': showLogo }">
    <logo :collapse="isCollapse" />

    <div v-show="!isCollapse" style="padding: 10px">

      <el-cascader
        :key="showKey"
        v-model="selectData"
        :options="stations"
        filterable
        :props="{ label: 'name', children: 'list', value: 'id', emitPath: false, }"
        :show-all-levels="false"
        @change="handleToSelect"
      />
    </div>

    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in menuList"
          :key="route.id"
          :item="route"
          :base-path="route.url"
          :active-path="activePath"
        />
      </el-menu>
    </el-scrollbar>
    <div class="open-btn" @click="handleClickOutside">
      <i class="iconfont icon-celanyincang" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { windowResize } from '@/utils/index'

import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'

// import { GetExclusiveMenu } from '@/api/user'
import {
  getProvinceStation,
  GetLogo
} from '@/api/station/maintain'
import { findItemsWithSameId } from '@/utils/index'

export default {
  components: { SidebarItem, Logo },
  data() {
    return {
      stationId: undefined,
      index: '',
      stations: [],
      showKey: 0,
      selectData: [],
      taitanStationids: [579, 576, 578, 577, 384, 481, 512],
      rundaStationIds: [591, 721, 422],
      qingtaoStationIds: [996, 997, 999, 1000, 1001]
    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    username() {
      return this.$store.getters.userinfo.username
    },
    menuList() {
      return this.$store.getters.menuList
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    activePath() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    },
    activeMenuName() {
      return this.$store.getters.activeMenuName
    },
    isScreenEnter() {
      return this.$store.state.user.isScreenEnter
    },
    language() {
      return this.$store.getters.language || undefined
    }
  },
  watch: {
    language: {
      async handler() {
        if (this.stationId) {
          this.$store.dispatch('user/getNewMenu', {
            id: this.stationId,
            path: this.$route.path
          })
          await this.$store.dispatch('user/getInfo')
          this.$store.dispatch('user/getAllDict')
          this.getProvinceStation()
          this.$store.dispatch('user/getStationByUser')
        }
      },
      deep: true
    },
    activeMenu: {
      handler(val) {
        if (val) {
          this.changeIco()
          if (val === '/task/all-task-detail') {
            localStorage.setItem(this.activeMenuName, '/task/all-task')
          } else {
            localStorage.setItem(this.activeMenuName, val)
          }
        }
      },
      deep: true
    },

    $route: {
      handler: function(route) {
        setTimeout(() => {
          windowResize()
        }, 300)
      },
      immediate: true
    },
    isScreenEnter: {
      handler(val) {
        if (val) {
          // this.selectData = ['浙江', 349]
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getProvinceStation()
  },

  methods: {
    async getProvinceStation() {
      const res = await getProvinceStation()
      this.stations = res.data.list

      this.stations.map((i) => {
        i.id = i.name
        return i
      })
      if (localStorage.getItem('currentStationId')) {
        this.selectData = +localStorage.getItem('currentStationId')
        this.handleToSelect(+localStorage.getItem('currentStationId'))
      } else {
        this.selectData = this.stations[0].list[0].list[0].id
        this.handleToSelect(this.selectData)
      }
    },

    handleClickOutside() {
      this.$store.dispatch('app/toggleSideBar')
    },
    // 修改Favicon的方法
    changeFavicon(link) {
      let $favicon = document.querySelector('link[rel="icon"]')
      if ($favicon !== null) {
        $favicon.href = link
      } else {
        $favicon = document.createElement('link')
        $favicon.rel = 'icon'
        $favicon.href = link
        document.head.appendChild($favicon)
      }
    },
    // 根据传递的参数修改Favicon
    changeIco(id) {

    },
    async getLogo() {
      const res = await GetLogo(this.stationId)
      if (res.data) {
        this.$store.commit('user/SET_LOGOURL', res.data.url)
      } else {
        this.$store.commit('user/SET_LOGOURL', null)
      }
    },
    async handleToSelect(val) {
      const item = findItemsWithSameId(this.stations, val)
      this.stationId = val
      localStorage.setItem('stationAddress', item[0].address)
      this.changeIco(val)
      this.$store.commit(
        'user/SET_SELECT_ID',
        val
      )
      this.$store.commit(
        'user/SET_CURRENT_STATION',
        item[0]
      )
      this.$store.dispatch('user/getNewMenu', {
        id: val,
        path: this.$route.path
      })
      this.getLogo()
      this.showKey++
    }
  }
}
</script>
<style lang="scss" scoped>
.company-wrapper {
  width: $sideBarWidth;
  height: $nav-bar-height;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;

  img {
    width: 26px;
    height: 26px;
  }
  .name {
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 0.1em;
    color: #edf8ff;
    opacity: 0.9;
    margin-left: 5px;
  }
  .mobileName {
    font-size: 20px !important;
    color: #fff;
  }
  .mobileLogo {
    width: 50px;
    height: 50px;
  }
  .enName {
    font-size: 24px;
    max-width: 400px;
    letter-spacing: 0;
  }
}
/deep/.el-select-dropdown__item {
  width: 50px !important;
}
::v-deep .el-input--small .el-input__inner {
  width: calc(#{$sideBarWidth} - 20px) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>