2025-03-JS-SDK-PDA/pages/StockOut/features/InitialInstockPage/index.vue

<template>
	<view>
		<u-navbar back-text="返回" title="新条码入库" :background="background"></u-navbar>
		<u-form>
			<u-form-item :border-bottom="false">
				<p>物料条码：</p>
				<u-input :focus="focusBarcode" v-model="barCode" placeholder="请扫描条码" @confirm="submit" :border="true" />
			</u-form-item>
		</u-form>
		<view>
			<uni-card title="物料信息" extra="入库条码">
				<view class="uni-list-cell-db">
					<view v-for="item in  materialList">
						<u-form>
							<u-form-item>厂商名:{{item.SITENAME}}</u-form-item>
							<u-form-item>物料名:{{item.MATERIALPACKINGNAME}}</u-form-item>
							<u-form-item>物料类型:{{item.MATERIALTYPE}}</u-form-item>
							<u-form-item>物料名:{{item.MATERIALSPECNAME}}</u-form-item>
							<u-form-item>物料描述:{{item.DESCRIPTION}}</u-form-item>
							<u-form-item>物料数量:{{item.MATERIALQUANTITY}}</u-form-item>
							<u-form-item>物料供应商:{{item.SUPPLIERNAME}}</u-form-item>
						</u-form>
					</view>
				</view>
			</uni-card>
		</view>
		<u-form>
			<u-form-item>
				<p>库位：</p>
				<u-input class="uni-input" v-model="kw" :focus="focusKw" placeholder="请扫描库位" @confirm="ruKuRequest"
					:border="true" />
				<switch :checked="ischecked" @change="changeischecked" />
				<p v-show="ischecked">默认此库位</p>
				<p v-show="!ischecked">不默认库位</p>
			</u-form-item>
		</u-form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				barCode: "", //物料编号
				kw: "", // 库位号
				materialList: [], //接收后端传回来的数据
				ischecked: false, //默认不使用库位
				focusKw: false, //库位输入框焦点
				focusBarcode: true, //默认聚焦到条码框
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				userId:"",
			};

		},
		mounted() {
			let that=this
			uni.getStorage({
				key:"userid",
				success(res) {
					that.userId=res.data
				}
			})
		},
		 
		methods: {
			//设置选中状态
			changeischecked() {
				this.ischecked = !this.ischecked //设置选中状态
				//console.log("选中状态", this.ischecked)
			},

			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusKw = false //单号焦点
				this.focusBarcode = false //条码焦点
			},

			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus] //不能用this.nextfocus
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},

			//物料条码查询事件
			searchmateriallist() {
				this.$MyRequest('/intolocation/getinstocklocation', {
					materialPackingName: this.barCode
				}).then(res => {
					if (res.data.success) {
						this.materialList = res.data.resultObj //接数据
					} else {
						this.$showMessage(res.data.message)
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},

			//回车事件：入库请求
			ruKuRequest() {
				//发送请求
				this.$MyRequest('/intolocation/receiveinstock', {
					barCode: this.barCode,
					storageName: this.kw,
					userId: this.userId
				}).then(res => {
					if (res.data.success) {
						this.$showMessage(res.data.message)
						this.barCode = ""
						this.getfocus('focusBarcode')
					} else {
						this.$showMessage(res.data.message)
						this.kw = ""
						this.getfocus('focusKw')
					}
				}).catch(err => {
					this.$showMessage(err)
				})
			},
			submit() {
				if (this.ischecked == false) //没有默认使用库位的话
				{
					this.searchmateriallist() //直接请求物料的相关信息
					this.getfocus('focusKw') //焦点下移到下面
				} else {
					//默认使用库位的话，先请求库位信息，再入库 
					this.searchmateriallist() //先展示数据
					this.ruKuRequest() //调用入库方法
				}
			}
		}
	}
</script>

<style lang="scss">

</style>