WZC2/fe/PDA/views/task/count_detail.vue

<!-- 盘点任务详情 -->
<template>
	
	<view class="">
		<page-meta root-font-size="18px" :page-style="'overflow:'+(isShowScanPopup?'hidden':'visible')"></page-meta>
		<scroll-view scroll-y="true" class="scroll-detail" :scroll-top="scrollTop" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="top_card">
				<com-count-scan-detail :jobContent="datacontent" :allCount="allCount" :scanCount="scanCount"
					:newCount="newCount" :location="location">
				</com-count-scan-detail>
			</view>
			<view class="detail-list" v-for="(item, index) in details" :key="item.id">
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options" :auto-close="false"
						@click="swipeClick($event,item,index)">
						<view class="detail-content common_card">
							<view class="choose_main">
								<view class="ljh_box">
									<view class="ljh_info">
										<view class="tit_ljh">{{ item.itemCode }}</view>
										<view class="label_xm font_sm fr">{{ item.packingCode }}</view>
									</view>
									<view class="desc_card uni-flex space-between">
										<view class="desc_ljh">
											<view class="font_xs text_lightblue"> {{ item.itemName }}</view>
											<view class="font_xs text_lightblue">{{ item.itemDesc1 }}
											</view>
										</view>
									</view>
								</view>
								<view class="list_form">
									<view>
										<uni-table style="overflow-x: hidden;">
											<uni-tr>
												<uni-th width="100"></uni-th>
												<uni-th width="100" align="center">库存</uni-th>
												<uni-th width="100" align="center">盘点</uni-th>
											</uni-tr>
											<uni-tr>
												<uni-th width="100">数量({{item.inventoryUom}})</uni-th>
												<uni-th width="100" align="center">
													<text class="text_black">{{item.inventoryQty}}</text>
												</uni-th>
												<uni-th width="100" align="center">
													<com-number-box v-if="item.scaned && item.packingCode"
														v-model="item.countQty" :max="99999" :min="0"
														@change="qtyChanged($event,item)"
														style='margin-right: 10px;padding: 2px;'>
													</com-number-box>
													<com-number-box v-if="item.packingCode==''" v-model="item.countQty"
														@change="qtyChanged($event,item)" :max="99999" :min="0"
														style='margin-right: 10px;padding: 2px;'>
													</com-number-box>
													<text class="text_black"
														v-else-if="!item.scaned">{{item.countQty}}</text>

													<!-- <text class="text_black" v-if="item.packingCode"
																style="font-size: 1rem;">{{item.countQty}}</text>
															<com-number-box v-else v-model="item.countQty" :max="99999" :min="0"
																style='margin-right: 10px;padding: 2px;'>
															</com-number-box> -->

													<!--<uni-easyinput v-model="item.countQty" type="digit"
																@input="qtyInput($event,item)">
															</uni-easyinput> -->
												</uni-th>
											</uni-tr>
										</uni-table>
									</view>
								</view>
								<view style="margin:0 20rpx 20rpx;">
									<view class="uni-flex uni-row bot_card">
										<view class="bot_card_item">
											<label class="icon_bg icon_bg_kw">
												<image class="icon_normal" src="@/static/icons_ui/icon_kw.svg">
												</image>
											</label>
											<text>{{ item.locationCode }}</text>
										</view>
										<view class="bot_card_item">
											<label class="icon_bg icon_bg_pc">
												<image class="icon_normal" src="@/static/icons_ui/icon_pc.svg">
												</image>
											</label>
											<text>{{item.lot}}</text>
										</view>
										<view class="bot_card_item" style="width: 25%;">
											<view class="uni-flex" v-if="item.isNew ">
												<!-- picker的index默认是0 -->
												<picker @change="bindPickerChange($event,item)" :value="item.status-1"
													:range="statusArray">
													<view class="uni-flex " style="padding:5px 0px;">
														<text class="state_point"
															:class="statusStyle(item.status)">{{statusArray[item.status-1]}}</text>
														<image class="icon_normal"
															src="@/static/icons_ui/icon_down.svg">
														</image>
													</view>
												</picker>
											</view>
											<text v-else class="state_point" :class="statusStyle(item.status)">
												{{ statusColor(item.status)}}
											</text>
										</view>
									</view>
								</view>
							</view>

							<view class="uni-flex space-between" style="margin:0 20rpx 20rpx;"
								v-if="item.scaned || item.packingCode==''">
								<text class="font_xs"
									style="padding: 5px 2px; text-overflow: ellipsis; overflow: hidden;">{{item.countDescription}}</text>
								<view class="photo_btn fr" @click="openEditCountDesc(item)">
									<text class="fl font_xs" style="width:65px;">盘点描述</text>
								</view>
							</view>

							<view v-if="item.scaned" class="choose_marked">
								<image src="@/static/image_marked.svg"></image>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</scroll-view>

		<view class="new_btn_bot">
			<button class="new_save_btn" @click="submit()">提交</button>
		</view>
		<!-- <com-count-items ref='comcountItems' @selectedItem='selectedCountItem'> </com-count-items> -->
		<win-scan-button @goScan='openScanPopup'></win-scan-button>
		<win-scan-pack ref="scanPopup" @getScanResult='getScanResult' @close='closeScanPopup()'></win-scan-pack>
		<com-easy-input ref="descPopup" @confirm='closeEditCountDesc'></com-easy-input>
		<win-inventory-status ref="statusPopup"></win-inventory-status>
		<!-- com-message必须放在最下层 -->
		<com-message ref="comMessage" @afterCloseCommitMessage='closeCommitMessage()'></com-message>
	</view>
