WZC2/fe/PDA/pages/task/receipt.vue

<template>
	<page-meta root-font-size="18px"></page-meta>
	<view class="">
		<!-- <view class="uni-flex uni-row require_wrap">
			<button @click="isTodayChange" :class="[isToday==true?'require_cell require_active':'require_cell']">
				<text></text>
				只看当天到货
			</button>
			<button @click="timeSortingChange"
				:class="[isTimeWindowSorting==true?'require_cell require_active':'require_cell']">
				<text></text>
				按到货时间排序
			</button>
		</view> -->
		<win-empty-view v-if="receiptList.length==0"></win-empty-view>
		<view v-for="(item, index) in receiptList" :key="index" @click="openDetail(item)">
			<com-receipt :receiptItem="item"></com-receipt>
		</view>
		<uni-load-more :status="loadingType" v-if="receiptList.length>0" />
		<win-scan-button @goScan='openScanPopup'></win-scan-button>
		<win-mulit-scan ref="scanPopup" :titleArray="tabBars" @getScanResult='getScanResult'></win-mulit-scan>
		<com-scan-receipt-list ref="scanList" @selectedItem="selectedItem"></com-scan-receipt-list>
		<comMessage ref="comMessage"></comMessage>
		<!-- <movable-area>
			<movable-view class="movable-max" direction="all">
				<win-scan-button @goScan='openScanPopup'></win-scan-button>
			</movable-view>
		</movable-area> -->
	</view>
</template>

<script>
	import {
		getReceiptJobList,
		getReceiptJobByNumber,
		getReceiptJobByAsnNumber
	} from '@/api/index.js';
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		goHome
	} from '@/common/basic.js';
	import winEmptyView from '@/mycomponents/wincom/winEmptyView.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import winMulitScan from '@/mycomponents/wincom/winMulitScan.vue'
	import comReceipt from '@/mycomponents/coms/task/comReceipt.vue'
	import comScanReceiptList from '@/mycomponents/scan/comScanReceiptList.vue'
	export default {
		name: 'receipt',
		components: {
			winEmptyView,
			comReceipt,
			comMessage,
			winScanButton,
			winMulitScan,
			comScanReceiptList
		},
		data() {
			return {
				receiptList: [],
				reload: false,
				status: '',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				pageSize: this.modelConfig,
				pageIndex: 1,
				isTimeWindowSorting: false,
				isToday: false,
				tabBars: ['发货单'],
				loadingType: "nomore"
			};
		},

		onShow() {
			if (this.$isReceiptToday) {
				this.isToday = this.$isReceiptToday;
			}
			this.getList('refresh');
		},

		onReachBottom() {
			//避免多次触发
			if (this.loadingType == 'loading' || this.loadingType == 'nomore') {
				return;
			}
			this.getList("more");
		},

		onPullDownRefresh() {
			this.getList('refresh');
		},

		//后退按钮
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			goHome();
			return true;
		},

		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}
		},
		filters: {
			statusStyle: function(val) {
				return getJobStatuStyle(val);
			},
			statusColor: function(val) {
				return getJobStatuDesc(val);
			},

		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			closeScanPopup() {
				this.$refs.popup.close()
			},
			//按时间窗口排序
			timeSortingChange: function() {
				this.isTimeWindowSorting = !this.isTimeWindowSorting;
				this.getList('refresh')
			},

			//只看当天到货
			isTodayChange: function() {
				this.isToday = !this.isToday;
				this.getList('refresh')
			},

			getList(type) {
				let that = this;
				uni.showLoading({
					title: "加载中....",
					mask: true
				});

				this.loadingType = "loading";
				if (type === "refresh") {
					this.pageIndex = 1;
					this.receiptList = [];
				}
				let params = {
					pageSize: that.pageSize,
					pageIndex: that.pageIndex,
					isTimeWindowSorting: that.isTimeWindowSorting,
					isToday: that.isToday,
				};
				getReceiptJobList(params)
					.then(res => {
						uni.hideLoading();
						if (type === "refresh") {
							uni.stopPullDownRefresh();
						}
						var list = res.items;
						this.loadingType = "loadmore";
						if (list == null || list.length == 0) {
							//没数据了
							this.loadingType = "nomore";
							return;
						}
						that.receiptList = type === "refresh" ? list : this.receiptList.concat(list);
						that.pageIndex++;

					})
					.catch(err => {
						this.loadingType = "";
						this.showMessage(err.message);
						uni.hideLoading();
						if (type === "refresh") {
							uni.stopPullDownRefresh();
						}
					});
			},

			getScanResult(type, result) {
				let code = result.data.code;
				if (code == "") {
					this.showMessage('扫描内容不能为空')
					return;
				}
				if (type == '任务编号') {
					this.getByNumber(type, code);
				} else if (type == '发货单') {
					this.getByAsnNumber(type, code);
				}
			},

			getByNumber(type, code) {
				let that = this;
				uni.showLoading({
					title: "加载中....",
					mask: true
				});
				let params = {
					number: code,
					isToday: that.isToday
				};
				getReceiptJobByNumber(params).then(res => {
					uni.hideLoading();
					if (res) {
						that.openDetail(res);
					} else {
						that.showMessage('未查找到' + type + '为【' + code + '】的收货任务');
					}
				}).catch(err => {
					that.showMessage(err.message);
					uni.hideLoading();
				});
			},

			getByAsnNumber(type, code) {
				let that = this;
				uni.showLoading({
					title: "加载中....",
					mask: true
				});
				let params = {
					asnNumber: code,
					isToday: that.isToday
				}
				getReceiptJobByAsnNumber(params).then(res => {
					uni.hideLoading();
					if (res.totalCount == 0) {
						that.showMessage('未查找到' + type + '为【' + code + '】的收货任务');
					} else if (res.totalCount == 1) {
						that.openDetail(res.items[0]);
					} else {
						this.showItemList(res.items);
					}
				}).catch(err => {
					that.showMessage(err.message);
					uni.hideLoading();
				});
			},

			openDetail(item) {
				uni.navigateTo({
					url: './receipt_detail?id=' + item.id + '&jobStatus=' + item.jobStatus
				});
			},

			showItemList(itemList) {
				this.$refs.scanList.openPopup(itemList);
			},
			selectedItem(item) {
				this.openDetail(item);
			},
			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
		},
	}
</script>

<style scoped lang="scss">
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 150rpx;
		width: 150rpx;
	}

	movable-area {
		height: 500rpx;
		width: 100%;
		overflow: hidden;
	}

	.movable-max {
		width: 500rpx;
		height: 500rpx;
	}
</style>