admin-ui/src/views/assets/zone/component/editZone.vue

<template>
	<el-dialog
		:title="isEdit ? '修改库区' : '新增库区'"
		v-model="isShowDialog"
		width="600px"
		:close-on-click-modal="false"
		@close="onCancel"
	>
		<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="库区名称" prop="zoneName">
						<el-input v-model="ruleForm.zoneName" placeholder="请输入库区名称" clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="库区编码" prop="zoneCode">
						<el-input v-model="ruleForm.zoneCode" placeholder="请输入库区编码" clearable />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="所属仓库" prop="warehouseId">
						<el-select v-model="ruleForm.warehouseId" placeholder="请选择仓库" clearable style="width: 100%">
							<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="库区类型" prop="zoneType">
						<el-select v-model="ruleForm.zoneType" placeholder="请选择库区类型" clearable style="width: 100%">
							<el-option label="存储区" value="存储区" />
							<el-option label="拣货区" value="拣货区" />
							<el-option label="暂存区" value="暂存区" />
							<el-option label="退货区" value="退货区" />
							<el-option label="发货区" value="发货区" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="容量" prop="capacity">
						<el-input-number v-model="ruleForm.capacity" :min="0" placeholder="请输入容量" style="width: 100%" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="submitLoading">{{ isEdit ? '修 改' : '添 加' }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
export default {
	name: 'editZone',
};
</script>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { createZone, updateZone, getZone } from '/@/api/assets/zone';

// 定义props
defineProps<{
	warehouseOptions: any[];
}>();

// 定义事件
const emit = defineEmits(['getZoneList']);

// 表单ref
const formRef = ref<FormInstance>();

// 弹窗状态
const isShowDialog = ref(false);
const isEdit = ref(false);
const submitLoading = ref(false);

// 表单数据
const ruleForm = reactive({
	id: '',
	zoneName: '',
	zoneCode: '',
	zoneType: '',
	warehouseId: '',
	capacity: 0,
	remark: '',
});

// 表单验证规则
const rules = reactive<FormRules>({
	zoneName: [{ required: true, message: '请输入库区名称', trigger: 'blur' }],
	warehouseId: [{ required: true, message: '请选择所属仓库', trigger: 'change' }],
});

// 重置表单
const resetForm = () => {
	ruleForm.id = '';
	ruleForm.zoneName = '';
	ruleForm.zoneCode = '';
	ruleForm.zoneType = '';
	ruleForm.warehouseId = '';
	ruleForm.capacity = 0;
	ruleForm.remark = '';
};

// 打开弹窗
const openDialog = async (row?: any) => {
	resetForm();
	isEdit.value = !!row;
	
	if (row) {
		try {
			const res: any = await getZone(row.id);
			const data = res.data;
			ruleForm.id = data.id || '';
			ruleForm.zoneName = data.zoneName || '';
			ruleForm.zoneCode = data.zoneCode || '';
			ruleForm.zoneType = data.zoneType || '';
			ruleForm.warehouseId = data.warehouseId || '';
			ruleForm.capacity = data.capacity || 0;
			ruleForm.remark = data.remark || '';
		} catch (error) {
			console.error('获取库区详情失败:', error);
		}
	}
	
	isShowDialog.value = true;
};

// 取消
const onCancel = () => {
	isShowDialog.value = false;
	formRef.value?.resetFields();
};

// 提交
const onSubmit = async () => {
	const form = formRef.value;
	if (!form) return;
	
	form.validate(async (valid: boolean) => {
		if (valid) {
			submitLoading.value = true;
			try {
				const data = {
					id: ruleForm.id || undefined,
					zoneName: ruleForm.zoneName,
					zoneCode: ruleForm.zoneCode,
					zoneType: ruleForm.zoneType,
					warehouseId: ruleForm.warehouseId,
					capacity: ruleForm.capacity,
					remark: ruleForm.remark,
				};
				
				if (isEdit.value) {
					await updateZone(data);
					ElMessage.success('修改成功');
				} else {
					await createZone(data);
					ElMessage.success('添加成功');
				}
				
				isShowDialog.value = false;
				emit('getZoneList');
			} catch (error) {
				console.error('提交失败:', error);
			} finally {
				submitLoading.value = false;
			}
		}
	});
};

// 暴露方法
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
</style>