修改

src/components/Materialman/InventoryDetail.vue

@@ -18,27 +18,29 @@
 
     </div>
     <div class="padContent">
-      <ul v-show="morequery" class="queryul">
-        扫码出库
+      <ul v-show="morequery" class="queryul" ref="searchBarFixed" :class="{'searchBarFixed':searchBarFixed}">
+          扫码出库
         <li>
           <el-input class="w200" size="small" v-model="barCode" @keyup.enter.native="payCode" placeholder="商品出库条码">
           </el-input>
         </li>
-        <li>
-          <el-input class="w200" size="small" v-model="msg.SuppliesId" placeholder="物料Id"
-            @keyup.enter.native="msg.pageIndex=1,getList()"></el-input>
-        </li>
-        <li>
-          <el-input class="w200" size="small" v-model="msg.SuppliesName" placeholder="物料名称"
-            @keyup.enter.native="msg.pageIndex=1,getList()"></el-input>
-        </li>
-        <li>
-          <el-select size="small" v-model="msg.CheckStatus" @change="msg.pageIndex=1,getList()">
-            <el-option label="不限" :value="0"> </el-option>
-            <el-option v-for="item in getCheckStatusList" :key="item.Id" :label="item.Name" :value="item.Id">
-            </el-option>
-          </el-select>
-        </li>
+        <template v-if="!searchBarFixed">
+          <li>
+            <el-input class="w200" size="small" v-model="msg.SuppliesId" placeholder="物料Id"
+              @keyup.enter.native="msg.pageIndex=1,getList()"></el-input>
+          </li>
+          <li>
+            <el-input class="w200" size="small" v-model="msg.SuppliesName" placeholder="物料名称"
+              @keyup.enter.native="msg.pageIndex=1,getList()"></el-input>
+          </li>
+          <li>
+            <el-select size="small" v-model="msg.CheckStatus" @change="msg.pageIndex=1,getList()">
+              <el-option label="不限" :value="0"> </el-option>
+              <el-option v-for="item in getCheckStatusList" :key="item.Id" :label="item.Name" :value="item.Id">
+              </el-option>
+            </el-select>
+          </li>
+        </template>
       </ul>
       <vxe-table stripe style="margin-top:15px" :loading="loading" :data="tableData">
         <vxe-table-column field="Name" title="状态" width="120">
@@ -190,7 +192,8 @@
         //CheckState用于管理操作按钮
         CheckState: 0,
         //用于判断是否完成盘点
-        isPandian:true
+        isPandian:true,
+        searchBarFixed:false
       };
     },
     mounted() {
@@ -202,6 +205,8 @@
       //上传接口路径
       this.importFileUrl2 = this.domainManager().DomainUrl +
         "/api/file/LocalFileUploadImportForSuppliesCheck";
+      //添加滚动事件
+      window.addEventListener('scroll', this.handleScroll)
     },
     methods: {
       //关闭预览图片
@@ -505,7 +510,18 @@
           },
           null
         );
-      }
+      },
+      //开始滚动
+      handleScroll () {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+        var offsetTop = this.$refs.searchBarFixed.offsetTop
+        if (scrollTop > offsetTop) {
+          this.searchBarFixed = true
+        } else {
+          this.searchBarFixed = false
+        }
+      },
+
     }
   };
 
@@ -601,5 +617,13 @@
     /* Opera 10.5+ */
     transition: opacity 1s ease-out;
   }
+  .searchBarFixed{
+    position: fixed;
+    top:-20px;
+    width:100%;
+    background-color:#f2f2f2;
+    padding:10px 20px 0 20px;
+    z-index:999;
+  }
 
 </style>