count-pass-app/subpages/spare/outdepot.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="keyword">
          </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.setDate || ''}}</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.requesterName || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">部门:</text>
                  <text class="info">{{item.deptName || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">退货状态:</text>
                  <text class="info" v-if="item.returnFlag == '0'">未退货</text>
                  <text class="info" v-if="item.returnFlag == '1'">部分退货</text>
                  <text class="info" v-if="item.returnFlag == '2'">全部退货</text>
                </p>
                <p class="info-line">
                  <text class="label">创建人:</text>
                  <text class="info">{{item.createUser || ''}}</text>
                </p>
                <p class="info-line">
                  <text class="label">创建时间:</text>
                  <text class="info">{{item.createDate || ''}}</text>
                </p>
              </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 dayjs from 'dayjs'
import {fetchList} from '../../api/warehousing'
export default {
  components:{
  },
  data() {
    return {
      tableData:[],
      loading:false,
      hasMore:false,
      keyword:'',
      page: {
        pages: 1,
        size: 10,
      },
      total:0,
    };
  },
  // onLoad(options) {
  //  this.getList()
  // },
  onShow() {
   this.getList()
  },
  methods: {
    //去新增入库单
    onClickRight(){
      uni.navigateTo({ url: `/subpages/spare/add-edit?type=add&work=out`})
    },
    //搜索列表
    searchList(){
      this.page.pages = 1
      this.hasMore = false
      this.getList()
    },
    //获取订单列表
    getList() {
      this.loading = true
      let data = {
        current: this.page.pages,
        size: this.page.size,
        keywords:this.keyword || '' ,
        kind:'14'
      };
      fetchList(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;
}

</style>