厂商和经销商不同权限&&导航栏&&路由修改

src/App.vue

@@ -1,11 +1,14 @@
 <template>
   <div id="app">
     <HeaderBanner></HeaderBanner>
-    <Navigation></Navigation>
+    <Navigation :navTitle1='navTitle1' :navTitle2='navTitle2'></Navigation>
     <div class="app_content">
       <div class="router">
         <LoginInfo></LoginInfo>
-        <Routerbanner/>
+        <Routerbanner
+          @change_nav="changeNav"
+          :isManufacturer="isManufacturer"
+        />
       </div>
       <div class="router_view">
         <router-view></router-view>
@@ -27,6 +30,23 @@ export default {
     LoginInfo,
     Routerbanner
   },
+  data() {
+    return {
+      navTitle1: ' > 数据管理',
+      navTitle2: '',
+      isManufacturer: 'manufacturer', // distributor经销商 manufacturer厂商
+    }
+  },
+  methods: {
+    changeNav: function(navTitle1, navTitle2){
+      this.navTitle1 = ' > ' + navTitle1;
+      if (navTitle2) {
+        this.navTitle2 = ' > ' + navTitle2;
+      } else {
+        this.navTitle2 = '';
+      }
+    }
+  }
 };
 </script>
 
@@ -35,29 +55,27 @@ export default {
   padding: 0;
   margin: 0;
   list-style: none;
-  font-size: 12px;
-  color: #333;
-  font-family: "微软雅黑";
 }
 #app {
   background-color: #eeeeee;
   .app_content {
     width: 1190px;
-    height: 80vh;
     margin: 0 auto;
-    position: relative;
+    font-size: 12px;
+    color: #333;
+    font-family: "微软雅黑";
+    display: flex;
+    justify-content: space-around;
     .router{
-      position: absolute;
-      left: 0;
-      top: 0;
       width: 150px;
     }
     .router_view{
-      position: absolute;
-      right: 0;
-      top: 0;
+      border: 1px solid #000;
       width: 1030px;
     }
+    // .router_view{
+    //   border: 1px solid #000;
+    // }
   }
 }
 </style>

src/components/Navigation.vue

@@ -1,11 +1,25 @@
 <template>
   <div class="navigation">
-    <p>经销商社交媒体工作平台 > 数据管理 > 上传资料</p>
+    <p>经销商社交媒体工作平台{{navTitle1}}{{navTitle2}}</p>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    navTitle1: {
+      type: String,
+      default: ''
+    },
+    navTitle2: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted() {
+    
+  }
+};
 </script>
 
 <style scoped lang="less">
@@ -13,5 +27,8 @@ export default {};
   width: 1190px;
   height: 20px;
   margin: 4px auto;
+  p {
+    font-size: 12px;
+  }
 }
 </style>

src/components/RouterBanner.vue

@@ -1,49 +1,114 @@
 <template>
   <div class="router_banner">
-    <div class="data_management">
-      <div class="first_level">
+    <div
+      class="router_management"
+      v-for="(routerObj, index) in routerList"
+      :key="index"
+    >
+      <div class="first_level" v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer">
         <div class="icon">
           <img src="" alt="icon" />
         </div>
-        <div class="title">数据管理</div>
+        <div class="title" v-if="!routerObj.path">
+          {{ routerObj.title }}
+        </div>
+        <div v-else>
+          <router-link :to="routerObj.path" tag="li" class="title">
+            <p  @click="getNavTitle(routerObj.title, '')">{{routerObj.title}}</p>
+          </router-link>
+        </div>
         <div class="switch">
           <img src="" alt="" />
         </div>
       </div>
