FT541-WMS/RuoYi-App-master/pages/out/ckMakeSureByTray.vue

<template>
	<view class="container">
		<view class="input-group">
			<uni-easyinput
				v-model="trayCode"
				placeholder="请输入或扫码输入托盘条码"
				:clearable="true"
				@input="handleInput"
				@clear="handleClear"
				ref="trayCodeInput"
			>
				<template #right>
					<text class="scan-icon" @click="handleScan">📷</text>
				</template>
			</uni-easyinput>
		</view>
		
		<view class="loading-container" v-if="loading">
			<uni-load-more status="loading" :content-text="{contentdown: '加载中...',contentrefresh: '加载中...',contentnomore: '没有更多数据'}"></uni-load-more>
		</view>
		
		<view class="materials-list" v-if="materialList.length > 0">
			<view v-for="(item, index) in materialList" :key="index" class="material-card">
				<view class="material-header">
					<text class="material-title">{{ item.productName }}</text>
					<text class="material-code">{{ item.productId }} | 数量: {{ item.outQuantity }}件</text>
				</view>
				<!-- <view class="material-content">
					<view class="material-info">
						<text class="info-label">批次号:</text>
						<text class="info-value">{{ item.batchNo || '无' }}</text>
					</view>
					<view class="material-info">
						<text class="info-label">规格:</text>
						<text class="info-value">{{ item.extraField.spec || '无' }}</text>
					</view>
					<view class="material-info">
						<text class="info-label">单位:</text>
						<text class="info-value">{{ item.extraField.unit || '件' }}</text>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="button-group" v-if="materialList.length > 0">
			<button class="submit-button" @click="handleSubmit">确认出库</button>
		</view>
	</view>
</template>

<script>
	import { getTaskDetail, ckMakeSure } from '@/api/out/productOut.js'

	export default {
		onLoad(options) {
			if (options.trayCode) {
				this.trayCode = options.trayCode
				this.fetchTrayInfo(options.trayCode)
			}
		},
		onReady() {
			setTimeout(() => {
				this.$nextTick(() => {
					this.$refs.trayCodeInput.onFocus()
				})
			}, 100)
		},
		data() {
			return {
				trayCode: '',
				materialList: [],
				loading: false
			}
		},
		methods: {
			// 处理输入事件
			handleInput(value) {
				if (value) {
					this.fetchTrayInfo(value)
				}
			},
			// 处理清除事件
			handleClear() {
				this.materialList = []
			},
			// 处理扫码事件
			handleScan() {
				uni.scanCode({
					success: (res) => {
						this.trayCode = res.result
						this.fetchTrayInfo(res.result)
					}
				})
			},
			// 获取托盘信息
			async fetchTrayInfo(trayCode) {
				this.loading = true
				try {
					const response = await getTaskDetail({trayCode: trayCode,inOut:'2'})
					if (response.data && response.data.length > 0) {
						this.materialList = response.data
					} else {
						uni.showToast({
							title: '未找到托盘信息',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: '获取托盘信息失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			// 提交出库确认
			async handleSubmit() {
				if (!this.trayCode) {
					uni.showToast({
						title: '请输入托盘条码',
						icon: 'none'
					})
					return
				}
				
				if (this.materialList.length === 0) {
					uni.showToast({
						title: '没有可出库的物料',
						icon: 'none'
					})
					return
				}
				
				try {
					const response=await ckMakeSure({
						trayCode: this.trayCode
					  
					})
                    if (response.code==200) {
						uni.showToast({
						title: '出库成功',
						icon: 'success'
					})
						// 清空数据
						this.trayCode = ''
                        this.materialList = []
					}else{
                        uni.showToast({
						title: response.msg,
						icon: 'none'
					})
                    }
				
				
				} catch (error) {
					uni.showToast({
						title: '出库失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.input-group {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
}

.scan-icon {
	font-size: 40rpx;
	padding: 0 20rpx;
}

.loading-container {
	margin: 40rpx 0;
	display: flex;
	justify-content: center;
}

.materials-list {
	margin-top: 20rpx;
}

.material-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.material-header {
	border-bottom: 1px solid #eee;
	padding-bottom: 15rpx;
	margin-bottom: 15rpx;
}

.material-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.material-code {
	font-size: 28rpx;
	color: #666;
	display: block;
}

.material-content {
	padding: 10rpx 0;
}

.material-info {
	display: flex;
	margin-bottom: 10rpx;
}

.info-label {
	width: 120rpx;
	font-size: 28rpx;
	color: #666;
}

.info-value {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.button-group {
	margin-top: 40rpx;
	padding: 20rpx 0;
}

.submit-button {
	background-color: #007aff;
	color: #fff;
	border-radius: 10rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
}
</style>