192 lines
7.5 KiB
Vue
192 lines
7.5 KiB
Vue
<template>
|
||
<div class="receivables-page">
|
||
<div class="page-header">
|
||
<h2>💰 应收款催收</h2>
|
||
<div class="header-right">
|
||
<el-select v-model="owner" size="small" clearable placeholder="按负责人筛选" style="width:140px" @change="loadData">
|
||
<el-option v-for="o in owners" :key="o" :value="o" :label="o" />
|
||
</el-select>
|
||
<el-select v-model="status" size="small" clearable placeholder="按状态筛选" style="width:130px" @change="loadData">
|
||
<el-option value="pending" label="待收款" />
|
||
<el-option value="overdue" label="已逾期" />
|
||
<el-option value="completed" label="已回款" />
|
||
</el-select>
|
||
<el-button type="primary" size="small" @click="loadData">刷新</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 汇总卡片 -->
|
||
<el-row :gutter="16">
|
||
<el-col :span="6"><el-card shadow="never" class="stat-card red"><div class="stat-val">¥{{ (summary.total_balance || 0).toFixed(2) }}万</div><div class="stat-label">应收总额</div></el-card></el-col>
|
||
<el-col :span="6"><el-card shadow="never" class="stat-card orange"><div class="stat-val">¥{{ (summary.overdue_amount || 0).toFixed(2) }}万</div><div class="stat-label">逾期金额 ({{ summary.overdue_count || 0 }}笔)</div></el-card></el-col>
|
||
<el-col :span="6"><el-card shadow="never" class="stat-card green"><div class="stat-val">¥{{ (summary.total_paid || 0).toFixed(2) }}万</div><div class="stat-label">已回款</div></el-card></el-col>
|
||
<el-col :span="6"><el-card shadow="never" class="stat-card blue"><div class="stat-val">{{ summary.completed_count || 0 }}</div><div class="stat-label">已完成笔数</div></el-card></el-col>
|
||
</el-row>
|
||
|
||
<!-- 账龄分布 -->
|
||
<el-row style="margin-top:16px">
|
||
<el-col :span="24">
|
||
<el-card shadow="never">
|
||
<template #header>账龄分布（万元）</template>
|
||
<div ref="agingRef" style="height:220px"></div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 应收明细 -->
|
||
<el-row style="margin-top:16px">
|
||
<el-col :span="24">
|
||
<el-card shadow="never">
|
||
<template #header>应收明细</template>
|
||
<el-table :data="items" size="small" v-loading="loading">
|
||
<el-table-column prop="name" label="客户/单位" min-width="140" />
|
||
<el-table-column prop="owner" label="负责人" width="90" />
|
||
<el-table-column prop="amount" label="金额(万)" width="90">
|
||
<template #default="{ row }"><span style="font-weight:600">¥{{ row.amount }}</span></template>
|
||
</el-table-column>
|
||
<el-table-column prop="paid_amount" label="已回款(万)" width="100" />
|
||
<el-table-column prop="due_date" label="到期日" width="100" />
|
||
<el-table-column prop="aging_label" label="账龄" width="100">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.overdue ? 'danger' : (row.aging_label === '未到期' ? 'success' : 'warning')" size="small">
|
||
{{ row.aging_label }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="status" label="状态" width="80">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.status === 'completed' ? 'success' : (row.overdue ? 'danger' : 'info')" size="small">
|
||
{{ row.status === 'completed' ? '已回款' : row.overdue ? '已逾期' : '待收款' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="120">
|
||
<template #default="{ row }">
|
||
<el-button v-if="row.status !== 'completed'" type="primary" size="small" @click="openPayment(row)">登记回款</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 回款登记弹窗 -->
|
||
<el-dialog v-model="paymentVisible" title="登记回款" width="420px" append-to-body>
|
||
<el-form label-width="90px">
|
||
<el-form-item label="客户">{{ currentRow?.name }}</el-form-item>
|
||
<el-form-item label="应收金额">¥{{ currentRow?.amount }}万</el-form-item>
|
||
<el-form-item label="回款金额">
|
||
<el-input-number v-model="paymentAmount" :min="0" :max="currentRow?.amount || 0" :precision="2" style="width:180px" />
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input v-model="paymentNote" type="textarea" :rows="2" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="paymentVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="paying" @click="submitPayment">确认回款</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
import api from '@/api'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const items = ref<any[]>([])
|
||
const owners = ref<string[]>([])
|
||
const summary = ref<any>({})
|
||
const owner = ref('')
|
||
const status = ref('')
|
||
const loading = ref(false)
|
||
|
||
const paymentVisible = ref(false)
|
||
const currentRow = ref<any>(null)
|
||
const paymentAmount = ref(0)
|
||
const paymentNote = ref('')
|
||
const paying = ref(false)
|
||
|
||
const agingRef = ref<HTMLElement>()
|
||
|
||
async function loadData() {
|
||
loading.value = true
|
||
try {
|
||
const params: any = {}
|
||
if (owner.value) params.owner = owner.value
|
||
if (status.value) params.status = status.value
|
||
const r: any = await api.get('/cash/receivables', { params })
|
||
const d = r.data || r || {}
|
||
summary.value = d.summary || {}
|
||
owners.value = d.owners || []
|
||
const rawItems = d.data || d.items || d.receivables || []
|
||
items.value = rawItems
|
||
await nextTick()
|
||
renderAging()
|
||
} catch (e) {
|
||
ElMessage.error('加载应收数据失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function renderAging() {
|
||
if (!agingRef.value) return
|
||
const chart = echarts.init(agingRef.value)
|
||
const aging = summary.value.aging || {}
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis' },
|
||
xAxis: { type: 'category', data: Object.keys(aging) },
|
||
yAxis: { type: 'value', name: '万元' },
|
||
series: [{
|
||
type: 'bar',
|
||
data: Object.values(aging),
|
||
itemStyle: { color: '#409EFF', borderRadius: [4, 4, 0, 0] },
|
||
label: { show: true, position: 'top' },
|
||
}],
|
||
})
|
||
}
|
||
|
||
function openPayment(row: any) {
|
||
currentRow.value = row
|
||
paymentAmount.value = row.amount || 0
|
||
paymentNote.value = ''
|
||
paymentVisible.value = true
|
||
}
|
||
|
||
async function submitPayment() {
|
||
if (!currentRow.value || paymentAmount.value <= 0) return
|
||
paying.value = true
|
||
try {
|
||
await api.post(`/cash/receivables/${currentRow.value.id}/payment`, {
|
||
amount: paymentAmount.value,
|
||
note: paymentNote.value,
|
||
})
|
||
ElMessage.success('回款登记成功')
|
||
paymentVisible.value = false
|
||
loadData()
|
||
} catch (e) {
|
||
ElMessage.error('回款登记失败')
|
||
} finally {
|
||
paying.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(loadData)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.receivables-page { max-width: 1400px; margin: 0 auto; padding: 16px; }
|
||
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||
.header-right { display: flex; gap: 8px; }
|
||
.stat-card { text-align: center; }
|
||
.stat-val { font-size: 24px; font-weight: 700; }
|
||
.stat-label { font-size: 12px; color: #888; margin-top: 4px; }
|
||
.red .stat-val { color: #f56c6c; }
|
||
.orange .stat-val { color: #e6a23c; }
|
||
.green .stat-val { color: #67c23a; }
|
||
.blue .stat-val { color: #409EFF; }
|
||
</style>
|