count-pass-app/subpages/spare/stockcheck.vue

<template>
  <view class="order-list content" >
    <u-sticky bgColor="#fff">
      <view class="search-wrap">
        <view class="input-wrap">
          <u-search
          bgColor='#fff'
          :showAction='false' 
          placeholder="搜索备件编号" 
          @search="searchList"
          @clear='searchList'
          v-model="code">
          </u-search>
          <view class="search-btn" @click="searchList">{{$t("customer_meter.search")}}</view>
        </view>
        <!-- <uni-icons type="plus" size='32' @click="onClickRight"></uni-icons> -->
      </view>
    </u-sticky>
    <view class="swiper-box">
      <template v-if="tableData.length">
        <u-list @scrolltolower="scrolltolower" :preLoadScreen="1.5">
          <u-list-item v-for="(item, index) in tableData" :key="index">
            <view class="order-card">
              <view class="order-card-title">
                备件编号:{{item.code}}
              </view>
              <view class="order-info">
                <p class="info-line">
                  <text class="label">备件名称:</text>
                  <text class="info">{{item.name || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">所属仓库:</text>
                  <text class="info">{{item.storeName || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">当前库存:</text>
                  <text class="info" >{{item.totalNum }}</text>
                </p>
              </view>
              <view>
                <view class="card-oper">
                  <view class="btn">
                    <u-button type='primary'  color='#4680F9' size="small" @click="toDetail(item)">库存盘点</u-button>
                  </view>
                </view>
              </view>
            </view>
          </u-list-item>
        </u-list>
      </template>
      <template v-else>
        <u-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
        </u-empty>
      </template>
    </view>
    <u-loading-page 
    color="#666" 
    loading-mode="semicircle"
    :loading="loading">
    </u-loading-page>
  </view>
</template>

<script>
import {materialLiveList} from '../../api/stock'
export default {
  components:{
  },
  data() {
    return {
      tableData:[],
      loading:false,
      code:'',
      hasMore:false,
      page: {
        pages: 1,
        size: 10,
      },
      unitList:[],
      currentRow:{},
      total:0,
    };
  },
  onShow() {
    this.getList()
  },
  methods: {
    //查看明细
    toDetail(item){
      uni.navigateTo({ url: `/subpages/spare/inventory?content=${JSON.stringify(item)}`})
    },
    //搜索列表
    searchList(){
      this.page.pages = 1
      this.hasMore = false
      this.getList()
    },
    //获取订单列表
    getList() {
      this.loading = true
      let data = {
        current: this.page.pages,
        size: this.page.size,
        code:this.code || '' ,
        kind:'11'
      };
      materialLiveList(data).then((res) => {
        if (res.data.code == 0) {
          if (this.hasMore) {
            this.tableData = [
              ...this.tableData,
              ...res.data.data.records,
            ];
          } else {
            this.tableData = res.data.data.records;
          }
          console.log(this.tableData);
          this.total = res.data.data.total;
          if (this.tableData.length >= this.total) {
            this.hasMore = false;
          } else {
            this.hasMore = true;
          }
          this.loading = false
        }
      });
    },
    //加载更多
    scrolltolower() {
      if (this.hasMore) {
        this.page.pages += 1;
        this.getList();
      }
    },
  },
};
</script>

<style>
/* #ifndef APP-NVUE */
view {
  /* display: flex; */
  box-sizing: border-box;
  /* flex-direction: column; */
}

page {
	box-sizing: border-box;
	/* padding: 40rpx 40rpx 80rpx; */
	height: 100%;
}
/* #endif*/
</style>

<style lang="scss" scoped>
@import '../../common/css/public.scss';
.order-list {
  // height: calc(100vh - var(--window-top)) ;
  // overflow: hidden;
  background-color: #f8f8f8;
  .qrcode-wrap{
    padding: 24rpx;
    text-align: center;
    .info-line{
      text-align: center;
      font-size: 32rpx;
      margin-top: 24rpx;
    }
  }
}
.popupShow {
	overflow: hidden;
	position: fixed;
}
.picker-card{
    padding: 32rpx 32rpx 144rpx;
    position: relative;
    height: 100%;
    overflow-y: scroll;
    display: block;
    .card-oper{
      position: absolute;
      width: 100%;
      bottom: 0;
      left:0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 24rpx;
      .btn{
        width: 100%;
      }
    }
  }
  /deep/ .u-popup__content{
    height: 70%;
    overflow-y: scroll;
    border-radius: 6px;
    width: 90%;
  }
  .shelf-card{
  margin: 0 0 24rpx; 
  display: block;
  .order-info{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .info-line{
      width: 50%;
      .label{
        width: 120rpx;
      }
    }
  }
}
</style>