增加 tags 导航栏

src/sdk/index.js

@@ -127,8 +127,7 @@ class SDK {
 					.then(response => {
 						this.dealResponse(response, params)
 					}).catch(error => {
-						console.log('get---------', error)
-						if (error.response.data && error.response.data.errCode) this.dealResponse(error.response, params)
+						if (error.response && error.response.data && error.response.data.errCode) this.dealResponse(error.response, params)
 						else this.completeSDK(error.response, params)
 					})
 				break

src/views/Home/Home.vue

@@ -19,7 +19,6 @@
                         <el-dropdown-menu slot="dropdown">
                             <el-dropdown-item>退出登录</el-dropdown-item>
                             <el-dropdown-item>切换账号</el-dropdown-item>
-                            
                         </el-dropdown-menu>
                     </el-dropdown>
                 </span>
@@ -65,7 +64,7 @@
                                     :key="item1.index"
                                     :index="item1.index"
                                     :routerName="item1.routerName"
-                                    @click="onClickMenu"
+                                    @click="onClickMenu(item1)"
                                 >{{ item1.optionName }}</el-menu-item>
                             </el-submenu>
                             <el-menu-item
@@ -73,7 +72,7 @@
                                 :index="item.index"
                                 :disabled="item.disabled"
                                 :routerName="item.routerName"
-                                @click="onClickMenu"
+                                @click="onClickMenu(item)"
                             >
                                 <i :class="item.iconClassName"></i>
                                 <span slot="title">{{ !menuCollapse? item.oneMenuName : '' }}</span>
@@ -82,6 +81,17 @@
                     </el-menu>
                 </div>
                 <div class="col2">
+                    <header class="col2_header">
+                        <el-tag
+                            v-for="tag in tags"
+                            :key="tag.key"
+                            closable
+                            @close="close(tag)"
+                            @click="clickTag(tag)"
+                            :type="tag.type?tag.type:'info'"
+                            class="item"
+                        >{{tag.name}}</el-tag>
+                    </header>
                     <div class="warp">
                         <router-view />
                     </div>
@@ -100,7 +110,8 @@ export default {
             // 菜单配置
             menuData,
             menuCollapse: false, //是否水平折叠收起菜单
-            defaultUnfoldedMenu: [menuData[0].index] // 默认展开第一项
+            defaultUnfoldedMenu: [menuData[0].index], // 默认展开第一项
+            tags: []
         };
     },
     created() {
@@ -108,8 +119,13 @@ export default {
             localStorage.getItem("defaultUnfoldedMenu")
         ];
         this.menuCollapse = JSON.parse(localStorage.getItem("menuCollapse"));
+        this.tags = JSON.parse(localStorage.getItem("tagsNavList")) || [
+            { name: "设备类型", routerName: "deviceInfo", key: "0" }
+        ];
+    },
+    mounted() {
+        console.log(this);
     },
-    mounted() {console.log(this)},
     methods: {
         // 收取菜单按钮
         onMenuCollapse() {
@@ -129,16 +145,57 @@ export default {
             console.log(key, keyPath);
         },
         // 点击菜单项
-        onClickMenu(e) {
+        onClickMenu(item) {
+            let key = "" + new Date().getTime() + Math.floor(Math.random() * 10)
+            console.log(item);
             // 如果要跳转的路由和当前路由一致就 return
-            if (this.$router.history.current.name == e.$attrs.routerName)
-                return;
-
+            if (this.$router.history.current.name == item.routerName) return;
             this.$router.push({
-                // path: "/" + e.$attrs.routerName
-                name: e.$attrs.routerName
+                name: item.routerName
             });
-        }
+            // 如果tags中已经存在
+            // if(this.tags.includes(item.routerName)) return
+            console.log(this.tags.includes(item.routerName))
+            this.tags.push({
+                name: item.optionName,
+                routerName: item.routerName,
+                key,
+                type: "success"
+            });
+            this.changeTagColor(key)
+            localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
+        },
+        // 点击 tag
+        clickTag(tag) {
+            console.log(tag);
+            if (this.$router.history.current.name == tag.routerName) return;
+            this.$router.push({
+                name: tag.routerName
+            });
+            this.changeTagColor(tag.key)
+            localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
+        },
+        // 点击 tag 的小×
+        close(tag) {
+            console.log(tag);
+            let spliceIndex = this.tags.findIndex(item => {
+                return item.key == tag.key;
+            });
+            console.log(spliceIndex);
+            this.tags.splice(spliceIndex, 1);
+            localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
+        },
+        // 改变tag的颜色 公用的
+        changeTagColor(key) {
+            this.tags.forEach(item=>{
+                if(item.key == key) {
+                    item.type = "success"
+                }else{
+                    item.type = "info"
+                }
+            })
+        },
+        
     }
 };
 </script>
@@ -155,6 +212,7 @@ export default {
         background-color: #029b62;
         height: 40px;
         padding: 10px 20px;
+        margin-bottom: 5px;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -187,13 +245,31 @@ export default {
             .col2 {
                 flex: 1;
                 background-color: #fff;
-                padding: 15px;
+                padding: 0 15px 15px 15px;
                 border-radius: 5px;
                 margin-right: 5px;
                 height: 100%;
                 overflow: auto;
+                .col2_header {
+                    position: relative;
+                    width: 85%;
+                    height: 50px;
+                    overflow: hidden;
+                    border-bottom: 2px solid #eee;
+                    background-color: #fff;
+                    padding: 10px;
+                    display: flex;
+                    align-items: center;
+                    box-sizing: border-box;
+                    z-index: 1;
+                    position: fixed;
+                    .item {
+                        margin-right: 8px;
+                    }
+                }
                 .warp {
                     margin: 15px;
+                    padding-top: 55px;
                 }
             }
         }

src/views/template/Ad.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="Ad">
-        <h1>Ad444</h1>
+        <h1>Ad444999</h1>
     </div>
 </template>
 
@@ -12,14 +12,20 @@ export default {
     data() {
         return {};
     },
-    created() {},
+    created() {
+        // this.get()
+    },
     methods: {
         ...mapActions(["fetch"]),
         get() {
+            console.log('999')
             this.fetch({
-                api: "aaa",
+                api: "core/memberInfo/list",
                 method: "GET",
-                data: {},
+                data: {
+                    tableId: 1,
+                    breedingId: 1
+                },
                 success: res => {
                     console.log(res);
                 },

src/views/template/Af.vue

@@ -12,13 +12,14 @@ export default {
     data() {
         return {};
     },
-    created() {},
+    created() {
+    },
     methods: {
         ...mapActions(["fetch"]),
         
         get() {
             this.fetch({
-                api: "aaa",
+                api: "core/memberInfo/list",
                 method: "GET",
                 data: {},
                 success: res => {