wms-njlm/src/views/asrs/dockTransfer/indexb.vue

<!--
 * @Author: zwq
 * @Date: 2024-02-27 14:43:14
 * @LastEditors: zwq
 * @LastEditTime: 2024-04-25 16:39:35
 * @Description:
-->
<template>
	<div class="app-container">
		<div class="box-card">
			<div class="tip">码头起点</div>
			<el-form :inline="true" :model="startData" label-width="100px">
				<el-form-item label="选择区域" class="drawer" prop="region">
					<el-select
						v-model="startData.region"
						style="width: 100%"
						@change="getSArr"
						:popper-append-to-body="false"
						placeholder="请选择区域">
						<el-option
							v-for="item in regionArr"
							:key="item.id"
							:label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="选择位置" class="drawer" prop="targetId">
					<el-select
						v-model="startData.targetId"
						:disabled="SDisable"
						style="width: 100%"
						:popper-append-to-body="false"
						placeholder="请选择位置">
						<el-option
							v-for="item in potArr"
							:key="item.id"
							:label="item.lineEdgeLibraryCode"
							:value="item.id" />
					</el-select>
				</el-form-item>
			</el-form>
			<el-divider style="margin-bottom: 36px">
				<i class="el-icon-bottom"></i>
			</el-divider>
			<div class="tipe">码头终点</div>
			<el-form :inline="true" :model="endData" label-width="100px">
				<el-form-item label="选择区域" class="drawer" prop="region">
					<el-select
						v-model="endData.region"
						style="width: 100%"
						@change="getEArr"
						:popper-append-to-body="false"
						placeholder="请选择区域">
						<el-option
							v-for="item in regionArr"
							:key="item.id"
							:label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="选择位置" class="drawer" prop="targetId">
					<el-select
						v-model="endData.targetId"
						:disabled="EDisable"
						style="width: 100%"
						:popper-append-to-body="false"
						placeholder="请选择位置">
						<el-option
							v-for="item in potArr"
							:key="item.id"
							:label="item.lineEdgeLibraryCode"
							:value="item.id" />
					</el-select>
				</el-form-item>
			</el-form>
			<el-button type="primary" style="float: left" @click="move()">
				转移
			</el-button>
		</div>
	</div>
</template>

<script>
import { getLineList, moveLine } from '@/api/asrs/warehouseStorehouse';
const regionArr = [
	{ name: '一次分切区域1线', id: 1 },
	{ name: '一次分拣区域', id: 2 },
	{ name: '二次分切区域', id: 3 },
	{ name: '二次分拣区域', id: 4 },
	{ name: '手动包装区域', id: 5 },
	{ name: '涂覆区域', id: 6 },
	{ name: '其他', id: 7 },
	{ name: '自动包装区域', id: 8 },
	{ name: '一次分切区域2线', id: 9 },
	{ name: '一次分切区域3线', id: 10 },
	{ name: '一次分切区域4线', id: 11 },
];
export default {
	data() {
		return {
			startData: {
				targetId: undefined,
				region: undefined,
			},
			endData: {
				targetId: undefined,
				region: undefined,
			},
			potArr: [],
			regionArr,
			SDisable: true,
			EDisable: true,
			warehouseId: '1698950657556340737',
		};
	},
	components: {},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.SDisable = true;
			this.EDisable = true;
		},
		getSArr(val) {
			getLineList({ region: val, warehouseId: this.warehouseId }).then(
				(response) => {
					this.potArr = response.data;
					this.SDisable = false;
				}
			);
		},
		getEArr(val) {
			getLineList({ region: val, warehouseId: this.warehouseId }).then(
				(response) => {
					this.potArr = response.data;
					this.EDisable = false;
				}
			);
		},
		move() {
			if (this.startData.targetId && this.endData.targetId) {
				moveLine({
					sourceId: this.startData.targetId,
					targetId: this.endData.targetId,
				}).then((response) => {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
					});
				});
			} else {
				this.$message({
					message: '请选择起终点！',
					type: 'warning',
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.box-card {
	padding: 50px;
	margin: 20px;
	text-align: center;
	box-shadow: 0px 0px 5px 2px gray;
	position: relative;
}
.tip {
	position: absolute;
	top: 20px;
	left: 100px;
	color: #409eff;
}
.tipe {
	position: absolute;
	top: 150px;
	left: 100px;
	color: #409eff;
}
.el-divider--horizontal {
	margin-bottom: 48px;
}
</style>