| | |
| | | </el-text> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" |
| | | fixed="right" |
| | | align="center" |
| | | width="100"> |
| | | <template #default="{ row }"> |
| | | <el-button link type="primary" @click="openReceiptDialog(row)"> |
| | | 新增回款 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination v-show="recordTotal > 0" |
| | | :total="recordTotal" |
| | |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <!-- 新增回款弹框 --> |
| | | <el-dialog |
| | | v-model="receiptDialogVisible" |
| | | title="新增回款" |
| | | width="35%" |
| | | @close="closeReceiptDialog" |
| | | > |
| | | <el-form |
| | | :model="receiptForm" |
| | | label-width="100px" |
| | | :rules="receiptRules" |
| | | ref="receiptFormRef" |
| | | > |
| | | <el-form-item label="销售合同号:"> {{ currentRow.salesContractNo || '--' }} </el-form-item> |
| | | <el-form-item label="回款日期:" prop="paymentDate"> |
| | | <el-date-picker |
| | | style="width: 100%" |
| | | v-model="receiptForm.paymentDate" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | type="date" |
| | | placeholder="请选择回款日期" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="回款金额:" prop="paymentAmount"> |
| | | <el-input-number |
| | | style="width: 100%" |
| | | v-model="receiptForm.paymentAmount" |
| | | :precision="2" |
| | | :min="0.01" |
| | | :max="Math.max(0, (Number(currentRow.receiptableAmount) || 0) - (Number(currentRow.receiptPaymentAmount) || 0))" |
| | | placeholder="请输入回款金额" |
| | | controls-position="right" |
| | | /> |
| | | <div style="color: #e6a23c; font-size: 12px; margin-top: 4px"> |
| | | 当前可回款余额:{{ formattedNumber(null, null, (Number(currentRow.receiptableAmount) || 0) - (Number(currentRow.receiptPaymentAmount) || 0)) }} 元 |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="回款方式:" prop="paymentMethod"> |
| | | <el-select |
| | | v-model="receiptForm.paymentMethod" |
| | | placeholder="请选择回款方式" |
| | | style="width: 100%" |
| | | clearable |
| | | > |
| | | <el-option label="银行转账" value="银行转账" /> |
| | | <el-option label="现金" value="现金" /> |
| | | <el-option label="支票" value="支票" /> |
| | | <el-option label="微信/支付宝" value="微信/支付宝" /> |
| | | <el-option label="其他" value="其他" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="备注:" prop="remark"> |
| | | <el-input |
| | | v-model="receiptForm.remark" |
| | | type="textarea" |
| | | :rows="3" |
| | | placeholder="请输入备注信息" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitReceiptForm">确认</el-button> |
| | | <el-button @click="closeReceiptDialog">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import { |
| | | customewTransactions, |
| | | customewTransactionsDetails, |
| | | saveReceiptPayment, |
| | | } from "@/api/salesManagement/indicatorStats.js"; |
| | | import Pagination from "../../../components/PIMTable/Pagination.vue"; |
| | | const { proxy } = getCurrentInstance(); |
| | |
| | | const customerId = ref(""); |
| | | const { searchForm } = toRefs(data); |
| | | const originReceiptRecord = ref([]); |
| | | // 查询列表 |
| | | |
| | | // 新增回款弹框 |
| | | const receiptDialogVisible = ref(false); |
| | | const currentRow = ref({}); |
| | | const receiptFormRef = ref(null); |
| | | const receiptForm = reactive({ |
| | | paymentDate: "", |
| | | paymentAmount: undefined, |
| | | paymentMethod: "", |
| | | remark: "", |
| | | }); |
| | | const validatePaymentAmount = (_, value, callback) => { |
| | | if (!value) { |
| | | return callback(new Error("请输入回款金额")); |
| | | } |
| | | const remaining = |
| | | (Number(currentRow.value.receiptableAmount) || 0) - |
| | | (Number(currentRow.value.receiptPaymentAmount) || 0); |
| | | if (value > remaining) { |
| | | return callback(new Error(`回款金额不能超过可回款余额 ${remaining.toFixed(2)} 元`)); |
| | | } |
| | | callback(); |
| | | }; |
| | | const receiptRules = { |
| | | paymentDate: [ |
| | | { required: true, message: "请选择回款日期", trigger: "change" }, |
| | | ], |
| | | paymentAmount: [ |
| | | { required: true, validator: validatePaymentAmount, trigger: "blur" }, |
| | | ], |
| | | paymentMethod: [ |
| | | { required: true, message: "请选择回款方式", trigger: "change" }, |
| | | ], |
| | | }; |
| | | const openReceiptDialog = row => { |
| | | currentRow.value = row; |
| | | receiptForm.paymentDate = ""; |
| | | receiptForm.paymentAmount = undefined; |
| | | receiptForm.paymentMethod = ""; |
| | | receiptForm.remark = ""; |
| | | receiptDialogVisible.value = true; |
| | | }; |
| | | const closeReceiptDialog = () => { |
| | | receiptFormRef.value?.resetFields(); |
| | | receiptDialogVisible.value = false; |
| | | }; |
| | | const submitReceiptForm = () => { |
| | | receiptFormRef.value?.validate(valid => { |
| | | if (valid) { |
| | | const payload = { |
| | | customerId: customerId.value, |
| | | salesContractNo: currentRow.value.salesContractNo, |
| | | paymentDate: receiptForm.paymentDate, |
| | | paymentAmount: receiptForm.paymentAmount, |
| | | paymentMethod: receiptForm.paymentMethod, |
| | | remark: receiptForm.remark, |
| | | }; |
| | | saveReceiptPayment(payload).then(res => { |
| | | proxy.$modal.msgSuccess("新增回款成功"); |
| | | closeReceiptDialog(); |
| | | receiptPaymentList(customerId.value); |
| | | getList(); |
| | | }); |
| | | } |
| | | }); |
| | | }; |
| | | /** 搜索按钮操作 */ |
| | | const handleQuery = () => { |
| | | page.current = 1; |