| | |
| | | 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="delReceiptRecord(scope.row)" |
| | | :disabled="scope.row.registrant !== userStore.nickName" |
| | | >删除</el-button |
| | | > |
| | | </template> |
| | |
| | | width="100" |
| | | /> |
| | | <el-table-column |
| | | label="发票号" |
| | | prop="invoiceNo" |
| | | label="规格型号" |
| | | prop="specificationModel" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="发票金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | /> |
| | | <el-table-column label="税率(%)" prop="taxRate" show-overflow-tooltip /> |
| | | <el-table-column |
| | | label="回款金额(元)" |
| | | prop="receiptPaymentAmountTotal" |
| | | label="已回款金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="待回款金额(元)" |
| | | prop="noReceiptAmount" |
| | | prop="pendingInvoiceTotal" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, column, row.noReceiptAmount) }} |
| | | {{ formattedNumber(row, column, row.pendingInvoiceTotal) }} |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | @pagination="paginationChange" |
| | | /> |
| | | </div> |
| | | <el-dialog |
| | | <FormDialog |
| | | v-model="dialogFormVisible" |
| | | title="新增回款页面" |
| | | width="90%" |
| | | :width="'90%'" |
| | | @close="closeDia" |
| | | @confirm="submitForm" |
| | | @cancel="closeDia" |
| | | > |
| | | <el-table |
| | | :data="dialogTableData" |
| | | v-if="forms.length" |
| | | :data="forms" |
| | | border |
| | | style="width: 100%" |
| | | max-height="500px" |
| | | size="small" |
| | | > |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column |
| | | label="销售合同号" |
| | | prop="salesContractNo" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="客户名称" |
| | | prop="customerName" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | /> |
| | | <el-table-column type="index" label="序号" width="50" align="center"/> |
| | | <el-table-column label="销售合同号" prop="salesContractNo" show-overflow-tooltip /> |
| | | <el-table-column label="客户名称" prop="customerName" show-overflow-tooltip /> |
| | | <el-table-column |
| | | label="产品大类" |
| | | prop="productCategory" |
| | | show-overflow-tooltip |
| | | width="120" |
| | | /> |
| | | <el-table-column |
| | | label="规格型号" |
| | | prop="specification" |
| | | show-overflow-tooltip |
| | | width="150" |
| | | /> |
| | | <el-table-column |
| | | label="发票号" |
| | | prop="invoiceNo" |
| | | show-overflow-tooltip |
| | | width="180" |
| | | /> |
| | | <el-table-column |
| | | label="发票金额(元)" |
| | | prop="invoiceTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="150" |
| | | /> |
| | | <el-table-column |
| | | label="税率(%)" |
| | | prop="taxRate" |
| | | show-overflow-tooltip |
| | | width="100" |
| | | /> |
| | | <el-table-column |
| | | label="待回款金额(元)" |
| | | prop="noReceiptAmount" |
| | | label="规格型号" |
| | | prop="specificationModel" |
| | | show-overflow-tooltip |
| | | width="150" |
| | | > |
| | | width="200" |
| | | /> |
| | | <el-table-column label="税率(%)" width="110"> |
| | | <template #default="{ row }"> |
| | | <el-input v-model="row.taxRate" disabled /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="待回款金额(元)" |
| | | prop="pendingInvoiceTotal" |
| | | show-overflow-tooltip |
| | | width="170" |
| | | > |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, null, row.noReceiptAmount) }} |
| | | {{ formattedNumber(row, column, row.pendingInvoiceTotal) }} |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="本次回款金额(元)" width="180"> |
| | | <template #default="scope"> |
| | | <template #default="{ row }"> |
| | | <el-input-number |
| | | v-model="row.receiptPaymentAmount" |
| | | :step="0.01" |
| | | :min="0" |
| | | :max="scope.row.noReceiptAmount" |
| | | style="width: 100%" |
| | | :max="Number(row.pendingInvoiceTotal || 0)" |
| | | :precision="2" |
| | | v-model="scope.row.receiptPaymentAmount" |
| | | style="width: 100%" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="回款方式" width="150"> |
| | | <template #default="scope"> |
| | | <el-select |
| | | v-model="scope.row.receiptPaymentType" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column label="回款形式" width="160"> |
| | | <template #default="{ row }"> |
| | | <el-select v-model="row.receiptPaymentType" placeholder="请选择" clearable> |
| | | <el-option |
| | | v-for="item in receipt_payment_type" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | v-for="opt in receipt_payment_type" |
| | | :key="opt.value" |
| | | :label="opt.label" |
| | | :value="opt.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.receiptPaymentDate" |
| | | v-model="row.receiptPaymentDate" |
| | | 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" /> |
| | | </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 pagination from "@/components/PIMTable/Pagination.vue"; |
| | | import { onMounted, ref } from "vue"; |
| | | import FormDialog from '@/components/Dialog/FormDialog.vue'; |
| | | import { onMounted, ref, reactive, getCurrentInstance } from "vue"; |
| | | import { |
| | | receiptPaymentSaveOrUpdate, |
| | | bindInvoiceNoRegPage, |
| | |
| | | const tableData = ref([]); |
| | | const selectedRows = ref([]); |
| | | const tableLoading = ref(false); |
| | | const forms = ref([]); |
| | | const page = reactive({ |
| | | current: 1, |
| | | size: 100, |
| | |
| | | |
| | | // 用户信息表单弹框数据 |
| | | const dialogFormVisible = ref(false); |
| | | const dialogTableData = ref([]); |
| | | const data = reactive({ |
| | | searchForm: { |
| | | searchText: "", |
| | | status: true, |
| | | customerName: "", |
| | | }, |
| | | form: { |
| | | salesContractNo: "", |
| | | customerName: "", |
| | | invoiceNo: "", |
| | | invoiceTotal: "", |
| | | taxRate: "", |
| | | receiptPaymentAmount: "", |
| | | receiptPaymentType: "", |
| | | registrant: "", |
| | | receiptPaymentDate: "", |
| | | }, |
| | | rules: { |
| | | salesContractNo: [{ required: true, message: "请选择", trigger: "change" }], |
| | | customerName: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | invoiceNo: [{ required: true, message: "请选择", trigger: "change" }], |
| | | invoiceTotal: [{ required: true, message: "请输入", trigger: "blur" }], |
| | | taxRate: [{ required: true, message: "请选择", trigger: "change" }], |
| | | receiptPaymentAmount: [ |
| | | { required: true, message: "请选择", trigger: "change" }, |
| | | ], |
| | | receiptPaymentType: [ |
| | | { required: true, message: "请选择", trigger: "change" }, |
| | | ], |
| | | registrant: [{ required: true, message: "请选择", trigger: "change" }], |
| | | receiptPaymentDate: [ |
| | | { required: true, message: "请选择", trigger: "change" }, |
| | | ], |
| | | specificationModel: "", |
| | | }, |
| | | }); |
| | | const { form, rules } = toRefs(data); |
| | | const { form: searchForm, resetForm } = useFormData(data.searchForm); |
| | | const { form: searchForm } = useFormData(data.searchForm); |
| | | const { receipt_payment_type } = proxy.useDict("receipt_payment_type"); |
| | | |
| | | const formattedNumber = (row, column, cellValue) => { |
| | | return parseFloat(cellValue).toFixed(2); |
| | | const val = Number(cellValue ?? 0); |
| | | return Number.isFinite(val) ? val.toFixed(2) : "0.00"; |
| | | }; |
| | | |
| | | const getStatusTagType = (statusName = '') => { |
| | |
| | | const summarizeMainTable = (param) => { |
| | | return proxy.summarizeTable( |
| | | param, |
| | | ["invoiceTotal", "receiptPaymentAmountTotal", "noReceiptAmount"], |
| | | ["receiptPaymentAmountTotal", "noReceiptAmount"], |
| | | { |
| | | ticketsNum: { noDecimal: true }, // 不保留小数 |
| | | futureTickets: { noDecimal: true }, // 不保留小数 |
| | |
| | | }; |
| | | // 打开弹框 |
| | | const openForm = () => { |
| | | // 至少选择一条数据 |
| | | if (selectedRows.value.length === 0) { |
| | | proxy.$modal.msgError("请选择数据"); |
| | | proxy.$modal.msgError("请选择至少一条数据"); |
| | | return; |
| | | } |
| | | |
| | | // 校验是否为相同销售合同号 |
| | | const firstContractNo = selectedRows.value[0].salesContractNo; |
| | | const isSameContract = selectedRows.value.every( |
| | | (item) => item.salesContractNo === firstContractNo |
| | | ); |
| | | if (!isSameContract) { |
| | | proxy.$modal.msgError("请选择相同销售合同号的数据进行回款"); |
| | | return; |
| | | } |
| | | |
| | | // 过滤出有待回款金额的记录 |
| | | const validRows = selectedRows.value.filter( |
| | | (item) => Number(item.noReceiptAmount) > 0 |
| | | ); |
| | | const validRows = selectedRows.value.filter((item) => item.noReceiptAmount !== 0); |
| | | if (validRows.length === 0) { |
| | | proxy.$modal.msgWarning("所选数据均无需再回款"); |
| | | proxy.$modal.msgWarning("所选记录均无需回款"); |
| | | return; |
| | | } |
| | | |
| | | // 直接使用外部表格数据,为每条记录添加回款相关字段 |
| | | dialogTableData.value = validRows.map((row) => { |
| | | return { |
| | | ...row, |
| | | invoiceLedgerId: row.id, |
| | | receiptPaymentAmount: row.noReceiptAmount || "", |
| | | forms.value = validRows.map((row) => ({ |
| | | salesContractNo: row.salesContractNo || "", |
| | | customerName: row.customerName || "", |
| | | productCategory: row.productCategory || "", |
| | | specificationModel: row.specificationModel || "", |
| | | pendingInvoiceTotal: Number(row.pendingInvoiceTotal || 0), |
| | | taxRate: row.taxRate ?? "", |
| | | receiptPaymentAmount: Number(row.pendingInvoiceTotal || 0), |
| | | receiptPaymentType: "", |
| | | receiptPaymentDate: "", |
| | | registrant: userStore.nickName, |
| | | }; |
| | | }); |
| | | |
| | | receiptPaymentDate: "", |
| | | invoiceLedgerId: row.id, |
| | | salesLedgerId: row.salesLedgerId, |
| | | salesLedgerProductId: row.id, |
| | | })); |
| | | dialogFormVisible.value = true; |
| | | }; |
| | | // 提交表单 |
| | | const submitForm = () => { |
| | | // 校验表格数据 |
| | | const invalidRows = dialogTableData.value.filter((row) => { |
| | | return ( |
| | | !row.receiptPaymentAmount || |
| | | row.receiptPaymentAmount <= 0 || |
| | | !row.receiptPaymentType || |
| | | !row.receiptPaymentDate |
| | | 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.pendingInvoiceTotal || 0); |
| | | const currentAmount = Number(item.receiptPaymentAmount); |
| | | if (!item.receiptPaymentAmount && item.receiptPaymentAmount !== 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("请完善所有必填项:回款金额、回款方式、回款日期"); |
| | | return; |
| | | } |
| | | |
| | | // 校验回款金额不能超过待回款金额 |
| | | const exceedRows = dialogTableData.value.filter((row) => { |
| | | return Number(row.receiptPaymentAmount) > Number(row.noReceiptAmount); |
| | | }); |
| | | |
| | | if (exceedRows.length > 0) { |
| | | proxy.$modal.msgError("回款金额不能超过待回款金额"); |
| | | if (!item.receiptPaymentType) { |
| | | proxy.$modal.msgError(`第 ${i + 1} 条:请选择回款形式`); |
| | | return; |
| | | } |
| | | |
| | | // 组合成数组批量提交 |
| | | const submitDataList = dialogTableData.value.map((row) => { |
| | | return { |
| | | invoiceLedgerId: row.invoiceLedgerId, |
| | | receiptPaymentAmount: row.receiptPaymentAmount, |
| | | receiptPaymentType: row.receiptPaymentType, |
| | | receiptPaymentDate: row.receiptPaymentDate, |
| | | registrant: row.registrant, |
| | | }; |
| | | }); |
| | | |
| | | receiptPaymentSaveOrUpdate(submitDataList) |
| | | .then(() => { |
| | | if (!item.receiptPaymentDate) { |
| | | proxy.$modal.msgError(`第 ${i + 1} 条:请选择回款日期`); |
| | | return; |
| | | } |
| | | } |
| | | receiptPaymentSaveOrUpdate(forms.value).then(() => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | getList(); |
| | | }) |
| | | .catch((error) => { |
| | | console.error("提交失败:", error); |
| | | proxy.$modal.msgError("提交失败,请重试"); |
| | | }); |
| | | }; |
| | | // 关闭弹框 |
| | | const closeDia = () => { |
| | | dialogTableData.value = []; |
| | | forms.value = []; |
| | | dialogFormVisible.value = false; |
| | | }; |
| | | |
| | |
| | | receiptPaymentType: row.receiptPaymentType, |
| | | receiptPaymentAmount: row.receiptPaymentAmount, |
| | | }; |
| | | // 子表编辑保存也按数组提交(与批量新增保持一致) |
| | | receiptPaymentSaveOrUpdate([updateData]).then((res) => { |
| | | row.editType = !row.editType; |
| | | getList(); |
| | |
| | | justify-content: space-between; |
| | | margin-bottom: 10px; |
| | | } |
| | | .empty-tip { |
| | | text-align: center; |
| | | padding: 20px 0; |
| | | color: #909399; |
| | | } |
| | | </style> |