<template>
|
<el-dialog :title="modalOptions.title" v-model="visible" width="70%">
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="120px"
|
label-position="top"
|
>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="采购合同号：" prop="purchaseLedgerNo">
|
<el-input v-model="form.purchaseLedgerNo" disabled />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="销售合同号：" prop="salesContractNo">
|
<el-input
|
v-model="form.salesContractNo"
|
placeholder="自动填充"
|
clearable
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="供应商名称：" prop="supplierName">
|
<el-input
|
v-model="form.supplierName"
|
placeholder="自动填充"
|
clearable
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="项目名称：" prop="projectName">
|
<el-input
|
v-model="form.projectName"
|
placeholder="自动填充"
|
clearable
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="发票号：" prop="invoiceNumber">
|
<el-input
|
v-model="form.invoiceNumber"
|
placeholder="请输入"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="发票金额(元)：" prop="invoiceAmount">
|
<el-input
|
type="number"
|
:step="0.01"
|
:min="0"
|
v-model="form.invoiceAmount"
|
placeholder="自动填充"
|
clearable
|
:disabled="true"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="录入人：" prop="issUer">
|
<el-input
|
v-model="form.issUer"
|
placeholder="请输入"
|
clearable
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="开票日期：" prop="entryDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.entryDate"
|
type="date"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="上传附件">
|
<FileUpload
|
:showTip="false"
|
accept="*"
|
:autoUpload="true"
|
:action="action"
|
:headers="{
|
Authorization: 'Bearer ' + getToken(),
|
}"
|
:limit="10"
|
@success="uploadSuccess"
|
@remove="removeFile"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="产品信息：" prop="entryDate"> </el-form-item>
|
<PIMTable
|
rowKey="id"
|
:column="columns"
|
:tableData="form.productData"
|
height="auto"
|
>
|
<template #ticketsNumRef="{ row }">
|
<el-input-number
|
v-model="row.ticketsNum"
|
placeholder="请选择"
|
:min="0"
|
:step="0.1"
|
clearable
|
style="width: 100%"
|
@change="invoiceNumBlur(row)"
|
/>
|
</template>
|
<template #ticketsAmountRef="{ row }">
|
<el-input-number
|
v-model="row.ticketsAmount"
|
placeholder="请选择"
|
:min="0"
|
:step="0.1"
|
clearable
|
style="width: 100%"
|
@change="invoiceAmountBlur(row)"
|
/>
|
</template>
|
</PIMTable>
|
</el-form>
|
<template #footer>
|
<el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
|
<el-button type="primary" :loading="modalLoading" @click="submitForm">
|
{{ modalOptions.confirmText }}
|
</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, getCurrentInstance } from "vue";
|
import { useModal } from "@/hooks/useModal";
|
import useFormData from "@/hooks/useFormData";
|
import FileUpload from "@/components/Upload/FileUpload.vue";
|
import {
|
getPurchaseNoById,
|
getInfo,
|
addOrUpdateRegistration,
|
} from "@/api/procurementManagement/invoiceEntry.js";
|
import { getPurchaseById } from "@/api/procurementManagement/procurementLedger.js";
|
import { getToken } from "@/utils/auth";
|
import useUserStore from "@/store/modules/user";
|
|
defineOptions({
|
name: "来票登记模态框",
|
});
|
|
const userStore = useUserStore();
|
const action = import.meta.env.VITE_APP_BASE_API + "/file/upload";
|
const formRef = ref();
|
const { proxy } = getCurrentInstance();
|
const { form } = useFormData({
|
purchaseLedgerNo: undefined, // 采购合同号
|
salesContractNo: undefined, // 销售合同号
|
supplierName: undefined, // 供应商名称
|
projectName: undefined, // 项目名称
|
invoiceNumber: undefined, // 发票号
|
invoiceAmount: undefined, // 发票金额(元)
|
issUerId: userStore.id, // 录入人
|
issUer: userStore.nickName, // 录入人
|
entryDate: undefined, // 开票日期
|
salesContractNoId: undefined, // 开票日期
|
productData: [], // 表格
|
tempFileIds: [], // 文件
|
});
|
|
const rules = ref({
|
invoiceNumber: [
|
{ required: true, message: "请输入发票号", trigger: "blur" },
|
{ type: "string" },
|
],
|
invoiceAmount: [
|
{ required: true, message: "请输入发票金额", trigger: "blur" },
|
],
|
});
|
|
const {
|
id,
|
visible,
|
loading: modalLoading,
|
openModal,
|
modalOptions,
|
handleConfirm,
|
closeModal,
|
} = useModal({
|
title: "来票登记",
|
});
|
|
const columns = [
|
{
|
label: "产品大类",
|
prop: "productCategory",
|
},
|
{
|
label: "规格型号",
|
prop: "specificationModel",
|
},
|
{
|
label: "单位",
|
prop: "unit",
|
width: 80,
|
},
|
{
|
label: "数量",
|
prop: "quantity",
|
width: 80,
|
},
|
{
|
label: "税率(%)",
|
prop: "taxRate",
|
width: 80,
|
},
|
{
|
label: "录入日期",
|
prop: "registerDate",
|
width: 120,
|
},
|
{
|
label: "含税单价(元)",
|
prop: "taxInclusiveUnitPrice",
|
width: 150,
|
formatData: (val) => {
|
return parseFloat(val).toFixed(2) ?? 0;
|
},
|
},
|
{
|
label: "含税总价(元)",
|
prop: "taxInclusiveTotalPrice",
|
width: 150,
|
formatData: (val) => {
|
return parseFloat(val).toFixed(2) ?? 0;
|
},
|
},
|
{
|
label: "不含税总价(元)",
|
prop: "taxExclusiveTotalPrice",
|
width: 150,
|
formatData: (val) => {
|
return parseFloat(val).toFixed(2) ?? 0;
|
},
|
},
|
{
|
label: "本次来票数",
|
prop: "ticketsNum",
|
dataType: "slot",
|
slot: "ticketsNumRef",
|
width: 180,
|
align: "center",
|
},
|
{
|
label: "本次来票金额(元)",
|
prop: "ticketsAmount",
|
dataType: "slot",
|
slot: "ticketsAmountRef",
|
width: 180,
|
align: "center",
|
},
|
{
|
label: "未来票数",
|
prop: "futureTickets",
|
},
|
{
|
label: "未来票金额(元)",
|
prop: "futureTicketsAmount",
|
},
|
];
|
|
const getTableData = async (type, id) => {
|
if (type == "add") {
|
const { data } = await getPurchaseNoById({ id });
|
form.purchaseLedgerNo = data.purchaseContractNumber;
|
form.invoiceAmount = data.invoiceAmount;
|
form.invoiceNumber = data.invoiceNumber;
|
form.entryDate = data.entryDate;
|
form.salesContractNoId = data.salesContractNoId;
|
|
const { data: infoData } = await getInfo({ id });
|
form.salesContractNo = infoData.salesContractNo;
|
form.projectName = infoData.projectName;
|
form.supplierName = infoData.supplierName;
|
form.productData = infoData.productData;
|
} else if (type == "edit") {
|
const data = await getPurchaseById({ id, type: 2 });
|
form.purchaseLedgerNo = data.purchaseContractNumber;
|
form.invoiceAmount = data.invoiceAmount;
|
form.invoiceNumber = data.invoiceNumber;
|
form.salesContractNo = data.salesContractNo;
|
form.projectName = data.projectName;
|
form.supplierName = data.supplierName;
|
form.entryDate = data.entryDate;
|
form.productData = data.productData;
|
}
|
};
|
|
//本次来票数失焦操作
|
const invoiceNumBlur = (row) => {
|
if (!row.ticketsNum || row.ticketsNum === "") {
|
row.ticketsNum = 0;
|
}
|
if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
|
proxy.$modal.msgWarning("本次开票数不得大于未开票数");
|
row.ticketsNum = 0;
|
return;
|
}
|
// 计算本次来票金额
|
row.ticketsAmount = row.ticketsNum * row.taxInclusiveUnitPrice;
|
// 计算未来票数
|
row.futureTickets = row.tempFutureTickets - row.ticketsNum;
|
// 计算未来票金额
|
row.futureTicketsAmount = row.tempFutureTicketsAmount - row.ticketsAmount;
|
calculateinvoiceAmount();
|
};
|
|
// 本次来票金额失焦操作
|
const invoiceAmountBlur = (row) => {
|
if (!row.ticketsAmount) {
|
row.ticketsAmount = 0;
|
}
|
// 计算是否超过来票总金额
|
if (row.ticketsAmount > row.tempFutureTicketsAmount) {
|
proxy.$modal.msgWarning("本次来票金额不得大于未来票金额");
|
row.ticketsAmount = 0;
|
}
|
// 计算本次来票数
|
row.ticketsNum = Number(
|
(row.ticketsAmount / row.taxInclusiveUnitPrice).toFixed(2)
|
);
|
// 计算未来票数
|
row.futureTickets = row.tempFutureTickets - row.ticketsNum;
|
// 计算未来票金额
|
row.futureTicketsAmount = row.tempFutureTicketsAmount - row.ticketsAmount;
|
calculateinvoiceAmount();
|
};
|
|
const calculateinvoiceAmount = () => {
|
let invoiceAmountTotal = 0;
|
form.productData.forEach((item) => {
|
if (item.ticketsAmount) {
|
invoiceAmountTotal += item.ticketsAmount;
|
}
|
});
|
form.invoiceAmount = invoiceAmountTotal.toFixed(2);
|
};
|
|
const open = (type, eid) => {
|
openModal();
|
getTableData(type, eid);
|
id.value = eid;
|
};
|
|
const uploadSuccess = (response) => {
|
form.tempFileIds.push(response.data.tempId);
|
console.log(form);
|
};
|
|
const removeFile = (file) => {
|
const { tempId } = file.response.data;
|
form.tempFileIds = form.tempFileIds.filter((item) => item !== tempId);
|
};
|
|
const submitForm = () => {
|
formRef.value.validate(async (valid, fields) => {
|
if (valid) {
|
modalLoading.value = true;
|
const { code } = await addOrUpdateRegistration({
|
purchaseLedgerId: id.value,
|
purchaseContractNumber: form.purchaseLedgerNo,
|
invoiceNumber: form.invoiceNumber,
|
invoiceAmount: form.invoiceAmount,
|
salesContractNo: form.salesContractNo,
|
projectName: form.projectName,
|
productData: form.productData,
|
issUerId: form.issUerId, // 录入人
|
issUer: form.issUer, // 录入人
|
salesContractNoId: form.salesContractNoId,
|
supplierName: form.supplierName,
|
tempFileIds: form.tempFileIds,
|
});
|
modalLoading.value = false;
|
if (code == 200) {
|
closeModal();
|
}
|
}
|
});
|
};
|
|
defineExpose({
|
open,
|
});
|
</script>
|
|
<style lang="scss" scoped></style>
|
