| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="search_form"> |
| | | <el-form :inline="true" :model="searchForm" style="width: 100%"> |
| | | <el-form :inline="true" |
| | | :model="searchForm" |
| | | style="width: 100%"> |
| | | <el-row justify="space-between"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="客户名称"> |
| | | <el-input |
| | | v-model="searchForm.customerName" |
| | | <el-input v-model="searchForm.customerName" |
| | | placeholder="请输入" |
| | | @change="handleQuery" |
| | | clearable |
| | | prefix-icon="Search" |
| | | /> |
| | | prefix-icon="Search" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-checkbox |
| | | v-model="searchForm.status" |
| | | <el-checkbox v-model="searchForm.status" |
| | | label="不显示待回款为0" |
| | | @change="handleQuery" |
| | | /> |
| | | @change="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="handleQuery"> 搜索 </el-button> |
| | | <el-button type="primary" |
| | | @click="handleQuery"> 搜索 </el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <div class="actions"> |
| | | <div></div> |
| | | <div> |
| | | <el-button type="primary" @click="openForm('add')"> |
| | | <el-button type="primary" |
| | | @click="openForm('add')"> |
| | | 新增回款 |
| | | </el-button> |
| | | <el-button icon="Download" @click="handleOut"> 导出 </el-button> |
| | | <el-button icon="Download" |
| | | @click="handleOut"> 导出 </el-button> |
| | | </div> |
| | | </div> |
| | | <el-table |
| | | :data="tableData" |
| | | <el-table :data="tableData" |
| | | border |
| | | v-loading="tableLoading" |
| | | @selection-change="handleSelectionChange" |
| | |
| | | :summary-method="summarizeMainTable" |
| | | :expand-row-keys="expandedRowKeys" |
| | | @expand-change="expandChange" |
| | | |
| | | height="calc(100vh - 21.5em)" |
| | | > |
| | | <el-table-column align="center" type="selection" width="55" /> |
| | | height="calc(100vh - 21.5em)"> |
| | | <el-table-column align="center" |
| | | type="selection" |
| | | width="55" /> |
| | | <el-table-column type="expand"> |
| | | <template #default="props"> |
| | | <el-table |
| | | :data="props.row.children" |
| | | <el-table :data="props.row.children" |
| | | border |
| | | show-summary |
| | | :summary-method="summarizeChildrenTable" |
| | | > |
| | | <el-table-column |
| | | align="center" |
| | | :summary-method="summarizeChildrenTable"> |
| | | <el-table-column align="center" |
| | | label="序号" |
| | | type="index" |
| | | width="60" |
| | | /> |
| | | <el-table-column label="回款日期" prop="receiptPaymentDate" width="130"/> |
| | | <el-table-column label="回款金额" prop="receiptPaymentAmount"> |
| | | width="60" /> |
| | | <el-table-column label="回款日期" |
| | | prop="receiptPaymentDate" |
| | | width="130" /> |
| | | <el-table-column label="回款金额" |
| | | prop="receiptPaymentAmount"> |
| | | <template #default="scope"> |
| | | <el-input-number :step="0.01" :min="0" style="width: 100%" |
| | | <el-input-number :step="0.01" |
| | | :min="0" |
| | | style="width: 100%" |
| | | v-model="scope.row.receiptPaymentAmount" |
| | | :disabled="!scope.row.editType" |
| | | :precision="2" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | clearable /> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="回款方式" prop="receiptPaymentType"> |
| | | <el-table-column label="回款方式" |
| | | prop="receiptPaymentType"> |
| | | <template #default="scope"> |
| | | <el-select |
| | | v-model="scope.row.receiptPaymentType" |
| | | <el-select v-model="scope.row.receiptPaymentType" |
| | | placeholder="请选择" |
| | | clearable |
| | | :disabled="!scope.row.editType" |
| | | > |
| | | <el-option |
| | | v-for="item in receipt_payment_type" |
| | | :disabled="!scope.row.editType"> |
| | | <el-option v-for="item in receipt_payment_type" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | :value="item.value" /> |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="登记人" prop="registrant" width="90"/> |
| | | <el-table-column label="登记日期" prop="createTime" width="130"/> |
| | | <el-table-column label="操作" width="150" align="center"> |
| | | <el-table-column label="登记人" |
| | | prop="registrant" |
| | | width="90" /> |
| | | <el-table-column label="登记日期" |
| | | prop="createTime" |
| | | width="130" /> |
| | | <el-table-column label="操作" |
| | | width="150" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <el-button |
| | | link |
| | | <el-button link |
| | | type="primary" |
| | | size="small" |
| | | @click="changeEditType(scope.row)" |
| | | v-if="!scope.row.editType" |
| | | >编辑</el-button |
| | | > |
| | | <el-button |
| | | link |
| | | v-if="!scope.row.editType">编辑</el-button> |
| | | <el-button link |
| | | type="primary" |
| | | size="small" |
| | | @click="saveReceiptPayment(scope.row)" |
| | | v-if="scope.row.editType" |
| | | >保存</el-button |
| | | > |
| | | <el-button |
| | | link |
| | | v-if="scope.row.editType">保存</el-button> |
| | | <el-button link |
| | | type="primary" |
| | | size="small" |
| | | @click="delReceiptRecord(scope.row)" |
| | | >删除</el-button |
| | | > |
| | | @click="delReceiptRecord(scope.row)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" label="序号" type="index" width="60" /> |
| | | <el-table-column |
| | | label="销售合同号" |
| | | <el-table-column align="center" |
| | | label="序号" |
| | | type="index" |
| | | width="60" /> |
| | | <el-table-column label="销售合同号" |
| | | prop="salesContractNo" |
| | | show-overflow-tooltip |
| | | width="240" |
| | | /> |
| | | <el-table-column |
| | | label="客户名称" |
| | | width="240" /> |
| | | <el-table-column label="客户名称" |
| | | prop="customerName" |
| | | show-overflow-tooltip |
| | | width="240" |
| | | /> |
| | | <el-table-column |
| | | label="回款状态" |
| | | width="240" /> |
| | | <el-table-column label="回款状态" |
| | | prop="statusName" |
| | | width="120" |
| | | > |
| | | width="120"> |
| | | <template #default="{ row }"> |
| | | <el-tag :type="getStatusTagType(row.statusName)" disable-transitions> |
| | | <el-tag :type="getStatusTagType(row.statusName)" |
| | | disable-transitions> |
| | | {{ row.statusName || "--" }} |
| | | </el-tag> |
| | | </template> |
| | |
| | | <!-- show-overflow-tooltip--> |
| | | <!-- width="100"--> |
| | | <!-- />--> |
| | | <el-table-column |
| | | label="发票号" |
| | | <el-table-column label="发票号" |
| | | prop="invoiceNo" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="发票金额(元)" |
| | | 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="回款金额(元)" |
| | | width="200" /> |
| | | <el-table-column label="税率(%)" |
| | | prop="taxRate" |
| | | show-overflow-tooltip /> |
| | | <el-table-column label="回款金额(元)" |
| | | prop="receiptPaymentAmountTotal" |
| | | show-overflow-tooltip |
| | | :formatter="formattedNumber" |
| | | width="200" |
| | | /> |
| | | <el-table-column |
| | | label="待回款金额(元)" |
| | | width="200" /> |
| | | <el-table-column label="待回款金额(元)" |
| | | prop="noReceiptAmount" |
| | | show-overflow-tooltip |
| | | width="200" |
| | | > |
| | | width="200"> |
| | | <template #default="{ row, column }"> |
| | | <el-text type="danger"> |
| | | {{ formattedNumber(row, column, row.noReceiptAmount) }} |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | v-show="total > 0" |
| | | <pagination v-show="total > 0" |
| | | :total="total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | @pagination="paginationChange" |
| | | /> |
| | | @pagination="paginationChange" /> |
| | | </div> |
| | | <el-dialog |
| | | v-model="dialogFormVisible" |
| | | <el-dialog v-model="dialogFormVisible" |
| | | title="新增回款页面" |
| | | width="70%" |
| | | @close="closeDia" |
| | | > |
| | | <el-form |
| | | :model="form" |
| | | @close="closeDia"> |
| | | <el-form :model="form" |
| | | label-width="140px" |
| | | label-position="top" |
| | | :rules="rules" |
| | | ref="formRef" |
| | | > |
| | | ref="formRef"> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="销售合同号:" prop="salesContractNo"> |
| | | <el-input |
| | | v-model="form.salesContractNo" |
| | | <el-form-item label="销售合同号:" |
| | | prop="salesContractNo"> |
| | | <el-input v-model="form.salesContractNo" |
| | | placeholder="自动填充" |
| | | disabled |
| | | /> |
| | | disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="客户名称:" prop="customerName"> |
| | | <el-input |
| | | v-model="form.customerName" |
| | | <el-form-item label="客户名称:" |
| | | prop="customerName"> |
| | | <el-input v-model="form.customerName" |
| | | placeholder="自动填充" |
| | | disabled |
| | | /> |
| | | disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="发票号:" prop="invoiceNo"> |
| | | <el-input |
| | | v-model="form.invoiceNo" |
| | | <el-form-item label="发票号:" |
| | | prop="invoiceNo"> |
| | | <el-input v-model="form.invoiceNo" |
| | | placeholder="自动填充" |
| | | disabled |
| | | /> |
| | | disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="发票金额(元):" prop="invoiceTotal"> |
| | | <el-input |
| | | type="number" |
| | | <el-form-item label="发票金额(元):" |
| | | prop="invoiceTotal"> |
| | | <el-input type="number" |
| | | v-model="form.invoiceTotal" |
| | | placeholder="自动填充" |
| | | :step="0.01" |
| | | disabled |
| | | /> |
| | | disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="税率:" prop="taxRate"> |
| | | <el-input |
| | | type="number" |
| | | <el-form-item label="税率:" |
| | | prop="taxRate"> |
| | | <el-input type="number" |
| | | v-model="form.taxRate" |
| | | placeholder="自动填充" |
| | | :step="0.01" |
| | | disabled |
| | | /> |
| | | disabled /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="本次回款金额:" prop="receiptPaymentAmount"> |
| | | <el-input-number :step="0.01" :min="0" style="width: 100%" |
| | | <el-form-item label="本次回款金额:" |
| | | prop="receiptPaymentAmount"> |
| | | <el-input-number :step="0.01" |
| | | :min="0" |
| | | style="width: 100%" |
| | | :precision="2" |
| | | v-model="form.receiptPaymentAmount" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="回款形式:" prop="receiptPaymentType"> |
| | | <el-select |
| | | v-model="form.receiptPaymentType" |
| | | <el-form-item label="回款形式:" |
| | | prop="receiptPaymentType"> |
| | | <el-select v-model="form.receiptPaymentType" |
| | | placeholder="请选择" |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="item in receipt_payment_type" |
| | | clearable> |
| | | <el-option v-for="item in receipt_payment_type" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="回款日期:" prop="receiptPaymentDate"> |
| | | <el-date-picker |
| | | style="width: 100%" |
| | | <el-form-item label="回款日期:" |
| | | prop="receiptPaymentDate"> |
| | | <el-date-picker style="width: 100%" |
| | | v-model="form.receiptPaymentDate" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | type="date" |
| | | placeholder="请选择" |
| | | clearable |
| | | /> |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记人:" prop="registrant"> |
| | | <el-input |
| | | v-model="form.registrant" |
| | | <el-form-item label="登记人:" |
| | | prop="registrant"> |
| | | <el-input v-model="form.registrant" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">确认</el-button> |
| | | <el-button type="primary" |
| | | @click="submitForm">确认</el-button> |
| | | <el-button @click="closeDia">取消</el-button> |
| | | </div> |
| | | </template> |
| | |
| | | return parseFloat(cellValue).toFixed(2); |
| | | }; |
| | | |
| | | const getStatusTagType = (statusName = '') => { |
| | | const getStatusTagType = (statusName = "") => { |
| | | const normalized = statusName.trim(); |
| | | if (!normalized) return 'info'; |
| | | return normalized === '未完成回款' ? 'danger' : 'success'; |
| | | if (!normalized) return "info"; |
| | | return normalized === "未完成回款" ? "danger" : "success"; |
| | | }; |
| | | // 查询列表 |
| | | /** 搜索按钮操作 */ |
| | |
| | | page.current = 1; |
| | | getList(); |
| | | }; |
| | | const paginationChange = (obj) => { |
| | | const paginationChange = obj => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | getList(); |
| | |
| | | const getList = () => { |
| | | tableLoading.value = true; |
| | | bindInvoiceNoRegPage({ ...searchForm, ...page }) |
| | | .then((res) => { |
| | | .then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | total.value = res.data.total; |
| | | if (expandedRowKeys.value.length > 0) { |
| | | const arr = [] |
| | | const index = tableData.value.findIndex(item => item.id === expandedRowKeys.value[0]); |
| | | const arr = []; |
| | | const index = tableData.value.findIndex( |
| | | item => item.id === expandedRowKeys.value[0] |
| | | ); |
| | | if (index > -1) { |
| | | arr.push(tableData.value[index]); |
| | | expandChange(tableData.value[index], arr) |
| | | expandChange(tableData.value[index], arr); |
| | | } |
| | | } |
| | | }) |
| | |
| | | receiptPaymentHistoryListNoPage({ |
| | | invoiceLedgerId: row.id, |
| | | type: 1, |
| | | }).then((res) => { |
| | | const index = tableData.value.findIndex((item) => item.id === row.id); |
| | | }).then(res => { |
| | | const index = tableData.value.findIndex(item => item.id === row.id); |
| | | if (index > -1) { |
| | | if (res?.length > 0) { |
| | | res.forEach((item) => { |
| | | res.forEach(item => { |
| | | item.editType = false; |
| | | }); |
| | | } |
| | |
| | | } |
| | | }; |
| | | // 表格选择数据 |
| | | const handleSelectionChange = (selection) => { |
| | | console.log("selection", selection); |
| | | selectedRows.value = selection |
| | | const handleSelectionChange = selection => { |
| | | // 筛选掉 editType 为 false 的项 |
| | | selectedRows.value = selection.filter(item => item.editType !== false); |
| | | console.log("selectedRows.value", selectedRows.value); |
| | | }; |
| | | // 主表合计方法 |
| | | const summarizeMainTable = (param) => { |
| | | const summarizeMainTable = param => { |
| | | return proxy.summarizeTable( |
| | | param, |
| | | ["invoiceTotal", "receiptPaymentAmountTotal", "noReceiptAmount"], |
| | |
| | | ); |
| | | }; |
| | | // 子表合计方法 |
| | | const summarizeChildrenTable = (param) => { |
| | | const summarizeChildrenTable = param => { |
| | | return proxy.summarizeTable(param, ["receiptPaymentAmount"]); |
| | | }; |
| | | // 打开弹框 |
| | | const openForm = () => { |
| | | form.value = {}; |
| | | console.log(selectedRows.value, "selectedRows.value"); |
| | | |
| | | if (selectedRows.value.length !== 1) { |
| | | proxy.$modal.msgError("请选择一条数据"); |
| | | return; |
| | |
| | | proxy.$modal.msgWarning("无需再回款"); |
| | | return; |
| | | } |
| | | invoiceInfo({ id: selectedRows.value[0].id }).then((res) => { |
| | | invoiceInfo({ id: selectedRows.value[0].id }).then(res => { |
| | | form.value = { ...res.data }; |
| | | form.value.invoiceLedgerId = form.value.id; |
| | | form.value.id = ""; |
| | |
| | | }; |
| | | // 提交表单 |
| | | const submitForm = () => { |
| | | proxy.$refs["formRef"].validate((valid) => { |
| | | proxy.$refs["formRef"].validate(valid => { |
| | | if (valid) { |
| | | receiptPaymentSaveOrUpdate(form.value).then((res) => { |
| | | receiptPaymentSaveOrUpdate(form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | getList(); |
| | |
| | | }; |
| | | |
| | | // 删除回款记录 |
| | | const delReceiptRecord = (row) => { |
| | | const delReceiptRecord = row => { |
| | | console.log("row", row); |
| | | ElMessageBox.confirm("确认删除该记录吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | |
| | | }; |
| | | |
| | | // 编辑修改状态 |
| | | const changeEditType = (row) => { |
| | | const changeEditType = row => { |
| | | row.editType = !row.editType; |
| | | }; |
| | | |
| | | // 保存回款记录 |
| | | const saveReceiptPayment = (row) => { |
| | | const saveReceiptPayment = row => { |
| | | let updateData = { |
| | | id: row.id, |
| | | receiptPaymentType: row.receiptPaymentType, |
| | | receiptPaymentAmount: row.receiptPaymentAmount, |
| | | }; |
| | | receiptPaymentSaveOrUpdate(updateData).then((res) => { |
| | | receiptPaymentSaveOrUpdate(updateData).then(res => { |
| | | row.editType = !row.editType; |
| | | getList(); |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | const ids = selectedRows.value.map((item) => item.id); |
| | | const ids = selectedRows.value.map(item => item.id); |
| | | proxy.download( |
| | | `/receiptPayment/export`, |
| | | { ids: `${ids}` }, |