<template>
|
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px">
|
<el-form ref="detailFormRef" :model="formData" :rules="goodsInRules" v-loading="formLoading" label-width="80px">
|
<el-form-item label="柜号" prop="cabinetCode">
|
<el-input v-model="formData.cabinetCode" placeholder="请输入柜号" />
|
</el-form-item>
|
<el-form-item label="门号" prop="doorCode">
|
<el-input v-model="formData.doorCode" placeholder="请输入门号" />
|
</el-form-item>
|
<el-form-item label="物品名称" prop="goodsName">
|
<el-input v-model="formData.goodsName" placeholder="请输入物品名称" />
|
</el-form-item>
|
<el-form-item label="物品编码" prop="goodsCode">
|
<el-input v-model="formData.goodsCode" placeholder="请输入物品编码" />
|
</el-form-item>
|
<el-form-item label="入库数量" prop="inAmount">
|
<el-input v-model="formData.inAmount" placeholder="请输入入库数量" />
|
</el-form-item>
|
<el-form-item label="库存数量" prop="repAmount">
|
<el-input v-model="formData.repAmount" placeholder="请输入库存数量" />
|
</el-form-item>
|
<el-form-item label="入库时间" prop="inTime">
|
<el-date-picker clearable v-model="formData.inTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
|
placeholder="请选择入库时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="入库人" prop="inOperator">
|
<el-input v-model="formData.inOperator" placeholder="请输入入库人" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button :loading="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
<el-button @click="cancel">取 消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
// 模块导入
|
import { goodsInRules } from "@/views/system/goodsIn/typing/rules";
|
import { GoodsInForm } from "@/api/system/goodsIn/types";
|
import { addGoodsIn, getGoodsIn, updateGoodsIn } from "@/api/system/goodsIn";
|
import { FormInstance } from "element-plus";
|
import { ref } from "vue";
|
|
// 接收父组件传入属性
|
const props = defineProps({});
|
|
/** 当前组件的属性 */
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
const formLoading = ref(false);
|
// 表单的类型：add - 新增；edit - 修改
|
const formType = ref("add");
|
// 对话框 弹出增加、修改
|
const dialog = reactive<DialogOption>({
|
visible: false,
|
title: ""
|
});
|
// 窗体 Ref
|
const detailFormRef = ref<FormInstance>();
|
// 数据表单
|
const formData = ref<GoodsInForm>({
|
inId: "",
|
cabinetCode: "",
|
doorCode: "",
|
goodsName: "",
|
goodsCode: "",
|
inAmount: 0,
|
repAmount: 0,
|
inTime: "",
|
inOperator: ""
|
});
|
|
// 当前组件方法
|
/** 提交按钮 */
|
const submitForm = async () => {
|
// 校验表单
|
if (!detailFormRef.value) return;
|
// 输入项校验
|
const valid = await detailFormRef.value?.validate();
|
if (!valid) return;
|
// 提交请求
|
formLoading.value = true;
|
try {
|
const data = formData as unknown as GoodsInForm;
|
if (formType.value === "edit") {
|
await updateGoodsIn(data);
|
proxy?.$modal.msgSuccess("修改成功");
|
} else {
|
await addGoodsIn(data);
|
proxy?.$modal.msgSuccess("增加成功");
|
}
|
dialog.visible = false;
|
// 发送操作成功的事件
|
emits("success");
|
} finally {
|
formLoading.value = false;
|
}
|
};
|
|
/** 取消按钮 */
|
const cancel = () => {
|
resetForm();
|
dialog.visible = false;
|
};
|
|
/** 重置表单 */
|
const resetForm = () => {
|
formData.value = {
|
inId: "",
|
cabinetCode: "",
|
doorCode: "",
|
goodsName: "",
|
goodsCode: "",
|
inAmount: 0,
|
repAmount: 0,
|
inTime: "",
|
inOperator: ""
|
};
|
detailFormRef.value?.resetFields();
|
};
|
/** 查询入库登记列表 */
|
const openForm = async (act: string, id?: number) => {
|
act === "add" ? dialog.title = "增加入库记录" : dialog.title = "修改入库记录";
|
dialog.visible = true;
|
formType.value = act;
|
resetForm();
|
|
// 修改时，设置数据
|
if (id) {
|
formLoading.value = true;
|
try {
|
const res = await getGoodsIn(id);
|
Object.assign(formData.value, res.data);
|
} finally {
|
formLoading.value = false;
|
}
|
} else {
|
//formData.value.ownerUserId = userId
|
}
|
};
|
// 传回给父组件的属性与方法
|
defineExpose({ openForm });
|
|
// 触发父组件的事件
|
const emits = defineEmits<{ (e: "success"): void }>();
|
|
// 初始化
|
</script>
|
|
<style scoped lang="scss"></style>
|
