appWareHouse/pages/outStock/location.vue

<template>
	<view class="box-container">
		<image class="img-container" src="@/static/images/common/forkliftWarehousing.png">
		</image>
		<u-navbar leftIconSize="25px" height="80px" leftIconColor="#fff" bgColor="#1A4F94" :autoBack="true">
		</u-navbar>
		<view class="entry-info">
			<view style="margin-bottom: 30rpx;font-size: 16px;font-weight: 600;">请录入</view>
			<u-form labelPosition="left" labelWidth="90px" :model="ruleForm" :rules="rules" ref="ruleFormRef">
				<view style="margin-top: 10px;">
					<u-search :customStyle="{backgroundColor: '#F5F5F5'}" @clickIcon="input" @search="input"
						@scanIcon="getLocationScanData" @change="input" @focus="show = true" @blur="blurData" clearable
						placeholder="请输入库位号" v-model="location" shape="round" :showAction="false">
					</u-search>
				</view>
				<fuzzy-list label-name="optionText" value-name="optionValue" align="center" no-data="暂无数据" :show="show"
					:list="list" :custom-style="{ fontSize: '30rpx' }" @select="select"></fuzzy-list>
				<u-form-item label="库位号" style="margin-top: 10px;">
					<view style="display: flex;flex-wrap: wrap;width: 60%;">
						<view v-for="(item,index) in ruleForm.locationList" style="display: flex;align-items: center;">
							<view v-show="ruleForm.locationList.length">{{item}}</view>
							<u-icon name="close" v-show="ruleForm.locationList.length" @click="clearValue(index)"
								size="15" color="#BFBFBF" style="margin-left: 20rpx;margin-right: 20rpx;"></u-icon>
						</view>
					</view>
				</u-form-item>
				<button type="primary" class="btn" @tap="submitData">叉车入库</button>
			</u-form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import store from '@/store/index'
	import Api from '@/api/api.js'
	import {
		initScan,
		startScan,
		stopScan
	} from "@/libs/scan.js"
	import FuzzyList from '@/components/fuzzySearch.vue';
	import debounce from '@/components/debounce.js';
	export default {
		components: {
			FuzzyList
		},
		onLoad(op) { //option为object类型，会序列化上个页面传递的参数
			if (op.orderNo) {
				this.ruleForm.orderNo = op.orderNo
				this.getList()
			}
		},
		onShow() {
			initScan(this.scanSuccess);
			startScan();
		},

		onHide() {
			stopScan();
		},
		data() {
			return {
				ruleForm: {
					warehouseId: store.state.userInfo.branchId,
					orderNo: "",
					orderNos: [],
					workType: "4",
					locationList: [],
					number: "",
					userId: "",
				},
				location: "",
				rules: {},
				show: false,
				list: [],
				selectData: null,
				selected: false,
			}
		},

		methods: {
			input(val) {
				this.show = true
				debounce(this.getList, 500);
			},
			blurData() {
				setTimeout(()=>{
					if (!this.selected) {
						this.show = false
					}
				},1)
				
			},
			select(event) {
				this.selected = true
				this.pickerConfirm(event.optionText)

			},
			getList() {
				Api.storge.queryLocationByOrderNo({
					orderNo: this.ruleForm.orderNo,
					warehouseLocationCode: this.location
				}).then(({
					data
				}) => {
					this.list = data || []
					console.log(this.list, 'this.list');
				})
			},
			async scanSuccess(code) {
				this.pickerConfirm(code.trim())
			},
			pickerConfirm(val) {
				this.ruleForm.locationList.push(val)
				this.ruleForm.locationList = Array.from(new Set(this.ruleForm.locationList))
				this.show = false;
				this.selected = false
			},
			clearValue(index) {
				this.ruleForm.locationList.splice(index, 1);
			},
			getLocationData() {
				this.pickerConfirm(this.location)
			},
			getLocationScanData() {
				uni.scanCode({
					success: (res) => {
						if (res.result) {
							this.pickerConfirm(res.result.trim())
						}
					},
					fail: (err) => {

					},
					complete: () => {

					}
				})

			},
			submitData() {
				this.queryData()
			},
			queryData() {
				if (!this.ruleForm.locationList.length) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "库位号不可缺少",
					})
					return
				}
				Api.storge.forkliftIn(this.ruleForm).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: "提交入库成功",
					})
					this.ruleForm.locationList = []

				})

			}
		}
	}
</script>
<style lang="scss" scoped>
	.box-container {
		position: relative;

		.img-container {
			height: 684rpx;
			width: 100%;
			margin-top: 100rpx;
		}

		.entry-info {
			position: absolute;
			border-radius: 20px;
			top: 590rpx;
			width: 90%;
			left: 50%;
			transform: translate(-50%, 0);
			min-height: 430rpx;
			background-color: #fff;
			padding: 40rpx 40rpx;
			box-sizing: border-box;
			border: 2px solid #F7F9FF;

			.u-input__content {
				border: 1px solid #000 !important;
				background-color: #000 !important;
				border-radius: 100px;
				height: 60rpx;
			}

			.btn {
				border-radius: 12px;
				font-size: 28rpx;
				margin-top: 80rpx;
				background-color: #1A4F94;
			}
		}

	}
</style>