fix styles

.browserslistrc

@@ -1,3 +1,3 @@
 > 1%
 last 2 versions
-not ie <= 8
+not ie <= 10

src/App.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  name: "app"
+  name: "App"
 };
 </script>
 

src/modules/basic/view/app_list.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
-    <section class="content" style="margin-top: -10px;">
+    <section class="content" style="margin-top: 20px;">
       <div class="box box-info">
-        <!-- 头信息 -->
-        <div class="box-header with-border">
-          <h3 class="box-title">鉴权管理 > 应用列表</h3>
-        </div>
-
-        <!-- 正文信息 -->
         <div class="box-body">
           <el-table
             :data="appList"

src/modules/basic/view/campus.vue

@@ -1,15 +1,7 @@
 <template>
   <div>
-    <section class="content" style="margin-top: -10px;">
+    <section class="content" style="margin-top: 20px;">
       <div class="box box-info">
-        <!-- 头信息 -->
-        <div
-          class="box-header with-border"
-          style="background-color:#D3DCE6;margin-bottom:20px;"
-        >
-          <h3 class="box-title">学习中心</h3>
-        </div>
-        <!-- 正文信息 -->
         <div
           class="box-body"
           v-loading.body="fileLoading"

src/modules/basic/view/course.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
-    <section class="content">
+    <section class="content" style="margin-top: 20px">
       <div class="box box-info">
-        <div class="box-header with-border">
-          <h3 class="box-title">课程列表</h3>
-        </div>
-
         <div
           v-loading.body="fileLoading"
           element-loading-text="课程上传中,请稍后..."

src/modules/basic/view/exam_site.vue

@@ -1,15 +1,7 @@
 <template>
   <div>
-    <section class="content" style="margin-top: -10px;">
+    <section class="content" style="margin-top: 20px;">
       <div class="box box-info">
-        <!-- 头信息 -->
-        <div
-          class="box-header with-border"
-          style="background-color:#D3DCE6;margin-bottom:20px;"
-        >
-          <h3 class="box-title">考点列表</h3>
-        </div>
-        <!-- 正文信息 -->
         <div class="box-body">
           <!-- 表单 -->
           <el-form

src/modules/basic/view/privilege_group_list.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
-    <section class="content" style="margin-top: -10px;">
+    <section class="content" style="margin-top: 20px;">
       <div class="box box-info">
-        <div class="box-header with-border">
-          <h3 class="box-title">鉴权管理 &gt; 权限组管理</h3>
-        </div>
-
-        <!-- 正文信息 -->
         <div class="box-body">
           <el-table
             :data="privilegeGroupList"

src/modules/basic/view/privilege_tree.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
-    <section class="content" style="margin-top: -10px;">
+    <section class="content" style="margin-top: 20px;">
       <div class="box box-info">
-        <!-- 头信息 -->
-        <div class="box-header with-border">
-          <h3 class="box-title">鉴权管理 &gt; 权限组列表 &gt; 权限树</h3>
-        </div>
-
-        <!-- 正文信息 -->
         <div class="box-body">
           <!-- 权限树 -->
           <div style="width: 50%;">

src/modules/basic/view/role_privilege_settings.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
-    <section class="content" style="margin-top: -10px;">
+    <section class="content" style="margin-top: 20px;">
       <div class="box box-info">
-        <!-- 头信息 -->
-        <div class="box-header with-border">
-          <h3 class="box-title">鉴权管理 &gt; 角色权限配置</h3>
-        </div>
-
-        <!-- 正文信息 -->
         <div class="box-body">
           <!-- 选择 -->
           <el-form

src/modules/basic/view/school.vue

@@ -1,15 +1,7 @@
 <template>
   <div>
-    <section class="content" style="margin-top: -10px;">
+    <section class="content" style="margin-top: 20px;">
       <div class="box box-info">
-        <!-- 头信息 -->
-        <div
-          class="box-header with-border"
-          style="background-color:#D3DCE6;margin-bottom:20px;"
-        >
-          <h3 class="box-title">学校列表</h3>
-        </div>
-        <!-- 正文信息 -->
         <div class="box-body">
           <!-- 表单 -->
           <el-form

src/modules/basic/view/specially.vue

@@ -2,12 +2,6 @@
   <div>
     <section class="content">
       <div class="box box-info">
-        <!-- 头信息 -->
-        <div class="box-header with-border">
-          <h3 class="box-title">专业列表</h3>
-        </div>
-
-        <!-- 正文信息 -->
         <div class="box-body">
           <el-form
             :inline="true"

src/modules/basic/view/user.vue

@@ -2,12 +2,6 @@
   <div>
     <section class="content">
       <div class="box box-info">
