2025-03-JS-SDK-PDA/pages/product/features/StockInApplyPage.vue

<template>
	<view>
		<u-navbar back-text="返回" title="入库申请" :background="background"></u-navbar>
		<u-form>
			<u-form-item :border-bottom="false">
				<p>单号 : </p>
				<u-input :border="true" v-model="receiveRequestName" placeholder="请扫描单号"
					:focus="focusReceiveRequestName" @confirm="serachMaterialList" />
			</u-form-item>
			</u-form-item>

			<u-form-item>
				<p>条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="getBarcodeInfo" />
			</u-form-item>

			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem"  />
			</view>

			<view v-if="current === 0">
				<uni-z-table :style="{'height': tabH+'px'}" :tableData="requestData" :columns="matColumns"
					:showBottomSum="true" :rowNumbers="true" :pagination="true">
				</uni-z-table>
			</view>

			<view v-if="current === 1">
				<uni-card :is-shadow="false">
					<view v-for="item in barCodeInfoList">
						<u-form>
							<u-form-item>
								工厂:{{item.SITENAME}}
							</u-form-item>
							<u-form-item>
								条码编号:{{item.MATERIALPACKINGNAME}}
							</u-form-item>
							<u-form-item>
								物料编号：{{item.MATERIALSPECNAME}}
							</u-form-item>
							<u-form-item>
								物料描述:{{item.DESCRIPTION}}
							</u-form-item>
							<u-form-item>
								库存状态:{{item.STOCKSTATE}}
							</u-form-item>
							<u-form-item>
								初始数量:{{item.MATERIALCREATEQUANTITY}}
							</u-form-item>
							<u-form-item>
								条码数量:{{item.MATERIALQUANTITY}}
							</u-form-item>
							<u-form-item>
								仓库:{{item.ERPLOCATION}}
							</u-form-item>
							<u-form-item>
								库位:{{item.LOCATIONNAME}}
							</u-form-item>
							<u-form-item>
								制造日期 :{{item.MAKEDATE}}
							</u-form-item>
							<u-form-item>
								有效日期 :{{item.EXPIRINGDATE}}
							</u-form-item>
							<u-form-item>
								批号:{{item.CHARGE}}
							</u-form-item>
							<u-form-item>
								锁定状态:{{item.HOLDSTATE}}
							</u-form-item>
							<u-form-item>
								条码类型:{{item.MATERIALPACKINGTYPE}}
							</u-form-item>
							<u-form-item>
								检验状态:{{item.OQARESULTSTATE}}
							</u-form-item>
							<u-form-item>
								检验结果:{{item.OQARESULT}}
							</u-form-item>
							<u-form-item>
								供应商:{{item.SUPPLIERNO}}
							</u-form-item>
							<u-form-item>
								供应商描述:{{item.SUPPLIERNAME}}
							</u-form-item>
							<u-form-item>
								组织:{{item.ERPFACTORY}}
							</u-form-item>
							<u-form-item>
								货主:{{item.OWER}}
							</u-form-item>
							<u-form-item>
								货主类型:{{item.OWERTYPE}}
							</u-form-item>
							<u-form-item>
								来源类型:{{item.SOURCETYPE}}
							</u-form-item>
							<u-form-item>
								是否释放:{{ISRELEASE}}
							</u-form-item>
							<u-form-item>
								绑定单号（未释放）:{{item.LASTEVENTBILLNO}}
							</u-form-item>
						</u-form>
					</view>
				</uni-card>
			</view>
			
		<view v-if="current === 2">
		   <div v-for="(item,index) in texts" :key="index">
			   <p>{{item}}</p>
		   </div>
		</view>		
		</u-form>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['材料列表', '条码信息','已扫描条码'], //分栏器的选项卡 
				tabH: 800, //表格的宽度
				ischecked: true, //默认出库
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				//分栏器的样式
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				//---------------------分割线上方都是引用的外部的组件使用的样式，下方才是是使用的数据
				texts:[],//显示入库条码
				scanedData:[],//已扫描列表
				receiveRequestName: "", //单据号	
				requestData: [], //材料列表
				barCodeInfoList: [], //条码信息
				shipRequestDetailName: "", //行号
				barCode: "", //条码
				focusBarCode: false, //条码的焦点是否被选中
				focusReceiveRequestName: true, //单号的焦点一来就默认选中
				ISRELEASE: "", //是否释放
				//对应的材料列表的表格
				matColumns: [{
						title: '序号',
						field: "RECEIVEREQUESTDETAILNAME",
						width: 120,
						sort: true,
						align: "left"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '物料描述',
						field: "MATERIALSPECDESCRIPTION",
						width: 300,
						sort: true,
						align: "left"
					},
					{
						title: '应入数量',
						field: "REQUESTQUANTITY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '实入数量',
						field: "RECEIVEDQUANTITY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '待入数量',
						field: "DFQTY",
						width: 150,
						sort: true,
						align: "right"
					}
				],
			  
			   //对应已扫描条码的表格
			    scanedColums:[
					{
							title: '序号',
							field: "SHIPREQUESTDETAILNAME",
							width: 120,
							sort: true,
							align: "right"
						},
						{
							title: '物料编号',
							field: "MATERIALSPECNAME",
							width: 280,
							sort: true,
							align: "left"
						},
						{
							title: '物料描述',
							field: "MATERIALSPECDESCRIPTION",
							width: 300,
							sort: true,
							align: "left"
						},
						{
							title: '应入数量',
							field: "REQUESTQUANTITY",
							width: 150,
							sort: true,
							align: "right"
						},
						{
							title: '实入数量',
							field: "ASSIGNEDQUANTITY",
							width: 150,
							sort: true,
							align: "right"
						},
						{
							title: '待入数量',
							field: "DFQTY",
							width: 150,
							sort: true,
							align: "right"
						}
				]
			}
		},
		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
		},
		methods: {
			//分栏器的点击事件
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},
			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusReceiveRequestName = false
				this.focusBarCode = false
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus]
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},
			
			//扫描单据号-----------回车搜索
			serachMaterialList() {
				if (this.receiveRequestName == "") {
					this.$showMessage("请先选择单号");
					this.$playFail()
					this.getfocus('focusReceiveRequestName')
				} else {
					this.getMateriallist() //获取材料信息

				}
			},

			//扫描条码回车事件
			getBarcodeInfo() {
				if (this.receiveRequestName == "") {
					this.$showMessage("请先扫描单号");
					this.$playFail()
					this.getfocus('focusReceiveRequestName') //获取焦点
					return
				}
				if (this.barCode == "") {
					this.$showMessage("请扫描条码");
					this.$playFail()
					this.getfocus('focusBarCode')
					return
				}
				 this.requsetIn() //调用条码查询
			},
		

		//获取材料信息
		getMateriallist() {
			this.$MyRequest('/returnmaterial/getmateriallist', {
				receiveRequestName: this.receiveRequestName
			}).then(res => {
				if (res.data.success) {
					this.requestData = res.data.resultObj //接后端返回的物料参数，并展示在表格里面
					this.$playSuccess()
					this.getfocus('focusBarCode')
				} else {
					this.$showMessage(res.data.message) //单号有问题的话重新聚焦在单号输入框
					this.$playFail()
					this.getfocus('focusReceiveRequestName')
				}
			}).catch(err => {
				this.$showMessage(err)
				this.receiveRequestName = ""
				this.getfocus('focusReceiveRequestName') //请求失败的话重新聚焦在单号输入框				
			})

		},

		//入库申请
		requsetIn() {
			this.$MyRequest('/productinto/instockapply', {
				site: this.$login.sitename,
				billNo: this.receiveRequestName,
				barCode: this.barCode,
				userId: this.$login.userid
			}).then(res => {
				if (res.data.success) {
					this.barCodeInfoList = res.data.resultObj
					if (this.barCodeInfoList[0]["ISRELEASE"] == 1) //处理后端返回的ISRELEASE，为1的时候设置为释放
						this.ISRELEASE = "释放"
					else this.ISRELEASE = "未释放"
					this.current=1
					setTimeout(()=>{
						this.onClickItem(event)
					},2000)
					this.texts.push(this.barCode)//将入库申请成功的条码放在已扫描条码里面
					//console.log(this.text)
					this.barCode = "" //清空条码
					this.$showMessage(res.data.message)
					this.getfocus('focusBarCode') //焦点回到条码			
				} else {
					this.$showMessage(res.data.message)
					this.$playFail()
					this.barCode = "" //清空条码
					this.getfocus('focusBarCode') //获取焦点回到条码
				}
			}).catch(err => {
				this.$showMessage(err)
				this.$playFail()
				this.barCode = ""
				this.getfocus('focusBarCode') //重新获取焦点
			})
		}
	}
	}
</script>

<style lang="scss">

</style>