-      <div class="router_li">
-        <router-link to="/uploadRecord" tag="li">- 上传记录</router-link>
-        <router-link to="/uploadLink" tag="li">- 链接上传</router-link>
-        <router-link to="/uploadInfor" tag="li">- 上传资料</router-link>
-        <router-link to="/inforList" tag="li">- 资料列表</router-link>
-      </div>
-    </div>
-    <div class="account_management first_level">
-      <div class="icon">
-        <img src="" alt="" />
-      </div>
-      <div class="title">
-        <router-link to="/accountIndex" tag="li">账号管理</router-link>
-      </div>
-      <div class="switch">
-        <img src="" alt="" />
-      </div>
-    </div>
-    <div class="parameter_management first_level">
-      <div class="icon">
-        <img src="" alt="" />
-      </div>
-      <div class="title">
-        <router-link to="/parameterIndex" tag="li">参数设置</router-link>
-      </div>
-      <div class="switch">
-        <img src="" alt="" />
+      <div v-if="routerObj.list.length" class="second_level">
+        <div
+          v-for="(list, index) in routerObj.list"
+          :key="index">
+        <router-link
+          v-if="list.isShow === 'all' || list.isShow === isManufacturer"
+          :to="list.path"
+          tag="li"
+        >
+          <p
+            @click="getNavTitle(routerObj.title, list.title)"
+          >- {{ list.title }}</p>
+          
+        </router-link>          
+        </div>
+
       </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    isManufacturer: {
+      type: String,
+      default: 'distributor'
+    }
+  },
+  data() {
+    return {
+      routerList: [
+        {
+          title: "数据管理",
+          path: "",
+          img: "",
+          isShow: "all", // 厂商和经销商都有权限
+          list: [
+            {
+              title: "上传记录",
+              path: "/uploadRecord",
+              isShow: "manufacturer" // 只有厂商有权限
+            },
+            {
+              title: "链接上传", 
+              path: "/uploadLink",
+              isShow: "all" // 厂商和经销商都有权限
+            },
+            {
+              title: "上传资料",
+              path: "/uploadInfor",
+              isShow: "manufacturer" // 只有厂商有权限
+            },
+            {
+              title: "资料列表",
+              path: "/inforList",
+              isShow: "distributor" // 只有经销商有权限
+            },
+          ],
+        },
+        {
+          title: "账号管理",
+          path: "/accountIndex",
+          img: "",
+          list: [],
+          isShow: "all"  // 厂商和经销商都有权限
+        },
+        {
+          title: "参数设置",
+          path: "/parameterIndex",
+          img: "",
+          list: [],
+          isShow: "manufacturer" // 只有厂商有权限
+        },
+      ],
+    };
+  },
+  methods: {
+    getNavTitle: function(navTitle1, navTitle2){
+      // 点击路由的时候，修改导航栏
+      // this.$parent().changeNav(navTitle1, navTitle2);
+      this.$emit('change_nav', navTitle1, navTitle2);
+    }
+  },
+  mounted() {
+    console.log(this.isManufacturer);
+  }
+};
 </script>
 
 <style scoped lang="less">
@@ -51,9 +116,42 @@ export default {};
   width: 100%;
   margin-top: 10px;
   background: rgb(212, 212, 212);
-  .data_management {
+  .router_management {
     width: 100%;
-    .router_li {
+    .first_level {
+      display: flex;
+      height: 35px;
+      align-items: center;
+      &:hover {
+        cursor: pointer;
+        background-color: rgb(0, 86, 160);
+        color: #fff;
+        .title{
+          color: #fff;
+        }
+      }
+      .title {
+        font-size: 14px;
+        margin-left: 4px;
+      }
+      .icon {
+        width: 35px;
+        height: 35px;
+        margin-left: 10px;
+        background: #fff;
+        img {
+          width: 35px;
+          height: 35px;
+        }
+      }
+      .switch {
+        width: 11px;
+        height: 11px;
+        background: #fff;
+        margin-left: 20px;
+      }
+    }
+    .second_level {
       li {
         width: 100%;
         height: 38px;
@@ -68,50 +166,4 @@ export default {};
     }
   }
 }
-.first_level {
-  display: flex;
-  height: 35px;
-  align-items: center;
-  &:hover{
-    cursor: pointer;
-    background-color: rgb(0, 86, 160);
-  }
-  .title{
-    &:hover{
-    color: #fff;
-    li{
-      &:hover{
-        color: #fff;
-      }
-    }
-    }
-  }
-}
-.icon {
-  width: 35px;
-  height: 35px;
-  margin-left: 10px;
-  background: #fff;
-  img {
-    width: 35px;
-    height: 35px;
-  }
-}
-.title {
-  font-size: 14px;
-  margin-left: 4px;
-  li {
-    font-size: 14px;
-  }
-}
-.switch {
-  width: 11px;
-  height: 11px;
-  background: #fff;
-  margin-left: 20px;
-  img {
-    width: 11px;
-    height: 11px;
-  }
-}
 </style>