appWareHouse/pages/initiateInventoryCount/index.vue

<template>
	<view class="box-container">
		<image class="img-container" src="@/static/images/common/initiateInventoryCount.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">
				<u-form-item prop="orderNo">
					<u-search :customStyle="{backgroundColor: '#F5F5F5'}" @clickIcon="getSearchData"
						@search="getSearchData" @scanIcon="getScanData" clearable placeholder="请输入订单号"
						v-model="ruleForm.orderNo" shape="round" :showAction="false">
					</u-search>
				</u-form-item>
				<u-form-item prop="number">
					<u-input :customStyle="{backgroundColor: '#F5F5F5'}" clearable placeholder="请输入盘点数"
						v-model="ruleForm.number" shape="circle" type="number">
						<template slot="prefix">
							<u-icon name="edit-pen" @click="getSearchData"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="库位号">
					<view v-show="locationLabel">{{locationLabel}}</view>
					<u-icon name="close" v-show="locationLabel" @click="clearValue" size="15" color="#BFBFBF"
						style="margin-right: 80rpx;margin-left: 50rpx;"></u-icon>
					<view @tap="show = true">请选择</view>
				</u-form-item>
				<u-picker @cancel="show = false" :show="show" :columns="columns" keyName="optionText"
					@confirm="pickerConfirm"></u-picker>
				<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"
	export default {
		onShow() {
			initScan(this.scanSuccess);
			startScan();
			Api.storge.queryByDictCode({
				dictCode: "warehouse_location",
				type: "3",
				searchKey: "",
				sqlText: "",
				placeholder: {
					"#warehouseId": store.state.userInfo.branchId
				}
			}).then(res => {

				if (res?.data?.records) {
					this.columns = [res.data.records]
				}

			})
		},

		onHide() {
			stopScan();
		},
		data() {
			return {
				ruleForm: {
					warehouseId: store.state.userInfo.branchId,
					orderNo: "",
					orderNos: [],
					workType: "9",
					location: "",
					number: "",
					userId: "",
				},
				show: false,
				locationLabel: "",
				rules: {
					orderNo: {
						required: true,
						message: '请输入订单号',
						trigger: ['blur', 'change']
					},
					number: {
						required: true,
						message: '请输入盘点数',
						trigger: ['blur', 'change']
					},
				},
				columns: [
					[]
				]
			}
		},

		methods: {
			async scanSuccess(code) {
				this.ruleForm.orderNo = code.trim()
				this.queryData()
			},
			pickerConfirm(val) {
				this.ruleForm.location = val.value[0].optionValue
				this.locationLabel = val.value[0].optionText
				this.show = false
			},

			clearValue() {
				this.ruleForm.location = ""
				this.locationLabel = ""
			},
			getSearchData() {
				this.queryData()
			},
			getScanData() {
				uni.scanCode({
					success: (res) => {
						if (res.result) {
							this.ruleForm.orderNo = res.result.trim()
							this.queryData()
						}

					},
					fail: (err) => {

					},
					complete: () => {

					}
				})

			},
			submitData() {
				this.queryData()
			},
			queryData() {
				if (!this.ruleForm.location) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "请输入库位号",
					})
					return
				}
				this.$refs.ruleFormRef.validate().then(valid => {
					Api.storge.inventory(this.ruleForm).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: "提交盘点成功",
						})
						this.ruleForm.orderNo = ""
						this.ruleForm.location = ""
						this.ruleForm.number = ""
						this.locationLabel = ""


					})
				})

			}
		}
	}
</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>