<template> <view class="pagesCons"> <view class="utabs"> <u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper> </view> <swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish"> <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index"> <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom"> <view class="check-order-list" v-if="index==current" v-for="(item,sindex) in list" :key="item.id+'-'+sindex" @click="viewRow(item)" > <view class="check-row"> <view>{{item.shelfInfo&&item.shelfInfo.shelfName}}</view> <view> <text :style="{color: item.billState=='FINISH'?$config('successColor'):item.billState=='CANCEL'?$config('infoColor'):$config('errorColor')}">{{item.billStateDictValue}}</text> </view> </view> <view class="check-col"> <view>补货单号:{{item.replenishBillNo}}</view> <view v-if="item.billState=='WAIT_CONFIRM' || item.billState=='CANCEL'">应发数量:{{item.totalQty}}</view> <view v-if="item.billState=='WAIT_OUT_STOCK' || item.billState=='WAIT_CHECK'">实发数量:{{item.totalConfirmQty}}</view> <view v-if="item.billState=='FINISH'">入库数量:{{item.totalPutQty}}</view> <view>{{item.createDate}}</view> </view> </view> <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty> <view v-if="index==current" style="padding: 20upx;"> <u-loadmore :load-text="$config('loadText')" v-if="total>pageSize || status=='loading'" :status="status" /> </view> </scroll-view> </swiper-item> </swiper> </view> </template> <script> import { shelfReplenishList, shelfReplenishStateCount } from '@/api/shelfReplenish' export default { components: {}, data() { return { status: 'loadmore', noDataText: '暂无数据', tabList: [ { dispName: '全部', status: 'ALL' }, { dispName: '待确认', status: 'WAIT_CONFIRM', count: 0 }, { dispName: '待出库', status: 'WAIT_OUT_STOCK', count: 0 }, { dispName: '待签收', status: 'WAIT_CHECK', count: 0 }, { dispName: '已完成', status: 'FINISH' }, { dispName: '已取消', status: 'CANCEL' }, ], current: 0, swiperCurrent: 0, pageNo: 1, pageSize: 6, list: [], total: 0, action:'swiperChange', // 操作类型,上划分页,或左右滑动 } }, onLoad(options) { const _this = this if(options&&options.billState){ // 指定单据状态 this.tabList.map((item,index) => { if(item.status == options.billState){ _this.swiperCurrent = index _this.current = index } }) }else{ _this.swiperCurrent = 0 _this.current = 0 } // 监听整改完成后刷新事件 uni.$on('refreshBL', this.queryByTypeSum) this.queryByTypeSum() }, onUnload() { uni.$off('refreshBL') }, methods:{ // tabs通知swiper切换 tabsChange(index) { this.swiperCurrent = index }, swiperChange(event){ this.action = 'swiperChange' this.status = 'loading' }, // swiper-item左右移动,通知tabs的滑块跟随移动 transition(e) { let dx = e.detail.dx this.$refs.uTabs.setDx(dx) }, // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态 // swiper滑动结束,分别设置tabs和swiper的状态 animationfinish(e) { let current = e.detail.current let isCurtab = this.current == current if(this.status!="nomore"){ let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab if(loadData){ this.$refs.uTabs.setFinishCurrent(current) this.swiperCurrent = current this.current = current this.resetPage() } } }, // scroll-view到底部加载更多 onreachBottom() { this.action = 'onreachBottom' if(this.list.length < this.total){ this.resetPage() }else{ this.status = "nomore" } }, // 查询列表 getRow (pageNo) { if (pageNo) { this.pageNo = pageNo } let params = { pageNo: this.pageNo, pageSize: this.pageSize, billState: this.tabList[this.current].status=='ALL'?'':this.tabList[this.current].status } this.status = "loading" shelfReplenishList(params).then(res => { if (res.status == 200) { if(this.pageNo>1){ this.list = this.list.concat(res.data.list || []) }else{ this.list = res.data.list || [] } this.total = res.data.count || 0 } else { this.list = [] this.total = 0 this.noDataText = res.message } this.status = "loadmore" }) }, resetPage(){ this.status = 'loading'; // 上划分页 if(this.action == 'onreachBottom'){ this.pageNo += 1 this.getRow() } // 左右切换tab if(this.action == 'swiperChange'){ this.list = [] this.getRow(1) } }, // 详细页 viewRow(item){ if(item.billState=='WAIT_CONFIRM'){ // 待确认 uni.navigateTo({ url: "/pages/replenishmentManage/confirm?sn="+item.replenishBillSn }) }else if(item.billState=='WAIT_OUT_STOCK'){ // 待出库 uni.navigateTo({ url: "/pages/replenishmentManage/outWarehousing?sn="+item.replenishBillSn }) }else if(item.billState=='WAIT_CHECK'){ // 待签收 uni.navigateTo({ url: "/pages/replenishmentManage/signWarehousing?sn="+item.replenishBillSn }) }else if(item.billState=='FINISH'){ // 已完成 uni.navigateTo({ url: "/pages/replenishmentManage/detail?sn="+item.replenishBillSn+"&type=success" }) }else if(item.billState=='CANCEL'){ // 已取消 uni.navigateTo({ url: "/pages/replenishmentManage/detail?sn="+item.replenishBillSn+"&type=cancel" }) } }, // 查询每个状态的数据条数 queryByTypeSum () { shelfReplenishStateCount({}).then(res => { if (res.data && res.status == 200) { this.tabList[1].count = res.data.WAIT_CONFIRM || 0 this.tabList[2].count = res.data.WAIT_OUT_STOCK || 0 this.tabList[3].count = res.data.WAIT_CHECK || 0 this.getRow(1) } }) }, } } </script> <style lang="scss"> page { height: 100%; } .pagesCons{ width: 100%; height: 100%; display: flex; flex-direction: column; .text-right { text-align: right; } .utabs{ border-bottom: 1px solid #eee; } .check-list{ flex: 1; .swiper-item{ width: 100%; height: 100%; overflow: hidden; .scroll-view { width: 100%; height: 100%; overflow: auto; } } } // 列表样式 .check-order-list{ background: #ffffff; padding: 25upx 35upx; margin: 25upx; border-radius: 25upx; box-shadow: 1px 1px 3px #EEEEEE; .check-row{ display: flex; justify-content: space-between; margin-bottom: 10rpx; >view{ &:first-child{ color: #222; font-size: 32rpx; width: 80%; } &:last-child{ font-size: 28rpx; margin-top: 5rpx; } } } .check-col{ > view{ padding: 2rpx 0; color: #707070; font-size: 26rpx; } } } } </style>