2025-03-JS-SDK-PDA/pages/product/features/ProductPutShelfPage/index.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" /> -->
				<view>
					<picker @change="ship" :range="listKW">
						<label>选择库位：</label>
						<label class="">{{listKW[index]}}</label>
					</picker>
				</view>
				
				
			</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">
<!-- 						SELECT
							BSP.PALLETNAME ,
							BSP.FGCODE ,
							BSP.GRADE ,
							BSP.REVISIONCODE ,
							BSP.CHECKINCODE ,
							BSP.DOMESTICEXPORT ,
							BSP.BOXQTY ,
							BSP.PANELQTY
						FROM
							ZIMES.BSFGMS_SHIP_PALLET BSP 
						WHERE BSP.PALLETNAME = '' AND BSP.INTERFACEFLAG  = 'N' -->
						<u-form>
							<u-form-item>FGCODE:&nbsp;&nbsp;&nbsp;&nbsp;{{item.FGCODE}}</u-form-item>
							<u-form-item>条码:&nbsp;&nbsp;&nbsp;&nbsp;{{item.PALLETNAME}}</u-form-item>
							<u-form-item>内外销:&nbsp;&nbsp;&nbsp;&nbsp;{{item.DOMESTICEXPORT}}</u-form-item>
							<u-form-item>BOXQTY:&nbsp;&nbsp;&nbsp;&nbsp;{{item.BOXQTY}}</u-form-item>
							<u-form-item>PANELQTY:&nbsp;&nbsp;&nbsp;&nbsp;{{item.PANELQTY}}</u-form-item>
							<u-form-item>GRADE:&nbsp;&nbsp;&nbsp;&nbsp;{{item.GRADE}}</u-form-item>
							<u-form-item>REVISIONCODE:&nbsp;&nbsp;&nbsp;&nbsp;{{item.REVISIONCODE}}</u-form-item>
							<u-form-item>CHECKINCODE:&nbsp;&nbsp;&nbsp;&nbsp;{{item.CHECKINCODE}}</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 {
				listKW: ['CK0015','CK0016'],
				items: ['BOX列表', '成品信息', '已入库列表'], //分栏器的选项卡
				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:"", //是否已扫描
				siteName:"",
				userId:"",
				//对应材料列表下的表格的列
				// SELECT
				// 	BSB.BOXNAME ,
				// 	BSB.PALLETNAME ,
				// 	BSB.FGCODE ,
				// 	BSB.GRADE ,
				// 	BSB.REVISIONCODE ,
				// 	BSB.DOMESTICEXPORT ,
				// 	BSB.CHECKINCODE
				// FROM
				// 	ZIMES.BSFGMS_SHIP_BOX BSB
				// WHERE
				// 	BSB.PALLETNAME = ''
				matColumns: [{
						title: '箱号',
						field: "BOXNAME",
						width: 240,
						sort: true,
						align: "left"
					},
					{
						title: '栈板号',
						field: "PALLETNAME",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: '完工料号',
						field: "FGCODE",
						width: 280,
						sort: true,
						align: "left"
					},
					{
						title: 'Lot等级',
						field: "GRADE",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: '成品等级',
						field: "REVISIONCODE",
						width: 150,
						sort: true,
						align: "right"
					},
					{
						title: 'Check In',
						field: "CHECKINCODE",
						width: 180,
						sort: true,
						align: "center"
					},
					{
						title: '内外销',
						field: "DOMESTICEXPORT",
						width: 180,
						sort: true,
						align: "right"
					}
				],

				//对应已退料的表格的列
				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); //定义表格的高度
			let that=this
			uni.getStorage({
				key:"sitename",
				success(res) {
					that.siteName=res.data
				}
			})
			uni.getStorage({
				key:"userid",
				success(res) {
					that.userId=res.data
				}
			})		
		},
		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
				})
			},


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

			//扫描库位入库
			ship() {
				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('/productinto/stockInPallet',{
					barCode: this.barCode, //条码
					billNo: this.receiveRequestName, //单号
					userId: this.userId, //登录用户
					site: this.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('/productinto/getPalletInfo',{
				barCode: this.barCode
			}).then(res=>{
				if (res.data.success) {
					this.barCodeData = res.data.resultObj //获取条码的数据
					this.current = 0 //扫描条码的时候直接跳转到条码明细这个分栏器
					setTimeout(()=>{
						this.onClickItem(e)
					})
					if (res.data.resultObj != null) {
						this.getmateriallist();
					}
				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('/productinto/getBoxInfo',{
	            barCode: this.barCode
			}).then(res=>{
				if (res.data.success) {
					this.requestData = res.data.resultObj //接后端返回的物料参数，并展示在表格里面
					this.getfocus('focusKw')
				} else {
					this.$showMessage(res.data.message) //单号有问题的话重新聚焦在单号输入框
					this.getfocus('focusBarCode')
				}
			}).catch(err=>{
				this.$showMessage(err)
				this.getfocus('focusBarCode') //请求失败的话重新聚焦在单号输入框
			})
		},
		
		//获取已入库列表
		receivedmaterial() {
			this.$MyRequest('/productinto/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>