java/cath-app/pages/menu/report/current.vue

<template>
	<view class="app-container">
		<view class="top-view" style="height: calc(50% - 37px); padding-top: 20px;">
			<scroll-view scroll-y="true" class="top-scrollview" >
				<view>
					<view style="display: flex;">
						<view class="detailV">{{title}}</view>
					</view>
				</view>
				<view  v-for="(value, key) in titleData" :key="key">
					<view style="display: flex;">
						<view class="titleV">{{key}}:</view>
						<view class="detailV" v-bind:style="isQuery(key)" @click="queryList(key,value)">{{value}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="mid-table" style="height: calc(50% - 57px);">
			 <zb-table
			 ref="zbTable"
			 :show-header="true"
			 :stripe="false"
			 :columns="column"
			 :data="data"
			 :highlight="true"
			 @currentChange="currentChange"
			 :border="true"
			 :fit="true"
		    >
			</zb-table> 
		</view>
		<view class="bottom-view" style="height: 84px;">
			<uni-forms
				:value="formData" 
				ref="form" 
				validate-trigger="submit" 
			>
				<view style="position: relative;display: flex;flex-direction: row;align-items: center;height:37px;width:100%">
					<text style="width: 40px;font-size: 14px;color: #606266;">仓库</text>
					<button size="mini" type="default" @click="searchIconClick('ware')" style="width: calc(100% - 106px)" v-if="formData.warehouseName">{{ formData.warehouseName }}</button>
					<button size="mini" type="default" @click="searchIconClick('ware')" style="width: calc(100% - 106px)" v-if="!formData.warehouseName">选择仓库</button>
					<button size="mini" type="primary" @click="handleBack">返回</button>
				</view>
				<uni-forms-item  name="remark" label="条码"  labelAlign="right" :labelWidth="40">
					<uni-easyinput type="text" :inputBorder="true" v-model="barCode" :clearable="false">
						<template #right>
							<button size="mini" type="default" @click="handleScanClick" style="margin-right:5px;">
							  <uni-icons type="scan" size="15"></uni-icons>
							</button>
							<button size="mini" type="primary" @click="getList">查询</button>
						</template>
					</uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</view>
					
		<scan-code />
		
		<!-- 仓库 -->
		<WarePopup ref="WarePopup" :title="'仓库'" :idxFlag="'ware'" @sendData="getSendData"/> 
	</view>
</template>

<script>
	import { getDicts } from "@/api/system/dict/data"; // 字典
	import scanCode from "@/components/scan/scan.vue";
	import WarePopup from './popup/commonpopup.vue' // 仓库
	import { currentStock, listWarehouse } from '@/api/wms/report.js'
	
	export default {
		components: {
			scanCode,
			WarePopup,
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				// 来自于导航条返回按钮或者系统返回按钮的事件
				return false;
			}
			// 双击返回的逻辑
			const now = Date.now();
			if (this.lastBackPress && now - this.lastBackPress < 1000) {
				// 如果两次点击的间隔小于1000毫秒，则可以认为是双击
				//这时退出
				return false;
			} else {
				this.lastBackPress = now;
				uni.showToast({
					title: '再按一次退出',
					icon: 'none'
				});
				setTimeout(() => {
					this.lastBackPress = null;
				}, 1000);
				return true;
			}
		},
		data() {
			return {
				column: [ // 表头数据
				  { name: 'materialCode', label:'物料', align:'center', emptyString:'--' },
				  { name: 'labelCode', label:'标签', align:'center', emptyString:'--' },
				  { name: 'stockQty', label:'数量', align:'center', emptyString:'--' },
				  { name: 'unitName', label:'单位', align:'center', emptyString:'--' },
				  { name: 'materialSpecification', label:'规格', align:'center', emptyString:'--' },
				  { name: 'warehouseName', label:'仓库', align:'center', emptyString:'--' },
				  { name: 'locationName', label:'货位', align:'center', emptyString:'--' }
				],
				data: [], // 表体数据
				title: '',	// title: '【4/14】',
				titleData: {},
				formData: {
					warehouseCode: '',
					warehouseName: '',
				},
				barCode:"", //条码
			};
		},
		created() {},
		methods:{
			onShow() { //安卓扫码
				let that = this;
				uni.$off("scancode"); // 每次进来先 移除全局自定义事件监听器
				uni.$on("scancode", (data) => {
					// 扫描PCS码
					if(data && data !== ''){
						data = data.replace(/^\s+|\s+$/g, '');
						that.barCode = data;
						that.getList();
					}else{
						uni.showToast({
						title: '扫码失败!',
						icon:'none',
						duration: 2000
						});
					}
				});
			},
			getScanCkList(barCode){//仓库扫码请求
				let that = this;
				let params = {
					status: "0", // (固定)
					params: {
						"barCode":barCode,
						"limit":1
					},
				}
				// 仓库网络请求
				listWarehouse(params).then(res => {
					if(res.code === 200){
						let data = res.rows ? res.rows[0] : {};
						if(data && Object.keys(data).length !== 0){
							that.formData.warehouseCode = data.warehouseCode;
							that.formData.warehouseName = data.warehouseName;
						}
					}
				});
			},
			currentChange(row, index){//行点击
				let tmpData = {
					"编码": row.materialCode,
					"品名": row.materialName,
					"仓库": row.warehouseName,
					"货位": row.locationName,
					"数量": row.stockQty,
					"单位": row.unitName,
					"规格": row.materialSpecification,
					"托码": row.palletCode,
					"包装码": row.packageCode,
					"批号": row.batch,
					"批号1": row.batch1,
					"批号2": row.batch2
				}
				this.titleData = tmpData;
				this.title = '【'+ (index+1) + '/' + this.data.length +'】'
			},
			isQuery(key){
				let style='';
				if(key == '编码'){
					style = 'color:blue'
				}
				return style;
			},
			//蓝字点击事件
			queryList(key,value){
				if(key == '编码'){
					key = 'materialCode'
				}else{
					key = null;
				}
				
				if(key){
					this.getList(key,value)
				}
			},
			getList(key,value){
				let that = this;
				let queryParams = {
					params:{"limit": 200},
					"reportType": "01",
					"warehouseCode": this.formData.warehouseCode == '00' ? null : this.formData.warehouseCode
				};
				//如果有传参，将键值赋值给查询
				if(key && value){
					queryParams[key] = value;
				}
				//处理条码
				let splitPre = this.barCode.split("|")[0];
				let splitLast = this.barCode.slice(splitPre.length+1);
				if(splitPre=='WH'){//仓库
					queryParams.warehouseCode = splitLast;
					this.getScanCkList(splitLast);
				}
				if(splitPre=='PT'){//货位
					queryParams.locationCode = splitLast;
				}
				if(splitPre=='L'){//标签
					queryParams.labelCode = splitLast;
				}
				
				uni.showToast({
					title: '查询库存中，稍等...',
					icon:'none',
					duration: 2000
				});
				//查询
				currentStock(queryParams).then(res => {
					if(res.code === 200){
						that.data = res.rows;
						that.title = "返回数据" + res.rows.length + "行";
					}
					//qthis.data = res;
				})
			},
			handleBack(){ //返回
				uni.showModal({
					title: '提示',
					content: '确认返回?',
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack();
						} else if (res.cancel) {
						}
					}
				});
			},
			searchIconClick(type){// 基础资料按钮
				switch (type){
					case "ware":  // 仓库
						this.$refs.WarePopup.showPopup();
						break;
					default:
						break;
				}
			},
			getSendData(res){ //基础资料
				let cFlag = res.currentFlag; 
				switch (cFlag){
					case "ware": // 仓库
						this.formData.warehouseCode = res.selectData.warehouseCode;
						this.formData.warehouseName = res.selectData.warehouseName;
						break;
					default:
						break;
				}
			},
			// 条码右侧扫码按钮事件
			handleScanClick:function(){
				let that = this;
				uni.scanCode({
					success: function(res) {
						// {"scanType":"QR_CODE","path":"","charSet":"ISO8859_1","result":"PT|04-A-1-1","errMsg":"scanCode:ok"}
						if(res.errMsg == "scanCode:ok"){
							that.barCode = res.result;
							that.getList();
						}else{
							 uni.showToast({
							 title: '扫码失败!',
							 icon:'none',
							 duration: 2000
							 });
						}
					
					},
					fail: (err) => {
						//扫码失败
					},
					complete: () => {
						//扫码结束
					}
				});
			},
		},
		
	}
