init

src/layout/components/Sidebar/index.vue

@@ -0,0 +1,98 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-27 10:07:42
+ * @LastEditTime: 2021-03-08 11:59:59
+ * @LastEditors: gtz
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\layout\components\Sidebar\index.vue
+-->
+<template>
+  <div :class="{'has-logo':showLogo}">
+    <logo v-if="showLogo" :font-size="language === 'en' ? '16px' : '12px'" :title="'title' | i18nFilter" :collapse="isCollapse" />
+    <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 routeList" :key="route.path" :item="route" :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Logo from './Logo'
+import SidebarItem from './SidebarItem'
+import variables from '@/styles/variables.scss'
+// import { constantRoutes } from '@/router'
+import store from '@/store'
+export default {
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'choicepart',
+      'language'
+    ]),
+    partList() {
+      const cangoList = []
+      const constantRoutes = store.getters.permission_routes
+      constantRoutes.map(item => {
+        if (!item.hidden && item.meta) {
+          cangoList.push(item)
+        }
+      })
+      const formatList = cangoList.map((item, index) => {
+        return this.setIndex(item, index)
+      })
+      return formatList
+    },
+    routeList() {
+      return [this.partList[this.choicepart]]
+    },
+    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
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    },
+    variables() {
+      return variables
+    },
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  },
+  watch: {
+    $route: function(val) {
+      if (val.meta.routeIndex >= 0) {
+        this.$store.dispatch('app/setChoicepart', val.meta.routeIndex)
+      }
+    }
+  },
+  methods: {
+    setIndex(list, index) {
+      list.meta.routeIndex = index
+      if (list.children) {
+        list.children.map(item => {
+          this.setIndex(item, index)
+        })
+      }
+      return list
+    }
+  }
+}
+</script>