新增页面的基础结构

src/common/modules/permission.js

@@ -9,7 +9,7 @@ import { AUTH_TOKEN_FRONT } from "@/common/Constant";
 NProgress.configure({ showSpinner: false });
 
 // 不需要token的白名单
-const whiteList = ["/login"];
+// const whiteList = ["/login"];
 
 // 注册路由跳转的权限控制
 router.beforeEach(async (to, from, next) => {
@@ -25,12 +25,13 @@ router.beforeEach(async (to, from, next) => {
       next();
     }
   } else {
-    if (whiteList.includes(to.path)) {
-      next();
-    } else {
-      next("/login");
-      NProgress.done();
-    }
+    next();
+    // if (whiteList.includes(to.path)) {
+    //   next();
+    // } else {
+    //   next("/login");
+    //   NProgress.done();
+    // }
   }
 });
 

src/components/layout/components/AppMain.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <keep-alive :include="cachedViews">
+        <router-view v-if="active" :key="key" />
+      </keep-alive>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  props: {
+    active: {
+      type: Boolean,
+      default() {
+        return true;
+      },
+    },
+  },
+  computed: {
+    cachedViews() {
+      return '';
+      // return this.$store.state.tagsView.cachedViews;
+    },
+    key() {
+      return this.$route.fullPath;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.app-main {
+  /* 50= navbar  50  */
+  min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.fixed-header + .app-main {
+  padding-top: 50px;
+  height: 100vh;
+  overflow: auto;
+}
+
+.hasTagsView {
+  .app-main {
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 95px);
+  }
+
+  .fixed-header + .app-main {
+    padding-top: 95px;
+  }
+}
+</style>

src/components/layout/components/sider/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="">
+    <div class="logo" />
+    <a-menu
+      theme="dark"
+      mode="inline"
+      :default-selected-keys="[activeMenu]"
+      :default-open-keys="['/user']"
+    >
+      <template v-for="route in routes">
+        <a-menu-item
+          v-if="!route.children"
+          :key="route.path"
+          @click="handleMenuRouterFun(route)"
+        >
+          <a-icon :type="route.meta.icon" />
+          <span>{{ route.meta.title }}</span>
+        </a-menu-item>
+        <a-sub-menu v-else :key="route.path">
+          <span slot="title">
+            <a-icon :type="route.meta.icon" />
+            <span>{{ route.meta.title }}</span>
+          </span>
+          <a-menu-item
+            v-for="routeChild in route.children"
+            :key="routeChild.path"
+            @click="handleMenuRouterFun(routeChild)"
+          >
+            <a-icon :type="routeChild.meta.icon" />
+            <span>{{ routeChild.meta.title }}</span>
+          </a-menu-item>
+        </a-sub-menu>
+      </template>
+    </a-menu>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {},
+  components: {},
+  data() {
+    return {
+      menuList: [],
+      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
+      openKeys: ['sub1'],
+    };
+  },
+  created() {
+    this.initDataFun(); //初始化数据
+  },
+  mounted() {
+    console.log(this.routes);
+  },
+  beforeDestroy() {},
+  watch: {},
+  computed: {
+    ...mapGetters(['routes', 'sidebar']),
+    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;
+      }
+      console.log(meta, path);
+      return path;
+    },
+  },
+  methods: {
+    //初始化数据
+    initDataFun() {
+      this.menuList = [{}];
+    },
+    // 操作：点击了某个路由菜单
+    handleMenuRouterFun(item) {
+      console.log(item);
+      this.$router.push({ path: item.path });
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>
+
+<style lang="less" scoped>
+.logo {
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 16px;
+}
+</style>

src/components/layout/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <a-layout id="components-layout-demo-custom-trigger">
+    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
+      <Sider />
+    </a-layout-sider>
+    <a-layout>
+      <a-layout-header style="background: #fff; padding: 0">
+        <a-icon
+          class="trigger"
+          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
+          @click="() => (collapsed = !collapsed)"
+        />
+      </a-layout-header>
+      <a-layout-content
+        :style="{
+          margin: '24px 16px',
+          padding: '24px',
+          background: '#fff',
+          minHeight: '280px',
+        }"
+      >
+        <AppMain :active="active" />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script>
+import AppMain from './components/AppMain';
+import Sider from './components/sider';
+export default {
+  name: 'Layout',
+  provide() {
+    return {
+      reload: this.reload,
+      close: this.close,
+    };
+  },
+  components: {
+    AppMain,
+    Sider,
+  },
+  data() {
+    return {
+      active: true,
+      collapsed: false,
+    };
+  },
+  methods: {
+    // 刷新页面
+    reload() {
+      this.active = false;
+      this.$nextTick(() => {
+        this.active = true;
+      });
+    },
+    // 关闭当前页面
+    close() {
+      // return this.$refs.tagsView.closeSelectedTag(this.$route);
+    },
+  },
+};
+</script>
+
+<style>
+#components-layout-demo-custom-trigger .trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+#components-layout-demo-custom-trigger .trigger:hover {
+  color: #1890ff;
+}
+</style>

src/main.js

@@ -30,6 +30,11 @@ Vue.use(Antd);
 
 Vue.config.productionTip = false;
 
