FT517-WMS/RuoYi-App-master/pages/out/move.vue

<template>
	<view class="container">
		<uni-forms class="form-card">
			<view class="form-content">
				<!-- 第一个独立下拉框 -->
				<uni-forms-item :label="$t('outbound.move.startPointType')">
					<uni-data-select
						v-model="formData.startPointType"
						:localdata="pointTypeList"
						:clear="false"
						:placeholder="$t('outbound.move.startPointTypePlaceholder')"
						@change="handleStartPointTypeChange"
					/>
				</uni-forms-item>
				
				<!-- 第二个独立下拉框 -->
				<uni-forms-item :label="$t('outbound.move.targetPointType')">
					<uni-data-select
						v-model="formData.targetPointType"
						:localdata="pointTypeList"
						:clear="false"
						:placeholder="$t('outbound.move.targetPointTypePlaceholder')"
						@change="handleTargetPointTypeChange"
					/>
				</uni-forms-item>
				
				<!-- 第一个联动下拉框（主） -->
				<uni-forms-item :label="$t('outbound.move.sourceLocation')">
					<uni-data-select
						v-model="formData.sourceLocationId"
						:localdata="sourceLocationList"
						:clear="false"
						:placeholder="$t('outbound.move.sourceLocationPlaceholder')"
					/>
				</uni-forms-item>
				
				<!-- 第二个联动下拉框（从） -->
				<uni-forms-item :label="$t('outbound.move.targetLocation')">
					<uni-data-select
						v-model="formData.targetLocationId"
						:localdata="targetLocationList"
						:clear="false"
						:placeholder="$t('outbound.move.targetLocationPlaceholder')"
					/>
				</uni-forms-item>
			</view>
			
			<button class="submit-button" @click="handleSubmit">{{ $t('outbound.move.submit') }}</button>
		</uni-forms>
	</view>
</template>

<script>
import { getPointTypeList, getPortList,submitMove } from '@/api/out/move.js'


export default {
	data() {
		return {
			formData: {
				startPointType: '',
				targetPointType: '',
				sourceLocationId: '',
				targetLocationId: ''
			},
			pointTypeList: [],
			sourceLocationList: [],
			targetLocationList: []
		}
	},
	onReady() {
		this.getPointTypeList()
	},
	methods: {
		// 获取点位列表
		async getPointTypeList() {
			try {
				const res = await getPointTypeList({
					dictType:"port_type"
				})
				// if (res.code === 200) {

					this.pointTypeList = res.map(item => ({
						value: item.dictValue,
						text: this.$t(item.dictLabel)
					}))
					
				
				// }
			} catch (error) {
				console.error('获取点位列表失败', error)
				uni.showToast({
					title: this.$t('outbound.move.getPointTypeListFailed'),
					icon: 'none'
				})
			}
		},
		
// 处理起始点类型变化
async handleStartPointTypeChange(value) {
	if (!value) {
		this.sourceLocationList = []
		return
	}
	
	try {
		const res = await getPortList({
			portType: value,
			pageSize:100,
			pageNum:1
		})
		if (res.code === 200) {
			this.sourceLocationList = res.rows.map(item => ({
				value: item.portName,
				text: item.portName
			}))
		}
	} catch (error) {
		console.error('获取端口列表失败', error)
		uni.showToast({
			title: this.$t('outbound.move.getPortListFailed'),
			icon: 'none'
		})
	}
},
		
	
		
		// 处理目标点类型变化
		async handleTargetPointTypeChange(value) {
			if (!value) {
				this.targetLocationList = []
				return
			}
			
			try {
				const res = await getPortList({
					portType: value,
					pageSize:100,
					pageNum:1
				})
				if (res.code === 200) {
					this.targetLocationList = res.rows.map(item => ({
						value: item.portName,
						text: item.portName
					}))
				}
			} catch (error) {
				console.error('获取目标端口列表失败', error)
				uni.showToast({
					title: this.$t('outbound.move.getPortListFailed'),
					icon: 'none'
				})
			}
		},
		
	
		
		// 提交表单
		async handleSubmit() {
			// 表单验证
			if (!this.formData.startPointType) {
				uni.showToast({
					title: this.$t('outbound.move.startPointTypeRequired'),
					icon: 'none'
				})
				return
			}
			
			if (!this.formData.targetPointType) {
				uni.showToast({
					title: this.$t('outbound.move.targetPointTypeRequired'),
					icon: 'none'
				})
				return
			}
			
			if (!this.formData.sourceLocationId) {
				uni.showToast({
					title: this.$t('outbound.move.sourceLocationRequired'),
					icon: 'none'
				})
				return
			}
			
			if (!this.formData.targetLocationId) {
				uni.showToast({
					title: this.$t('outbound.move.targetLocationRequired'),
					icon: 'none'
				})
				return
			}
			
			try {
				const res = await submitMove({
					startPoint:this.formData.sourceLocationId,
				    endPoint:this.formData.targetLocationId})
				if (res.code === 200) {
					uni.showToast({
						title: this.$t('outbound.move.submitSuccess'),
						icon: 'success'
					})
					// 重置表单
					this.formData = {
						sourceWarehouseId: '',
						targetWarehouseId: '',
						sourceLocationId: '',
						targetLocationId: ''
					}
					this.sourceLocationList = []
					this.targetLocationList = []
				} else {
					uni.showToast({
						title: res.msg || this.$t('outbound.move.submitFailed'),
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('提交移库请求失败', error)
				uni.showToast({
					title:  res.msg ||this.$t('outbound.move.submitError'),
					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);
}

.form-content {
	margin-bottom: 40rpx;
}

:deep(.uni-forms-item) {
	padding-bottom: 30rpx;
	
	.uni-forms-item__label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
}

.submit-button {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #007aff;
	color: #fff;
	font-size: 32rpx;
	border-radius: 44rpx;
	
	&:active {
		background-color: #0062cc;
	}
}
</style>