新增资库区
This commit is contained in:
WUSIJIAN
209
src/views/assets/zone/component/editZone.vue
Normal file
209
src/views/assets/zone/component/editZone.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<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-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="ruleForm.status">
|
||||
<el-radio :value="1">启用</el-radio>
|
||||
<el-radio :value="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</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,
|
||||
status: 1,
|
||||
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.status = 1;
|
||||
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.status = (data.status === '1' || data.status === 1 || data.status === true) ? 1 : 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,
|
||||
status: ruleForm.status,
|
||||
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>
|
||||
Reference in New Issue
Block a user