sfms3.0-uniapp/pages/query/item.vue

<!-- 基于z-paging封装个性化分页组件演示(vue) -->
<template>
	<view class="">
		<com-blank-view @goScan='openScanPopup' v-if="itemCode==''"></com-blank-view>
		<!-- 这里就很整洁了，只要设置ref，绑定query事件，绑定list就可以了 -->
		<my-paging v-show="itemCode!=''" ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<template #top>
				<view v-if="itemDetail!=undefined">
					<item-info :itemdetail='itemDetail'></item-info>
					<u-line />
					<z-tabs :list="tabList" @change="tabChange" />
				</view>

			</template>
			<view class="" style="padding-bottom: 50rpx;">
				<comItemDetailCard v-if="tabIndex == 0" :itemList="dataList" :isShowPack="false" style='margin: 10rpx;'>
				</comItemDetailCard>
				<comItemDetailCard v-if="tabIndex == 1" :itemList="dataList" style='margin: 10rpx;'>
				</comItemDetailCard>
				<comItemDetailCard v-if="tabIndex == 2" :itemList="dataList" :isShowLocation="false"
					:isShowBusiness="true"></comItemDetailCard>
				<comItemDetailCard v-if="tabIndex == 3" :itemList="dataList" :isShowLocation="false"
					:isShowBusiness="true">
				</comItemDetailCard>
			</view>

		</my-paging>
		<win-scan-button @goScan='openScanPopup' v-if="itemCode!=''"></win-scan-button>
		<win-scan-item ref="scanPopup" title='物料代码' @getScanResult='getScanCode'>
		</win-scan-item>
		<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 winScanItem from '@/mycomponents/scan/winScanItem.vue'
	import winScanButton from '@/mycomponents/scan/winScanButton.vue'
	import comItemDetailCard from '@/pages/query/coms/comItemDetailCard.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	export default {
		components: {
			itemInfo,
			comBlankView,
			winScanItem,
			winScanButton,
			comItemDetailCard,
			comMessage
		},
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				tabList: ['汇总', '明细', '预计入', '预计出'],
				tabIndex: 0,
				itemDetail: undefined,
				itemCode: '',
				balances: [],
			}
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}
		},
		mounted() {
			this.openScanPopup();
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			closeScanPopup() {
				this.$refs.scanPopup.closeScanPopup();
			},
			getScanCode(code) {
				if (code == "") {
					this.showMessage('物料号不能为空')
					return;
				}
				this.itemCode = '';
				this.getItemInfo(code);
			},
			getItemInfo(code) {
				uni.showLoading({
					title: "正在查询物料信息...",
					mask: true
				});

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

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

			// 汇总
			getSummary(pageNo, pageSize) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				var params = {
					itemCode: this.itemCode,
					pageNo: pageNo,
					pageSize: pageSize
				}
				console.log("getSummary", pageNo)
				getBalanceSummary(params).then(res => {
					uni.hideLoading();
					if (res.data.list.length > 0) {
						this.$refs.paging.complete(res.data.list);
					} else {
						this.$refs.paging.complete(false);
						this.showMessage('未查找到物料【' + this.itemCode + '】');
					}
				}).catch(error => {
					this.$refs.paging.complete(false);
					uni.hideLoading();
					this.showMessage(error);
				})
			},
			//明细
			getDetailList(pageNo, pageSize) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				var params = {
					itemCode: this.itemCode,
					pageNo: pageNo,
					pageSize: pageSize
				}
				getBalanceByItemCode(params).then(res => {
					uni.hideLoading();
					if (res.data.list.length > 0) {
						this.$refs.paging.complete(res.data.list);
					} else {
						this.$refs.paging.complete(false);
						this.showMessage('未查找到物料【' + this.itemCode + '】');
					}
				}).catch(error => {
					this.$refs.paging.complete(false);
					uni.hideLoading();
					this.showMessage(error);
				})

			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index;
				this.getContentByTab(index);
			},

			getContentByTab(index, pageNo, pageSize) {
				if (index === 0) this.getSummary(pageNo, pageSize);
				else if (index === 1) this.getDetailList(pageNo, pageSize);
				else if (index === 2) {
					this.getExpectin(pageNo, pageSize);
				} else if (index == 3) {
					this.getExpectout(pageNo, pageSize);
				}
			},
			//预计入
			getExpectin(pageNo, pageSize) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				var params = {
					itemCode: this.itemCode,
					pageNo: pageNo,
					pageSize: pageSize
				}
				getExpectinByItemcode(params).then(res => {
					uni.hideLoading();
					if (res.data.total > 0) {
						this.$refs.paging.complete(res.data.list);
					} else {
						this.showMessage('未查找到物料【' + this.itemCode + '】');
					}
				}).catch(error => {
					this.$refs.paging.complete(false);
					uni.hideLoading();
					this.showMessage(error);
				})
			},

			//预计出
			getExpectout(pageNo, pageSize) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				var params = {
					itemCode: this.itemCode,
					pageNo: pageNo,
					pageSize: pageSize
				}
				getExpectoutByItemcode(params).then(res => {
					uni.hideLoading();
					if (res.data.total > 0) {
						this.$refs.paging.complete(res.data.list);
					} else {
						this.$refs.paging.complete(false);
						this.showMessage('未查找到物料【' + this.itemCode + '】');
					}
				}).catch(error => {
					this.$refs.paging.complete(false);
					uni.hideLoading();
					this.showMessage(error);
				})
			},

			showMessage(message) {
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {
						this.afterCloseMessage()
					}
				});
			},
			afterCloseMessage() {
				if (this.$refs.scanPopup != undefined) {
					this.$refs.scanPopup.getfocus();
				}
			},
			tabChange(index) {
				this.tabIndex = index;
				this.$refs.paging.reload(true);
			},
			queryList(pageNo, pageSize) {
				console.log("加载", pageNo)
				if (this.itemCode != "") {
					this.getContentByTab(this.tabIndex, pageNo, pageSize)
				}

			},
			itemClick(item) {
				console.log('点击了', item.title);
			}
		}
	}
</script>

<style>
	.notice {
		background-color: red;
		color: white;
		display: flex;
		flex-direction: column;
		padding: 12rpx 20rpx;
		font-size: 24rpx;
	}

	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>