sfms3.0-uniapp/src/pages/query/pack.vue

<!-- 基于z-paging封装个性化分页组件演示(vue) -->
<template>
	<view class="uni-flex" style="flex-direction: column">
		<itemFilter ref="filter" @onConfirmClick="confirm">
		</itemFilter>
		<view class="top" style="">
			<com-blank-view @goScan='openScanPopup' v-if="packingNumber==''"></com-blank-view>
			<z-tabs v-if="packingNumber" :list="tabList" @change="tabChange" />
		</view>

		<view style="padding-top: 100rpx;width:100%">
			<view v-if="totalCount>0" style="margin:10rpx; font-size:35rpx; font-weight:bold">总数 : {{totalCount}}
			</view>
			<view v-for="(item, index) in dataList" style="width:100%" :key="index">
				<view class="uni-flex uni-row"
					style=" align-items: center; background-color: #fff; border-radius:10rpx;margin:10rpx; ">
					<view class="" style="font-size:35rpx; ">
						({{index+1}})
					</view>
					<comPackDetailCard :isShowPack="false" :dataContent="item" style='margin: 10rpx;'>
					</comPackDetailCard>
				</view>

			</view>
			<uni-load-more :status="loadingType" v-if="dataList.length>0" />
		</view>

		<win-scan-button @goScan='openScanPopup' v-if="packingNumber!=''"></win-scan-button>
		
		<win-scan-pack ref="scanPopup" @getResult='getScanResult' headerType="HPQ,HMQ"></win-scan-pack>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		getExpectoutByItemcode,
		getExpectinByItemcode,
		getBalanceByItemCode,
		getBasicItemByCode,
		getBalanceSummary
	} from '@/api/request2.js';
	import {
		goHome
	} from '@/common/basic.js';
	import itemInfo from '@/mycomponents/item/itemInfo.vue'
	import comBlankView from '@/mycomponents/common/comBlankView.vue'
	import winScanPack from '@/mycomponents/scan/winScanPack.vue'
	import winScanButton from '@/mycomponents/scan/winScanButton.vue'
	import comPackDetailCard from '@/pages/query/coms/comPackDetailCard.vue'
	import itemFilter from '@/mycomponents/item/itemFilter.vue'
	import comEmptyView from '@/mycomponents/common/comEmptyView.vue'

	export default {
		components: {
			itemInfo,
			comBlankView,
			winScanPack,
			winScanButton,
			comPackDetailCard,
			itemFilter,
			comEmptyView
		},
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				tabList: ['明细', '预计出'],
				tabIndex: 0,
				itemDetail: undefined,
				packingNumber: '',
				balances: [],
				loadingType: "nomore",
				totalCount: 0,
				locationCode: "",
				inventoryStatus: "",
				pageSize:10
			}
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			} else if (e.index == 1) {
				this.$refs.filter.openFilter();
			}
		},

		onReachBottom() {
			console.log("底部")
			//避免多次触发
			if (this.loadingType == 'loading' || this.loadingType == 'nomore') {
				return;
			}
			this.getContentByTab(this.tabIndex, this.pageNo, this.pageSize, "more");

		},
		onLoad(option){
			uni.setNavigationBarTitle({
			  title: option.title
			})
		},
		mounted() {
			this.openScanPopup();
		},
		onPullDownRefresh() {
			this.getContentByTab(this.tabIndex, this.pageNo, this.pageSize, "refresh");
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			closeScanPopup() {
				this.$refs.scanPopup.closeScanPopup();
			},
			getScanResult(result) {
				if (!result.label.packingNumber ) {
					this.showMessage('包装号不能为空')
					return;
				}
				this.packingNumber =result.label.packingNumber ;
				this.closeScanPopup();
				this.tabChange(0)
			},
			getItemInfo(code) {
				uni.showLoading({
					title: "正在查询物料信息...",
					mask: true
				});

				getBasicItemByCode(code).then(res => {
					uni.hideLoading();
					if (res.data.list.length > 0) {
						this.closeScanPopup();
						this.packingNumber = res.data.list[0].code;
						this.itemDetail = res.data.list[0];
						this.tabChange(0)
					} else {
						this.showMessage('未查找到物料【' + code + '】');
					}

				}).catch(error => {
					uni.hideLoading();
					this.packingNumber = "";
					this.showMessage(error);
				})
			},

			// 汇总
			getSummary(pageNo, pageSize, type) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				this.loadingType = "loading";
				if (type === "refresh") {
					this.pageNo = 1;
					this.dataList = [];
				}

				var filters = [];
				filters.push({
					column: "packingNumber",
					action: "==",
					value: this.packingNumber
				})
				if (this.locationCode) {
					filters.push({
						column: "locationCode",
						action: "==",
						value: this.locationCode
					})
				}

				if (this.inventoryStatus) {
					filters.push({
						column: "inventoryStatus",
						action: "in",
						value: this.inventoryStatus
					})
				}

				var params = {
					filters: filters,
					pageNo: this.pageNo,
					pageSize: pageSize
				}
				getBalanceByItemCode(params).then(res => {
					uni.hideLoading();

					if (type === "refresh") {
						uni.stopPullDownRefresh();
					}
					var list = res.data.list;
					this.totalCount = res.data.total
					this.loadingType = "loadmore";
					if (list == null || list.length == 0) {
						this.loadingType = "nomore";
						return;
					}
					
					this.dataList = type === "refresh" ? list : this.dataList.concat(list);
					this.pageNo++;

				}).catch(error => {
					this.$refs.paging.complete(false);
					uni.hideLoading();
					this.showMessage(error);
				})
			},
			//明细
			getDetailList(pageNo, pageSize, type) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				this.loadingType = "loading";
				if (type === "refresh") {
					this.pageNo = 1;
					this.dataList = [];
				}

				var filters = [];
				filters.push({
					column: "packingNumber",
					action: "==",
					value: this.packingNumber
				})
				if (this.locationCode) {
					filters.push({
						column: "locationCode",
						action: "==",
						value: this.locationCode
					})
				}

				if (this.inventoryStatus) {
					filters.push({
						column: "inventoryStatus",
						action: "in",
						value: this.inventoryStatus
					})
				}

				var params = {
					filters: filters,
					pageNo: this.pageNo,
					pageSize: pageSize
				}
				getBalanceByItemCode(params).then(res => {
					uni.hideLoading();

					if (type === "refresh") {
						uni.stopPullDownRefresh();
					}
					var list = res.data.list;
					this.totalCount = res.data.total
					this.loadingType = "loadmore";
					if (list == null || list.length == 0) {
						this.loadingType = "nomore";
						return;
					}
					this.dataList = type === "refresh" ? list : this.dataList.concat(list);
					this.pageNo++;

				}).catch(error => {
					uni.hideLoading();
					this.showMessage(error);
				})

			},

			getContentByTab(index, pageNo, pageSize, type) {
				if (index === 0) this.getDetailList(pageNo, pageSize, type);
				else if (index === 1) this.getExpectout(pageNo, pageSize, type);
				else if (index === 2) {
					// this.getExpectout(pageNo, pageSize, type);
				} 
			},
			//预计入
			getExpectin(pageNo, pageSize, type) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});


				this.loadingType = "loading";
				if (type === "refresh") {
					this.pageNo = 1;
					this.dataList = [];
				}

				var filters = [];
				filters.push({
					column: "packingNumber",
					action: "==",
					value: this.packingNumber
				})
				if (this.locationCode) {
					filters.push({
						column: "locationCode",
						action: "==",
						value: this.locationCode
					})
				}

				if (this.inventoryStatus) {
					filters.push({
						column: "inventoryStatus",
						action: "in",
						value: this.inventoryStatus
					})
				}

				var params = {
					filters: filters,
					pageNo: this.pageNo,
					pageSize: pageSize
				}
				getExpectinByItemcode(params).then(res => {
					uni.hideLoading();

					if (type === "refresh") {
						uni.stopPullDownRefresh();
					}
					var list = res.data.list;
					this.totalCount = res.data.total
					this.loadingType = "loadmore";
					if (list == null || list.length == 0) {
						this.loadingType = "nomore";
						return;
					}
					this.dataList = type === "refresh" ? list : this.dataList.concat(list);
					this.pageNo++;
				}).catch(error => {
					uni.hideLoading();
					this.showMessage(error);
				})

			},

			//预计出
			getExpectout(pageNo, pageSize, type) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});

				this.loadingType = "loading";
				if (type === "refresh") {
					this.pageNo = 1;
					this.dataList = [];
				}

				var filters = [];
				filters.push({
					column: "packingNumber",
					action: "==",
					value: this.packingNumber
				})
				if (this.locationCode) {
					filters.push({
						column: "locationCode",
						action: "==",
						value: this.locationCode
					})
				}

				if (this.inventoryStatus) {
					filters.push({
						column: "inventoryStatus",
						action: "in",
						value: this.inventoryStatus
					})
				}

				var params = {
					filters: filters,
					pageNo: this.pageNo,
					pageSize: pageSize
				}
				getExpectoutByItemcode(params).then(res => {
					uni.hideLoading();
					if (type === "refresh") {
						uni.stopPullDownRefresh();
					}
					var list = res.data.list;
					this.totalCount = res.data.total
					this.loadingType = "loadmore";
					if (list == null || list.length == 0) {
						this.loadingType = "nomore";
						return;
					}
					this.dataList = type === "refresh" ? list : this.dataList.concat(list);
					this.pageNo++;

				}).catch(error => {
					uni.hideLoading();
					this.showMessage(error);
				})

			},

			showMessage(message) {
				if (this.$refs.scanPopup ) {
					this.$refs.scanPopup.losefocus();
				}
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {
						this.afterCloseMessage()
					}
				});
			},
			afterCloseMessage() {
				if (this.$refs.scanPopup ) {
					this.$refs.scanPopup.getfocus();
				}
			},
			tabChange(index) {
				this.tabIndex = index;
				this.getContentByTab(index, this.pageNo, this.pageSize, "refresh")
			},

			confirm(locationCode, status) {
				if(this.packingNumber){
					this.locationCode = locationCode;
					if(status.length>0){
						var arrayItems = status.join(',')
						this.inventoryStatus = arrayItems
					}else {
						this.inventoryStatus=""
					}
					this.tabChange(this.tabIndex) 
				}else {
					this.showMessage("请先扫描物料")
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}
	.top{
		width: 100%; 
		position: fixed; 
		/* #ifdef APP */
		top: 0rpx;
		/* #endif */
		
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		
		right: 0;
	}
</style>