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

<template>
	<view>
		<u-navbar back-text="返回" title="成品上架" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item :border-bottom="false">
				<p>单号:</p>
				<u-input :border="true" v-model="receiveRequestName" placeholder="请扫描条码"
					:focus="focusReceiveRequestName" @confirm="serachList" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<p>条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="searchBarcode" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<p>库位:</p>
				<u-input :border="true" v-model="kw" placeholder="请扫描库位" :focus="focusKw" @confirm="ship" />
			</u-form-item>
		</u-form>
		<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>
			<view v-show="current === 0">
				<view class="material">
					<u-form ref="materialform">
						<uni-z-table :style="{'height': tabH+'px'}" :tableData="requestData" :columns="matColumns"
							:showBottomSum="true" :rowNumbers="true" :pagination="true" >
						</uni-z-table>
					</u-form>
				</view>
			</view>

			<view v-show="current === 1">
				<uni-card :is-shadow="false">
					<view v-for="item in barCodeData">
						<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.MATERIALTYPE}}</u-form-item>
							<u-form-item>库存状态:{{item.STOCKSTATE}}</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-item>供应商描述:{{item.SUPPLIERDESCRIPTION}}</u-form-item>
							<u-form-item>负责人:{{item.CHARGE}}</u-form-item>
							<u-form-item>生产日期:{{item.MAKEDATE}}</u-form-item>
							<u-form-item>过期日期:{{item.EXPIRINGDATE}}</u-form-item>
							<u-form-item>工厂组织:{{item.ERPFACTORY}}</u-form-item>
							<u-form-item>库位:{{item.LOCATIONNAME}}</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-show="current === 2">
				<uni-z-table :style="{'height': tabH+'px'}" :tableData="returnData" :columns="returnColumns"
					:showBottomSum="true" :rowNumbers="true" :pagination="true">
				</uni-z-table>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['材料列表', '条码信息', '已入库列表'], //分栏器的选项卡
				tabH: 800, //表格的宽度
				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',
				//---------------------------------------- 分割线上方都是引用的外部的组件使用的样式，下方才是是使用的数据
				barCode: "", //条码
				kw: "", //库位
				receiveRequestName: "", //单据号
				requestData: [], //材料列表
				barCodeData: [], //条码信息	
				returnData: [], //已退料列表					
				shipRequestDetailName: "", //行号
				focusBarCode: false, //条码焦点是否选中
				focusReceiveRequestName: true, //默认选中单号焦点
				focusKw: false, //库位焦点是否选中
				ISRELEASE:"", //是否已扫描
				//对应材料列表下的表格的列
				matColumns: [{
						title: '序号',
						field: "RECEIVEREQUESTDETAILNAME",
						width: 120,
						sort: true,
						align: "left"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '物料描述',
						field: "DESCRIPTION",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '应收数量',
						field: "REQUESTQUANTITY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '实收数量',
						field: "REQUESTQUANTITY",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '仓库',
						field: "ERPLOCATION",
						width: 160,
						sort: true,
						align: "center"
					}
				],

				//对应已退料的表格的列
				returnColumns: [{
						title: '行号',
						field: "ROWNO",
						width: 120,
						sort: true,
						align: "left"

					},
					{
						title: '条码编号',
						field: "PACKINGCODE",
						width: 260,
						sort: true,
						align: "left"
					},
					{
						title: '物料编号',
						field: "MATERIALSPECNAME",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '数量',
						field: "QTY",
						width: 150,
						sort: true,
						align: "right"
					}
				]
			}
		},
		mounted() {
			this.tabH = this.$GetRemainingHeight(5, 30); //定义表格的高度
		},
		methods: {
			//分栏器的点击事件
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},
			//焦点初始化，让页面所有的焦点同时只能存在一个
			initfocus() {
				this.focusReceiveRequestName = false //单号焦点
				this.focusBarCode = false //条码焦点
				this.focusKw = false //库位焦点
			},
			//获取焦点的公共方法
			getfocus(nextfocus) {
				this.initfocus()
				this[nextfocus] //不能用this.nextfocus
				this.$nextTick(() => { //vue是数据全部修改后才进行的视图更新，哪nextTick函数就是为了拿到最新的数据，还不懂的可以去百度
					this[nextfocus] = true
				})
			},

			//扫描单号-----------回车搜索
			serachList() {
				if (this.receiveRequestName!= "") {
					this.getmateriallist() //获取材料信息
					this.receivedmaterial() //获取已入库列表
				} else {
					this.$showMessage("单号不能为空")
					this.getfocus('focusReceiveRequestName') //重新获取焦点
					return
				}
			},

			//扫描条码-------------回车搜索
			searchBarcode() {
				if (this.receiveRequestName == "") {
					this.$showMessage("单号不能为空")
					this.$playFail()
					this.getfocus('focusReceiveRequestName')
					return
				}
				if (this.barCode == "") {
					this.$showMessage("条码不能为空")
					this.$playFail()
					this.getfocus('focusBarCode')
					return
				} 
				this.getbarcodeinfo() //搜索条码信息
		     
			},

			//扫描库位入库
			ship() {
				if (this.receiveRequestName== "") {
					this.$showMessage("请扫描单号")
					this.$playFail()
					return
					this.getfocus('focusReceiveRequestName')
				}
				if (this.barCode == "") {
					this.$showMessage("请扫描条码")
					this.$playFail()
					this.getfocus('focusBarCode')
					return	
				}
				if (this.kw == "") {
					this.$showMessage("请扫描库位")
					this.$playFail()
					this.getfocus('focusKw')
					return		
				}
				this.scanKw() //扫描库位入库
			},

			//扫描库位入库
			scanKw() {		
				//发送入库请求 
				this.$MyRequest('/intolocation/materialreceiveinstock',{
					barCode: this.barCode, //条码
					billNo: this.receiveRequestName, //单号
					userId: this.$login.userid, //登录用户
					siteName: this.$login.sitename, //工厂名称 
					storageName: this.kw //库位
				}).then(res=>{
					if (res.data.success) {
							this.$showMessage(res.data.message)
							this.$playSuccess()
							this.barCode = ""
							this.kw = "" //清空条码和库位
							this.getfocus('focusBarCode') //焦点聚焦到条码			         	
						} else {
							this.$showMessage(res.data.message)
							this.$playFail()
							this.kw = "" //清空库位，焦点回到库位
							this.getfocus('focusKw')
							}
					this.receivedmaterial() //请求后端展示已入库数据	
				}).catch(err=>{
					//调用失败的话重新获取焦点发送请求
					this.$showMessage(err);
					this.$palyFail()
					this.kw = '';	
					this.getfocus('focusKw')
				})
		},
		
		//获取条码明细    
		getbarcodeinfo() {
			this.$MyRequest('/returnmaterial/getreturnbarcodeinfo',{
				materialPackingName: this.barCode
			}).then(res=>{
				if (res.data.success) {
					this.barCodeData = res.data.resultObj //获取条码的数据
					this.current = 1 //扫描条码的时候直接跳转到条码明细这个分栏器
					setTimeout(()=>{
						this.onClickItem(e)
					})
					if (res.data.resultObj[0]["ISRELEASE"]==1) {
						this.ISRELEASE = "是"
					} else {
						this.ISRELEASE = "否"
					}
				this.getfocus('focusKw') //条码下移到库位输入框
				} else {
					this.$showMessage(res.data.message)
					this.barCode=""
					this.getfocus('focusBarCode')
				}
			}).catch(err=>{
				this.$showMessage(err)
				this.barCode = "" //清空条码
				this.getfocus('focusBarCode')			
			})
		},

		//获取材料列表
		getmateriallist() {
			this.$MyRequest('/intolocation/getlist',{
	            siteName:this.$login.sitename,
				receiveRequestName: this.receiveRequestName//data传参时直接这样写就好，herder帮我们处理了转为json格式
			}).then(res=>{
				if (res.data.success) {
					this.requestData = res.data.resultObj //接后端返回的物料参数，并展示在表格里面
					this.getfocus('focusBarCode')
				} else {
					this.$showMessage(res.data.message) //单号有问题的话重新聚焦在单号输入框
					this.getfocus('focusReceiveRequestName')
				}
			}).catch(err=>{
				this.$showMessage(err)
				this.getfocus('focusReceiveRequestName') //请求失败的话重新聚焦在单号输入框
			})
		},
		
		//获取已入库列表
		receivedmaterial() {
			this.$MyRequest('/intolocation/getintolist',{
				receiveRequestName: this.receiveRequestName
			}).then(res=>{
				console.log(res)
				if (res.data.success) {
					this.returnData = res.data.resultObj//接数据后展示
				} else console.log("已入库列表"+res.data.message)
			}).catch(err=>{
				this.$showMessage(err)
			})
		},
		
	}
	}
</script>

<style lang="scss">

</style>