<template>
|
<div>
|
<el-dialog
|
v-model="isShow"
|
:title="TEXT.title"
|
width="800"
|
@close="closeModal"
|
>
|
<el-form label-width="140px" :model="formState" label-position="top" ref="formRef">
|
<el-form-item
|
:label="TEXT.productName"
|
prop="productModelId"
|
:rules="[
|
{
|
required: true,
|
message: TEXT.selectProduct,
|
trigger: 'change',
|
},
|
]"
|
>
|
<el-button type="primary" @click="showProductSelectDialog = true" disabled>
|
{{ formState.productName ? formState.productName : TEXT.selectProduct }}
|
</el-button>
|
</el-form-item>
|
|
<el-form-item :label="TEXT.specification" prop="productModelName">
|
<el-input v-model="formState.model" disabled />
|
</el-form-item>
|
|
<el-form-item :label="TEXT.unit" prop="unit">
|
<el-input v-model="formState.unit" disabled />
|
</el-form-item>
|
|
<el-form-item :label="TEXT.quantity" prop="qualitity">
|
<el-input-number
|
v-model="formState.qualitity"
|
:step="1"
|
:min="1"
|
:max="maxQuality"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
|
<el-form-item
|
:label="TEXT.inboundTime"
|
prop="inboundTime"
|
:rules="[
|
{
|
required: true,
|
message: TEXT.selectInboundTime,
|
trigger: 'change',
|
},
|
]"
|
>
|
<el-date-picker
|
v-model="formState.inboundTime"
|
type="datetime"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
:placeholder="TEXT.selectInboundTime"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
|
<el-form-item :label="TEXT.remark" prop="remark">
|
<el-input v-model="formState.remark" type="textarea" />
|
</el-form-item>
|
</el-form>
|
|
<ProductSelectDialog
|
v-model="showProductSelectDialog"
|
@confirm="handleProductSelect"
|
single
|
/>
|
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">{{ TEXT.confirm }}</el-button>
|
<el-button @click="closeModal">{{ TEXT.cancel }}</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, getCurrentInstance, onMounted, ref } from "vue";
|
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
|
import { subtractStockInventory } from "@/api/inventoryManagement/stockInventory.js";
|
import { subtractStockUnInventory } from "@/api/inventoryManagement/stockUninventory.js";
|
|
const TEXT = {
|
title: "\u9886\u7528",
|
productName: "\u4ea7\u54c1\u540d\u79f0",
|
selectProduct: "\u8bf7\u9009\u62e9\u4ea7\u54c1",
|
specification: "\u89c4\u683c",
|
unit: "\u5355\u4f4d",
|
quantity: "\u6570\u91cf",
|
inboundTime: "\u5165\u5e93\u65f6\u95f4",
|
selectInboundTime: "\u8bf7\u9009\u62e9\u5165\u5e93\u65f6\u95f4",
|
remark: "\u5907\u6ce8",
|
confirm: "\u786e\u8ba4",
|
cancel: "\u53d6\u6d88",
|
submitSuccess: "\u63d0\u4ea4\u6210\u529f",
|
selectSpec: "\u8bf7\u9009\u62e9\u89c4\u683c",
|
};
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
required: true,
|
},
|
record: {
|
type: Object,
|
default: () => {},
|
},
|
type: {
|
type: String,
|
required: true,
|
default: "qualified",
|
},
|
});
|
|
const emit = defineEmits(["update:visible", "completed"]);
|
|
const getCurrentDateTime = () => {
|
const now = new Date();
|
const pad = (value) => String(value).padStart(2, "0");
|
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
|
};
|
|
const maxQuality = computed(() => {
|
return props.record.unLockedQuantity ? props.record.unLockedQuantity : 0;
|
});
|
|
const formState = ref({
|
productId: undefined,
|
productModelId: undefined,
|
productName: "",
|
model: "",
|
unit: "",
|
qualitity: 0,
|
inboundTime: getCurrentDateTime(),
|
remark: "",
|
});
|
|
const isShow = computed({
|
get() {
|
return props.visible;
|
},
|
set(val) {
|
emit("update:visible", val);
|
},
|
});
|
|
const showProductSelectDialog = ref(false);
|
const { proxy } = getCurrentInstance();
|
|
const initFormData = () => {
|
if (props.record) {
|
formState.value = {
|
...props.record,
|
inboundTime: props.record.inboundTime || getCurrentDateTime(),
|
};
|
}
|
};
|
|
onMounted(() => {
|
initFormData();
|
});
|
|
const closeModal = () => {
|
formState.value = {
|
productId: undefined,
|
productModelId: undefined,
|
productName: "",
|
productModelName: "",
|
description: "",
|
inboundTime: getCurrentDateTime(),
|
};
|
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) {
|
return;
|
}
|
|
if (!formState.value.productModelId) {
|
proxy.$modal.msgError(TEXT.selectProduct);
|
return;
|
}
|
if (!formState.value.productModelId) {
|
proxy.$modal.msgError(TEXT.selectSpec);
|
return;
|
}
|
if (!formState.value.inboundTime) {
|
proxy.$modal.msgError(TEXT.selectInboundTime);
|
return;
|
}
|
|
const submitApi =
|
props.type === "qualified" ? subtractStockInventory : subtractStockUnInventory;
|
|
submitApi(formState.value).then(() => {
|
isShow.value = false;
|
emit("completed");
|
proxy.$modal.msgSuccess(TEXT.submitSuccess);
|
});
|
});
|
};
|
|
defineExpose({
|
closeModal,
|
handleSubmit,
|
isShow,
|
});
|
</script>
|
