WZC2/fe/PDA/mycomponents/scan/comScanUnpick.vue

<template>
	<uni-popup ref="popup">
		<view>
			<view class="popup_box">
				<view class="pop_title">
					扫描信息
					<text class="fr" @click="closeScanPopup()">关闭</text>
				</view>
				<view class="uni-steps">
					<com-steps-custom :options="list" :active="active"></com-steps-custom>
				</view>
				<view class="pop_tab">
					<view class="tab_info tab_notitle">
						<win-com-scan ref="scancom" @getScanResult="getScanResult" :placeholder="scanPlaceholder"
							:boxFocus="true" :clearResult="true"></win-com-scan>
					</view>
					<scroll-view scroll-y="true" class="scroll-Y scan_scroll">
						<view class="pop_list creattp_list">
							<view class="detail-content" v-for="(item, index) in itemList" :key="item.id">
								<com-base-info :dataContent='item'></com-base-info>
								<view v-if="item.scaned" class="choose_marked">
									<image src="@/static/image_marked.svg"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="pop_btn uni-flex uni-row space-between">
					<button class="cancel" @click="cancel">取消</button>
					<button class="save" @click="save">确定</button>
				</view>
			</view>
			<comMessage ref="comMessage"></comMessage>
		</view>
	</uni-popup>
</template>

<script>
	import {
		getInventoryTypeStyle,
		getInventoryStatusDesc,
	} from '@/common/basic.js';

	import comStepsCustom from '@/mycomponents/common/comStepsCustom.vue'
	import winComScan from '@/mycomponents/wincom/winComScan.vue'
	import comBaseItem from '@/mycomponents/comItem/comBaseItem.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import {
		balances,
	} from '@/api/index.js';

	import {
		compare,
		showConfirmMsg,
	} from '@/common/basic.js';

	export default {
		name: 'comScanUnpick',
		components: {
			comStepsCustom,
			winComScan,
			comBaseInfo,
			comMessage
		},
		data() {
			return {
				active: 0,
				list: [{
					title: '扫描托标签',
					num: "1"
				}, {
					title: '扫描箱标签',
					num: "2"
				}],
				itemList: [],
				locationCode: '',
				defaultPlaceholder: '扫描托标签',
				scanPlaceholder: ''
			};
		},
		props: {

		},
		filters: {
			statusStyle: function(val) {
				return getInventoryTypeStyle(val);
			},
			statusColor: function(val) {
				return getInventoryStatusDesc(val);
			},
		},
		mounted() {
			this.scanPlaceholder = this.defaultPlaceholder;
		},
		onPullDownRefresh() {

		},
		onLoad() {

		},
		methods: {
			openScanPopup(content) {
				this.$refs.popup.open('bottom');
			},
			closeScanPopup(content) {
				this.$refs.popup.close();
			},
			getScanResult(result) {
				if (this.active == 0) //托标签
				{
					this.scanContainer(result);
				} else //ERP料号
				{
					this.scanPack(result);
				}
			},

			//扫描托标签
			scanContainer(result) {
				let that = this;
				let code = '';
				if (result.data.scanType === 'qrcode') {
					if (result.data.isPack === false) {
						code = result.data.containerCode;
					} else {
						that.showMessage('请扫描托标签');
					}
				} else if (result.data.scanType === 'barcode') {
					code = result.data.code;
				}
				if (code != '') {
					let params = {
						pageSize: 1000,
						pageIndex: 1,
						containerCode: code
					};
					balances(params)
						.then(res => {
							if (res.totalCount === 0) {
								that.showMessage('未查找到库存记录');
							} else {
								res.items.forEach(r => {
									r.scaned = false;
									r.scanDate = new Date();
								})
								that.itemList = res.items;
								that.afterScanContainer();
							}
						})
						.catch(err => {
							that.showMessage(err.message);
						});
				}
			},

			//扫描完库位的下一步动作
			afterScanContainer() {
				this.active += 1;
				this.scanPlaceholder = '扫描箱标签';
			},

			scanPack(result) {
				let that = this;
				if (result.data.isPack) {
					let data = that.itemList.find(r => {
						return r.packingCode == result.data.packingCode && r.itemCode === result.data.itemCode && r
							.lot === result.data.lot
					})
					if (data != undefined) {
						data.scaned = true;
						data.scanDate = new Date();
						that.itemList.sort(compare('scanDate')); //按扫描信息排序
					} else {
						this.showMessage('列表中不存在扫描的零件');
					}
				} else {
					this.showMessage('请先扫描箱标签');
					return;
				}
			},

			save() {
				let that = this;
				if (this.itemList.length == 0) {
					return;
				} else {
					let items = this.itemList.filter(r => {
						return r.scaned
					})
					if (items.length === 0) {
						this.showMessage('请扫描标签');
					} else {
						this.closeScanPopup();
						this.$emit('confirm', items)
					}
				}
			},

			//扫描完库位的下一步动作
			afterScanlocation() {
				this.active += 1;
				this.scanPlaceholder = this.defaultPlaceholder;
			},

			//取消
			cancel() {
				this.active = 0;
				this.itemList = [];
				this.locationCode = ''
				this.scanPlaceholder = this.defaultPlaceholder;
			},

			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
		}
	};
</script>


<style>
</style>