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

<template>
	<view class="container">
		<view class="form-card">
			<uni-forms>
				<uni-forms-item label="仓库">
					<uni-data-select
						v-model="formData.warehouseId"
						:localdata="warehouseList"
						:clear="false"
						placeholder="请选择仓库"
						@change="handleWarehouseChange"
					/>
				</uni-forms-item>

				<view class="cargo-space-container">
					<uni-forms-item label="出口">
						<uni-data-select
							v-model="formData.exitId"
							:localdata="exitList"
							:clear="false"
							placeholder="请选择出口"
						/>
					</uni-forms-item>
				</view>
			
				<button class="submit-button" hover-class="button-hover" @click="handleSubmit">空托盘出库</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import { getBasWarehouList, getFullCargoSpaceListByWarehouse,getCargoSpaceList } from '@/api/bas/bas.js'
import{emptyTrayOut} from '@/api/out/ktpout.js'

export default {
	data() {
		return {
			formData: {
				warehouseId: '',
				exitId: ''
			},
			warehouseList: [],
			cargoSpaceList: [],
			exitList: [],
			currentWarehouseType: '',
			cargoSpaceHeight:''
		}
	},
	onReady() {
		this.getWarehouseList()
	},
	methods: {
		async getWarehouseList() {
			try {
				const res = await getBasWarehouList({
					   pageNum:1,
						pageSize:100,
						// typeData:['1','2']
				})
				if (res.code === 200) {
					this.warehouseList = res.rows.map(item => ({
						value: item.warehouseId,
						text: item.warehouseName
						// type: item.warehouseType
					}))
				}
			} catch (error) {
				console.error('获取仓库列表失败', error)
			}
		},
		async handleWarehouseChange(warehouseId) {
			if (!warehouseId) return
			const selectedWarehouse = this.warehouseList.find(item => item.value === warehouseId)
			this.currentWarehouseType = selectedWarehouse ? selectedWarehouse.type : ''
			this.formData.exitId = ''
			
			// if (this.currentWarehouseType == '2') {
				// 模拟出口数据，实际项目中应该从后端获取
				this.exitList = [
					{ value: '1', text: '出口方向1' },
				{ value: '2', text: '出口方向2' }
				]
			// }
		},

		async handleSubmit() {
			if (!this.formData.warehouseId) {
				uni.showToast({
					title: '请选择仓库',
					icon: 'none'
				})
				return
			}
		
			if ( !this.formData.exitId) {
				uni.showToast({
					title: '请选择出口',
					icon: 'none'
				})
				return
			}
			

			// try {
				const response = await emptyTrayOut(this.formData)
				
				if (response.code === 200) {
					uni.showToast({
						title: '空托盘出库成功',
						icon: 'success'
					})
					// 重置表单数据
					this.formData = {
						warehouseId: '',
						exitId: ''
					}
					this.exitList = []

				} else {
					uni.showToast({
						title: response.msg || '出库操作失败',
						icon: 'none'
					})
				}
			// } 
			// catch (error) {
			// 	console.error('出库失败：',error)
			// 	uni.showToast({
			// 		title: '出库失败',
			// 		icon: 'none'
			// 	})
			// }
		}
	}
}
</script>

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

.form-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

:deep(.uni-forms-item) {
	padding-bottom: 30rpx;

	.uni-forms-item__label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		white-space: nowrap;
	
	}

	.uni-easyinput__content {
		background-color: #f8f8f8;
		border-radius: 8rpx;
		height: 80rpx;
		padding: 0 24rpx;
	}
}

.cargo-space-container {
	margin-bottom: 30rpx;
}

.cargo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	padding: 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
}

.cargo-item {
	padding: 20rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 8rpx;
	border: 2rpx solid #e5e5e5;
	cursor: pointer;
	transition: all 0.3s ease;

	&:hover {
		background-color: #f0f7ff;
		border-color: #3B7FFF;
	}
}

.selected-item {
	background-color: #3B7FFF;
	color: #fff;
	border-color: #3B7FFF;

	&:hover {
		background-color: #2c6be6;
	}
}

.submit-button {
	margin-top: 40rpx;
	width: 100%;
	background-color: #3B7FFF;
	color: #fff;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 32rpx;
	border-radius: 44rpx;
	transition: all 0.3s ease;
}

.button-hover {
	background-color: #2c6be6;
	transform: translateY(2rpx);
}

.cargo-input-group {
	display: flex;
	gap: 20rpx;
	align-items: center;
}

.recommend-btn {
	flex-shrink: 0;
	padding: 0 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #3B7FFF;
	color: #fff;
	border-radius: 8rpx;
	font-size: 28rpx;
}
</style>