</script>

<style lang="less">
	.app-container{
		height: 100vh;
	}
	.top-view{
		padding: 3px 3px 3px 3px;
		background-color: '#ffffff';
		height: 33vh;
		.top-scrollview{
			// height: calc(50vh - 70px);
			height: 100%;
			background: white;
			padding: 5px;
		}
		.titleV {
			color: #888888;
			font-size: 12px;
			height: 18px;
			line-height: 18px;
			text-align: left;
			width: 50px;
			// width: auto !important;
		}
		
		.detailV {
			margin-left: 4px;
			color: #333333;
			font-size: 13px;
			height: 18px;
			line-height: 18px;
			width: calc(100vw - 40px);
			// width: auto !important;;
		}
	}
	.mid-table{
		padding: 0px 3px 0px 3px;
		/* #ifndef APP-PLUS */
			height: calc(50vh - 46px);
		/* #endif */
		/* #ifdef APP-PLUS */
			height: calc(50vh - 55px);
		/* #endif */
		// background-color: chocolate;
	}
	
	::v-deep .zb-table-body{
		/* #ifndef APP-PLUS */
		height: calc(50vh - 70px) !important;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(50vh - 80px) !important;
		/* #endif */
		
	}
	
	
	.bottom-view{
		padding: 3px;
		// background-color: rebeccapurple;
	}
	
	

	::v-deep .zb-table .item-td{
		height: 25px!important;
		line-height: 25px!important;
	}
	
	::v-deep .zb-table .zb-table-header{
		height: 25px!important;;
	}
	
	::v-deep .zb-table .zb-table-header .item-th{
		 line-height: 25px!important;; 
		 height: 25px!important;;
	}
	    
	.icon {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}
	
	::v-deep .uni-forms-item__label{
		justify-content: flex-end !important;
	}
	
	
	::v-deep .uni-forms-item{
		margin-bottom: 1px !important;
	}
	
	::v-deep .is-disabled {
		color: black !important;
	}
	
	//去掉button的边框
	uni-button:after {
		border: none;
	}
</style>