<!-- 每日批量盘点 -->
<template>
<view class="container-wrap">
<uni-nav-bar title="日品盘点" :status-bar="true" background-color="#3F92F9" color="#FFF">
<view slot="left">
<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
<span style="padding: 0 5rpx;color: #FFFFFF;">{{ userInfo.name }}</span>
</view>
<view slot="right" @tap="$utils.back()">
<span style="color: #FFFFFF;">返回</span>
</view>
</uni-nav-bar>
<view class="container">
<view class="filter">
<u-input
v-model="materialCode"
:searchIcon="true"
:border="true"
placeholder="请输入物料名称或编码"
@search="search"
/>
</view>
<view class="content">
<view>
<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
swiperWidth="750"></u-tabs-swiper>
</view>
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: calc(100% - 80rpx);">
<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMore(index)">
<view class="list">
<view class="item" v-for="(item, index) in (index === 0? data1 : data2)" :key="index" @click="scan(item, index)">
<view class="row">
<view class="col">
<view class="label">物料类型：</view>
<view class="value">{{ item.materialType }}</view>
</view>
<view class="col">
<view class="label">物料编码：</view>
<view class="value">{{ item.materialCode }}</view>
</view>
</view>
<view class="row">
<view class="col">
<view class="label">物料名称：</view>
<view class="value">{{ item.materialName }}</view>
</view>
</view>
<view class="row">
<view class="col">
<view class="label">所在仓库：</view>
<view class="value">{{ item.saveHouse }}</view>
</view>
<view class="col">
<view class="label">放置区域：</view>
<view class="value">{{ item.saveArea }}</view>
</view>
</view>
<view class="row">
<view class="col">
<view class="label">库存件数：</view>
<view class="value">{{ item.tagNum }}</view>
</view>
<view class="col">
<view class="label">库存数量：</view>
<view class="value">{{ item.quantity }}</view>
</view>
</view>
</view>
</view>
<u-loadmore :status="index === 0? loadStatus1: loadStatus2" @loadmore="loadMore(index)" />
</scroll-view>
</swiper-item>
</swiper>
</view>
<!-- <view class="btn">
<my-fixed-button :customClick="true" @click="over" text="结束盘点"></my-fixed-button>
</view> -->
</view>
</view>
</template>
<script>
// #ifdef APP-PLUS
// #endif
export default {
data() {
return {
currentIndex: '',
pageIndex1: 1,
pageIndex2: 1,
materialCode: '',
data1: [],
data2: [],
loadStatus1: 'loadmore',
loadStatus2: 'loadmore',
form: {},
isReading: false,
// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
list: [{
name: '待盘点'
}, {
name: '已盘点'
}]
};
},
methods: {
over () {
this.$utils.back()
// this.$http.SubmitEveryDayCheckFlow({
// recordDetailId: this.data2.map(item => item.id)
// }).then(res => {
// if (res.code === 0) {
// this.$msg.showToast(res.msg || '操作成功！')
// setTimeout(() => {
// this.$utils.back()
// }, 1000)
// }
// })
},
search() {
console.log(this.swiperCurrent)
if(this.swiperCurrent === 0) {
this.pageIndex1 = 1
this.data1 = []
this.getList(0)
} else {
this.pageIndex2 = 1
this.data2 = []
this.getList(1)
}
},
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// 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;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
// scroll-view到底部加载更多
loadMore(index) {
if(index === 0) {
this.pageIndex1++
} else {
this.pageIndex2++
}
this.getList(index)
},
/* 扫码盘点 */
scan(item, index) {
this.currentIndex = index
if(!item.isCompleteCheck) {
this.$utils.open(`/pages/store-manage/day-check/day-check-scan?data=${ JSON.stringify(item) }`)
}
},
getList(type) {
this.$http.EveryDayStorageCheckList({
keyWord: this.materialCode,
pageIndex: this['pageIndex' + (type + 1)],
pageSize: this.pageSize,
isCompleteCheck: !!type
}).then(res => {
if(res.code === 0) {
this['data' + (type + 1)].push(...res.result.list)
if(res.result.isLastPage) {
this['loadStatus' + (type + 1)] = 'nomore'
}else {
this['loadStatus' + (type + 1)] = 'loadmore'
}
}
})
}
},
onShow() {
this.data1 = []
this.data2 = []
this.pageIndex1 = 1
this.pageIndex2 = 1
this.getList(0)
this.getList(1)
},
onLoad() {
// this.getList(0)
// this.getList(1)
// uni.$on('getlist', (res) => {
// this.data1 = []
// this.data2 = []
// this.pageIndex1 = 1
// this.pageIndex2 = 1
// this.getList(0)
// this.getList(1)
// })
},
onUnload() {
uni.$off('getlist')
}
}
</script>
<style lang="scss" scoped>
.container-wrap {
overflow: hidden;
.container {
height: calc(100vh - var(--status-bar-height) - 44px);
overflow: auto;
.filter {
padding: 10rpx;
height: 90rpx;
background-color: #FFFFFF;
}
.content {
padding: 10rpx;
height: calc(100% - 90rpx);
overflow: auto;
.list {
margin-bottom: 10rpx;
.item {
padding: 20rpx;
margin-bottom: 10rpx;
background-color: #FFFFFF;
border: 1rpx solid rgba(215, 215, 215, 1);
border-radius: 10rpx;
&:last-child {
margin-bottom: 0;
}
.row {
&.border {
border-bottom: 1px solid rgba(215, 215, 215, 1);
}
}
}
}
}
.btn {
height: 80rpx;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
}
}
}
</style>