FT541-WMS/RuoYi-App-master/pages/in/klxin.vue

<template>
	<view class="container">
		<view class="input-group">
			<text class="input-label">料箱条码：</text>
			<uni-easyinput
				v-model="formData.trayCode"
				placeholder="请输入或扫码输入料箱条码"
				:clearable="true"
				@clear="handleClear"
				@confirm="handleConfirm"
				ref="trayCodeInput"	
			>
				<template #right>
					<text class="scan-icon" @click="handleScan">📷</text>
				</template>
			</uni-easyinput>
		</view>
		<view class="input-group">
			<text class="input-label">仓库</text>
			<uni-data-select
				v-model="formData.warehouseId"
				:localdata="warehouseList"
				:clear="false"
				placeholder="请选择仓库"
			/>
		</view>
		<view class="input-group">
			<text class="input-label">入口</text>
			<uni-data-select
				v-model="formData.entranceId"
				:localdata="entranceIdList"
				:clear="false"
				placeholder="请选择入口"
			/>
		</view>
		<view class="button-group">
			<button class="submit-button" @click="handleSubmit">空料箱入库</button>
		</view>
	</view>
</template>

<script>
	import { emptyBoxIn } from '@/api/in/ktpin.js'
    import { getBasWarehouList } from '@/api/bas/bas.js'
	export default {
		data() {
			return {
                formData: {
                    trayCode: '',
                    entranceId: '',
                    warehouseId: ''
                },
                entranceIdList: [],
                warehouseList: []
			}
		},
		onReady() {
			setTimeout(() => {
				this.$nextTick(() => {
					this.$refs.trayCodeInput.onFocus()
				})
			}, 100)
			
            this.getWarehouseList()
        },
        watch: {
            'formData.warehouseId': {
                handler(newVal) {
                    if (newVal) {
                        this.getEntranceList(newVal)
                    } else {
                        this.entranceIdList = []
                        this.formData.entranceId = ''
                    }
                }
            }
			
			
		},
		methods: {
            // 获取仓库列表
            async getWarehouseList() {
                try {
                    const response = await getBasWarehouList({warehouseType:'2'})
                    if (response.code === 200) {
                        this.warehouseList = response.rows.map(item => ({
                            value: item.warehouseId,
                            text: item.warehouseName
                        }))
                    }
                } catch (error) {
                    console.error('获取仓库列表失败：', error)
                    uni.showToast({
                        title: '获取仓库列表失败',
                        icon: 'none'
                    })
                }
            },
            
            // 获取入口列表
            async getEntranceList(warehouseId) {
                try {
                    // 这里需要根据实际API调整，暂时模拟不同仓库的入口数据
                    // const response = await getWarehouseEntrances(warehouseId)
                    const mockData = {
                        '02': [
                            { value: 1, text: '东入口' },
                            { value: 2, text: '西入口' }
                        ],
                        '06': [
                            { value: 3, text: '南入口' },
                            { value: 4, text: '北入口' }
                        ]
                    }
                    
                    this.entranceIdList = mockData[warehouseId] || []
                    this.formData.entranceId = ''
                    
                } catch (error) {
                    console.error('获取入口列表失败：', error)
                    uni.showToast({
                        title: '获取入口列表失败',
                        icon: 'none'
                    })
                }
            },
			
			handleClear() {
				this.formData.trayCode = ''
			},
			handleConfirm() {
				// 处理确认事件
			},
			handleScan() {
				// 调用扫码功能
				uni.scanCode({
					success: (res) => {
						this.formData.trayCode = res.result
					}
				})
			},
		
			async handleSubmit() {
				// 表单验证
				if (!this.formData.trayCode) {
					uni.showToast({
						title: '请扫描或输入托盘条码',
						icon: 'none'
					})
					return
				}
			
				if (!this.formData.entranceId) {
					uni.showToast({
						title: '请选择入口',
						icon: 'none'
					})
					return
				}
				if (!this.formData.warehouseId) {
					uni.showToast({
						title: '请选择仓库',
						icon: 'none'
					})
					return
				}
			
				// try {
                    const response = await emptyBoxIn(this.formData)
                    if (response.code === 200) {
                        uni.showToast({
                            title: '空料箱入库成功',
                            icon: 'success'
                        })
                        // 清空表单
                        this.formData = {
                            trayCode: '',
                            warehouseId:'',
                            entranceId: ''
                        }
                        // 重新聚焦到托盘条码输入框
                        setTimeout(() => {
                            this.$nextTick(() => {
                                this.$refs.trayCodeInput.onFocus()
                            })
                        }, 100)
                    } else {
                        uni.showToast({
                            title: response.msg || '入库操作失败',
                            icon: 'none'
                        })
                    }
                // } catch (error) {
                //     console.error('入库失败：', error)
                //     uni.showToast({
                //         title: '入库失败',
                //         icon: 'none'
                //     })
                // }
			}
		}
	}
</script>

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

.input-group {
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  
  .input-label {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    width: 160rpx;
    flex-shrink: 0;
  }
  
  :deep(.uni-easyinput__content) {
    background-color: #fff;
    border-radius: 12rpx;
    border: 2rpx solid #e8e8e8;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    
    &:focus-within {
      border-color: #2979ff;
      box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.1);
      transform: translateY(-2rpx);
    }
  }
  
  :deep(.uni-easyinput__content-input) {
    height: 88rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
  }
}

.scan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88rpx;
  height: 88rpx;
  font-size: 40rpx;
  color: #2979ff;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.9);
  }
}

.button-group {
	padding: 30rpx;
	margin-top: 20rpx;

	.submit-button {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #2979ff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.2);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 8rpx rgba(41, 121, 255, 0.2);
		}
	}
}
</style>