组件文档

src/layout/components/AppMain.vue

@@ -0,0 +1,12 @@
+<template>
+  <section>
+    <keep-alive>
+      <router-view />
+    </keep-alive>
+  </section>
+</template>
+<script>
+export default {
+  name: 'AppMain'
+}
+</script>

src/layout/components/MenuList.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-aside
+    v-if="leftMenuList.length > 0 ? true : false"
+    :width="variables.menuWidth"
+    class="menuBox"
+  >
+    <el-tabs
+      v-model="activeMenu"
+      tab-position="left"
+      class="menuContainer"
+      @tab-click="toggleMenu"
+    >
+      <el-tab-pane
+        v-for="(item, i) in leftMenuList"
+        :key="i"
+        :label="item.meta.title"
+        :name="item.name"
+      ></el-tab-pane>
+    </el-tabs>
+  </el-aside>
+</template>
+<script>
+import variables from '@/styles/variables.module.scss'
+export default {
+  name: 'MenuList',
+  data() {
+    return {}
+  },
+  computed: {
+    variables() {
+      return variables
+    },
+    leftMenuList() {
+      return this.$store.state.menu.leftMenuList
+    },
+    activeMenu: {
+      get: function () {
+        return this.$store.getters.activeMenu
+      },
+      set: function () {}
+    }
+  },
+  mounted() {},
+  methods: {
+    toggleMenu(e) {
+      this.$store.dispatch('menu/setActiveMenu', e.name)
+      // this.$router.push({ name: e.name })
+    }
+  },
+  watch: {
+    activeMenu: function (newVal) {
+      this.$router.push({ name: newVal })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+.menuBox {
+  background-color: $color-white;
+  .menuContainer {
+    height: calc(100vh - #{$navbarHeight});
+    width: $menuWidth;
+  }
+}
+</style>

src/layout/components/Navbar.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="navbarContainer">
+    <div class="logoBox">
+      <img src="./../../assets/logo.png" alt="中建材" class="logoImg" />
+      <span class="title">组件使用</span>
+    </div>
+    <div class="fr">
+      <el-tabs
+        v-model="activeModule"
+        @tab-click="toggleModule"
+        class="topMenuBox fr"
+      >
+        <el-tab-pane
+          v-for="(item, i) in topModuleList"
+          :key="i"
+          :label="item.label"
+          :name="item.name"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'NavbarPage',
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['topModuleList']),
+    activeModule: {
+      get: function () {
+        return this.$store.getters.activeModule
+      },
+      set: function () {}
+    }
+  },
+  mounted() {
+    this.$store.dispatch('menu/getTopModuleList')
+  },
+  methods: {
+    toggleModule(e) {
+      if (e.name === 'home') {
+        this.$router.push({ path: '/home/index' })
+      }
+      // 加载左侧菜单并跳转第一个菜单的页面
+      const activeBox = { activeModule: e.name, activeMenu: '' }
+      this.$store.dispatch('menu/setActiveModule', activeBox)
+    },
+    logout() {
+      this.$router.push({ path: '/login' })
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '@/styles/variables.module.scss';
+.navbarContainer {
+  .logoBox {
+    float: left;
+    .logoImg {
+      height: 38px;
+      width: 38px;
+      vertical-align: middle;
+      margin-right: 20px;
+    }
+    .title {
+      font-size: 18px;
+      font-weight: 700;
+    }
+  }
+  .el-dropdown-link {
+    margin-left: 20px;
+  }
+  .topMenuBox {
+    margin-right: 20px;
+    .el-tabs__item {
+      font-size: 20px;
+      font-weight: 700;
+    }
+    .el-tabs__nav-wrap::after {
+      width: 0;
+    }
+    .el-tabs__active-bar {
+      height: 0;
+    }
+  }
+}
+</style>

src/layout/components/index.js

@@ -0,0 +1,3 @@
+export { default as AppMain } from './AppMain'
+export { default as MenuList } from './MenuList'
+export { default as Navbar } from './Navbar'

src/layout/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-container class="itemContainer">
+    <el-header>
+      <navbar />
+    </el-header>
+    <el-container class="sectionBox">
+      <menu-list />
+      <el-container>
+        <div class="app-container">
+          <app-main />
+        </div>
+        <el-footer height="38px">
+          <div class="footerFont">©中建材智能自动化研究院有限公司</div>
+        </el-footer>
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+<script>
+import { AppMain } from './components'
+import MenuList from './components/MenuList'
+import Navbar from './components/Navbar'
+export default {
+  name: 'LayoutPage',
+  data() {
+    return {}
+  },
+  components: { AppMain, MenuList, Navbar }
+}
+</script>
+<style lang="scss" scoped>
+@import '@/styles/variables.module.scss';
+.itemContainer {
+  min-width: 1500px;
+}
+.el-header {
+  background-color: $color-primary-light-8;
+  line-height: $navbarHeight;
+}
+.el-footer {
+  text-align: center;
+}
+.sectionBox {
+  height: calc(100vh - #{$navbarHeight});
+  background-color: $background-color-secondary;
+  .app-container {
+    height: calc(100vh - #{$navbarHeight} - #{$footerHeight} - 10px);
+    margin: 10px 10px 0;
+    padding: 20px;
+    background-color: $color-white;
+    overflow: auto;
+  }
+  .footerFont {
+    font-size: 14px;
+    line-height: $footerHeight;
+    color: $color-text-secondary;
+  }
+}
+</style>