appWareHouse/pages/outStock/recordingVolume.vue

<template>
	<view class="box-container">
		<image class="img-container" src="@/static/images/common/recordingVolume.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="9px" :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>
				<view style="color: #BFBFBF; font-size: 11px; margin-top: 10px">
					tips:在未使用自动测量设备的情况下，请手动输入材积后再操作叉车入库。
				</view>
				<button type="primary" class="btn" @tap="submitData">录入材积</button>
			</u-form>
		</view>
		<scan></scan>
		<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 {
		onLoad(op) { //option为object类型，会序列化上个页面传递的参数
			if (op.name) {
				this.$nextTick(() => {
					this.$refs.uToast.show({
						type: 'success',
						message: "提交卸货成功",
					})
				})

			}
		},
		onShow() {
			initScan(this.scanSuccess);
			startScan();
		},
		onHide() {
			stopScan();
		},
		data() {
			return {
				ruleForm: {
					warehouseId: store.state.userInfo.branchId,
					orderNo: "",
					orderNos: [],
					workType: "3",
					location: "",
					number: "",
					userId: "",
				},
				rules: {
					orderNo: {
						required: true,
						message: '请输入订单号',
						trigger: ['blur', 'change']
					},

				},
			}
		},

		methods: {
			async scanSuccess(code) {
				this.ruleForm.orderNo = code.trim()
				// 下面就是写取到结果后的事情
				this.queryData()
			},

			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() {
				this.$refs.ruleFormRef.validate().then(valid => {
					Api.storge.volume(this.ruleForm).then(res => {
						if(res?.data?.isTransfer){
							uni.showModal({
								title: `导入历史材积`,
								content: '该订单号有历史材积数据，是否确认导入',
								success: (ressult) => {
									if (ressult.confirm) {
										uni.navigateTo({
											url: `/pages/outStock/volumeDetail?data=${JSON.stringify({...res.data,orderNo:this.ruleForm.orderNo})}`
										})
									} else {
										uni.navigateTo({
											url: `/pages/outStock/recordingVolumeDetail?data=${JSON.stringify({...res.data,orderNo:this.ruleForm.orderNo})}`
										})
									}
								}
							})
							
						}else{
							uni.navigateTo({
								url: `/pages/outStock/recordingVolumeDetail?data=${JSON.stringify({...res.data,orderNo:this.ruleForm.orderNo})}`
							})
						}
					})
				})
			}
		}
	}
</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>