yunzerwebsite/yunzerwebsiteallinone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化回款功能

Browse Source
This commit is contained in:
hero920103
2026-09-13 14:09:34 +08:00
parent aea53e0766
commit 2f6cdbb3cd
13 changed files with 855 additions and 668 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/components.d.ts
Vendored
+1
View File
@@ -15,6 +15,7 @@ declare module 'vue' {
CommonHeader: typeof import('./src/components/CommonHeader.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElAside: typeof import('element-plus/es')['ElAside']
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBacktop: typeof import('element-plus/es')['ElBacktop']
ElBadge: typeof import('element-plus/es')['ElBadge']
backend/src/api/crmPayback.js
+19
View File
@@ -47,3 +47,22 @@ export function getPaybackProgress(params) {
export function registerPaybackReceive(id, data) {
return request({ url: `/backend/crm/payback/${id}/receive`, method: "post", data });
}
/* ============================ 回款记录（回款进度流水） ============================
* 以「回款计划」为先导条件：每次「新建回款」追加一条记录，构成回款进度列表。
* ============================================================================== */
/** 回款记录列表：按合同 / 计划查询一笔笔实际回款（含计划总额与已回款汇总） */
export function getPaybackRecordList(params) {
return request({ url: "/backend/crm/payback/record/list", method: "get", params });
}
/** 新建回款：追加一条回款记录 */
export function createPaybackRecord(data) {
return request({ url: "/backend/crm/payback/record", method: "post", data });
}
/** 删除回款记录 */
export function deletePaybackRecord(id) {
return request({ url: `/backend/crm/payback/record/${id}`, method: "delete" });
}
backend/src/views/apps/crm/contract/components/ProductList.vue
+32 -16
View File
@@ -41,29 +41,25 @@
maxlength="80"
/>
<template v-else>
<el-select
<!-- 用 autocomplete：直接输入即生效（产品管理无此名称时作为新增），
也可从下拉建议中选择已有产品并带出规格/单位/单价/成本 -->
<el-autocomplete
v-model="row.name"
filterable
allow-create
default-first-option
clearable
value-key="product_name"
:disabled="!row.category"
:fetch-suggestions="(q, cb) => queryProducts(row, q, cb)"
:placeholder="row.category ? '搜索或输入产品名称' : '请先选择产品类别'"
style="width: 100%"
@focus="onProductFocus(row)"
@visible-change="(v) => { if (v) onProductFocus(row) }"
@change="(val) => onProductPick(row, val)"
@select="(item) => onProductPick(row, item.product_name)"
@blur="() => onProductNameCommit(row)"
>
<el-option
v-for="p in productOptions"
:key="p.id"
:label="p.product_name"
:value="p.product_name"
>
<span class="opt-name">{{ p.product_name }}</span>
<span class="opt-meta">{{ p.spec || "—" }} · ￥{{ p.price }}</span>
</el-option>
</el-select>
<template #default="{ item }">
<span class="opt-name">{{ item.product_name }}</span>
<span class="opt-meta">{{ item.spec || "—" }} · ￥{{ item.price }}</span>
</template>
</el-autocomplete>
<!-- <div v-if="row.product_id" class="linked-tip">
已关联产品管理 #{{ row.product_id }}（成本取自产品管理）
</div> -->
@@ -128,6 +124,11 @@
</template>
</el-table-column>
<el-table-column label="税率(%)" width="110">
<template #header>
<el-tooltip content="仅作开票记录：单价已为含税价，小计=数量×单价，不再叠加计税" placement="top">
<span>税率(%)</span>
</el-tooltip>
</template>
<template #default="{ row }">
<el-input-number
v-if="row.line_type === 'product'"
@@ -351,6 +352,21 @@ function onProductFocus(row) {
ensureOptions(row);
}
/** 产品名称输入建议：对当前分类已加载的产品做本地模糊过滤（自由输入同样生效） */
function queryProducts(row, query, cb) {
const kw = String(query || "").trim().toLowerCase();
const list = (productOptions.value || []).filter(
(p) => !kw || String(p.product_name || "").toLowerCase().includes(kw)
);
// 附加 value 字段：兼容 autocomplete 默认以 value 作为选中值
cb(list.slice(0, 50).map((p) => ({ ...p, value: p.product_name })));
}
/** 名称失焦：命中产品库则带出规格/单位/单价/成本；未命中则标记为新增，保存时由后端自动建档 */
function onProductNameCommit(row) {
onProductPick(row, String(row.name || "").trim());
}
/** 按分类加载产品选项（本地 filterable 即可做到可写文字 + 模糊搜索，allow-create 支持自定义新增） */
async function ensureOptions(row) {
const cat = row.category;
backend/src/views/apps/crm/contract/components/create.vue
+7
View File
@@ -611,6 +611,13 @@ const saveContract = async ({ finish = false }) => {
ElMessage.warning("请先补全合同信息必填项");
return false;
}
// 未命名的产品行无法计价、也不会写入产品管理，完成保存前必须补全
const unnamed = products.value.filter((r) => !String(r?.name || "").trim()).length;
if (unnamed) {
activeStep.value = 1;
ElMessage.warning(`产品清单有 ${unnamed} 行未填写产品名称，请补全后再保存`);
return false;
}
}
saving.value = true;
backend/src/views/apps/crm/contract/components/detail_payback.vue
+132 -79
View File
@@ -49,7 +49,7 @@
</template>
</el-table>
<!-- ============================ 回款进度 ============================ -->
<!-- ============================ 回款进度（回款记录流水） ============================ -->
<div class="section-head progress-head">
<span class="section-title">回款进度</span>
<div class="progress-summary">
@@ -57,49 +57,29 @@
<span>已回款：<b class="success">￥{{ formatMoney(progressSummary.total_received) }}</b></span>
<span>待回款：<b class="warning">￥{{ formatMoney((progressSummary.total_planned || 0) - (progressSummary.total_received || 0)) }}</b></span>
</div>
<el-tooltip :disabled="!paidOff" content="回款已全部完成（进度 100%），不可再新建回款计划" placement="top">
<el-tooltip :disabled="list.length > 0" content="回款进度以回款计划为先导条件，请先新建回款计划" placement="top">
<span class="btn-wrap">
<el-button type="primary" size="small" :icon="Plus" :disabled="paidOff" @click="openCreate">
新建回款计划
<el-button type="primary" size="small" :icon="Plus" :disabled="!list.length" @click="openReceive">
新建回款
</el-button>
</span>
</el-tooltip>
</div>
<el-table v-loading="progressLoading" :data="progressList" border size="small" row-key="rowKey">
<el-table-column label="回款周期" width="90" align="center">
<template #default="{ row }">{{ paybackCycleText(row.plan_type) }}</template>
</el-table-column>
<el-table-column label="明细" min-width="140" show-overflow-tooltip>
<template #default="{ row }">{{ row.name || `第${row.seq}期` }}</template>
</el-table-column>
<el-table-column label="进度百分比" width="100" align="center">
<template #default="{ row }">{{ row.percent ? `${row.percent}%` : "-" }}</template>
</el-table-column>
<el-table-column label="计划金额" width="120" align="right">
<template #default="{ row }">{{ formatMoney(row.amount) }}</template>
</el-table-column>
<el-table-column label="计划日期" width="110" align="center">
<template #default="{ row }">{{ row.plan_date || "-" }}</template>
</el-table-column>
<el-table-column label="已回款" width="120" align="right">
<template #default="{ row }">{{ formatMoney(row.received_amount) }}</template>
</el-table-column>
<el-table v-loading="progressLoading" :data="records" border size="small" row-key="id">
<el-table-column label="回款日期" width="110" align="center">
<template #default="{ row }">{{ (row.received_date && row.received_date !== "<nil>") ? row.received_date : "-" }}</template>
<template #default="{ row }">{{ row.received_date || "-" }}</template>
</el-table-column>
<el-table-column label="逾期" width="100" align="center">
<el-table-column label="对应回款计划" min-width="180" show-overflow-tooltip>
<template #default="{ row }">{{ planText(planOf(row.payback_id)) }}</template>
</el-table-column>
<el-table-column label="本次回款金额" width="130" align="right">
<template #default="{ row }">
<el-tag v-if="paybackItemOverdue(row).overdue" type="danger" size="small" effect="dark">
{{ overdueText(paybackItemOverdue(row).days) }}
</el-tag>
<span v-else>-</span>
<span class="amount">￥{{ formatMoney(row.amount) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="paybackItemStatusTag(row.status)" size="small">{{ paybackItemStatusText(row.status) }}</el-tag>
</template>
<el-table-column label="回款方式" width="100" align="center">
<template #default="{ row }">{{ paybackMethodText(row.pay_method) }}</template>
</el-table-column>
<el-table-column label="流水回执" width="110" align="center">
<template #default="{ row }">
@@ -107,16 +87,16 @@
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="负责人" width="90">
<template #default="{ row }">{{ row.owner_user_name || "-" }}</template>
<el-table-column label="备注" min-width="120" show-overflow-tooltip>
<template #default="{ row }">{{ row.remark || "-" }}</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center" fixed="right">
<el-table-column label="操作" width="80" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="openReceive(row)">回款登记</el-button>
<el-button link type="danger" size="small" @click="handleDeleteRecord(row)">删除</el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="该合同暂无回款进度，先新建回款计划" :image-size="60" />
<el-empty description="暂无回款记录，点击右上角「新建回款」登记一笔实收" :image-size="60" />
</template>
</el-table>
@@ -131,21 +111,26 @@
<!-- 回款计划详情 -->
<PaybackDetail v-model:visible="detailVisible" :payback="currentRow" @edit="handleEdit" />
<!-- 回款登记 -->
<el-dialog v-model="receiveVisible" title="回款登记" width="440px">
<!-- 新建回款（回款进度登记：以回款计划为先导） -->
<el-dialog v-model="receiveVisible" title="新建回款" width="460px">
<el-form :model="receiveForm" label-width="90px">
<el-form-item label="明细">
<span>{{ receiveForm.name || `第${receiveForm.seq}期` }}</span>
<el-form-item label="回款计划" required>
<el-select
v-model="receiveForm.payback_id"
placeholder="请选择回款计划"
style="width: 100%"
@change="onPlanChange"
>
<el-option v-for="p in list" :key="p.id" :label="planText(p)" :value="p.id" />
</el-select>
</el-form-item>
<el-form-item label="计划金额">
<span class="amount">￥{{ formatMoney(receiveForm.amount) }}</span>
</el-form-item>
<el-form-item label="实收金额">
<el-form-item label="本次回款" required>
<el-input-number
v-model="receiveForm.received_amount"
v-model="receiveForm.amount"
:min="0"
:precision="2"
:controls="false"
placeholder="0.00"
style="width: 100%"
/>
</el-form-item>
@@ -158,6 +143,11 @@
style="width: 100%"
/>
</el-form-item>
<el-form-item label="回款方式">
<el-select v-model="receiveForm.pay_method" style="width: 100%">
<el-option v-for="m in PAYBACK_METHOD_OPTIONS" :key="m.value" :label="m.label" :value="m.value" />
</el-select>
</el-form-item>
<el-form-item label="流水回执">
<div class="receipt-block">
<el-upload
@@ -177,6 +167,9 @@
</div>
</div>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="receiveForm.remark" type="textarea" :rows="2" maxlength="200" placeholder="选填" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="receiveVisible = false">取消</el-button>
@@ -188,21 +181,23 @@
<script setup>
import { computed, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Upload, Document, Delete } from "@element-plus/icons-vue";
import { getPaybackList, getPaybackProgress, registerPaybackReceive } from "@/api/crmPayback";
import {
getPaybackList,
getPaybackRecordList,
createPaybackRecord,
deletePaybackRecord,
} from "@/api/crmPayback";
import { uploadFile } from "@/api/file";
import PaybackCreate from "../../payback/components/create.vue";
import PaybackDetail from "../../payback/components/detail.vue";
import {
PAYBACK_METHOD_OPTIONS,
paybackCycleText,
paybackMethodText,
paybackStatusText,
paybackStatusTag,
paybackItemStatusText,
paybackItemStatusTag,
paybackItemOverdue,
overdueText,
formatMoney,
} from "../../dict";
@@ -220,11 +215,32 @@ const detailVisible = ref(false);
const currentRow = ref(null);
const editRow = ref(null);
/** 回款进度（摊平的分期明细） */
/** 回款进度：一笔笔实际回款记录（回款流水） */
const progressLoading = ref(false);
const progressList = ref([]);
const records = ref([]);
const progressSummary = ref({ total_planned: 0, total_received: 0 });
/** 今日日期（新建回款默认回款日期） */
function todayStr() {
const d = new Date();
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${d.getFullYear()}-${m}-${day}`;
}
/** 按计划 id 取回款计划对象（回款记录上只存 payback_id） */
function planOf(paybackId) {
return list.value.find((i) => Number(i.id) === Number(paybackId)) || null;
}
/** 回款计划展示文案：周期 + 计划金额 + 已回款 */
function planText(p) {
if (!p) return "-";
return `${paybackCycleText(p.plan_type)}｜计划 ￥${formatMoney(p.total_amount)}｜已回 ￥${formatMoney(
p.received_amount
)}`;
}
/** 回款计划是否已全部收齐（总进度达到 100%），收齐后禁止再新建回款计划 */
const paidOff = computed(() => {
const planned = Number(progressSummary.value.total_planned) || 0;
@@ -271,7 +287,7 @@ async function reload() {
const contractId = props.contract?.id;
if (!contractId) {
list.value = [];
progressList.value = [];
records.value = [];
progressSummary.value = { total_planned: 0, total_received: 0 };
emit("count", 0);
return;
@@ -286,23 +302,23 @@ async function reload() {
loading.value = false;
emit("count", list.value.length);
}
await fetchProgress();
await fetchRecords();
}
/** 拉取本合同回款进度 */
async function fetchProgress() {
/** 拉取本合同回款记录（回款进度流水，一笔一条） */
async function fetchRecords() {
const contractId = props.contract?.id;
if (!contractId) return;
progressLoading.value = true;
try {
const res = await getPaybackProgress({ contract_id: contractId });
progressList.value = (res?.data?.list || []).map((r) => ({ ...r, rowKey: `${r.payback_id}_${r.seq}` }));
const res = await getPaybackRecordList({ contract_id: contractId });
records.value = res?.data?.list || [];
progressSummary.value = {
total_planned: res?.data?.total_planned || 0,
total_received: res?.data?.total_received || 0,
};
} catch (e) {
progressList.value = [];
records.value = [];
progressSummary.value = { total_planned: 0, total_received: 0 };
ElMessage.error(e.message || "查询回款进度失败");
} finally {
@@ -310,34 +326,44 @@ async function fetchProgress() {
}
}
/* ---------------------------- 回款登记 ---------------------------- */
/* ---------------------------- 新建回款（回款进度登记） ---------------------------- */
const receiveVisible = ref(false);
const receiveSaving = ref(false);
const receiveForm = reactive({
payback_id: null,
seq: 0,
name: "",
amount: 0,
received_amount: 0,
received_date: "",
pay_method: 1,
receipt_url: "",
receipt_name: "",
remark: "",
});
function openReceive(row) {
/** 新建回款：以回款计划为先导条件（无计划时不允许登记） */
function openReceive() {
if (!list.value.length) {
ElMessage.warning("请先新建回款计划，回款进度以计划为先导条件");
return;
}
const first = list.value[0];
Object.assign(receiveForm, {
payback_id: row.payback_id,
seq: row.seq,
name: row.name,
amount: row.amount,
received_amount: Number(row.received_amount) || 0,
received_date: row.received_date && row.received_date !== "<nil>" ? row.received_date : "",
receipt_url: row.receipt_url || "",
receipt_name: row.receipt_name || "",
payback_id: first.id,
amount: 0,
received_date: todayStr(),
pay_method: first.pay_method || 1,
receipt_url: "",
receipt_name: "",
remark: "",
});
receiveVisible.value = true;
}
/** 切换回款计划：同步该计划的回款方式作为默认值 */
function onPlanChange(pid) {
const p = planOf(pid);
if (p) receiveForm.pay_method = p.pay_method || 1;
}
const uploading = ref(false);
async function handleReceiptUpload(options) {
const file = options.file;
@@ -363,18 +389,28 @@ function clearReceipt() {
}
async function submitReceive() {
if (!receiveForm.payback_id) {
ElMessage.warning("请选择回款计划");
return;
}
if (!(Number(receiveForm.amount) > 0)) {
ElMessage.warning("请填写本次回款金额");
return;
}
receiveSaving.value = true;
try {
await registerPaybackReceive(receiveForm.payback_id, {
seq: receiveForm.seq,
received_amount: Number(receiveForm.received_amount) || 0,
await createPaybackRecord({
payback_id: receiveForm.payback_id,
amount: Number(receiveForm.amount) || 0,
received_date: receiveForm.received_date || "",
pay_method: receiveForm.pay_method,
receipt_url: receiveForm.receipt_url,
receipt_name: receiveForm.receipt_name,
remark: receiveForm.remark,
});
ElMessage.success("回款登记成功");
receiveVisible.value = false;
// 回款计划（含各期已回款金额、总进度）与回款进度明细一并刷新，无需重开抽屉
// 计划的已回款金额与回款进度流水一并刷新，无需重开抽屉
await reload();
emit("saved");
} catch (e) {
@@ -384,6 +420,23 @@ async function submitReceive() {
}
}
/** 删除一条回款记录（会同步回写计划的已回款金额） */
async function handleDeleteRecord(row) {
try {
await ElMessageBox.confirm(
`确定删除 ${row.received_date || "该"} 的这笔回款（￥${formatMoney(row.amount)}）吗？`,
"删除确认",
{ type: "warning" }
);
await deletePaybackRecord(row.id);
ElMessage.success("删除成功");
await reload();
emit("saved");
} catch (e) {
if (e !== "cancel") ElMessage.error(e.message || "删除失败");
}
}
defineExpose({ reload });
</script>
backend/src/views/apps/crm/contract/components/utils.js
+3
View File
@@ -6,6 +6,9 @@
* - 软件部分 = Σ 产品类别为「软件（许可）」的小计
* - 其他部分 = Σ 服务 / 开发 / 其他类小计
* - 合同总金额 = 硬件 + 软件 + 其他
*
* 计税口径：清单中填写的单价即为「含税价」，小计 = 数量 × 单价，不再叠加税率；
* 税率字段仅作开票记录，不参与任何金额计算（前后端保持一致）。
* - 产品总成本 = Σ (数量 × 成本单价)，软件开发行按其「开发总成本」计入
* - 合同总利润 = 合同总金额 - 产品总成本
*
backend/src/views/apps/crm/payback/components/detail.vue
+260 -89
View File
@@ -35,10 +35,6 @@
<el-descriptions-item label="已回款金额">
<span class="success-text">￥{{ formatMoney(detail.received_amount) }}</span>
</el-descriptions-item>
<el-descriptions-item label="流水回执">
<a v-if="detail.receipt_url" :href="detail.receipt_url" target="_blank" class="primary-text">{{ detail.receipt_name || "查看回执" }}</a>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="提前提醒">
{{ detail.remind_days ? `${detail.remind_days} 天` : "-" }}
</el-descriptions-item>
@@ -46,74 +42,127 @@
<el-descriptions-item label="备注" :span="2">{{ detail.remark || "-" }}</el-descriptions-item>
</el-descriptions>
<!-- 回款明细：一笔笔实际回款记录 -->
<div class="detail-section-title">
<span>回款明细</span>
<span class="section-tip">
共 {{ items.length }} 期，已完成 {{ doneCount }} 期
</span>
<div class="section-right">
<span class="section-tip">
共 {{ records.length }} 笔，累计 ￥{{ formatMoney(receivedSum) }}
</span>
<el-button type="primary" size="small" :icon="Plus" @click="openRecord">新建回款记录</el-button>
</div>
</div>
<el-table :data="items" border size="small">
<el-table-column label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="paybackItemStatusTag(row.status)" size="small">
{{ paybackItemStatusText(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="name" label="明细名称" min-width="130" show-overflow-tooltip />
<el-table-column label="计划日期" width="110" align="center">
<template #default="{ row }">{{ row.plan_date || "-" }}</template>
</el-table-column>
<el-table-column label="回款进度" min-width="190">
<template #default="{ row }">
<div class="progress-cell">
<div class="progress-top">
<span class="success-text">￥{{ formatMoney(row.received_amount) }}</span>
<span class="progress-sep">/</span>
<span>￥{{ formatMoney(row.amount) }}</span>
</div>
<el-progress
:percentage="paybackItemPercent(row)"
:stroke-width="10"
:color="paybackItemPercent(row) >= 100 ? 'var(--el-color-success)' : 'var(--el-color-primary)'"
:show-text="true"
/>
</div>
</template>
</el-table-column>
<el-table-column label="回款日期" width="110" align="center">
<el-table v-loading="recordLoading" :data="records" border size="small" row-key="id">
<el-table-column label="回款日期" width="120" align="center">
<template #default="{ row }">{{ row.received_date || "-" }}</template>
</el-table-column>
<el-table-column label="逾期" width="100" align="center">
<el-table-column label="本次回款金额" min-width="140" align="right">
<template #default="{ row }">
<el-tag v-if="paybackItemOverdue(row).overdue" type="danger" size="small" effect="dark">
{{ overdueText(paybackItemOverdue(row).days) }}
</el-tag>
<span class="success-text">￥{{ formatMoney(row.amount) }}</span>
</template>
</el-table-column>
<el-table-column label="回款方式" width="110" align="center">
<template #default="{ row }">{{ paybackMethodText(row.pay_method) }}</template>
</el-table-column>
<el-table-column label="流水回执" width="120" align="center">
<template #default="{ row }">
<el-link v-if="row.receipt_url" type="primary" :href="row.receipt_url" target="_blank" :underline="false">
查看回执
</el-link>
<span v-else>-</span>
</template>
</el-table-column>
<template #empty><el-empty description="暂无回款明细" :image-size="60" /></template>
<el-table-column label="备注" min-width="150" show-overflow-tooltip>
<template #default="{ row }">{{ row.remark || "-" }}</template>
</el-table-column>
<el-table-column label="操作" width="80" align="center" fixed="right">
<template #default="{ row }">
<el-button link type="danger" size="small" @click="handleDeleteRecord(row)">删除</el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="暂无回款记录，点击右上角「新建回款记录」登记" :image-size="60" />
</template>
</el-table>
<!-- 新建回款记录（当前计划固定，无需再选） -->
<el-dialog v-model="recordVisible" title="新建回款记录" width="460px" append-to-body>
<el-form :model="recordForm" label-width="90px">
<el-form-item label="本次回款" required>
<el-input-number
v-model="recordForm.amount"
:min="0"
:precision="2"
:controls="false"
placeholder="0.00"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="回款日期">
<el-date-picker
v-model="recordForm.received_date"
type="date"
value-format="YYYY-MM-DD"
placeholder="选择日期"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="回款方式">
<el-select v-model="recordForm.pay_method" style="width: 100%">
<el-option v-for="m in PAYBACK_METHOD_OPTIONS" :key="m.value" :label="m.label" :value="m.value" />
</el-select>
</el-form-item>
<el-form-item label="流水回执">
<div class="receipt-block">
<el-upload
:show-file-list="false"
:http-request="handleReceiptUpload"
:disabled="uploading"
accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx"
>
<el-button :icon="Upload" :loading="uploading" size="small">上传流水回执</el-button>
</el-upload>
<div v-if="recordForm.receipt_url" class="receipt-file">
<el-link type="primary" :href="recordForm.receipt_url" target="_blank" :underline="false">
<el-icon><Document /></el-icon>
<span class="receipt-name">{{ recordForm.receipt_name || "流水回执" }}</span>
</el-link>
<el-button link type="danger" size="small" :icon="Delete" @click="clearReceipt">移除</el-button>
</div>
</div>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="recordForm.remark" type="textarea" :rows="2" maxlength="200" placeholder="选填" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="recordVisible = false">取消</el-button>
<el-button type="primary" :loading="recordSaving" @click="submitRecord">保存</el-button>
</template>
</el-dialog>
</div>
</el-drawer>
</template>
<script setup>
import { ref, computed } from "vue";
import { ref, reactive, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Edit, Delete } from "@element-plus/icons-vue";
import { getPaybackDetail, deletePayback } from "@/api/crmPayback";
import { Edit, Delete, Plus, Upload, Document } from "@element-plus/icons-vue";
import {
getPaybackDetail,
deletePayback,
getPaybackRecordList,
createPaybackRecord,
deletePaybackRecord,
} from "@/api/crmPayback";
import { uploadFile } from "@/api/file";
import {
PAYBACK_METHOD_OPTIONS,
paybackCycleText,
paybackMethodText,
paybackStatusText,
paybackStatusTag,
paybackItemStatusText,
paybackItemStatusTag,
paybackPlanOverdue,
paybackItemOverdue,
overdueText,
formatMoney,
} from "../../dict";
@@ -122,50 +171,169 @@ const props = defineProps({
payback: { type: Object, default: null },
});
const emit = defineEmits(["update:visible", "edit", "delete"]);
const emit = defineEmits(["update:visible", "edit", "delete", "refresh"]);
const loading = ref(false);
const detail = ref({});
const items = computed(() => (Array.isArray(detail.value.items) ? detail.value.items : []));
const doneCount = computed(() => items.value.filter((i) => Number(i.status) === 3).length);
/** 回款明细进度百分比（已回款/计划金额，封顶 100 用于进度条显示） */
function paybackItemPercent(row) {
const amount = Number(row.amount) || 0;
const received = Number(row.received_amount) || 0;
if (amount <= 0) return 0;
const pct = Math.round((received / amount) * 100);
return pct > 100 ? 100 : pct;
}
/** 兼容 items 为 JSON 字符串 / 数组两种形态 */
function normalize(row) {
let list = row.items;
if (typeof list === "string" && list.trim()) {
try {
list = JSON.parse(list);
} catch {
list = [];
}
}
return { ...row, items: Array.isArray(list) ? list : [] };
}
/* ---------------------------- 回款明细（回款记录流水） ---------------------------- */
const recordLoading = ref(false);
const records = ref([]);
/** 已登记回款累计（与计划表的已回款金额一致） */
const receivedSum = computed(() =>
records.value.reduce((sum, r) => sum + (Number(r.amount) || 0), 0)
);
async function loadDetail() {
// 先用列表行数据回显，再拉取详情补充完整明细
detail.value = normalize(props.payback || {});
// 先用列表行数据回显，再拉取详情补充完整信息
detail.value = props.payback || {};
const id = props.payback?.id;
if (!id) return;
loading.value = true;
try {
const res = await getPaybackDetail(id);
detail.value = normalize(res?.data || {});
detail.value = res?.data || detail.value;
} catch (e) {
// 详情拉取失败时保留列表行数据
} finally {
loading.value = false;
}
await fetchRecords();
}
/** 拉取当前计划下的回款记录（一笔一条） */
async function fetchRecords() {
const id = props.payback?.id;
if (!id) {
records.value = [];
return;
}
recordLoading.value = true;
try {
const res = await getPaybackRecordList({ payback_id: id });
records.value = res?.data?.list || [];
} catch (e) {
records.value = [];
ElMessage.error(e.message || "查询回款记录失败");
} finally {
recordLoading.value = false;
}
}
/** 仅刷新计划详情（拿最新的已回款金额与状态） */
async function reloadDetail() {
const id = props.payback?.id;
if (!id) return;
try {
const res = await getPaybackDetail(id);
if (res?.data) detail.value = res.data;
} catch (e) {
// 忽略
}
}
/* ---------------------------- 新建回款记录 ---------------------------- */
const recordVisible = ref(false);
const recordSaving = ref(false);
const recordForm = reactive({
amount: 0,
received_date: "",
pay_method: 1,
receipt_url: "",
receipt_name: "",
remark: "",
});
/** 今日日期（默认回款日期） */
function todayStr() {
const d = new Date();
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${d.getFullYear()}-${m}-${day}`;
}
/** 打开新建回款记录（计划已固定为当前详情） */
function openRecord() {
Object.assign(recordForm, {
amount: 0,
received_date: todayStr(),
pay_method: detail.value.pay_method || 1,
receipt_url: "",
receipt_name: "",
remark: "",
});
recordVisible.value = true;
}
const uploading = ref(false);
async function handleReceiptUpload(options) {
const file = options.file;
uploading.value = true;
try {
const fd = new FormData();
fd.append("file", file);
const res = await uploadFile(fd);
const data = res?.data || {};
recordForm.receipt_url = data.url || "";
recordForm.receipt_name = data.name || file.name;
ElMessage.success("上传成功");
} catch (e) {
ElMessage.error(e.message || "上传失败");
} finally {
uploading.value = false;
}
}
function clearReceipt() {
recordForm.receipt_url = "";
recordForm.receipt_name = "";
}
async function submitRecord() {
if (!detail.value.id) return;
if (!(Number(recordForm.amount) > 0)) {
ElMessage.warning("请填写本次回款金额");
return;
}
recordSaving.value = true;
try {
await createPaybackRecord({
payback_id: detail.value.id,
amount: Number(recordForm.amount) || 0,
received_date: recordForm.received_date || "",
pay_method: recordForm.pay_method,
receipt_url: recordForm.receipt_url,
receipt_name: recordForm.receipt_name,
remark: recordForm.remark,
});
ElMessage.success("回款记录已创建");
recordVisible.value = false;
// 刷新明细与计划汇总（已回款金额、状态随之变化）
await fetchRecords();
await reloadDetail();
emit("refresh");
} catch (e) {
ElMessage.error(e.message || "创建失败");
} finally {
recordSaving.value = false;
}
}
async function handleDeleteRecord(row) {
try {
await ElMessageBox.confirm(
`确定删除 ${row.received_date || "该"} 的这笔回款（￥${formatMoney(row.amount)}）吗？`,
"删除确认",
{ type: "warning" }
);
await deletePaybackRecord(row.id);
ElMessage.success("删除成功");
await fetchRecords();
await reloadDetail();
emit("refresh");
} catch (e) {
if (e !== "cancel") ElMessage.error(e.message || "删除失败");
}
}
async function handleDelete() {
@@ -222,6 +390,12 @@ async function handleDelete() {
font-weight: 600;
margin-bottom: 10px;
.section-right {
display: flex;
align-items: center;
gap: 12px;
}
.section-tip {
font-size: 12px;
font-weight: 400;
@@ -239,20 +413,17 @@ async function handleDelete() {
font-weight: 600;
}
.progress-cell {
display: flex;
flex-direction: column;
gap: 4px;
.receipt-block {
width: 100%;
.progress-top {
.receipt-file {
margin-top: 8px;
display: flex;
align-items: baseline;
gap: 4px;
font-size: 12px;
color: var(--el-text-color-secondary);
align-items: center;
gap: 8px;
.progress-sep {
color: var(--el-text-color-placeholder);
.receipt-name {
margin-left: 4px;
}
}
}
backend/src/views/apps/crm/payback/index.vue
+131 -477
View File
@@ -3,360 +3,169 @@
<div class="page-header">
<div>
<h2>回款管理</h2>
<p>针对于合同的回款计划创建与回款进度跟踪</p>
<p>针对于合同的回款计划创建与回款明细跟踪（点击「详情」登记一笔笔回款）</p>
</div>
<div class="header-actions">
<el-button :icon="Refresh" @click="refreshAll">刷新</el-button>
<el-button :icon="Refresh" @click="fetchList">刷新</el-button>
<el-button type="primary" :icon="Plus" @click="openCreate">新建回款计划</el-button>
</div>
</div>
<el-tabs v-model="activeTab" class="payback-tabs" @tab-change="handleTabChange">
<el-tab-pane label="回款计划" name="plan" />
<el-tab-pane label="回款进度" name="progress" />
</el-tabs>
<!-- ============================ 回款计划 ============================ -->
<template v-if="activeTab === 'plan'">
<div class="stat-cards">
<div class="stat-card">
<span class="stat-label">回款计划数</span>
<span class="stat-value">{{ pagination.total }}</span>
</div>
<div class="stat-card">
<span class="stat-label">计划回款总额</span>
<span class="stat-value primary">￥{{ formatMoney(summary.total_amount) }}</span>
</div>
<div class="stat-card">
<span class="stat-label">已回款金额</span>
<span class="stat-value success">￥{{ formatMoney(summary.received_amount) }}</span>
</div>
<div class="stat-card">
<span class="stat-label">待回款金额</span>
<span class="stat-value warning">￥{{ formatMoney(summary.pending_amount) }}</span>
</div>
<div class="stat-cards">
<div class="stat-card">
<span class="stat-label">回款计划数</span>
<span class="stat-value">{{ pagination.total }}</span>
</div>
<div class="filter-bar">
<el-form :inline="true" :model="filters" @submit.prevent>
<el-form-item>
<el-input
v-model="filters.keyword"
clearable
placeholder="搜索合同 / 客户 / 负责人"
:prefix-icon="Search"
style="width: 240px"
@keyup.enter="handleSearch"
/>
</el-form-item>
<el-form-item label="回款周期">
<el-select v-model="filters.plan_type" clearable placeholder="全部" style="width: 110px">
<el-option v-for="i in PAYBACK_CYCLE_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 110px">
<el-option v-for="i in PAYBACK_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
</el-form-item>
</el-form>
<div class="stat-card">
<span class="stat-label">计划回款总额</span>
<span class="stat-value primary">￥{{ formatMoney(summary.total_amount) }}</span>
</div>
<div class="stat-card">
<span class="stat-label">已回款金额</span>
<span class="stat-value success">￥{{ formatMoney(summary.received_amount) }}</span>
</div>
<div class="stat-card">
<span class="stat-label">待回款金额</span>
<span class="stat-value warning">￥{{ formatMoney(summary.pending_amount) }}</span>
</div>
</div>
<div class="table-container" v-loading="loading">
<el-table :data="tableData" stripe border row-key="id">
<el-table-column label="状态" width="90" align="center" fixed>
<template #default="{ row }">
<el-tag :type="paybackStatusTag(row.status)" size="small">{{ paybackStatusText(row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="合同名称" min-width="180" show-overflow-tooltip fixed>
<template #default="{ row }">
<span class="name-link" @click="openDetail(row)">{{ row.contract_name || "-" }}</span>
</template>
</el-table-column>
<el-table-column label="客户名称" min-width="150" show-overflow-tooltip>
<template #default="{ row }">{{ row.customer_name || "-" }}</template>
</el-table-column>
<el-table-column label="回款周期" width="90" align="center">
<template #default="{ row }">
<el-tag size="small" effect="plain">{{ paybackCycleText(row.plan_type) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="回款方式" width="110" align="center">
<template #default="{ row }">{{ paybackMethodText(row.pay_method) }}</template>
</el-table-column>
<el-table-column label="合同总金额" width="130" align="right">
<template #default="{ row }">{{ formatMoney(row.contract_amount) }}</template>
</el-table-column>
<el-table-column label="计划回款总额" width="130" align="right">
<template #default="{ row }">{{ formatMoney(row.total_amount) }}</template>
</el-table-column>
<el-table-column label="已回款" width="120" align="right">
<template #default="{ row }">{{ formatMoney(row.received_amount) }}</template>
</el-table-column>
<el-table-column label="回款进度" width="150" align="center">
<template #default="{ row }">
<el-progress :percentage="paybackPercent(row)" :stroke-width="10" />
</template>
</el-table-column>
<el-table-column label="负责人" width="90">
<template #default="{ row }">{{ row.owner_user_name || "-" }}</template>
</el-table-column>
<el-table-column label="提前提醒" width="90" align="center">
<template #default="{ row }">{{ row.remind_days ? `${row.remind_days}天` : "-" }}</template>
</el-table-column>
<el-table-column label="逾期" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="paybackPlanOverdue(row).overdue" type="danger" size="small" effect="dark">{{ overdueText(paybackPlanOverdue(row).days) }}</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<template #empty><el-empty description="暂无回款计划" :image-size="80" /></template>
</el-table>
<div class="pagination">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:total="pagination.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSearch"
@current-change="fetchList"
<div class="filter-bar">
<el-form :inline="true" :model="filters" @submit.prevent>
<el-form-item>
<el-input
v-model="filters.keyword"
clearable
placeholder="搜索合同 / 客户 / 负责人"
:prefix-icon="Search"
style="width: 240px"
@keyup.enter="handleSearch"
/>
</div>
</div>
</template>
</el-form-item>
<el-form-item label="回款周期">
<el-select v-model="filters.plan_type" clearable placeholder="全部" style="width: 110px">
<el-option v-for="i in PAYBACK_CYCLE_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="filters.status" clearable placeholder="全部" style="width: 110px">
<el-option v-for="i in PAYBACK_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button :icon="Refresh" @click="resetFilters">重置</el-button>
</el-form-item>
</el-form>
</div>
<!-- ============================ 回款进度 ============================ -->
<template v-else>
<div class="stat-cards">
<div class="stat-card">
<span class="stat-label">分期总数</span>
<span class="stat-value">{{ progressList.length }}</span>
</div>
<div class="stat-card">
<span class="stat-label">计划回款总额</span>
<span class="stat-value primary">￥{{ formatMoney(progressSummary.total_planned) }}</span>
</div>
<div class="stat-card">
<span class="stat-label">已回款金额</span>
<span class="stat-value success">￥{{ formatMoney(progressSummary.total_received) }}</span>
</div>
<div class="stat-card">
<span class="stat-label">待回款金额</span>
<span class="stat-value warning">
￥{{ formatMoney((progressSummary.total_planned || 0) - (progressSummary.total_received || 0)) }}
</span>
</div>
</div>
<div class="table-container" v-loading="loading">
<el-table :data="tableData" stripe border row-key="id">
<el-table-column label="状态" width="90" align="center" fixed>
<template #default="{ row }">
<el-tag :type="paybackStatusTag(row.status)" size="small">{{ paybackStatusText(row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="逾期" width="120" align="center" fixed>
<template #default="{ row }">
<el-tag v-if="paybackPlanOverdue(row).overdue" type="danger" size="small" effect="dark">
{{ overdueText(paybackPlanOverdue(row).days) }}
</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="合同名称" min-width="180" show-overflow-tooltip fixed>
<template #default="{ row }">
<span class="name-link" @click="openDetail(row)">{{ row.contract_name || "-" }}</span>
</template>
</el-table-column>
<el-table-column label="客户名称" min-width="150" show-overflow-tooltip>
<template #default="{ row }">{{ row.customer_name || "-" }}</template>
</el-table-column>
<el-table-column label="回款周期" width="90" align="center">
<template #default="{ row }">
<el-tag size="small" effect="plain">{{ paybackCycleText(row.plan_type) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="回款方式" width="110" align="center">
<template #default="{ row }">{{ paybackMethodText(row.pay_method) }}</template>
</el-table-column>
<el-table-column label="合同总金额" width="130" align="right">
<template #default="{ row }">{{ formatMoney(row.contract_amount) }}</template>
</el-table-column>
<el-table-column label="计划回款总额" width="130" align="right">
<template #default="{ row }">{{ formatMoney(row.total_amount) }}</template>
</el-table-column>
<el-table-column label="已回款" width="120" align="right">
<template #default="{ row }">{{ formatMoney(row.received_amount) }}</template>
</el-table-column>
<el-table-column label="回款进度" width="150" align="center">
<template #default="{ row }">
<el-progress :percentage="paybackPercent(row)" :stroke-width="10" />
</template>
</el-table-column>
<el-table-column label="负责人" width="90">
<template #default="{ row }">{{ row.owner_user_name || "-" }}</template>
</el-table-column>
<el-table-column label="提前提醒" width="90" align="center">
<template #default="{ row }">{{ row.remind_days ? `${row.remind_days}天` : "-" }}</template>
</el-table-column>
<el-table-column label="操作" width="160" align="center" class-name="op-col" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="openDetail(row)">详情</el-button>
<el-button link type="primary" size="small" @click="openEdit(row)">编辑</el-button>
<el-button link type="danger" size="small" @click="handleRowDelete(row)">删除</el-button>
</template>
</el-table-column>
<template #empty><el-empty description="暂无回款计划" :image-size="80" /></template>
</el-table>
<div class="filter-bar">
<el-form :inline="true" :model="progressFilters" @submit.prevent>
<el-form-item>
<el-input
v-model="progressFilters.keyword"
clearable
placeholder="搜索合同 / 客户 / 负责人"
:prefix-icon="Search"
style="width: 240px"
@keyup.enter="fetchProgress"
/>
</el-form-item>
<el-form-item label="回款状态">
<el-select v-model="progressFilters.status" clearable placeholder="全部" style="width: 120px">
<el-option v-for="i in PAYBACK_ITEM_STATUS_OPTIONS" :key="i.value" :label="i.label" :value="i.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="fetchProgress">查询</el-button>
<el-button :icon="Refresh" @click="resetProgressFilters">重置</el-button>
</el-form-item>
</el-form>
<div class="pagination">
<el-pagination
v-model:current-page="pagination.page"
v-model:page-size="pagination.pageSize"
:total="pagination.total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSearch"
@current-change="fetchList"
/>
</div>
<div class="table-container" v-loading="progressLoading">
<el-table :data="pagedProgress" stripe border row-key="rowKey">
<el-table-column label="回款周期" width="90" align="center" fixed>
<template #default="{ row }">{{ paybackCycleText(row.plan_type) }}</template>
</el-table-column>
<el-table-column label="明细" min-width="140" show-overflow-tooltip>
<template #default="{ row }">{{ row.name || `第${row.seq}期` }}</template>
</el-table-column>
<el-table-column label="进度百分比" width="100" align="center">
<template #default="{ row }">{{ row.percent ? `${row.percent}%` : "-" }}</template>
</el-table-column>
<el-table-column label="计划金额" width="120" align="right">
<template #default="{ row }">{{ formatMoney(row.amount) }}</template>
</el-table-column>
<el-table-column label="计划日期" width="110" align="center">
<template #default="{ row }">{{ row.plan_date || "-" }}</template>
</el-table-column>
<el-table-column label="已回款" width="120" align="right">
<template #default="{ row }">{{ formatMoney(row.received_amount) }}</template>
</el-table-column>
<el-table-column label="回款日期" width="110" align="center">
<template #default="{ row }">{{ (row.received_date && row.received_date !== "<nil>") ? row.received_date : "-" }}</template>
</el-table-column>
<el-table-column label="合同名称" min-width="180" show-overflow-tooltip >
<template #default="{ row }">{{ row.contract_name || "-" }}</template>
</el-table-column>
<el-table-column label="客户名称" min-width="140" show-overflow-tooltip>
<template #default="{ row }">{{ row.customer_name || "-" }}</template>
</el-table-column>
<el-table-column label="逾期" width="100" align="center">
<template #default="{ row }">
<el-tag v-if="paybackItemOverdue(row).overdue" type="danger" size="small" effect="dark">
{{ overdueText(paybackItemOverdue(row).days) }}
</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="paybackItemStatusTag(row.status)" size="small">
{{ paybackItemStatusText(row.status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="流水回执" width="110" align="center">
<template #default="{ row }">
<el-link v-if="row.receipt_url" type="primary" :href="row.receipt_url" target="_blank" :underline="false">查看回执</el-link>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="负责人" width="90">
<template #default="{ row }">{{ row.owner_user_name || "-" }}</template>
</el-table-column>
<el-table-column label="操作" width="100" align="center" class-name="op-col" fixed="right">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="openReceive(row)">回款登记</el-button>
</template>
</el-table-column>
<template #empty><el-empty description="暂无回款进度" :image-size="80" /></template>
</el-table>
<div class="pagination">
<el-pagination
v-model:current-page="progressPagination.page"
v-model:page-size="progressPagination.pageSize"
:total="progressList.length"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next"
/>
</div>
</div>
</template>
</div>
<!-- 新建 / 编辑回款计划 -->
<PaybackCreate
v-model:visible="createVisible"
:edit-data="currentRow"
@success="refreshAll"
/>
<PaybackCreate v-model:visible="createVisible" :edit-data="currentRow" @success="fetchList" />
<!-- 回款计划详情 -->
<!-- 回款计划详情：下方为回款明细（一笔条回款记录），可新建回款记录 -->
<PaybackDetail
v-model:visible="detailVisible"
:payback="currentRow"
@edit="handleDetailEdit"
@delete="handleDetailDelete"
@refresh="fetchList"
/>
<!-- 回款登记 -->
<el-dialog v-model="receiveVisible" title="回款登记" width="440px">
<el-form :model="receiveForm" label-width="90px">
<el-form-item label="合同名称">
<span>{{ receiveForm.contract_name || "-" }}</span>
</el-form-item>
<el-form-item label="明细">
<span>{{ receiveForm.name || `第${receiveForm.seq}期` }}</span>
</el-form-item>
<el-form-item label="计划金额">
<span class="amount">￥{{ formatMoney(receiveForm.amount) }}</span>
</el-form-item>
<el-form-item label="实收金额">
<el-input-number
v-model="receiveForm.received_amount"
:min="0"
:precision="2"
:controls="false"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="回款日期">
<el-date-picker
v-model="receiveForm.received_date"
type="date"
value-format="YYYY-MM-DD"
placeholder="选择日期"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="流水回执">
<div class="receipt-block">
<el-upload
:show-file-list="false"
:http-request="handleReceiptUpload"
:disabled="uploading"
accept=".jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx"
>
<el-button :icon="Upload" :loading="uploading" size="small">上传流水回执</el-button>
</el-upload>
<div v-if="receiveForm.receipt_url" class="receipt-file">
<el-link type="primary" :href="receiveForm.receipt_url" target="_blank" :underline="false">
<el-icon><Document /></el-icon>
<span class="receipt-name">{{ receiveForm.receipt_name || "流水回执" }}</span>
</el-link>
<el-button link type="danger" size="small" :icon="Delete" @click="clearReceipt">移除</el-button>
</div>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="receiveVisible = false">取消</el-button>
<el-button type="primary" :loading="receiveSaving" @click="submitReceive">保存</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Search, Refresh, Upload, Document, Delete } from "@element-plus/icons-vue";
import {
getPaybackList,
deletePayback,
getPaybackProgress,
registerPaybackReceive,
} from "@/api/crmPayback";
import { uploadFile } from "@/api/file";
import { Plus, Search, Refresh } from "@element-plus/icons-vue";
import { getPaybackList, deletePayback } from "@/api/crmPayback";
import PaybackCreate from "./components/create.vue";
import PaybackDetail from "./components/detail.vue";
import {
PAYBACK_CYCLE_OPTIONS,
PAYBACK_STATUS_OPTIONS,
PAYBACK_ITEM_STATUS_OPTIONS,
paybackCycleText,
paybackMethodText,
paybackStatusText,
paybackStatusTag,
paybackItemStatusText,
paybackItemStatusTag,
paybackPlanOverdue,
paybackItemOverdue,
overdueText,
formatMoney,
} from "../dict";
const activeTab = ref("plan");
/* ---------------------------- 回款计划 ---------------------------- */
const loading = ref(false);
const tableData = ref([]);
const createVisible = ref(false);
@@ -407,121 +216,6 @@ function paybackPercent(row) {
return Math.min(100, Math.round(p));
}
/* ---------------------------- 回款进度 ---------------------------- */
const progressLoading = ref(false);
const progressList = ref([]);
const progressSummary = ref({ total_planned: 0, total_received: 0 });
const progressFilters = reactive({ keyword: "", status: "" });
const progressPagination = reactive({ page: 1, pageSize: 20 });
const pagedProgress = computed(() => {
const start = (progressPagination.page - 1) * progressPagination.pageSize;
return progressList.value.slice(start, start + progressPagination.pageSize).map((r) => ({
...r,
rowKey: `${r.payback_id}_${r.seq}`,
}));
});
async function fetchProgress() {
progressLoading.value = true;
try {
const res = await getPaybackProgress({ ...progressFilters });
progressList.value = (res?.data?.list || []).map((r) => ({ ...r, rowKey: `${r.payback_id}_${r.seq}` }));
progressSummary.value = {
total_planned: res?.data?.total_planned || 0,
total_received: res?.data?.total_received || 0,
};
progressPagination.page = 1;
} catch (e) {
progressList.value = [];
progressSummary.value = { total_planned: 0, total_received: 0 };
ElMessage.error(e.message || "查询失败");
} finally {
progressLoading.value = false;
}
}
function resetProgressFilters() {
progressFilters.keyword = "";
progressFilters.status = "";
fetchProgress();
}
/* ---------------------------- 回款登记 ---------------------------- */
const receiveVisible = ref(false);
const receiveSaving = ref(false);
const receiveForm = reactive({
payback_id: null,
seq: 0,
name: "",
contract_name: "",
amount: 0,
received_amount: 0,
received_date: "",
receipt_url: "",
receipt_name: "",
});
function openReceive(row) {
Object.assign(receiveForm, {
payback_id: row.payback_id,
seq: row.seq,
name: row.name,
contract_name: row.contract_name,
amount: row.amount,
received_amount: Number(row.received_amount) || 0,
received_date: (row.received_date && row.received_date !== "<nil>") ? row.received_date : "",
receipt_url: row.receipt_url || "",
receipt_name: row.receipt_name || "",
});
receiveVisible.value = true;
}
/** 上传流水回执（非必填）：复用通用文件上传接口 */
const uploading = ref(false);
async function handleReceiptUpload(options) {
const file = options.file;
uploading.value = true;
try {
const fd = new FormData();
fd.append("file", file);
const res = await uploadFile(fd);
const data = res?.data || {};
receiveForm.receipt_url = data.url || "";
receiveForm.receipt_name = data.name || file.name;
ElMessage.success("上传成功");
} catch (e) {
ElMessage.error(e.message || "上传失败");
} finally {
uploading.value = false;
}
}
function clearReceipt() {
receiveForm.receipt_url = "";
receiveForm.receipt_name = "";
}
async function submitReceive() {
receiveSaving.value = true;
try {
await registerPaybackReceive(receiveForm.payback_id, {
seq: receiveForm.seq,
received_amount: Number(receiveForm.received_amount) || 0,
received_date: receiveForm.received_date || "",
receipt_url: receiveForm.receipt_url,
receipt_name: receiveForm.receipt_name,
});
ElMessage.success("回款登记成功");
receiveVisible.value = false;
fetchProgress();
} catch (e) {
ElMessage.error(e.message || "登记失败");
} finally {
receiveSaving.value = false;
}
}
/* ---------------------------- 通用操作 ---------------------------- */
function openCreate() {
currentRow.value = null;
@@ -544,8 +238,14 @@ function handleDetailEdit(row) {
openEdit(row);
}
/** 详情内点击删除：删除回款计划并刷新列表 */
async function handleDetailDelete(row) {
/** 详情内删除（详情组件已完成确认与删除）：此处只需关闭并刷新列表 */
function handleDetailDelete() {
detailVisible.value = false;
fetchList();
}
/** 列表行删除：确认后删除并刷新 */
async function handleRowDelete(row) {
try {
await ElMessageBox.confirm(
`确定删除合同「${row.contract_name}」的回款计划吗？删除后不可恢复。`,
@@ -554,37 +254,18 @@ async function handleDetailDelete(row) {
);
await deletePayback(row.id);
ElMessage.success("删除成功");
detailVisible.value = false;
refreshAll();
fetchList();
} catch (e) {
if (e !== "cancel") ElMessage.error(e.message || "删除失败");
}
}
function handleTabChange(name) {
if (name === "progress") fetchProgress();
else fetchList();
}
function refreshAll() {
if (activeTab.value === "progress") fetchProgress();
else fetchList();
}
onMounted(fetchList);
</script>
<style lang="less" scoped src="../styles/crm-page.less"></style>
<style lang="less" scoped>
.payback-tabs {
margin-bottom: 4px;
:deep(.el-tabs__header) {
margin-bottom: 12px;
}
}
.stat-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
@@ -625,33 +306,6 @@ onMounted(fetchList);
}
}
.amount {
font-weight: 700;
color: var(--el-color-primary);
}
/* 流水回执上传 */
.receipt-block {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
.receipt-file {
display: flex;
align-items: center;
gap: 8px;
.receipt-name {
margin-left: 4px;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
::deep(.el-table .op-col .cell) {
display: flex;
flex-wrap: wrap;