-        <!-- 头信息 -->
-        <div class="box-header with-border">
-          <h3 class="box-title">普通用户管理</h3>
-        </div>
-
-        <!-- 正文信息 -->
         <div class="box-body">
           <!-- 搜索 -->
           <el-form

src/modules/portal/store/currentPaths.js

@@ -0,0 +1,16 @@
+import Vue from "vue";
+
+export const UPDATE_CURRENT_PATHS = "UPDATE_CURRENT_PATHS"; //退出登录
+
+export default {
+  state: [],
+  mutations: {
+    [UPDATE_CURRENT_PATHS](state, paths) {
+      console.log(state, paths);
+      // state = paths;
+      // Object.assign(state, paths);
+      state.length = 0;
+      state.push(...paths);
+    }
+  }
+};

src/modules/portal/views/home/Home.vue

@@ -30,7 +30,8 @@
     <el-container>
       <HomeSide v-if="ifShowHomeSide" :key="sideKey" />
       <el-container class="main-body">
-        <router-view></router-view>
+        <LinkTitles v-if="ifShowHomeSide" :key="Math.random()" />
+        <router-view class="main-content"></router-view>
         <el-footer class="footer">&copy; 启明泰和 2019</el-footer>
       </el-container>
     </el-container>
@@ -105,6 +106,7 @@ import { mapActions, mapState } from "vuex";
 import { USER_SIGNOUT } from "../../store/user";
 import { CORE_API } from "@/constants/constants";
 import HomeSide from "./HomeSide.vue";
+import LinkTitles from "./LinkTitles.vue";
 
 export default {
   name: "Home",
@@ -137,7 +139,7 @@ export default {
       }
     };
   },
-  components: { HomeSide },
+  components: { HomeSide, LinkTitles },
   computed: {
     ...mapState({ user: state => state.user }),
     ifShowHomeSide() {
@@ -243,14 +245,21 @@ body > .el-container {
 }
 
 .main-body {
-  min-height: calc(100vh - 60px);
+  min-height: calc(100vh - 60px - 20px);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  margin-top: 20px;
+  margin-left: 20px;
+}
+
+.main-content {
+  min-height: calc(100vh - 60px - 60px - 60px);
 }
 
 .footer {
   justify-self: flex-end;
+  margin-left: -20px;
 }
 </style>
 

src/modules/portal/views/home/HomeSide.vue

@@ -80,6 +80,9 @@ const routesToMenu = [
   }
 ];
 
+import { mapMutations } from "vuex";
+import { UPDATE_CURRENT_PATHS } from "../../store/currentPaths";
+
 export default {
   name: "HomeSide",
   data() {
@@ -97,6 +100,7 @@ export default {
     }
   },
   methods: {
+    ...mapMutations([UPDATE_CURRENT_PATHS]),
     async getUserPrivileges(groupCode) {
       var url = CORE_API + "/rolePrivilege/getUserPrivileges";
       const params = new URLSearchParams();
@@ -112,6 +116,21 @@ export default {
       return this.menuList.filter(
         m => m.parentId === menu1.id && m.ext1 === "menu"
       );
+    },
+    updatePath() {
+      let currentPaths = [];
+      let part = this.menuList.find(v => v.ext5 === this.$route.path);
+      if (!part) {
+        this.UPDATE_CURRENT_PATHS([]);
+        return;
+      }
+      currentPaths.unshift(part.name);
+      while (this.menuList.find(v => v.id === part.parentId)) {
+        part = this.menuList.find(v => v.id === part.parentId);
+        currentPaths.unshift(part.name);
+      }
+      console.log(currentPaths);
+      this.UPDATE_CURRENT_PATHS(currentPaths);
     }
   },
   async created() {
@@ -119,6 +138,12 @@ export default {
     const groupCode = this.group && this.group.groupCode;
     if (groupCode) {
       this.menuList = await this.getUserPrivileges(groupCode);
+      this.updatePath();
+    }
+  },
+  watch: {
+    $route() {
+      this.updatePath();
     }
   }
 };

src/modules/portal/views/home/LinkTitles.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-breadcrumb
+    separator-class="el-icon-arrow-right"
+    style="border-bottom: 1px solid #aaa; padding-bottom: 5px;"
+  >
+    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+    <el-breadcrumb-item v-for="item in currentPaths" :key="item">
+      {{ item }}
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "LinkTitles",
+  computed: {
+    ...mapState(["currentPaths"])
+  }
+};
+</script>

src/store.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import user from "./modules/portal/store/user";
+import currentPaths from "./modules/portal/store/currentPaths";
 
 Vue.use(Vuex);
 
@@ -9,6 +10,7 @@ export default new Vuex.Store({
   mutations: {},
   actions: {},
   modules: {
-    user
+    user,
+    currentPaths
   }
 });