<template>
|
<div>
|
<el-dialog v-model="isShow"
|
title="新增库存"
|
width="800"
|
@close="closeModal">
|
<el-form label-width="140px"
|
:model="formState"
|
label-position="top"
|
ref="formRef">
|
<el-form-item label="产品名称"
|
prop="productModelId"
|
:rules="[
|
{
|
required: true,
|
message: '请选择产品',
|
trigger: 'change',
|
}
|
]">
|
<el-button type="primary"
|
@click="showProductSelectDialog = true">
|
{{ formState.productName ? formState.productName : '选择产品' }}
|
</el-button>
|
</el-form-item>
|
<el-form-item label="规格"
|
prop="productModelName">
|
<el-input v-model="formState.productModelName"
|
disabled />
|
</el-form-item>
|
<el-form-item label="单位"
|
prop="unit">
|
<el-input v-model="formState.unit"
|
disabled />
|
</el-form-item>
|
<el-form-item label="厂家"
|
prop="manufacturerId">
|
<el-select v-model="formState.manufacturerId"
|
placeholder="请选择厂家"
|
clearable
|
filterable
|
style="width: 100%">
|
<el-option v-for="item in manufacturerOptions"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="库存类型"
|
prop="type"
|
:rules="[
|
{
|
required: true,
|
message: '请选择库存类型',
|
trigger: 'change',
|
}
|
]">
|
<el-select v-model="formState.type"
|
placeholder="请选择库存类型"
|
@change="handleTypeChange">
|
<el-option label="合格库"
|
value="qualified" />
|
<el-option label="废品库"
|
value="waste" />
|
<el-option label="不合格库"
|
value="unqualified" />
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="formState.type && formState.type !== 'unqualified'"
|
label="来源"
|
prop="source"
|
:rules="[
|
{
|
required: true,
|
message: '请选择来源',
|
trigger: 'change',
|
}
|
]">
|
<el-select v-model="formState.source"
|
placeholder="请选择来源">
|
<el-option v-for="item in sourceOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="库存数量"
|
prop="qualitity">
|
<el-input-number v-model="formState.qualitity"
|
:step="1"
|
:min="1"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="批号"
|
prop="batchNo">
|
<el-input v-model="formState.batchNo"
|
placeholder="请输入批号" />
|
</el-form-item>
|
<el-form-item v-if="formState.type === 'qualified'"
|
label="库存预警数量"
|
prop="warnNum">
|
<el-input-number v-model="formState.warnNum"
|
:step="1"
|
:min="0"
|
:max="formState.qualitity"
|
style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="备注"
|
prop="remark">
|
<el-input v-model="formState.remark"
|
type="textarea" />
|
</el-form-item>
|
</el-form>
|
<!-- 产品选择弹窗 -->
|
<ProductSelectDialog v-model="showProductSelectDialog"
|
@confirm="handleProductSelect"
|
:top-product-parent-id="props.topProductParentId"
|
single />
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary"
|
@click="handleSubmit">确认</el-button>
|
<el-button @click="closeModal">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, watch, getCurrentInstance, onMounted } from "vue";
|
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
|
import { addStockInRecordOnly } from "@/api/inventoryManagement/stockInventory.js";
|
import { createStockUnInventory } from "@/api/inventoryManagement/stockUninventory.js";
|
import { getManufacturerOptions } from "@/api/inspectionManagement/manufacturerManageFile.js";
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
topProductParentId: {
|
type: Number,
|
default: undefined,
|
required: false,
|
},
|
});
|
|
const emit = defineEmits(["update:visible", "completed"]);
|
|
// 响应式数据（替代选项式的 data）
|
const formState = ref({
|
productId: undefined,
|
productModelId: undefined,
|
productName: "",
|
productModelName: "",
|
unit: "",
|
type: undefined,
|
manufacturerId: "",
|
source: "",
|
qualitity: 0,
|
batchNo: null,
|
warnNum: 0,
|
remark: "",
|
});
|
|
const sourceOptions = computed(() => {
|
if (formState.value.type === "qualified") {
|
return [
|
{ value: "purchaseReceipt", label: "采购入库" },
|
{ value: "productionReceipt", label: "生产入库" },
|
{ value: "outsourcedReceipt", label: "外协入库" },
|
{ value: "repairReceipt", label: "修复入库" },
|
];
|
} else if (formState.value.type === "waste") {
|
return [
|
{ value: "prodGenerated", label: "生产产生" },
|
{ value: "transGenerated", label: "运输产生" },
|
{ value: "cuttingGenerated", label: "裁剪产生" },
|
];
|
}
|
return [];
|
});
|
|
const handleTypeChange = val => {
|
formState.value.source = "";
|
};
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit("update:visible", val);
|
},
|
});
|
|
const showProductSelectDialog = ref(false);
|
const manufacturerOptions = ref([]);
|
|
const loadManufacturerOptions = () => {
|
getManufacturerOptions().then(res => {
|
manufacturerOptions.value = res.data || [];
|
});
|
};
|
|
onMounted(() => {
|
loadManufacturerOptions();
|
});
|
|
// 批号为空时转为 null
|
watch(
|
() => formState.value.batchNo,
|
val => {
|
if (val === "") {
|
formState.value.batchNo = null;
|
}
|
}
|
);
|
|
let { proxy } = getCurrentInstance();
|
|
const closeModal = () => {
|
// 重置表单数据
|
formState.value = {
|
productId: undefined,
|
productModelId: undefined,
|
productName: "",
|
productModelName: "",
|
unit: "",
|
type: undefined,
|
manufacturerId: "",
|
source: "",
|
qualitity: 0,
|
batchNo: null,
|
warnNum: 0,
|
remark: "",
|
};
|
isShow.value = false;
|
};
|
|
// 产品选择处理
|
const handleProductSelect = async products => {
|
if (products && products.length > 0) {
|
const product = products[0];
|
formState.value.productId = product.productId;
|
formState.value.productName = product.productName;
|
formState.value.productModelName = product.model;
|
formState.value.productModelId = product.id;
|
formState.value.unit = product.unit;
|
showProductSelectDialog.value = false;
|
// 触发表单验证更新
|
proxy.$refs["formRef"]?.validateField("productModelId");
|
}
|
};
|
|
const handleSubmit = () => {
|
proxy.$refs["formRef"].validate(valid => {
|
if (valid) {
|
// 验证是否选择了产品和规格
|
if (!formState.value.productModelId) {
|
proxy.$modal.msgError("请选择产品");
|
return;
|
}
|
if (!formState.value.productModelId) {
|
proxy.$modal.msgError("请选择规格");
|
return;
|
}
|
if (formState.value.type === "qualified") {
|
addStockInRecordOnly(formState.value).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit("completed");
|
proxy.$modal.msgSuccess("提交成功");
|
});
|
} else {
|
formState.value.warnNum = 0;
|
createStockUnInventory(formState.value).then(res => {
|
// 关闭模态框
|
isShow.value = false;
|
// 告知父组件已完成
|
emit("completed");
|
proxy.$modal.msgSuccess("提交成功");
|
});
|
}
|
}
|
});
|
};
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
</script>
|
