路由标签添加左右，关闭其他

src/components/syClick.vue

@@ -1,12 +1,22 @@
 <template>
     <div class="nav-click">
-    	<ul>
-    		<li class="nav-click-body" :class="item.showClick?'nav-click-body-active':''" v-for="(item,index) in titles" :key="index" :title="item.title"
-             >
-    			<div class="nav-click-body-title"  @click="changeTag(index)">{{item.title}} {{item.flag}}</div>
-    			<div v-if="item.showClick" class="nav-click-body-close" @click="removeTag(index)">×</div>
-    		</li>
-    	</ul>
+        <div class='nav-wrap'>
+            <i  v-if='titles.length>8' @click='navleft' class="el-icon-arrow-left"></i>
+            <div class='nav-click-div'>
+               <div ref='navclickwrap' class='nav-click-wrap'>
+              <ul>
+                    <li class="nav-click-body" :class="item.showClick?'nav-click-body-active':''" v-for="(item,index) in titles" :key="index" :title="item.title"
+                     @click="changeTag(index)">
+                        <div class="nav-click-body-title" >{{item.title}} {{item.flag}}</div>
+                        <div v-if="item.showClick" class="nav-click-body-close" @click.stop="removeTag(index)">×</div>
+                    </li>
+                </ul>  
+            </div> 
+            </div>
+            
+            <i v-if='titles.length>8' @click='navright' class="el-icon-arrow-right"></i>
+        </div>
+        <el-button v-if='titles.length>1' class='close-button' @click='removeElseTag' type="primary">关闭其他</el-button>
     </div>
 </template>
 <script>
@@ -23,10 +33,21 @@
         },
         data() {
             return {
+                left:0,
             }
         },
+
         methods: {
-            
+            navleft(){
+                this.left+=100
+                console.log(this.left)
+                this.$refs.navclickwrap.style.left = -this.left+'px'
+            },
+            navright(){
+                 this.left-=100
+                console.log(this.left)
+                this.$refs.navclickwrap.style.left = -this.left+'px'
+            },
             // 删除标签页
             removeTag(index) {
                 if(this.titles.length>1){
@@ -46,6 +67,9 @@
                     }
                 }
             },
+            removeElseTag(){
+                this.$emit('removeElseTag')
+            },
             // 切换标签页
             changeTag(index) {
                 console.log(this.titles[index])
@@ -63,10 +87,36 @@
 </script>
 <style lang="scss" scoped>
 .nav-click{
+    position:relative;
     padding:10px 0;
+    .nav-wrap{
+        position:relative;
+        width:94%;
+    }
+    .el-icon-arrow-left,.el-icon-arrow-right{
+        position:absolute;
+        top:50%;
+        transform: translateY(-50%);
+        cursor:pointer;
+        z-index:10;
+    }
+    .nav-click-div{
+        overflow:hidden;
+        margin:0 40px;
+    }
+    .nav-click-wrap{
+        position:relative;
+    }
+    .el-icon-arrow-left{
+        left:15px;
+    }
+    .el-icon-arrow-right{
+        right:15px;
+    }
     ul{
         display:flex;
         margin:0;
+        padding:0;
     }
     ul>li{
         list-style:none;display:flex;
@@ -74,6 +124,7 @@
         padding:10px;
         margin:0 5px;
         color:#4E5969;
+          
         // display:inline-block;
     }
     ul>li:hover{
@@ -84,6 +135,16 @@
     }
     .nav-click-body-title{
         margin-right:5px;
+        max-width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .close-button{
+        position:absolute;
+        right:10px;
+        top:50%;
+        transform: translateY(-50%);
     }
 }
 </style>

src/layout/index/index.vue

@@ -4,7 +4,7 @@
     <div class="winseaview-header">
       <!-- 顶部导航栏 -->
       <top />
-      <div> <sy-Click :titles="openRoute" ></sy-Click></div>
+      <div> <sy-Click :titles="openRoute" @removeElseTag='removeElseTag'></sy-Click></div>
     </div>
 
     <div class="winseaview-layout">
@@ -81,6 +81,12 @@
       },
       changeTag(){
 
+      },
+      removeElseTag(){
+        var arr=[this.openRoute.find((item)=>{return item.showClick==true})]
+        console.log(arr)
+        this.$store.commit('user/SET_OPEN_ROUTE',arr);
+        
       },
       showCollapse() {
         this.$store.commit('SET_COLLAPSE');

src/layout/index/top/index.vue

@@ -69,11 +69,11 @@
         {{ $t('common.trialDays') }}
         <span style="padding: 0 2px">{{ getDay }}</span>{{ $t('common.days') }}
       </div>
-      <el-tooltip v-if="showColor" effect="dark" :content="$t('navbar.color')" placement="bottom">
+      <!-- <el-tooltip v-if="showColor" effect="dark" :content="$t('navbar.color')" placement="bottom">
         <div class="top-bar__item">
           <top-color></top-color>
         </div>
-      </el-tooltip>
+      </el-tooltip> -->
 
       <el-tooltip v-if="showTheme" effect="dark" :hide-after="1500" :content="$t('navbar.theme')" placement="bottom">
         <div class="top-bar__item top-bar__item--show">

src/store/modules/user.js

@@ -64,6 +64,7 @@ const mutations = {
     state.roles = roles
   },
   SET_OPEN_ROUTE: (state, openRoute) => {
+    console.log(state, openRoute)
     state.openRoute = openRoute
   },
   SET_COMPANY: (state, companyId) => {

src/views/warehousenew/inventoryCheck.vue

@@ -9,6 +9,10 @@
         </el-date-picker>
   
           </div>
+           <el-select v-model="warehouseName" filterable placeholder="" @change="warehouseNameChange">
+            <el-option key="全部仓库" label="全部仓库" value="" style="color: #8890b1" />
+            <el-option v-for="item in warehouseList" :key="item.id" :label="item.warehouseName" :value="item.warehouseName" style="color: #8890b1" />
+          </el-select>
       </template>
       <template slot="right">
         <ws-input @keyup.enter.native="find()" class='findValue' v-model="searchKeyWord" placeholder="可按货源查找" clearable maxlength="300" type="input"></ws-input>
@@ -160,6 +164,9 @@
     getAuditRecord
   } from '@/model/profitable/index'
     import {
+    selectWarehouseSelf,
+  } from '@/model/outboundManagement/index'
+    import {
   getwarehousingorder,
   editwarehousingorder
 } from '@/model/warehouse/index'
@@ -200,6 +207,8 @@
 
         // 是否显示
         showType: true,
+        warehouseName:'',
+        warehouseList:[],
         // 年
         year: '',
         title:'',
@@ -290,11 +299,21 @@
     //   this.showType = this.isShow
     // },
     activated() {
+      selectWarehouseSelf({
+            compId: localStorage.getItem('ws-pf_compId'),
+          })
+          .toPromise()
+          .then((response) => {
+            this.warehouseList=response
+          })
       this.value2=this.getNowTime()
       this.getList()
       this.showType = this.isShow
     },
     methods: {
+      warehouseNameChange(){
+        this.getList()
+      },
       datechange(e){
         this.value2=e
         this.getList()
@@ -610,6 +629,7 @@
             endDate:this.endDate,
             searchType: this.searchType,
             searchKeyWord: this.searchKeyWord,
+            warehouseName:this.warehouseName,
             inOutType:this.inOutType,
             flag:this.flag
           })