WZC2/fe/PDA/pages/query/location.vue

<template>
	<page-meta root-font-size="18px"></page-meta>
	<view class="">
		<win-blank-view @goScan='openScanPopup' v-if="locationCode==''"></win-blank-view>
		<view class="top_card">
			<com-location :locationDetail='locationDetail' v-if="locationCode"></com-location>
		</view>
		<view class="tabs" v-if="locationCode">
			<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false">
				<view class="title_tab">
					<view v-for="(tab, index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id"
						:data-current="index" @click="ontabtap">
						<text class="uni-tab-item-title"
							:class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{ tab.name }}</text>
					</view>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
				<com-summary v-if="tabIndex == 0" :itemList="summarys" :summaryByLocation='true'></com-summary>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
				<com-detail v-if="tabIndex == 1" :itemList="balances" :displayLocations="false"></com-detail>
			</scroll-view>
		</view>
		<win-scan-button @goScan='openScanPopup' v-if="locationCode!=''"></win-scan-button>
		<win-scan-by-code ref="scanPopup" title='库位代码' @getScanCode='getScanCode'>
		</win-scan-by-code>

		<!-- com-message必须放在最下层 -->
		<com-message ref="comMessage" @afterClose="afterCloseMessage"></com-message>
	</view>
</template>

<script>
	import {
		summary,
		balances,
		locations
	} from '@/api/index.js';
	import {
		maxPageSize,
		goHome,
		getInventoryTypeStyle,
		getInventoryStatusDesc
	} from '@/common/basic.js';

	import comLocation from '@/mycomponents/coms/query/comLocation.vue'
	import comSummary from '@/mycomponents/coms/query/comSummary.vue'
	import comDetail from '@/mycomponents/coms/query/comDetail.vue'
	import winBlankView from '@/mycomponents/wincom/winBlankView.vue'
	import winScanByCode from '@/mycomponents/wincom/winScanByCode.vue'
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'

	export default {
		name: 'location',
		components: {
			comLocation,
			comSummary,
			comDetail,
			winBlankView,
			winScanByCode,
			winScanButton,
			comMessage,
		},
		data() {
			return {
				locationDetail: {},
				locationCode: '',
				summarys: [],
				balances: [],
				// 每页数据量
				pageSize: 1000,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				tabIndex: 0,
				tabBars: [{
						name: '汇总',
						id: 'huizong'
					},
					{
						name: '明细',
						id: 'mingxi'
					}
				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			};
		},
		onLoad() {},
		onReady(){
			this.openScanPopup();
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}else if(e.index === 1){
				window.location.reload();
			}
		},
		filters: {
			statusStyle: function(val) {
				return getInventoryTypeStyle(val);
			},
			statusColor: function(val) {
				return getInventoryStatusDesc(val);
			},
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			closeScanPopup() {
				this.$refs.scanPopup.closeScanPopup();
			},
			getScanCode(code) {
				if (code == "") {
					this.showMessage('库位不能为空')
					return;
				}
				this.locationCode = '';
				this.summarys = [];
				this.balances = [];
				this.getLocationInfo(code);
			},
			getLocationInfo(code) {
				uni.showLoading({
					title: "正在查询库位信息...",
					mask: true
				});
				locations(code).then((res) => {
					if (res != null) {
						this.closeScanPopup();
						this.locationCode = code;
						this.locationDetail = res
						this.locationDetail.locationArea = res.areaCode;
						this.locationDetail.locationGroup = res.locationGroupCode;
						this.locationDetail.locationErpCode = res.erpLocationCode
						this.getContentByTab(this.tabIndex);
					} else {
						this.showMessage('未查找到库位【' + code + '】');
						this.locationCode = ''
					}
					uni.hideLoading();
				}).catch((err) => {
					this.showMessage(err.message);
					this.locationCode = '';
					uni.hideLoading();
				})
			},

			getSummary() {
				let that = this;
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				let params = {
					locationCode: that.locationCode //按零件号查询库存列表
				};
				summary(params).then(res => {
					that.summarys = res.items;
					uni.hideLoading();
				});
			},
			getDetailList() {
				let that = this;
				let params = {
					pageSize: that.pageSize,
					pageIndex: that.pageCurrent,
					locationCode: that.locationCode, //按库位查询库存列
				};
				balances(params).then(res => {
					console.log(res);
					this.balances = res.items
				});
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index;
				this.getContentByTab(this.tabIndex);
			},

			getContentByTab(index) {
				if (index === 0) this.getSummary();
				else if (index === 1) this.getDetailList();
			},

			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop;
			},
			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
			afterCloseMessage() {
				this.$refs.scanPopup.getfocus();
			}
		}
	};
</script>

<style scoped lang="scss">
</style>