<template>
|
<div>
|
<el-dialog
|
v-model="dialogFormVisible"
|
:title="title"
|
width="600"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="auto"
|
class="production-form"
|
label-position="right"
|
style="max-width: 400px; margin: 0 auto"
|
>
|
<el-form-item label="供应商名称" prop="supplierName">
|
<el-select v-model="form.supplierName" placeholder="请选择供应商">
|
<el-option :label="item.label" v-for="item in supplyList" :key="item.value" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="煤种" prop="coal">
|
<el-select v-model="form.coal" placeholder="请选择煤种">
|
<el-option :label="item.label" v-for="item in coalList" :key="item.value" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="单位" prop="unit">
|
<el-select
|
v-model="form.unit"
|
placeholder="请选择单位"
|
clearable
|
style="width: 100%"
|
>
|
<el-option label="吨" value="吨" />
|
<el-option label="千克" value="千克" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="采购数量" prop="purchaseQuantity">
|
<el-input
|
v-model.number="form.purchaseQuantity"
|
placeholder="请输入"
|
@blur="handleQuantityBlur"
|
>
|
<template v-slot:suffix>
|
<i style="font-style: normal">{{ form.unit ? form.unit : "" }}</i>
|
</template>
|
</el-input> </el-form-item
|
><el-form-item label="税率" prop="taxRate">
|
<el-input
|
v-model.number="form.taxRate"
|
placeholder="请输入税率"
|
@blur="handleTaxRateBlur"
|
>
|
<template v-slot:suffix>
|
<i style="font-style: normal">%</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="单价(不含税)" prop="priceExcludingTax">
|
<el-input
|
v-model.number="form.priceExcludingTax"
|
placeholder="请输入"
|
@blur="handlePriceBlur"
|
>
|
<template v-slot:suffix>
|
<i style="font-style: normal">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="单价(含税)" prop="priceIncludingTax">
|
<el-input
|
v-model.number="form.priceIncludingTax"
|
placeholder="自动计算"
|
>
|
<template v-slot:suffix>
|
<i style="font-style: normal">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="总价(不含税)" prop="totalPriceExcludingTax">
|
<el-input
|
v-model.number="form.totalPriceExcludingTax"
|
placeholder="自动计算"
|
>
|
<template v-slot:suffix>
|
<i style="font-style: normal">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="总价(含税)" prop="totalPriceIncludingTax">
|
<el-input
|
v-model.number="form.totalPriceIncludingTax"
|
placeholder="自动计算"
|
>
|
<template v-slot:suffix>
|
<i style="font-style: normal">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="登记人" prop="registrantId">
|
<el-input v-model="form.registrantId" disabled placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="登记日期" prop="registrationDate">
|
<el-date-picker
|
disabled
|
v-model="form.registrationDate"
|
type="date"
|
placeholder="YYYY-MM-DD"
|
style="width: 100%"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<!-- 重置和取消 -->
|
<el-button @click="handleClose" v-if="title.includes('新增')"
|
>取消</el-button
|
>
|
<el-button @click="handleReset" v-if="title.includes('编辑')"
|
>重置</el-button
|
>
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="ProductionDialog">
|
import { ref, defineProps, watch, onMounted, nextTick, computed } from "vue";
|
import { ElMessage } from "element-plus";
|
import useUserStore from "@/store/modules/user";
|
import { addOrEditPR } from "@/api/procureMent";
|
import { getSupply } from "@/api/basicInformation/supplier";
|
import { getCoalInfo } from "@/api/basicInformation/coal";
|
const props = defineProps({
|
title: {
|
type: String,
|
default: "",
|
},
|
});
|
const emit = defineEmits(["update:dialogFormVisible", "success"]);
|
const dialogFormVisible = defineModel("dialogFormVisible", {
|
required: true,
|
type: Boolean,
|
});
|
const form = defineModel("form", {
|
required: true,
|
type: Object,
|
});
|
const copyForm = defineModel("copyForm", {
|
required: true,
|
type: Object,
|
});
|
const supplyList = ref([]);
|
const coalList = ref([]);
|
// 获取供应商下拉和煤种下拉
|
const getDropdownData = async () => {
|
try {
|
const [supplyRes, coalRes] = await Promise.all([
|
getSupply(),
|
getCoalInfo(),
|
]);
|
let supplyData = supplyRes.data.records;
|
let coalData = coalRes.data.records;
|
supplyList.value = supplyData.map((item) => ({
|
value: item.id,
|
label: item.supplierName,
|
}));
|
coalList.value = coalData.map((item) => ({
|
value: item.id,
|
label: item.coal,
|
}));
|
console.log(supplyList.value, coalList.value);
|
} catch (error) {
|
console.error("获取下拉数据失败:", error);
|
}
|
};
|
|
defineExpose({
|
getDropdownData,
|
});
|
const toFixed = (num, precision = 2) => {
|
if (isNaN(num) || num === null || num === undefined || num === "") {
|
return 0;
|
}
|
return (
|
Math.floor(parseFloat(num) * Math.pow(10, precision)) /
|
Math.pow(10, precision)
|
);
|
};
|
// 含税单价计算
|
const unitPriceWithTax = computed(() => {
|
const priceExcludingTax = parseFloat(form.value.priceExcludingTax) || 0;
|
const taxRate = parseFloat(form.value.taxRate) || 0;
|
if (!priceExcludingTax || !taxRate) {
|
return 0;
|
}
|
const result = priceExcludingTax * (1 + taxRate / 100);
|
return toFixed(result, 2);
|
});
|
|
// 含税总价计算
|
const totalUnitPriceWithTax = computed(() => {
|
const priceExcludingTax = parseFloat(form.value.priceExcludingTax) || 0;
|
const taxRate = parseFloat(form.value.taxRate) || 0;
|
const purchaseQuantity = parseFloat(form.value.purchaseQuantity) || 0;
|
|
if (!priceExcludingTax || !taxRate || !purchaseQuantity) {
|
return 0;
|
}
|
|
const unitPriceWithTaxValue = priceExcludingTax * (1 + taxRate / 100);
|
const result = unitPriceWithTaxValue * purchaseQuantity;
|
return toFixed(result, 2);
|
});
|
|
// 不含税总价计算
|
const taxExclusiveTotalPrice = computed(() => {
|
const purchaseQuantity = parseFloat(form.value.purchaseQuantity) || 0;
|
const priceExcludingTax = parseFloat(form.value.priceExcludingTax) || 0;
|
|
if (!purchaseQuantity || !priceExcludingTax) {
|
return 0;
|
}
|
|
const result = purchaseQuantity * priceExcludingTax;
|
return toFixed(result, 2);
|
});
|
|
// 监听计算值变化，同步到 form 对象中
|
watch(unitPriceWithTax, (newValue) => {
|
form.value.priceIncludingTax = newValue;
|
});
|
|
watch(totalUnitPriceWithTax, (newValue) => {
|
form.value.totalPriceIncludingTax = newValue;
|
});
|
|
watch(taxExclusiveTotalPrice, (newValue) => {
|
form.value.totalPriceExcludingTax = newValue;
|
});
|
|
const userStore = useUserStore();
|
const userInfo = ref({});
|
|
// 处理税率输入框失焦，确保精度
|
const handleTaxRateBlur = () => {
|
if (
|
form.value.taxRate !== null &&
|
form.value.taxRate !== undefined &&
|
form.value.taxRate !== ""
|
) {
|
form.value.taxRate = toFixed(parseFloat(form.value.taxRate), 2);
|
}
|
};
|
|
// 处理不含税单价输入框失焦，确保精度
|
const handlePriceBlur = () => {
|
if (
|
form.value.priceExcludingTax !== null &&
|
form.value.priceExcludingTax !== undefined &&
|
form.value.priceExcludingTax !== ""
|
) {
|
form.value.priceExcludingTax = toFixed(
|
parseFloat(form.value.priceExcludingTax),
|
2
|
);
|
}
|
};
|
|
// 处理采购数量输入框失焦，确保精度
|
const handleQuantityBlur = () => {
|
if (
|
form.value.purchaseQuantity !== null &&
|
form.value.purchaseQuantity !== undefined &&
|
form.value.purchaseQuantity !== ""
|
) {
|
form.value.purchaseQuantity = toFixed(
|
parseFloat(form.value.purchaseQuantity),
|
3
|
); // 数量保留3位小数
|
}
|
};
|
|
onMounted(async () => {
|
let res = await userStore.getInfo();
|
userInfo.value = res;
|
});
|
const rules = {
|
supplierName: [
|
{ required: true, message: "请输入供应商名称", trigger: "blur" },
|
],
|
coal: [{ required: true, message: "请输入煤种", trigger: "blur" }],
|
unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
|
purchaseQuantity: [
|
{ required: true, message: "请输入采购数量", trigger: "blur" },
|
{ type: "number", message: "采购数量必须为数字", trigger: "blur" },
|
],
|
priceExcludingTax: [
|
{ required: true, message: "请输入单价", trigger: "blur" },
|
],
|
totalPriceExcludingTax: [
|
{ required: true, message: "请输入总价", trigger: "blur" },
|
],
|
priceIncludingTax: [
|
{ required: true, message: "请输入含税单价", trigger: "blur" },
|
],
|
totalPriceIncludingTax: [
|
{ required: true, message: "请输入含税总价", trigger: "blur" },
|
],
|
taxRate: [{ required: true, message: "请输入税率", trigger: "blur" }],
|
registrantId: [{ required: true, message: "请输入登记人", trigger: "blur" }],
|
registrationDate: [
|
{ required: true, message: "请选择登记日期", trigger: "change" },
|
],
|
};
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogFormVisible.value = false;
|
};
|
const handleReset = async () => {
|
// 重置表单数据
|
form.value = JSON.parse(JSON.stringify(copyForm.value));
|
// 等待DOM更新完成后清除表单验证状态
|
await nextTick();
|
if (formRef.value) {
|
formRef.value.clearValidate();
|
}
|
};
|
const formRef = ref(null);
|
// 提交表单
|
const handleSubmit = async () => {
|
console.log("提交表单", form.value);
|
if (!formRef.value) return;
|
await formRef.value.validate(async (valid) => {
|
if (valid) {
|
const obj = ref({});
|
if (props.title.includes("新增")) {
|
let result = await addOrEditPR({
|
...form.value,
|
});
|
obj.value = {
|
title: "新增",
|
...form.value,
|
result,
|
};
|
} else {
|
delete form.value.updateTime;
|
delete form.value.createTime;
|
let result = await addOrEditPR({
|
...form.value,
|
});
|
obj.value = {
|
title: "编辑",
|
...form.value,
|
result,
|
};
|
}
|
emit("submit", obj.value);
|
}
|
});
|
};
|
</script>
|
|
<style lang="sass" scoped></style>
|