+// 开发时是否使用数据库中的菜单，修改后需要重新登陆
+if (process.env.NODE_ENV !== 'production') {
+  sessionStorage.MenusFromDB = false
+}
+
 const $bus = new Vue()
 Object.defineProperties(Vue.prototype, {
   $bus: {

src/router/common/common.js

@@ -1,10 +1,12 @@
 import NotFound from "@/components/not-found";
+import layout from "@/components/layout";
 
 export default [
   {
     path: "/",
-    redirect: "/home",
-    component: () => import("@/views/Home"),
+    component: layout,
+    // redirect: "/home",
+    redirect: "/login",
     children: [
       {
         path: "home",

src/router/index.js

@@ -23,6 +23,6 @@ commonFiles.keys().forEach(modulePath => {
 
 export default new Router({
   mode: "history",
-  base: process.env.VUE_APP_BASE_API,
+  base: '', // process.env.VUE_APP_BASE_API,
   routes
 });

src/router/menu.js

@@ -1,22 +1,19 @@
 export default [
   {
     path: "/home",
-    name: "home",
     meta: { title: "首页", icon: "home" }
   },
   {
     path: "/user",
-    meta: {
-      title: "用户管理",
-      icon: "user"
-    },
+    meta: { title: "用户管理", icon: "user" },
     children: [
       {
-        path: "staff",
-        meta: {
-          title: "员工管理",
-          icon: "user-staff"
-        }
+        path: "/user/staff",
+        meta: { title: "员工管理", icon: "user" }
+      },
+      {
+        path: "/user/staffLevel",
+        meta: { title: "员工等级", icon: "user" }
       }
     ]
   }

src/router/modules/user.js

@@ -1,14 +1,22 @@
+
+import layout from "@/components/layout";
 export default {
   path: "/user",
   meta: { title: "用户管理" },
   redirect: "/user/staff",
-  component: () => import("@/views/user/Staff"),
+  component: layout,
   children: [
     {
       path: "staff",
       name: "user-staff",
       meta: { title: "员工管理" },
       component: () => import("@/views/user/Staff")
+    },
+    {
+      path: "staffLevel",
+      name: "user-staffLevel",
+      meta: { title: "员工等级" },
+      component: () => import("@/views/user/StaffLevel")
     }
   ]
 };

src/store/getters.js

@@ -1,4 +1,5 @@
 const getters = {
-  userInfo: state => state.user.userInfo
+  userInfo: state => state.user.userInfo,
+  routes: state => state.user.menus
 };
 export default getters;

src/store/modules/user.js

@@ -1,4 +1,5 @@
 import router from "@/router";
+import mockMunus from "@/router/menu";
 import { setCookie, removeCookie } from "@/utils/cookie";
 import { AUTH_TOKEN_FRONT } from "@/common/Constant";
 
@@ -21,6 +22,14 @@ const mutations = {
       state.userInfo[keys[i]] = addInfo[keys[i]];
     }
   },
+  // 菜单状态保存
+  SET_MENU(state, menus) {
+    if (sessionStorage.MenusFromDB === "false") {
+      state.menus = mockMunus;
+      return;
+    }
+    state.menus = menus;
+  },
   // 角色状态保存
   SET_ROLE(state, roles) {
     state.roles = roles;

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <div>
       <span>欢迎进入{{ userInfo.name }}管理系统</span>
-      <a-button type="primary" @click="clickFun">Primary</a-button>
+      <!-- <a-button type="primary" @click="clickFun">Primary</a-button> -->
     </div>
   </div>
 </template>
@@ -31,9 +31,9 @@ export default {
   methods: {
     // 初始化数据
     initDataFun() {},
-    clickFun() {
-      this.$store.commit('user/ADD_USERINFO', { name: 'aaaa' });
-    },
+    // clickFun() {
+    //   this.$store.commit('user/ADD_USERINFO', { name: 'cccc' });
+    // },
   },
 };
 </script>

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="">
     这里是登录
-    <a-button type="primary" @click="clickFun">Primary</a-button>
+    <a-button type="primary" @click="clickFun">登录</a-button>
   </div>
 </template>
 
@@ -28,17 +28,17 @@ export default {
     // 初始化数据
     initDataFun() {},
     clickFun() {
-      console.log(this.$_http);
-      console.log(this.$_API.INTERFACE_GET_USER_ADMIN_USERS);
-      this.$_http
-        .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS)
-        .then((res) => {
-          // 自己的操作
-          console.log(res);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
+      this.$store.commit('user/SET_MENU', []);
+      // this.$_http
+      //   .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS)
+      //   .then((res) => {
+      //     // 自己的操作
+      //     console.log(res);
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   });
+      this.$router.push({ name: 'home' });
     },
   },
 };

src/views/user/StaffLevel.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="">这里是员工等级</div>
+</template>
+
+<script>
+export default {
+  name: 'StaffLevel',
+  props: {},
+  components: {},
+  data() {
+    return {};
+  },
+  created() {
+    this.initDataFun(); //初始化数据
+  },
+  mounted() {},
+  beforeDestroy() {},
+  watch: {},
+  computed: {},
+  methods: {
+    //初始化数据
+    initDataFun() {},
+  },
+};
+</script>
+
+<style lang="less"></style>
+
+<style lang="less" scoped></style>