2025-03-JS-SDK-PDA/pages/oldprojfile/bankIn.vue

<template>
	<view>
		<u-navbar back-text="返回" title="物料入库" :background="background"></u-navbar>
		<view v-show="loadding" style="width: 100%; height: 900rpx; display: flex; justify-content: center; align-items: center;">
			<u-loading mode="circle" :size="70" color="#00aaff"></u-loading>
		</view>
		<view class='content' v-show="!loadding">
			<u-form 
				:model="form" 
				ref="uProdBankInForm" 
				label-width="160rpx"
			>
				<u-form-item label="BOX 条码" left-icon="tags">
					<u-input 
					style="background: #ffffff;"
					v-model="form.boxID" 
					:border="true"
					:focus="true" 
					:trim="false"
					@input="handlerInput"
				/>
				</u-form-item>
			</u-form>
			<view style="display: flex; justify-content: space-around;">
				<view style="font-size: 30rpx;">已录入BOX个数：<u-tag style="vertical-align: top; font-size: 30rpx;" :text="datasource.length" type="primary" /></view>
				<view style="font-size: 30rpx;">入库总数：<u-tag style="vertical-align: top; font-size: 30rpx;" :text="ProdCount" type="primary" /></view>
			</view>
			<u-card style="border: 1rpx solid #0081FF;" :show-head="false" :full="true" :body-style="{height: '220rpx'}" >
				<view class="card-body" slot="body">
					<u-row gutter="8" justify="between">
						<u-col span="12">
							<view class="info-label">BOX ID</view><view>{{ lastBox['box_id'] || "--" }}</view>
						</u-col>
						<u-col span="12">
							<view class="info-label">录入时间</view><view>{{ lastBox['in_time'] || "--" }}</view>
						</u-col>
						<u-col span="6">
							<view class="info-label">数量</view><view>{{ lastBox['cnt'] || "0" }}</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<u-table
				class="main-table"
			>
				<u-tr class="u-tr">
					<u-th class="u-th">BOX ID</u-th>
					<u-th class="u-th">录入时间</u-th>
					<u-th class="u-th" width="140rpx">数量</u-th>
				</u-tr>
				<u-tr class="u-tr" v-for="(item,index) in datasource" :key="index">
					<u-td class="u-td">{{ item.box_id }}</u-td>
					<u-td class="u-td">{{ item.in_time }}</u-td>
					<u-td class="u-td" width="140rpx">{{ item.cnt }}</u-td>
				</u-tr>
			</u-table>
			<view style="position: fixed; bottom: 0; width: 100%; margin-left: -18rpx; padding: 10rpx;">
				<u-button type="primary" @click="handleSubmit">入库</u-button>
			</view>
		</view>
		<u-toast ref="uBankInToast" />
	</view>
</template>

<script>
	import {QueryMaterialData,MaterialBankIn} from '../../../common/api.js'
	import {dateFormat} from "../../../utils/utils.js"
	
	let timer = null;
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				form: {
					boxID: '',
					previewID: ''
				},
				datasource: [],
				lastBox: {},
				loadding: true
			}
		},
		mounted() {		
			this.$nextTick(function(){
				this.loadding = false
				timer = setInterval(() => {
					uni.hideKeyboard()
				}, 10)
			})
		},
		destroyed() {
			if(timer) {
				clearInterval(timer)
			}
		},
		computed: {
			ProdCount() {
				let result = 0
				for (let d of this.datasource) {
					result += parseInt(d['cnt'])
				}
				return result
			}
		},
		methods: {
			handlerInput(value) {
				if((value.length - this.form.previewID.length) > 1){
					const validList = this.datasource.filter((d) => { return d['box_id'] === value })
					if(validList.length === 0){
						QueryMaterialData({box_id: value}).then(res => {
							if(res['mesg'] === 'success'){
								this.showToast("录入成功", "success")
								this.datasource.push(res['res'])
								this.lastBox = res['res']
							}else{
								this.showToast("录入失败: "+res['reason'], "error")
							}
							setTimeout(() => {
								this.form.previewID = ''
								this.form.boxID = ''
							}, 100)
						}).catch(err => {
							this.showToast(err, 'error')
						})
					}else{
						this.showToast("录入失败, 该BOX已在列表中...", "error")
					}
				}
				this.form.previewID = value
			},
			showToast(text, type) {
				this.$refs.uBankInToast.show({
					title: text,
					type: type,
					position: "bottom"
				})
			},
			handleSubmit() {
				if(this.datasource.length > 0){
					MaterialBankIn({box_list: JSON.stringify(this.datasource)}).then(res => {
						if(res && res['mesg']==='success'){
							this.showToast("入库成功", 'success')
							this.datasource = []
							this.lastBox = {}
						}else {
							this.showToast("入库失败: "+res['reason'], 'error')
						}
					})
				}else{
					this.showToast("请至少录入1个box", 'error')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	margin: 5rpx 18rpx;
}

.card-body {
	::v-deep .u-col {
		margin-bottom: 16rpx;
		
		view {
			display: inline-block;
		}
		
		view+view {
			margin-left: 20rpx;
			color: #068bff;
		}
	}
}

.u-td {
	height: 60rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 120rpx;
}

.info-label{
	width: 120rpx;
}

.main-table {
	margin-bottom: 110rpx;
	
	::v-deep .u-th {
		background: #0081FF !important;
		color: #ffffff;
	}
}
</style>