</template>

<script>
	import {
		getCountJobDetail,
		takeCountJob,
		cancelTakeCountJob,
		finishCountJob,
		getBalancesByFilterAsync,
		getitems,
		locationsAsync
	} from '@/api/index.js';
	import {
		getJobStatuStyle,
		getJobStatuDesc,
		getCountStageDesc,
		getCheckTypeDesc,
		getCountMethodDesc,
		getInventoryStatusDesc,
		getInventoryTypeStyle,
		showConfirmMsg,
		goHome,
		getISODateTime,
		compare,
		getRemoveOption
	} from '@/common/basic.js';

	import {
		getInventoryStatusArray
	} from '@/common/array.js'

	//import comCountItems from '@/mycomponents/coms/task/comCountItems.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue';
	import winScanButton from '@/mycomponents/wincom/scanCom/winScanButton.vue'
	import winScanPack from '@/mycomponents/wincom/scanCom/winScanPack.vue';
	import comJobScanDetail from '@/mycomponents/comjob/comJobScanDetail.vue'
	import comCountScanDetail from '@/mycomponents/coms/task/comCountScanDetail.vue';
	import comNumberBox from '@/mycomponents/common/comNumberBox.vue';
	import comEasyInput from '@/mycomponents/common/comEasyInput.vue';
	import winInventoryStatus from '@/mycomponents/wincom/winInventoryStatus.vue';

	export default {
		components: {
			// comCountItems,
			comMessage,
			winScanButton,
			winScanPack,
			comCountScanDetail,
			comNumberBox,
			comEasyInput,
			winInventoryStatus
		},
		data() {
			return {
				type: '',
				id: '',
				datacontent: {},
				details: {},
				currentItem: {},
				editDescItem: {},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scanResult: {},
				allCount: 0,
				newCount: 0,
				scanCount: 0,
				options: [],
				location: null,
				topItem: '',
				isShowScanPopup: false,
				statusArray: [],
				allStatusArray: []
				// array: [{
				// 	text: '待检',
				// 	value: 1
				// }, {
				// 	text: '合格',
				// 	value: 2
				// }, {
				// 	text: '不合格',
				// 	value: 3
				// }, {
				// 	text: '隔离',
				// 	value: 4
				// }, {
				// 	text: '报废',
				// 	value: 5
				// }, {
				// 	text: '冻结',
				// 	value: 6
				// }], 
			}
		},
		props: {},
		onLoad: function(param) {
			this.id = param.id;
			if (param.jobStatus == 1) {
				this.receive((callback => {
					this.received = true;
					this.getDetail();
				}));
			} else {
				this.getDetail();
			}
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}
		},
		//拦截返回按钮事件
		onBackPress(e) {
			if (this.received) {
				//取消承接任务	
				cancelTakeCountJob(this.id)
					.then(res => {})
					.catch(err => {
						this.showMessage(err.message);
					});
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
			this.options = getRemoveOption();
			this.allStatusArray = getInventoryStatusArray();
			this.allStatusArray.forEach(r => {
				this.statusArray.push(r.text)
			})
		},
		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let that = this;
				let params = {
					id: that.id,
				};
				getCountJobDetail(params)
					.then(async res => {
						that.datacontent = res;
						that.allCount = res.details.length
						if (res.details != null) {
							res.details.forEach(r => {
								r.scaned = false
								r.countTime = new Date()
								// r.countQty = r.inventoryQty;
								r.countQty = 0;
							})
						}
						that.details = res.details;
						//查询库位信息
						let locationCode = that.datacontent.locationCode;
						let location = await locationsAsync(locationCode);
						if (location == '') {
							that.showMessage('未查找到库位信息【' + locationCode + '】');
						} else {
							that.location = location;
						}
					});
				uni.hideLoading();
			},

			getScanResult(result) {
				let that = this;
				this.scanResult = result;

				let itemCode = result.data.itemCode;
				let packingCode = result.data.code === null ? '' : result.data.code;
				let lot = result.data.lot === null ? '' : result.data.lot;
				// let items = this.details.filter(r => r.itemCode === itemCode &&
				// 	r.packingCode === packingCode && r.lot === lot)
				let items = this.details.filter(r =>
					r.packingCode === packingCode)
				if (items.length === 0) {
					//按零件盘点，不能添加其他零件为明细
					if (this.datacontent.countMethod === 2) {
						if (this.details[0].itemCode === itemCode) {
							this.addNewDetail(result);
						} else {
							this.showMessage('扫描的库存不在列表中');
						}
					} else {
						this.addNewDetail(result);
					}
				} else if (items.length === 1) {
					let item = items[0];
					this.currentItem = item;
					if (item.scaned) {
						this.setQty(item, item.countQty);
						// this.showMessage('该库存已经完成盘点,请扫描下一标签');
					} else {
						this.setQty(item, item.inventoryQty);
					}
				} else {
					this.showMessage('盘点数量异常,箱码【' + packingCode + '】的出现多条数据');
				}
				this.scrollToTop();
				this.calcScanCount();
			},

			addNewDetail(result) {
				if (this.location == null) {
					this.showMessage('未查找到库位信息,不可以添加为任务明细');
					return;
				}
				showConfirmMsg('扫描的库存在任务中不存在,是否要添加为任务明细?', async confirm => {
					if (confirm) {
						let balanceItem = await this.getBalanceAsync(result);
						let detail = this.creatDetail(result);
						if (balanceItem != null) {
							this.setDetailByBalance(detail, balanceItem);
						} else {
							this.setDetailNoBalance(detail, result)
						}
						this.details.unshift(detail);
						this.calcAllCount();
						this.calcScanCount();
						this.$forceUpdate();
					} else {
						this.scanPopupGetfocus();
					}
				});
			},

			async getBalanceAsync(result) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let that = this;
				//按照零件号和箱码去查询库存
				let params = {
					pageSize: 100,
					pageIndex: 1,
					itemCode: result.data.itemCode,
					packingCode: result.data.packingCode
				};
				let balanceRes = await getBalancesByFilterAsync(params);
				uni.hideLoading();
				if (balanceRes.totalCount === 0) {
					// this.showMessage('箱码【' + result.data.packingCode + '】在未查询到库存信息,不可以进行盘点')
					return null;
				} else {
					let balanceItem = balanceRes.items[0];
					return balanceItem;
				}
			},

			creatDetail(result, balanceItem) {
				let detail = {
					isNew: true,
					scaned: true,
					countTime: new Date(),
					masterID: this.id,
					countLabel: "",
					number: this.datacontent.number,

					inventoryQty: 0,
					inventoryUom: result.data.uom,

					packingCode: result.data.packingCode,
					lot: result.data.lot,

					itemCode: result.data.itemCode,
					itemName: result.data.itemName,
					itemDesc1: result.data.itemDesc1,
					itemDesc2: result.data.itemDesc2,

					locationCode: this.location.code,
					locationGroup: this.location.locationGroupCode,
					locationArea: this.location.areaCode,
					locationErpCode: this.location.erpLocationCode,

					countOperator: localStorage.userId,
					warehouseCode: localStorage.warehouseCode,

					supplierBatch: result.data.supplierBatch,
					arriveDate: result.data.arriveDate,
					produceDate: result.data.produceDate,
					expireDate: result.data.expireDate,
					stdPackQty: result.data.stdPackQty,
					stdPackUom: result.data.stdPackUom,
				};
				return detail;
			},

			setDetailByBalance(detail, balanceItem) {
				detail.InventoryLocationCode = balanceItem.locationCode;
				detail.countQty = balanceItem.qty;
				detail.status = balanceItem.status;
				return detail;
			},

			setDetailNoBalance(detail, result) {
				detail.InventoryLocationCode = "";
				detail.countQty = result.data.qty;
				detail.status = 2;
				return detail;
			},

			setQty(item, qty) {
				item.scaned = true;
				item.countQty = Number(qty);
				item.countTime = new Date();
				item.countOperator = localStorage.userId;
				this.details.sort(compare('countTime')); //按扫描信息排序
				this.$forceUpdate();
			},

			//提示是否移除选择的行?
			swipeClick(e, item, index) {
				let that = this;
				let {
					content
				} = e;

				if (item.isNew) {
					if (content.text === '移除') {
						uni.showModal({
							title: '提示',
							content: '是否移除选择的行?',
							success: res => {
								if (res.confirm) {
									that.details.splice(index, 1);
								}
							}
						});
					}
				} else {
					uni.showToast({
						title: '盘点任务中的零件不可以删除',
						icon: 'error',
						duration: 1000
					})
				}
			},

			getitem(itemCode, callback) {
				getitems(itemCode).then((res) => {
					if (res === null) {
						this.showMessage('未查找到零件信息,不可以进行盘点');
					} else {
						callback(res);
					}
				}).catch((err) => {
					this.showMessage(err.message);
				})
			},

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

			submit() {
				let that = this;
				let unCheckedItems = that.details.filter(r => {
					return r.scaned === false
				})
				if (unCheckedItems.length > 0) {
					//还有未扫描的零件,是否要提交?如果确定提交,盘点数量将置为0
					showConfirmMsg('是否要将未扫描的盘点数量置为0?', confirm => {
						if (confirm) {
							unCheckedItems.forEach(r => {
								r.countQty = Number(0)
							})
							that.finish();
						}
					})
				} else {
					that.finish();
				}
			},

			finish() {
				if (this.details.length == 0) {
					showConfirmMsg('还没有要盘点的任务详情,是否要继续提交?', confirm => {
						if (confirm) {
							this.finishJob();
						}
					});
				} else {
					this.finishJob();
				}
			},

			finishJob() {
				let that = this;
				uni.showLoading({
					title: "提交中...",
					mask: true
				});
				this.datacontent.details = this.details;
				let params = JSON.stringify(this.datacontent);
				finishCountJob(this.id, params)
					.then(res => {
						uni.hideLoading();
						if (res != null) {
							that.showCommitSuccessMessage();
							that.backJobList(1000);
						}
					})
					.catch(err => {
						this.showMessage(err.message);
						uni.hideLoading();
					});
			},

			//返回任务列表页
			backJobList(delay) {
				setTimeout(() => {
					uni.navigateTo({
						url: './count'
					})
				}, delay)
			},

			qtyChanged(value, item) {
				if (value > 0) {
					item.scaned = true
					item.countTime = new Date();
					item.countOperator = localStorage.userId;
					this.calcScanCount();
				}
			},

			calcAllCount() {
				this.allCount = this.details.length;
				this.newCount = this.details.filter(r => r.isNew).length;
			},

			calcScanCount() {
				this.scanCount = this.details.filter(r => r.scaned === true).length;
			},

			bindPickerChange(e, item) {
				let index = e.detail.value;
				let text = this.statusArray[index];
				//根据选择的状态返回allStatusArray中的状态
				let status = this.allStatusArray.find(r => {
					return r.text == text
				})
				item.status = status.value;
				this.$forceUpdate();
			},

			openScanPopup() {
				this.isShowScanPopup = true;
				this.$refs.scanPopup.openScanPopup();
			},

			closeScanPopup() {
				this.isShowScanPopup = false;
			},

			scanPopupGetfocus() {
				this.$refs.scanPopup.getfocus();
			},

			openEditCountDesc(item) {
				this.editDescItem = item;
				this.$refs.descPopup.openPopup(item.countDescription);
			},

			closeEditCountDesc(content) {
				this.editDescItem.countDescription = content;
				this.$forceUpdate();
			},

			showCommitSuccessMessage() {
				this.$refs.comMessage.showCommitSuccess();
			},

			closeCommitMessage() {
				this.backJobList(0); //点关闭直接返回列表
				uni.hideLoading();
			},

			openStatusPopup() {
				this.$refs.statusPopup.openPopup('');
			},

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

			scrollToTop() {
				let that = this;
				// 解决view层不同步的问题
				that.scrollTop = that.old.scrollTop
				this.$nextTick(function() {
					that.scrollTop = 0
				});
			},

			upper(e) {
				console.log(e)
			},
			lower(e) {
				console.log(e)
			},
			scroll(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			statusStyle: function(val) {
				return getJobStatuStyle(val);
			},
			statusColor: function(val) {
				return getJobStatuDesc(val);
			},
			statusStyle: function(val) {
				return getInventoryTypeStyle(val);
			},
			statusColor: function(val) {
				return getInventoryStatusDesc(val);
			},
			countStageDesc: function(val) {
				return getCountStageDesc(val);
			},
			checkTypeDesc: function(val) {
				return getCheckTypeDesc(val);
			},
			countMethodDesc: function(val) {
				return getCountMethodDesc(val);
			},
			inventoryStatuStyle: function(val) {
				return getInventoryTypeStyle(val);
			},
			inventoryStatusColor: function(val) {
				return getInventoryStatusDesc(val);
			},

		},
	}
</script>

<style scoped lang="scss">
	.flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.popup-content {
		// .flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>