| | |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <el-form-item style="float: right; margin-right: unset"> |
| | | <el-button @click="handleExport" style="margin-right: 10px">导出</el-button> |
| | | <el-button type="primary" @click="openForm()"> |
| | | <el-button type="primary" @click="openForm('add')"> |
| | | 新增付款 |
| | | </el-button> |
| | | <el-button @click="handleExport" style="margin-right: 10px">导出</el-button> |
| | | <!-- <el-button type="danger" plain @click="handleDelete">--> |
| | | <!-- 删除--> |
| | | <!-- </el-button>--> |
| | |
| | | size="small" |
| | | @click="changeEditType(scope.row)" |
| | | v-if="!scope.row.editType" |
| | | :disabled="scope.row.registrant !== userStore.nickName" |
| | | >编辑</el-button |
| | | > |
| | | <el-button |
| | |
| | | size="small" |
| | | @click="saveReceiptPayment(scope.row)" |
| | | v-if="scope.row.editType" |
| | | :disabled="scope.row.registrant !== userStore.nickName" |
| | | >保存</el-button |
| | | > |
| | | <el-button |
| | |
| | | type="primary" |
| | | size="small" |
| | | @click="handleDelete(scope.row)" |
| | | :disabled="scope.row.registrant !== userStore.nickName" |
| | | >删除</el-button |
| | | > |
| | | </template> |
| | |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | | <el-dialog |
| | | <FormDialog |
| | | v-model="dialogFormVisible" |
| | | title="新增付款登记" |
| | | width="80%" |
| | | title="新增付款页面" |
| | | :width="'90%'" |
| | | @close="closeDia" |
| | | @confirm="submitForm" |
| | | @cancel="closeDia" |
| | | > |
| | | <el-table :data="dialogTableData" border style="width: 100%" max-height="500px"> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column label="采购合同号" prop="purchaseContractNumber" show-overflow-tooltip width="200" /> |
| | | <el-table-column label="供应商名称" prop="supplierName" show-overflow-tooltip width="200" /> |
| | | <el-table-column label="发票号" prop="invoiceNumber" show-overflow-tooltip width="180" /> |
| | | <el-table-column label="发票金额(元)" prop="invoiceAmount" width="150"> |
| | | <template #default="{ row }"> |
| | | {{ row.invoiceAmount ? parseFloat(row.invoiceAmount).toFixed(2) : "0.00" }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="待付款金额(元)" prop="unPaymentAmountTotal" width="150"> |
| | | <template #default="{ row }"> |
| | | <el-table |
| | | v-if="forms.length" |
| | | :data="forms" |
| | | border |
| | | style="width: 100%" |
| | | size="small" |
| | | > |
| | | <el-table-column type="index" label="序号" width="50" align="center"/> |
| | | <el-table-column label="采购合同号" prop="purchaseContractNumber" show-overflow-tooltip /> |
| | | <el-table-column label="销售合同号" prop="salesContractNo" show-overflow-tooltip /> |
| | | <el-table-column label="供应商名称" prop="supplierName" show-overflow-tooltip /> |
| | | <el-table-column |
| | | label="产品大类" |
| | | prop="productCategory" |
| | | show-overflow-tooltip |
| | | width="100" |
| | | /> |
| | | <el-table-column |
| | | label="规格型号" |
| | | prop="specificationModel" |
| | | show-overflow-tooltip |
| | | width="150" |
| | | /> |
| | | <el-table-column |
| | | label="待付款金额(元)" |
| | | prop="pendingTicketsTotal" |
| | | show-overflow-tooltip |
| | | width="170" |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ row.unPaymentAmountTotal ? parseFloat(row.unPaymentAmountTotal).toFixed(2) : "0.00" }} |
| | | {{ formattedNumber(row, column, row.pendingTicketsTotal) }} |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="本次付款金额(元)" width="180"> |
| | | <template #default="scope"> |
| | | <template #default="{ row }"> |
| | | <el-input-number |
| | | v-model="row.currentPaymentAmount" |
| | | :step="0.01" |
| | | :min="0" |
| | | :max="Number(scope.row.unPaymentAmountTotal || 0)" |
| | | style="width: 100%" |
| | | :max="Number(row.pendingTicketsTotal || 0)" |
| | | :precision="2" |
| | | v-model="scope.row.currentPaymentAmount" |
| | | style="width: 100%" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="付款方式" width="150"> |
| | | <template #default="scope"> |
| | | <el-select v-model="scope.row.paymentMethod" placeholder="请选择" clearable style="width: 100%"> |
| | | <el-table-column label="付款方式" width="160"> |
| | | <template #default="{ row }"> |
| | | <el-select v-model="row.paymentMethod" placeholder="请选择" clearable> |
| | | <el-option label="电汇" value="电汇" /> |
| | | <el-option label="承兑" value="承兑" /> |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="付款日期" width="180"> |
| | | <template #default="scope"> |
| | | <el-table-column label="付款日期" width="170"> |
| | | <template #default="{ row }"> |
| | | <el-date-picker |
| | | style="width: 100%" |
| | | v-model="scope.row.paymentDate" |
| | | v-model="row.paymentDate" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | type="date" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="登记人" width="120"> |
| | | <template #default="scope"> |
| | | <el-input v-model="scope.row.registrant" placeholder="自动填充" disabled /> |
| | | <el-table-column label="登记人" width="140"> |
| | | <template #default="{ row }"> |
| | | <el-input v-model="row.registrant" disabled /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="登记日期" width="170"> |
| | | <template #default="{ row }"> |
| | | <el-input v-model="row.registrationtDate" /> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">确认</el-button> |
| | | <el-button @click="closeDia">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <div v-else class="empty-tip">请选择需要付款的记录</div> |
| | | </FormDialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import FormDialog from '@/components/Dialog/FormDialog.vue'; |
| | | import { ref, reactive, toRefs, getCurrentInstance, nextTick, onMounted } from "vue"; |
| | | import { Search } from "@element-plus/icons-vue"; |
| | | import { ElMessageBox } from "element-plus"; |
| | | import useUserStore from "@/store/modules/user.js"; |
| | | import { |
| | | byPurchaseId, |
| | | paymentRegistrationAdd, |
| | | paymentRegistrationDel, |
| | | paymentRegistrationEdit, |
| | | getTicketNo, |
| | | } from "@/api/procurementManagement/paymentEntry.js"; |
| | | import { |
| | | delPaymentRegistration, |
| | |
| | | updatePaymentRegistration |
| | | } from "@/api/procurementManagement/procurementInvoiceLedger.js"; |
| | | import useFormData from "@/hooks/useFormData"; |
| | | import { getCurrentDate } from "@/utils/index.js"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const tableColumn = ref([ |
| | |
| | | { |
| | | label: "采购合同号", |
| | | prop: "purchaseContractNumber", |
| | | width:160 |
| | | }, |
| | | { |
| | | label: "销售合同号", |
| | | prop: "salesContractNo", |
| | | width:160 |
| | | }, |
| | | { |
| | | label: "供应商名称", |
| | |
| | | { |
| | | label: "付款状态", |
| | | prop: "statusName", |
| | | width:110, |
| | | dataType: "tag", |
| | | formatType: (params) => { |
| | | if (params == '未完成付款') { |
| | |
| | | }, |
| | | }, |
| | | { |
| | | label: "发票号", |
| | | prop: "invoiceNumber", |
| | | width:200 |
| | | label: "产品大类", |
| | | prop: "productCategory", |
| | | showOverflowTooltip: true, |
| | | }, |
| | | { |
| | | label: "发票金额(元)", |
| | | prop: "invoiceAmount", |
| | | formatData: (params) => { |
| | | return params ? parseFloat(params).toFixed(2) : 0; |
| | | }, |
| | | label: "规格型号", |
| | | prop: "specificationModel", |
| | | showOverflowTooltip: true, |
| | | }, |
| | | { |
| | | label: "已付款金额(元)", |
| | | prop: "paymentAmountTotal", |
| | | prop: "ticketsTotal", |
| | | width: 120, |
| | | formatData: (params) => { |
| | | return params ? parseFloat(params).toFixed(2) : 0; |
| | | }, |
| | | }, |
| | | { |
| | | label: "待付款金额(元)", |
| | | prop: "unPaymentAmountTotal", |
| | | prop: "pendingTicketsTotal", |
| | | width: 120, |
| | | formatData: (params) => { |
| | | return params ? parseFloat(params).toFixed(2) : 0; |
| | | }, |
| | | }, |
| | | { |
| | | label: "录入人", |
| | | prop: "issUer", |
| | | }, |
| | | ]); |
| | | const tableData = ref([]); |
| | |
| | | const selectedRows = ref([]); |
| | | const tableLoading = ref(false); |
| | | const childrenLoading = ref(false); |
| | | const forms = ref([]); |
| | | const userStore = useUserStore(); |
| | | const page = reactive({ |
| | | current: 1, |
| | |
| | | total: 0, |
| | | }); |
| | | |
| | | // 弹框数据 |
| | | // 用户信息表单弹框数据 |
| | | const operationType = ref(""); |
| | | const dialogFormVisible = ref(false); |
| | | const dialogTableData = ref([]); |
| | | const data = reactive({ |
| | | searchForm: { |
| | | supplierNameOrContractNo: "", |
| | |
| | | purchaseLedgerId: "", |
| | | salesContractNo: "", |
| | | supplierName: "", |
| | | invoiceNumber: "", |
| | | invoiceAmount: "", |
| | | taxRate: "", |
| | | currentPaymentAmount: "", |
| | | paymentMethod: "", |
| | |
| | | { required: true, message: "请输入", trigger: "blur" }, |
| | | ], |
| | | paymentMethod: [{ required: true, message: "请选择", trigger: "change" }], |
| | | invoiceNumber: [ |
| | | { required: true, message: "请选择采购合同号", trigger: "change" }, |
| | | ], |
| | | }, |
| | | }); |
| | | const { form, rules } = toRefs(data); |
| | |
| | | if (!normalized) return 'info'; |
| | | return normalized === '未完成付款' ? 'danger' : 'success'; |
| | | }; |
| | | |
| | | const formattedNumber = (row, column, cellValue) => { |
| | | const val = Number(cellValue ?? 0); |
| | | return Number.isFinite(val) ? val.toFixed(2) : "0.00"; |
| | | }; |
| | | // 子表合计方法 |
| | | const summarizeMainTable1 = (param) => { |
| | | return proxy.summarizeTable( |
| | | param, |
| | | ["invoiceAmount", "paymentAmountTotal", "unPaymentAmountTotal"], |
| | | ["ticketsTotal", "pendingTicketsTotal"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | |
| | | tableLoading.value = true; |
| | | invoiceListPage({ ...searchForm, ...page }).then((res) => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.records; |
| | | page.total = res.total; |
| | | tableData.value = res.data.records; |
| | | page.total = res.data.total; |
| | | if (expandedRowKeys.value.length > 0) { |
| | | const arr = [] |
| | | const index = tableData.value.findIndex(item => item.id === expandedRowKeys.value[0]); |
| | |
| | | currentPaymentAmount: row.currentPaymentAmount, |
| | | paymentMethod: row.paymentMethod, |
| | | }; |
| | | // 子表编辑保存按数组提交(与批量登记保持一致) |
| | | updatePaymentRegistration([updateData]).then(() => { |
| | | updatePaymentRegistration(updateData).then((res) => { |
| | | row.editType = !row.editType; |
| | | getList(); |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | |
| | | selectedRows.value = selection; |
| | | }; |
| | | // 打开弹框 |
| | | const openForm = () => { |
| | | // 至少选择一条数据 |
| | | const openForm = (type, row) => { |
| | | if (selectedRows.value.length === 0) { |
| | | proxy.$modal?.msgError ? proxy.$modal.msgError("请选择数据") : proxy.$message.error("请选择数据"); |
| | | proxy.$modal.msgError("请选择至少一条数据"); |
| | | return; |
| | | } |
| | | |
| | | // 校验是否为相同供应商名称 |
| | | const firstSupplierName = selectedRows.value[0].supplierName; |
| | | const isSameSupplier = selectedRows.value.every( |
| | | (item) => item.supplierName === firstSupplierName |
| | | ); |
| | | if (!isSameSupplier) { |
| | | proxy.$modal?.msgError |
| | | ? proxy.$modal.msgError("请选择相同供应商名称的数据进行付款登记") |
| | | : proxy.$message.error("请选择相同供应商名称的数据进行付款登记"); |
| | | return; |
| | | } |
| | | |
| | | // 过滤出有待付款金额的记录 |
| | | const validRows = selectedRows.value.filter( |
| | | (item) => Number(item.unPaymentAmountTotal) > 0 |
| | | ); |
| | | const validRows = selectedRows.value.filter((item) => Number(item.pendingTicketsTotal || 0) !== 0); |
| | | if (validRows.length === 0) { |
| | | proxy.$modal?.msgWarning |
| | | ? proxy.$modal.msgWarning("所选数据均无需再付款") |
| | | : proxy.$message.warning("所选数据均无需再付款"); |
| | | proxy.$modal.msgWarning("所选记录均无需付款"); |
| | | return; |
| | | } |
| | | |
| | | const today = getCurrentDate(); |
| | | dialogTableData.value = validRows.map((row) => { |
| | | return { |
| | | ...row, |
| | | // 后端关联“来票台账/登记单”的字段(原逻辑:ticketRegistrationId = row.id) |
| | | ticketRegistrationId: row.id, |
| | | id: null, |
| | | currentPaymentAmount: row.unPaymentAmountTotal || "", |
| | | forms.value = validRows.map((row) => ({ |
| | | purchaseContractNumber: row.purchaseContractNumber || "", |
| | | salesContractNo: row.salesContractNo || "", |
| | | supplierName: row.supplierName || "", |
| | | supplierId: row.supplierId, |
| | | productCategory: row.productCategory || "", |
| | | specificationModel: row.specificationModel || "", |
| | | pendingTicketsTotal: Number(row.pendingTicketsTotal || 0), |
| | | currentPaymentAmount: "", |
| | | paymentMethod: "", |
| | | paymentDate: today, |
| | | registrationtDate: today, |
| | | registrant: userStore.nickName || userStore.name, |
| | | }; |
| | | }); |
| | | |
| | | paymentDate: "", |
| | | registrant: userStore.nickName, |
| | | registrationtDate: getCurrentDate(), |
| | | ticketRegistrationId: row.id, |
| | | purchaseLedgerId: row.salesLedgerId, |
| | | salesLedgerProductId: row.id, |
| | | })); |
| | | dialogFormVisible.value = true; |
| | | }; |
| | | // 提交表单 |
| | | const submitForm = () => { |
| | | // 校验表格数据 |
| | | const invalidRows = dialogTableData.value.filter((row) => { |
| | | return ( |
| | | !row.currentPaymentAmount || |
| | | Number(row.currentPaymentAmount) <= 0 || |
| | | !row.paymentMethod || |
| | | !row.paymentDate |
| | | if (forms.value.length === 0) { |
| | | proxy.$modal.msgError("请选择付款记录"); |
| | | return; |
| | | } |
| | | for (let i = 0; i < forms.value.length; i++) { |
| | | const item = forms.value[i]; |
| | | const pendingAmount = Number(item.pendingTicketsTotal || 0); |
| | | const currentAmount = Number(item.currentPaymentAmount); |
| | | if (!item.currentPaymentAmount && item.currentPaymentAmount !== 0) { |
| | | proxy.$modal.msgError(`第 ${i + 1} 条:请填写付款金额`); |
| | | return; |
| | | } |
| | | if (currentAmount > pendingAmount) { |
| | | proxy.$modal.msgError( |
| | | `第 ${i + 1} 条:付款金额不能超过待付款金额(待付款:${pendingAmount.toFixed( |
| | | 2 |
| | | )})` |
| | | ); |
| | | }); |
| | | if (invalidRows.length > 0) { |
| | | proxy.$modal?.msgError |
| | | ? proxy.$modal.msgError("请完善所有必填项:付款金额、付款方式、付款日期") |
| | | : proxy.$message.error("请完善所有必填项:付款金额、付款方式、付款日期"); |
| | | return; |
| | | } |
| | | |
| | | // 校验付款金额不能超过待付款金额 |
| | | const exceedRows = dialogTableData.value.filter((row) => { |
| | | return Number(row.currentPaymentAmount) > Number(row.unPaymentAmountTotal); |
| | | }); |
| | | if (exceedRows.length > 0) { |
| | | proxy.$modal?.msgError |
| | | ? proxy.$modal.msgError("付款金额不能超过待付款金额") |
| | | : proxy.$message.error("付款金额不能超过待付款金额"); |
| | | if (!item.paymentMethod) { |
| | | proxy.$modal.msgError(`第 ${i + 1} 条:请选择付款方式`); |
| | | return; |
| | | } |
| | | |
| | | // 组装数组批量提交(如果后端不支持数组,会走兜底循环提交) |
| | | const submitDataList = dialogTableData.value.map((row) => { |
| | | return { |
| | | ticketRegistrationId: row.ticketRegistrationId, |
| | | purchaseLedgerId: row.purchaseLedgerId, |
| | | purchaseContractNumber: row.purchaseContractNumber, |
| | | salesContractNo: row.salesContractNo, |
| | | supplierName: row.supplierName, |
| | | invoiceNumber: row.invoiceNumber, |
| | | invoiceAmount: row.invoiceAmount, |
| | | taxRate: row.taxRate, |
| | | currentPaymentAmount: row.currentPaymentAmount, |
| | | paymentMethod: row.paymentMethod, |
| | | paymentDate: row.paymentDate, |
| | | registrant: row.registrant, |
| | | registrationtDate: row.registrationtDate, |
| | | id: null, |
| | | }; |
| | | }); |
| | | |
| | | paymentRegistrationAdd(submitDataList) |
| | | .then(() => { |
| | | proxy.$modal?.msgSuccess |
| | | ? proxy.$modal.msgSuccess("提交成功") |
| | | : proxy.$message.success("提交成功"); |
| | | if (!item.paymentDate) { |
| | | proxy.$modal.msgError(`第 ${i + 1} 条:请选择付款日期`); |
| | | return; |
| | | } |
| | | } |
| | | paymentRegistrationAdd(forms.value).then(() => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | getList(); |
| | | }) |
| | | .catch((e) => { |
| | | console.error("提交失败:", e); |
| | | }); |
| | | }; |
| | | // 关闭弹框 |
| | | const closeDia = () => { |
| | | dialogTableData.value = []; |
| | | forms.value = []; |
| | | dialogFormVisible.value = false; |
| | | }; |
| | | // 删除 |
| | |
| | | }) |
| | | .then(() => { |
| | | tableLoading.value = true; |
| | | delPaymentRegistration(row.id) |
| | | delPaymentRegistration([row.id]) |
| | | .then((res) => { |
| | | proxy.$modal.msgSuccess("删除成功"); |
| | | getList(); |
| | |
| | | proxy.$modal.msg("已取消"); |
| | | }); |
| | | }; |
| | | // 获取当前日期并格式化为 YYYY-MM-DD |
| | | function getCurrentDate() { |
| | | const today = new Date(); |
| | | const year = today.getFullYear(); |
| | | const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始 |
| | | const day = String(today.getDate()).padStart(2, "0"); |
| | | return `${year}-${month}-${day}`; |
| | | } |
| | | |
| | | // 导出 |
| | | const handleExport = () => { |
| | | ElMessageBox.confirm("选中的内容将被导出,是否确认导出?", "导出", { |
| | |
| | | ::v-deep(.el-checkbox__label) { |
| | | font-weight: bold; |
| | | } |
| | | .empty-tip { |
| | | text-align: center; |
| | | padding: 20px 0; |
| | | color: #909399; |
| | | } |
| | | </style> |