sap库存页面调整

src/pages/wms/Raw/SapStock/index.vue

@@ -14,25 +14,21 @@
     </u-form>
 
     <!--  列表  -->
-    <view class="scroll">
+    <scroll-view id="list" scroll-y="true" :style="{ height: listHeight + 'px' }" @scrolltolower="onScrollToLower" :lower-threshold="50">
-      <view v-for="item in sapStockList" :key="item.id">
+      <!--  列表  -->
-        <u-form style="margin-top: 10rpx" class="form2">
+      <u-form class="list">
-          <view>
+        <view class="list-item" v-for="item in sapStockList" :key="item.id">
           <lj-list-row label="物料编码:" :value="removeLeadingZeros(item.matnr)" />
           <lj-list-row label="物料名称:" :value="item.maktx" />
           <lj-list-row label="非限制库存:" :value="removeLastZeros(item.clabs)" />
           <lj-list-row label="冻结库存:" :value="removeLastZeros(item.cspem)" />
         </view>
       </u-form>
-      </view>
+    </scroll-view>
-    </view>
 
     <!--  按钮  -->
-    <view class="bottom-bar">
+    <view id="button" class="bottom-bar">
       <u-row class="button-bar">
-        <view style="position: absolute; bottom: 120rpx; width: 90%">
-          <lj-pagination :total="total" :currentPage="queryParams.pageNum" @change="changePage"></lj-pagination>
-        </view>
         <u-col :span="12">
           <u-button type="primary" @click="search">查询</u-button>
         </u-col>
@@ -48,22 +44,16 @@ import { Component } from 'vue-property-decorator';
 import jPicker from '@/components/J-Picker/jPicker.vue';
 import LjRowList from '@/components/lanju/lj-list-row/index.vue';
 import LjListRow from '@/components/lanju/lj-list-row/index.vue';
-import model from './model';
+import { getSapStockList } from './model';
 import { removeLeadingZeros } from '@/utils/tool';
 import ljPagination from '@/components/lanju/lj-pagination/index.vue';
 
 interface QueryParamsPo {
   matnr: string;
   maktx: string;
-  pdaSearch: '1';
+  pdaSearch: string;
-  pageNum: 1;
+  pageNum: number;
-  pageSize: 10;
+  pageSize: number;
-}
-
-interface SapStockPo {
-  materialCode: string;
-  materialDesc: string;
-  storageAmount: string;
 }
 
 @Component({
@@ -76,11 +66,10 @@ interface SapStockPo {
     PageHead,
   },
 })
-export default class sapStockPo extends BasePage implements SapStockPo {
+export default class sapStockPo extends BasePage {
   materialCode: string;
   materialDesc: string;
   storageAmount: string;
-  model = model;
   queryParams: QueryParamsPo = {
     matnr: undefined,
     maktx: undefined,
@@ -90,7 +79,32 @@ export default class sapStockPo extends BasePage implements SapStockPo {
   };
   sapStockList: any[] = [];
   total = 0;
-
+  listHeight = 500;
+  onReady() {
+    //等待页面加载完成
+    this.$nextTick(() => {
+      let buttonTop = 0;
+      //获取底部按钮信息
+      const query = uni.createSelectorQuery().in(this);
+      query
+        .select('#button')
+        .boundingClientRect((data) => {
+          //获取底部按钮到顶部距离
+          buttonTop = data.top;
+        })
+        .exec();
+      //获取列表信息
+      query
+        .select('#list')
+        .boundingClientRect((data) => {
+          //获取列表到顶部距离
+          const listTop = data.top;
+          //
+          this.listHeight = buttonTop - listTop - 10;
+        })
+        .exec();
+    });
+  }
   async search() {
     this.queryParams.pageNum = 1;
     this.getList();
@@ -106,10 +120,11 @@ export default class sapStockPo extends BasePage implements SapStockPo {
     this.getList();
   }
 
-  async getList() {
+  getList() {
-    await this.model.getSapStockList(this.queryParams);
+    getSapStockList(this.queryParams).then((res) => {
-    this.sapStockList = this.model.rows;
+      this.sapStockList = res.rows;
-    this.total = this.model.total;
+      this.total = res.total;
+    });
   }
 
   removeLastZeros(data: any) {
@@ -118,6 +133,16 @@ export default class sapStockPo extends BasePage implements SapStockPo {
     }
     return data;
   }
+  //滚动到底部
+  onScrollToLower() {
+    if (this.total === this.sapStockList.length) {
+      return;
+    }
+    this.queryParams.pageNum = this.queryParams.pageNum + 1;
+    getSapStockList(this.queryParams).then((res) => {
+      this.sapStockList = this.sapStockList.concat(res.rows);
+    });
+  }
 }
 </script>
 
@@ -134,16 +159,26 @@ export default class sapStockPo extends BasePage implements SapStockPo {
   }
 }
 
-.scroll {
+.list {
-  height: 100%;
-  overflow: scroll;
-
-  .form2 {
   background-color: #fff;
+  margin-top: 20rpx;
   padding: 20rpx 20rpx 25rpx;
   border-radius: 10rpx;
   box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
   color: #8d8989;
+
+  .list-item {
+    padding: 20rpx;
+  }
+
+  /* 奇数行背景色 */
+  .list-item:nth-child(odd) {
+    background-color: #ffffff;
+  }
+
+  /* 偶数行背景色 */
+  .list-item:nth-child(even) {
+    background-color: #f5f5f5;
   }
 }
 

src/pages/wms/Raw/SapStock/model.ts

@@ -1,33 +1,8 @@
-import { getModule, Module, MutationAction, VuexModule } from 'vuex-module-decorators';
-import store from '@/store';
 import http from '@/utils/request';
 import { url } from '@/utils/url';
-@Module({
+
-  namespaced: true,
+export function getSapStockList(data: any): Promise<any> {
-  dynamic: true,
+  return http.get(url.lanjuwms.raw.SapStockPo.getSapStockList, {
-  store,
-  name: 'page.raw.sapStockPo',
-})
-export class sapStockPo extends VuexModule {
-  WlList = [];
-  rows: any = [];
-  total = 0;
-  @MutationAction
-  async getSapStockList(data: any): Promise<{ rows: any; total: number }> {
-    const result: any = await http.get(url.lanjuwms.raw.SapStockPo.getSapStockList, {
     params: data,
   });
-    let rows: any;
-    let total: number;
-    if (result.total > 0) {
-      rows = result.rows;
-      total = result.total;
-    } else {
-      rows = [];
-      total = 0;
-    }
-    return { rows, total };
-  }
 }
-
-export default getModule(sapStockPo);