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

<template>
  <view class="order-list content" :class="shelfShow ?'popupShow':''">
    <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>
                <p class="info-line">
                  <text class="label">货架查看:</text>
                  <u-icon class="info" name="list" size="30" @click="openShelf(item)" color="#2979ff"></u-icon>
                </p>
                <p class="info-line">
                  <text class="label">规格型号:</text>
                  <text class="info">{{item.spec || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">计量单位:</text>
                  <text class="info">{{getLabel(item.unit,unitList)}}</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>
    <u-popup :show="shelfShow" mode="center"  @close="shelfShow = false" >
      <view class="picker-card">
        <view style="height:100%;overflow-y:auto;display:block">
          <view class="order-card shelf-card" v-for="(item, index) in currentRow.materialShelves" :key="index">
            <view class="order-info">
              <p class="info-line">
                <text class="label">货架:</text>
              <text class="info">{{item.shelf}}</text>
              </p>
              <p class="info-line">
                <text class="label">货层:</text>
              <text class="info">{{item.floor}}</text>
              </p>
              <p class="info-line">
                <text class="label">货位:</text>
              <text class="info">{{item.seat}}</text>
              </p>
              <p class="info-line">
                <text class="label">附加码:</text>
              <text class="info">{{item.sign}}</text>
              </p>
              <p class="info-line">
                <text class="label">数量:</text>
                <text class="info">{{item.shelfNum}}</text>
              </p>
            </view>
          </view>
        </view>
        <view class="card-oper">
          <view class="btn">
            <u-button type='primary' @click="shelfShow = false">{{$t('settings.confirmText')}}</u-button>
          </view>
        </view>
      </view>
	  </u-popup>
  </view>
</template>

<script>
import {request} from '../../utils/request'
import { getLabel } from '../../utils/util'
import {materialLiveList} from '../../api/stock'
export default {
  components:{
  },
  data() {
    return {
      getLabel,
      shelfShow:false,
      tableData:[],
      loading:false,
      code:'',
      hasMore:false,
      page: {
        pages: 1,
        size: 10,
      },
      unitList:[],
      currentRow:{},
    };
  },
  onLoad(options) {
   this.getList()
   this.getOption()
  },
  // onShow() {
  //  this.getList()
  // },
  methods: {
    //获取单位
    getOption(){
       request({
        url:'/admin/dict/type/spare_unit',
        method:'get',
      })
      .then(res=>{
        if(res.data.code == 0){
          this.unitList = res.data.data
        }
      })
    },
    //打开货架
    openShelf(item){
      console.log(item);
      this.currentRow = item
      this.shelfShow = true
    },
    //查看明细
    toDetail(item){
      uni.navigateTo({ url: `/subpages/spare/dynamics?materialId=${item.id}&store=${item.store}`})
    },
    //搜索列表
    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>