WZC2/fe/PDA/pages/store/tjDeliver_detail.vue

<template>
	<page-meta root-font-size="16px"></page-meta>
	<view class="">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
			@scroll="scroll" class="scroll-detail">
			<uni-swipe-action ref="swipeAction">
				<uni-swipe-action-item :disabled="isDeliverAll" v-for="(item, index) in details" :key="item.id"
					:right-options="options" @click="swipeClick($event, index)">
					<view class="deliver_card">
						<view class="uni-flex space-between card_info">
							<view :class="item.deliverState===1? deliverState1: item.deliverState===3?deliverState3:deliverState4" class="deliverState">
								<view class="content-text">
									<image class="icon_normal" src="@/static/icons_ui/icon_qiju_num.svg"></image>
									<text class="text_lightblue font_xs">器具号:</text>
									<b>{{item.containerCode}}</b>
								</view>
								<view class="content-text">
									<image class="icon_normal" src="@/static/icons_ui/icon_num.svg"></image>
									<text class="text_lightblue font_xs">数量:</text>
									<b>{{item.itemQty}}</b>
								</view>
							</view>
							<view class="card_state tjpending">待处理</view>
						<!-- <view class="card_state tjsent">已发货</view> -->
						<!-- <view class="card_state tjnosend">不发货</view> -->
						</view>
			
					</view>
					
				</uni-swipe-action-item>
			</uni-swipe-action>
		</scroll-view>

		<view class="new_btn_bot">
			<button :disabled="submitting" class="new_save_btn" @click="submit()">提交</button>
		</view>
		<win-scan-button @goScan='openScanPopup'></win-scan-button>
		<win-scan-by-code ref="scanPopup" title='扫描器具编号' @getScanCode='getScanContainerCode' ></win-scan-by-code>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		getJisDeliverDetail,
		takeJisDeliverJob,
		cancelTakeJisDeliverJob,
		finshJisDeliverJob
	} from '@/api/index.js';
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		compare,
		showConfirmMsg,
		goHome,
		getCurrDate,
		toYYYY_MM_DD
	} from '@/common/basic.js';

	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import winScanByCode from '@/mycomponents/wincom/winScanByCode.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	
	export default {
		name: 'deliverRandom',
		components: {
			winScanButton,
			winScanByCode,
			comMessage
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				pageSize: 100,
				pageIndex: 1,
				isDeliverAll: false,
				deliverState1: 'deliverState1',
				deliverState3: 'deliverState3',
				deliverState4: 'deliverState4',
				submitting: false,
				options: [{
					text: '不发',
					style: {
						backgroundColor: '#F56C6C',
					}
				}],
				details: [],
				containerCode: ''
			};
		},
		props: {

		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}else if(e.index === 1){
				window.location.reload();
			}
		},
		filters: {
			statusStyle: function(val) {
				return getJobStatuStyle(val);
			},
			statusColor: function(val) {
				return getJobStatuDesc(val);
			},
		},
		mounted: function() {
			console.log('isOrderDeliver', this.isOrderDeliver == true ? '是' : '否')
		},

		onLoad: function(param) {
			this.isDeliverAll = param.isDeliverAll === 'true' ? true : false;
			//this.initData();
			this.id = param.id;
			if (param.jobStatus == 1) {
				this.receive((callback => {
					this.received = true;
					this.getDetail();
				}));
			} else {
				this.getDetail();
			}
		},

		onBackPress(e) {
			this.goBack();
			return true;
		},

		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				let items = this.details.filter(r => r.deliverState > 1);
				if (items.length > 0) {
					showConfirmMsg('已经有扫描的器具,是否仍有返回首页?', confirm => {
						if (confirm) {
							goHome();
						}
					});
				} else {
					goHome();
				}
			}else if(e.index === 1){
				window.location.reload();
			}
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup()
			},
			getDetail() {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				let that = this;
				let params = {
					id: that.id,
				};
				getJisDeliverDetail(params)
					.then(res => {
						that.datacontent = res;
						that.details = res.details;
						if (res.details != null) {
							res.details.forEach(r => {
								r.deliverState = 1
							})
							that.defaultItem = res.details[0]; //取第一条盘点明细，做为新增明细的库存状态
						}
						uni.hideLoading();
					}).catch(err => {
						this.showMessage(err.message);
						this.hideLoading();
					});;
			},

			// //扫描器具号containerCode
			// getScanContainerCode(result) {
			// 	if (result.data.code === undefined) {
			// 		this.showMessage('未解析到器具号');
			// 	} else {
			// 		let code = result.data.code;
			// 		let data = this.details.find(r => r.containerCode === code);
			// 		if (data != null) {
			// 			data.deliverState = 3;
			// 			this.$forceUpdate();
			// 		} else {
			// 			this.showMessage('当前任务中未查找到器具[' + code + ']');
			// 		}
			// 	}
			// },


			//扫描器具号containerCode
			getScanContainerCode(containerCode) {
				let code = containerCode;
				let data = this.details.find(r => r.containerCode === code);
				if (data != null) {
					data.deliverState = 3;
					this.$forceUpdate();
				} else {
					this.showMessage('当前任务中未查找到器具[' + code + ']');
				}
			},


			receive(callback) {
				let params = {
					id: this.id,
				};
				takeJisDeliverJob(params)
					.then(res => {
						callback();
					})
					.catch(err => {
						this.showMessage(err.message)
					});
			},

			submit() {
				let items = this.details.filter(r => r.deliverState === 1);
				if (items.length > 0) {
					this.showMessage('还有未扫描的器具不可以提交');
				} else {
					this.submitting = true;
					uni.showLoading({
						title: "提交中...",
						mask: true
					});

					uni.hideLoading();
					this.submitting = false;

					this.details.forEach(r => {
						r.status = r.deliverState
					})
					this.datacontent.details = this.details;
					let params = JSON.stringify(this.datacontent);

					finshJisDeliverJob(this.id, params)
						.then(res => {
							setTimeout(() => {
								if (this.isDeliverAll) {
									uni.navigateTo({
										url: './deliverAll'
									})
								} else {
									uni.navigateTo({
										url: './deliverMany'
									})
								}
							}, 1000)
							this.showMessage('提交成功');
							this.hideLoading();
						})
						.catch(err => {
							this.showMessage(err.message);
							this.hideLoading();
						});
				}
			},

			goBack() {
				if (this.details != null) {
					let items = this.details.filter(r => r.deliverState > 1);
					if (items.length > 0) {
						showConfirmMsg('已经有扫描的器具,是否仍有返回?', confirm => {
							if (confirm) {
								this.back();
							}
						});
					} else {
						this.back();
					}
				}
			},

			back() {
				if (this.isDeliverAll) {
					uni.navigateTo({
						url: './deliverAll'
					})
				} else {
					uni.navigateTo({
						url: './deliverMany'
					})
				}
			},

		 

			swipeClick(e, index) {
				let {
					content
				} = e;

				if (content.text === '不发') {
					let data = this.details.find((item, i) => {
						return i === index
					})
					if (data != null) {
						data.deliverState = 4;
						this.$forceUpdate();
					}
				}
			},

			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},

			hideLoading() {

			},

			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop;
			},
		}
	};
</script>

<style scoped lang="scss">
	.display-input {
		padding: 5rpx 5rpx;
	}

	/deep/ .input-value {
		font-size: 16px;
	}

	/deep/ .uni-collapse-item__title-text {
		font-size: 16px;
	}

	// .deliverState1 {
	// 	background-color: white;
	// }

	// .deliverState3 {
	// 	background-color: aquamarine;
	// }

	// .deliverState4 {
	// 	background-color: #ff0000;
	// }

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 60px;
		line-height: 30px;
		padding: 2px 0px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		padding: 0px 10px;
	}

	/deep/ .uni-swipe_button {
		// height: 60px;
		justify-content: center;
		margin-top: 20rpx;
	}
</style>