yudao-dev/src/views/warehouse/warehouse-manage/in&out/add-or-updata.vue

<!--
 * @Author: zwq
 * @Date: 2024-08-02 16:26:58
 * @LastEditors: zwq
 * @LastEditTime: 2024-08-08 16:38:53
 * @Description:,
-->
<template>
	<div>
		<el-form
			:model="dataForm"
			:rules="dataRule"
			ref="dataForm"
			v-if="visible && !moveMode"
			@keyup.enter.native="dataFormSubmit()"
			label-width="100px"
			label-position="top">
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item prop="targetName" label="出库目的地">
						<el-select
							v-model="dataForm.targetName"
							filterable
							:style="{ width: '100%' }"
							placeholder="请选择出库目的地">
							<el-option
								v-for="item in urlOptions.dictList.dict0"
								:key="item.id"
								:label="item.label"
								:value="item.label"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="出库用途" prop="useFor">
						<el-input
							v-model="dataForm.useFor"
							clearable
							placeholder="请输入出库用途" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-form v-else ref="form" label-width="100px">
			<el-row>
				<el-col :span="24">
					<el-form-item label="请选择目的地">
						<el-cascader
							:value="oldLocationId"
							:style="{ width: '100%' }"
							:options="deptOptions"
							:props="{
								value: 'id',
								label: 'name',
							}"
							@change="handleChange"></el-cascader>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
import basicAdd from '../../mixins/basic-add';
import {
	outWarehouseRealtimeLocation,
	outWarehouseRealtimeLocationList,
	moveWarehouseRealtimeLocation,
} from '@/api/warehouse/warehouseRealtimeLocation';
import { getWarehouseLocationTree } from '@/api/warehouse/warehouse-location-setup';
import { getUserProfile } from '@/api/system/user';

export default {
	mixins: [basicAdd],
	components: {},
	data() {
		return {
			urlOptions: {
				getDictList: true,
				updateURL: outWarehouseRealtimeLocation,
				allupdateURL: outWarehouseRealtimeLocationList,
			},
			nameList: ['outbound-dest'],
			dataForm: {
				id: undefined,
				targetName: '',
				useFor: '',
				operator: '',
			},
			selectData: [],
			moveMode: false, //是否移库
			modeName: '出库',
			oldLocationId: '', //移库原id
			newLocationId: '', //移库目的id
			dataRule: {
				targetName: [
					{ required: true, message: '出库目的地不能为空', trigger: 'change' },
				],
			},
			deptOptions: undefined,
		};
	},
	created() {
		getUserProfile().then((response) => {
			this.dataForm.operator = response.data.username;
		});
	},
	methods: {
		init(id, selectData) {
			this.moveMode = false;
			this.visible = true;
			if (id === '批量出库') {
				this.modeName = '批量出库';
				this.selectData = selectData;
			} else if (id === '移库') {
				this.modeName = '移库';
				this.getTreeselect();
				this.moveMode = true;
				this.oldLocationId = selectData;
				this.newLocationId = selectData;
				return;
			} else {
				this.modeName = '出库';
				this.selectData = [];
				this.dataForm.id = id || '';
			}
			if (this.urlOptions.getDictList) {
				this.getDict();
			}
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();
			});
		},
		// 表单提交
		dataFormSubmit() {
			if (this.modeName === '移库') {
				// 移库
				const obj = {
					oldLocationId: this.oldLocationId,
					newLocationId: this.newLocationId,
					operator: this.dataForm.operator,
				};
				moveWarehouseRealtimeLocation(obj).then((response) => {
					this.$modal.msgSuccess('出库成功');
					this.visible = false;
					this.$emit('refreshDataList');
				});
				return;
			}
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				if (this.modeName === '批量出库') {
					this.selectData.forEach((item) => {
						item.realtimeLocationId = item.id;
						item.targetName = this.dataForm.targetName;
						item.useFor = this.dataForm.useFor;
						item.operator = this.dataForm.operator;
					});
					// 批量出库
					this.urlOptions.allupdateURL(this.selectData).then((response) => {
						this.$modal.msgSuccess('批量出库成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
				} else if (this.modeName === '出库') {
					// 出库
					this.dataForm.realtimeLocationId = this.dataForm.id;
					this.urlOptions.updateURL(this.dataForm).then((response) => {
						this.$modal.msgSuccess('出库成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
				}
			});
		},
		handleChange(val) {
			this.newLocationId = val[2];
		},
		// 查询下拉树结构
		getTreeselect() {
			getWarehouseLocationTree().then((response) => {
				this.deptOptions = [];
				this.deptOptions.push(...this.handleTree(response.data, 'id'));
			});
		},
	},
};
</script>