581 lines
18 KiB
Vue
581 lines
18 KiB
Vue
<template>
|
|
<div class="p-3">
|
|
<!-- TimeOption Filter -->
|
|
<TimeOption
|
|
v-bind="{
|
|
pagename: 'debt_report',
|
|
api: 'transaction',
|
|
timeopt: { time: 36000, disable: ['add'] },
|
|
filter: { phase: 3 }
|
|
}"
|
|
@option="handleTimeOption"
|
|
@excel="exportExcel"
|
|
@refresh-data="loadData"
|
|
class="mb-3"
|
|
/>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="has-text-centered py-6">
|
|
<p class="has-text-grey mb-3">Đang tải dữ liệu...</p>
|
|
<progress class="progress is-small is-primary" max="100"></progress>
|
|
</div>
|
|
|
|
<div class="" v-else>
|
|
<!-- Table -->
|
|
<div
|
|
v-if="filteredRows.length > 0"
|
|
class="table-container"
|
|
style="overflow-x: auto; max-width: 100%;"
|
|
>
|
|
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth debt-table">
|
|
<thead>
|
|
<tr>
|
|
<!-- Fixed columns (sticky left) -->
|
|
<th
|
|
rowspan="2"
|
|
class="fixed-col has-background-primary has-text-white has-text-centered"
|
|
>
|
|
STT
|
|
</th>
|
|
<th rowspan="2" class="fixed-col has-background-primary has-text-white">
|
|
Mã KH
|
|
</th>
|
|
<th rowspan="2" class="fixed-col has-background-primary has-text-white">
|
|
Mã Căn
|
|
</th>
|
|
<th rowspan="2" class="fixed-col has-background-primary has-text-white">
|
|
Ngày ký HĐ
|
|
</th>
|
|
<th rowspan="2" class="fixed-col has-background-primary has-text-white">
|
|
Giá trị HĐMB
|
|
</th>
|
|
<th rowspan="2" class="fixed-col has-background-primary has-text-white">
|
|
Tiền nộp theo HĐV/TTTHNV
|
|
</th>
|
|
<th rowspan="2" class="fixed-col has-background-primary has-text-white">
|
|
Tỷ lệ
|
|
</th>
|
|
|
|
<!-- Scrollable columns -->
|
|
<th
|
|
v-for="(sch, si) in scheduleHeaders"
|
|
:key="si"
|
|
:colspan="6"
|
|
class="has-text-centered has-background-primary has-text-white"
|
|
>
|
|
{{ sch.label }}
|
|
</th>
|
|
|
|
<th rowspan="2" class="has-background-primary has-text-white">
|
|
Số tiền quá hạn
|
|
</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<template v-for="(sch, si) in scheduleHeaders" :key="si">
|
|
<th class="has-background-primary has-text-white sub-header">Ngày</th>
|
|
<th class="has-background-primary has-text-white sub-header">Số tiền</th>
|
|
<th class="has-background-primary has-text-white sub-header">Lũy kế sang đợt</th>
|
|
<th class="has-background-primary has-text-white sub-header">Số tiền đã thực thanh toán</th>
|
|
<th class="has-background-primary has-text-white sub-header">Tỷ lệ</th>
|
|
<th class="has-background-primary has-text-white sub-header-remain">Dư nợ</th>
|
|
</template>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="(row, ri) in filteredRows" :key="ri">
|
|
<!-- Fixed columns -->
|
|
<td class="fixed-col has-text-centered">{{ ri + 1 }}</td>
|
|
<td class="fixed-col">{{ row.customer_code }}</td>
|
|
<td class="fixed-col has-text-weight-semibold has-text-primary">{{ row.trade_code }}</td>
|
|
<td class="fixed-col">{{ row.contract_date }}</td>
|
|
<td class="fixed-col has-text-right">{{ fmt(row.sale_price) }}</td>
|
|
<td class="fixed-col has-text-right has-text-weight-semibold has-background-warning-light">
|
|
{{ fmt(row.ttthnv_paid) }}
|
|
</td>
|
|
<td class="fixed-col has-text-right has-background-success-light">
|
|
{{ pct(row.ttthnv_paid, row.sale_price) }}
|
|
</td>
|
|
|
|
<!-- Scrollable columns -->
|
|
<template v-for="(sch, si) in scheduleHeaders" :key="si">
|
|
<template v-if="row.schedules[si]">
|
|
<td>{{ row.schedules[si].to_date }}</td>
|
|
<td class="has-text-right">{{ fmt(row.schedules[si].amount) }}</td>
|
|
<td class="has-text-right has-text-info">{{ fmt(row.schedules[si].luy_ke_sang_dot) }}</td>
|
|
<td class="has-text-right has-text-weight-semibold has-text-success">
|
|
{{ fmt(row.schedules[si].thuc_thanh_toan) }}
|
|
</td>
|
|
<td
|
|
class="has-text-right"
|
|
:class="pctClass(row.schedules[si].thuc_thanh_toan, row.schedules[si].amount)"
|
|
>
|
|
{{ pct(row.schedules[si].thuc_thanh_toan, row.schedules[si].amount) }}
|
|
</td>
|
|
<td
|
|
class="has-text-right has-text-weight-semibold"
|
|
:class="Number(row.schedules[si].amount_remain) > 0 ? 'has-text-danger' : 'has-text-success'"
|
|
>
|
|
{{ fmt(row.schedules[si].amount_remain) }}
|
|
</td>
|
|
</template>
|
|
<template v-else>
|
|
<td colspan="6" class="has-text-centered has-text-grey-light" style="font-style: italic">—</td>
|
|
</template>
|
|
</template>
|
|
|
|
<td
|
|
class="has-text-right has-text-weight-bold"
|
|
:class="Number(row.overdue) > 0 ? 'has-background-danger-light' : ''"
|
|
>
|
|
{{ Number(row.overdue) > 0 ? fmt(row.overdue) : '—' }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tfoot>
|
|
<tr class="has-background-light">
|
|
<td :colspan="7" class="fixed-col has-text-right has-text-weight-bold">TỔNG CỘNG:</td>
|
|
|
|
<template v-for="(sch, si) in scheduleHeaders" :key="si">
|
|
<td></td>
|
|
<td class="has-text-right has-text-weight-semibold">{{ fmt(colSum(si, 'amount')) }}</td>
|
|
<td></td>
|
|
<td class="has-text-right has-text-weight-semibold has-text-success">
|
|
{{ fmt(colSum(si, 'thuc_thanh_toan')) }}
|
|
</td>
|
|
<td></td>
|
|
<td class="has-text-right has-text-weight-semibold has-text-danger">
|
|
{{ fmt(colSum(si, 'amount_remain')) }}
|
|
</td>
|
|
</template>
|
|
|
|
<td class="has-text-right has-text-weight-bold has-text-danger">
|
|
{{ fmt(totalOverdue) }}
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div v-else class="has-text-centered py-6">
|
|
<p class="has-text-grey">Không có dữ liệu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import TimeOption from '~/components/datatable/TimeOption'
|
|
const { $findapi, $getapi, $dayjs, $copy } = useNuxtApp()
|
|
|
|
const loading = ref(false)
|
|
const rows = ref([])
|
|
const filteredRows = ref([])
|
|
const scheduleHeaders = ref([])
|
|
|
|
const currentFilter = ref(null)
|
|
const currentSearch = ref(null)
|
|
|
|
function handleTimeOption(option) {
|
|
if (!option) {
|
|
currentFilter.value = null
|
|
currentSearch.value = null
|
|
applyFilters()
|
|
return
|
|
}
|
|
|
|
if (option.filter) {
|
|
currentFilter.value = option.filter
|
|
currentSearch.value = null
|
|
applyFilters()
|
|
} else if (option.filter_or) {
|
|
currentFilter.value = null
|
|
currentSearch.value = option.filter_or
|
|
applyFilters()
|
|
}
|
|
}
|
|
|
|
function applyFilters() {
|
|
let filtered = [...rows.value]
|
|
|
|
if (currentFilter.value && currentFilter.value.create_time__date__gte) {
|
|
const filterDate = new Date(currentFilter.value.create_time__date__gte)
|
|
filtered = filtered.filter(row => {
|
|
const contractDate = row.contract_date_raw ? new Date(row.contract_date_raw) : null
|
|
return contractDate && contractDate >= filterDate
|
|
})
|
|
}
|
|
|
|
if (currentSearch.value) {
|
|
const searchTerms = Object.values(currentSearch.value).map(v =>
|
|
String(v).toLowerCase().replace('__icontains', '')
|
|
)
|
|
filtered = filtered.filter(row => {
|
|
const searchableText = [
|
|
row.customer_code,
|
|
row.customer_name,
|
|
row.trade_code,
|
|
row.contract_date,
|
|
String(row.sale_price)
|
|
].join(' ').toLowerCase()
|
|
return searchTerms.some(term => searchableText.includes(term))
|
|
})
|
|
}
|
|
|
|
filteredRows.value = filtered
|
|
}
|
|
|
|
async function loadData() {
|
|
loading.value = true
|
|
rows.value = []
|
|
filteredRows.value = []
|
|
scheduleHeaders.value = []
|
|
|
|
try {
|
|
const txnConn = $copy($findapi('transaction'))
|
|
txnConn.params = {
|
|
filter: { phase: 3 },
|
|
values: 'id,code,date,customer,customer__code,customer__fullname,sale_price,amount_received,amount_remain,product,product__trade_code,phase',
|
|
sort: 'id'
|
|
}
|
|
|
|
const detailConn = $copy($findapi('reservation'))
|
|
detailConn.params = {
|
|
filter: { transaction__phase: 3, phase: 3 },
|
|
values: 'id,transaction,phase,amount,amount_received,amount_remaining,status',
|
|
sort: 'transaction'
|
|
}
|
|
|
|
const schConn = $copy($findapi('payment_schedule'))
|
|
schConn.params = {
|
|
filter: { txn_detail__phase: 3 },
|
|
values:
|
|
'id,code,cycle,to_date,from_date,amount,paid_amount,amount_remain,remain_amount,status,status__name,txn_detail,txn_detail__transaction,txn_detail__phase,txn_detail__amount_received',
|
|
sort: 'txn_detail__transaction,cycle'
|
|
}
|
|
|
|
const ttthnvConn = $copy($findapi('reservation'))
|
|
ttthnvConn.params = {
|
|
filter: { transaction__phase: 3, phase: 4 },
|
|
values: 'id,transaction,phase,amount,amount_received,amount_remaining,status',
|
|
sort: 'transaction'
|
|
}
|
|
|
|
const [txnRs, detailRs, schRs, ttthnvRs] = await $getapi([
|
|
txnConn,
|
|
detailConn,
|
|
schConn,
|
|
ttthnvConn
|
|
])
|
|
|
|
const transactions = txnRs?.data?.rows || []
|
|
const details = detailRs?.data?.rows || []
|
|
const schedules = schRs?.data?.rows || []
|
|
const ttthnvList = ttthnvRs?.data?.rows || []
|
|
|
|
if (!transactions.length) {
|
|
loading.value = false
|
|
return
|
|
}
|
|
|
|
// TTTHNV map
|
|
const ttthnvMap = {}
|
|
ttthnvList.forEach(t => {
|
|
const tid = t.transaction
|
|
ttthnvMap[tid] = (ttthnvMap[tid] || 0) + Number(t.amount_received || 0)
|
|
})
|
|
|
|
// Group schedules by transaction
|
|
const schByTxn = {}
|
|
schedules.forEach(s => {
|
|
const tid = s.txn_detail__transaction
|
|
if (!schByTxn[tid]) schByTxn[tid] = []
|
|
schByTxn[tid].push(s)
|
|
})
|
|
|
|
// Tìm số đợt tối đa
|
|
let maxCycles = 0
|
|
Object.values(schByTxn).forEach(list => {
|
|
const paymentList = list.filter(s => Number(s.cycle) > 0)
|
|
if (paymentList.length > maxCycles) maxCycles = paymentList.length
|
|
})
|
|
|
|
scheduleHeaders.value = Array.from({ length: maxCycles }, (_, i) => ({
|
|
label: `L0${i + 1}`,
|
|
index: i
|
|
}))
|
|
|
|
rows.value = transactions.map(txn => {
|
|
const txnSchedules = (schByTxn[txn.id] || [])
|
|
.filter(s => Number(s.cycle) > 0)
|
|
.sort((a, b) => Number(a.cycle) - Number(b.cycle))
|
|
|
|
const ttthnvPaid = ttthnvMap[txn.id] || 0
|
|
const salePriceNum = Number(txn.sale_price || 0)
|
|
|
|
// ───────────────────────────────────────────────
|
|
// QUAN TRỌNG: Theo yêu cầu mới nhất của bạn
|
|
// Lũy kế HĐCN = TTTHNV
|
|
const luyKe = ttthnvPaid
|
|
// ───────────────────────────────────────────────
|
|
|
|
// Phân bổ TTTHNV dần vào từng đợt → tính lũy kế sang đợt
|
|
let remainingTTTHNV = ttthnvPaid
|
|
|
|
const schedulesWithCalc = txnSchedules.map(sch => {
|
|
const scheduleAmount = Number(sch.amount || 0)
|
|
|
|
// Lũy kế sang đợt = min(remaining TTTHNV, số tiền đợt)
|
|
const luyKeSangDot = Math.min(remainingTTTHNV, scheduleAmount)
|
|
|
|
// Số tiền đã thực thanh toán = paid_amount - lũy kế sang đợt
|
|
const paidAmountFromSchedule = Number(sch.paid_amount || 0)
|
|
const thucThanhToan = Math.max(0, paidAmountFromSchedule - luyKeSangDot)
|
|
|
|
// Dư nợ = số tiền đợt - lũy kế sang đợt - thực thanh toán
|
|
const amountRemain = Math.max(0, scheduleAmount - luyKeSangDot - thucThanhToan)
|
|
|
|
remainingTTTHNV -= luyKeSangDot
|
|
remainingTTTHNV = Math.max(0, remainingTTTHNV)
|
|
|
|
return {
|
|
to_date: sch.to_date ? $dayjs(sch.to_date).format('DD/MM/YYYY') : '—',
|
|
amount: scheduleAmount,
|
|
luy_ke_sang_dot: luyKeSangDot,
|
|
thuc_thanh_toan: thucThanhToan,
|
|
amount_remain: amountRemain,
|
|
status: sch.status
|
|
}
|
|
})
|
|
|
|
// Tính quá hạn
|
|
const todayDate = new Date()
|
|
const overdue = txnSchedules.reduce((sum, sch, idx) => {
|
|
const toDate = sch.to_date ? new Date(sch.to_date) : null
|
|
const remain = schedulesWithCalc[idx]?.amount_remain || 0
|
|
if (toDate && toDate < todayDate && remain > 0) {
|
|
return sum + remain
|
|
}
|
|
return sum
|
|
}, 0)
|
|
|
|
const paddedSchedules = Array.from({ length: maxCycles }, (_, i) => schedulesWithCalc[i] || null)
|
|
|
|
return {
|
|
customer_code: txn.customer__code || '',
|
|
customer_name: txn.customer__fullname || '',
|
|
trade_code: txn.product__trade_code || txn.code || '',
|
|
contract_date: txn.date ? $dayjs(txn.date).format('DD/MM/YYYY') : '—',
|
|
contract_date_raw: txn.date,
|
|
sale_price: salePriceNum,
|
|
ttthnv_paid: ttthnvPaid,
|
|
luy_ke: luyKe, // ← chính là TTTHNV
|
|
schedules: paddedSchedules,
|
|
overdue: overdue
|
|
}
|
|
})
|
|
|
|
filteredRows.value = rows.value
|
|
} catch (e) {
|
|
console.error('BaoCaoCongNo error:', e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function fmt(val) {
|
|
const n = Number(val)
|
|
if (isNaN(n) || (!n && n !== 0)) return '—'
|
|
return n.toLocaleString('vi-VN')
|
|
}
|
|
|
|
function pct(num, denom) {
|
|
const n = Number(num)
|
|
const d = Number(denom)
|
|
if (!d || isNaN(n)) return '—'
|
|
return (n / d * 100).toFixed(1) + '%'
|
|
}
|
|
|
|
function pctClass(paid, amount) {
|
|
const p = Number(paid)
|
|
const a = Number(amount)
|
|
if (isNaN(p) || isNaN(a) || !a) return ''
|
|
const ratio = p / a
|
|
if (ratio >= 1) return 'has-text-success'
|
|
if (ratio >= 0.5) return 'has-text-info'
|
|
return 'has-text-danger'
|
|
}
|
|
|
|
function colSum(scheduleIndex, field) {
|
|
return filteredRows.value.reduce((sum, row) => {
|
|
const sch = row.schedules[scheduleIndex]
|
|
return sum + (sch ? Number(sch[field] || 0) : 0)
|
|
}, 0)
|
|
}
|
|
|
|
const totalOverdue = computed(() =>
|
|
filteredRows.value.reduce((s, r) => s + Number(r.overdue || 0), 0)
|
|
)
|
|
|
|
function exportExcel() {
|
|
const headers = [
|
|
'STT',
|
|
'Mã KH',
|
|
'Mã Căn',
|
|
'Ngày ký HĐ',
|
|
'Giá trị HĐMB',
|
|
'Tiền nộp TTTHNV',
|
|
'Lũy kế tiền về HĐCN',
|
|
'Tỷ lệ HĐCN'
|
|
]
|
|
|
|
scheduleHeaders.value.forEach(h => {
|
|
headers.push(
|
|
`${h.label} - Ngày`,
|
|
`${h.label} - Số tiền`,
|
|
`${h.label} - Lũy kế sang`,
|
|
`${h.label} - Số tiền đã thực thanh toán`,
|
|
`${h.label} - Tỷ lệ`,
|
|
`${h.label} - Dư nợ`
|
|
)
|
|
})
|
|
|
|
headers.push('Số tiền quá hạn')
|
|
|
|
const data = filteredRows.value.map((row, i) => {
|
|
const base = [
|
|
i + 1,
|
|
row.customer_code,
|
|
row.trade_code,
|
|
row.contract_date,
|
|
fmt(row.sale_price),
|
|
fmt(row.ttthnv_paid),
|
|
fmt(row.luy_ke),
|
|
pct(row.luy_ke, row.sale_price)
|
|
]
|
|
|
|
scheduleHeaders.value.forEach((_, si) => {
|
|
const sch = row.schedules[si]
|
|
if (sch) {
|
|
base.push(
|
|
sch.to_date,
|
|
fmt(sch.amount),
|
|
fmt(sch.luy_ke_sang_dot),
|
|
fmt(sch.thuc_thanh_toan),
|
|
pct(sch.thuc_thanh_toan, sch.amount),
|
|
fmt(sch.amount_remain)
|
|
)
|
|
} else {
|
|
base.push('', '', '', '', '', '')
|
|
}
|
|
})
|
|
|
|
base.push(fmt(row.overdue))
|
|
return base
|
|
})
|
|
|
|
const csvRows = [headers, ...data]
|
|
const csv = csvRows.map(r => r.map(c => `"${String(c ?? '').replace(/"/g, '""')}"`).join(',')).join('\n')
|
|
|
|
const BOM = '\uFEFF'
|
|
const blob = new Blob([BOM + csv], { type: 'text/csv;charset=utf-8;' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `bao-cao-cong-no-${$dayjs().format('YYYYMMDD')}.csv`
|
|
a.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
onMounted(() => loadData())
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Fixed columns style */
|
|
.fixed-col {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 3;
|
|
background-color: white; /* nền trắng cho body */
|
|
min-width: 80px; /* điều chỉnh theo nhu cầu */
|
|
}
|
|
|
|
/* Cột STT thường hẹp hơn */
|
|
.fixed-col:nth-child(1) {
|
|
left: 0;
|
|
min-width: 50px;
|
|
z-index: 4; /* cao hơn để đè lên */
|
|
}
|
|
|
|
/* Cột Mã KH */
|
|
.fixed-col:nth-child(2) {
|
|
left: 50px;
|
|
min-width: 100px;
|
|
}
|
|
|
|
/* Cột Mã Căn */
|
|
.fixed-col:nth-child(3) {
|
|
left: 150px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* Cột Ngày ký HĐ */
|
|
.fixed-col:nth-child(4) {
|
|
left: 270px;
|
|
min-width: 110px;
|
|
}
|
|
|
|
/* Cột Giá trị HĐMB */
|
|
.fixed-col:nth-child(5) {
|
|
left: 380px;
|
|
min-width: 140px;
|
|
}
|
|
|
|
/* Cột Tiền nộp TTTHNV */
|
|
.fixed-col:nth-child(6) {
|
|
left: 520px;
|
|
min-width: 160px;
|
|
}
|
|
|
|
/* Cột Lũy kế HĐCN */
|
|
.fixed-col:nth-child(7) {
|
|
left: 680px;
|
|
min-width: 160px;
|
|
}
|
|
|
|
/* Cột Tỷ lệ */
|
|
.fixed-col:nth-child(8) {
|
|
left: 840px;
|
|
min-width: 90px;
|
|
border-right: 2px solid #dee2e6 !important; /* tạo đường phân cách rõ ràng */
|
|
}
|
|
|
|
/* Header fixed */
|
|
.debt-table thead .fixed-col {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
background-color: #204853 !important; /* primary color */
|
|
color: white !important;
|
|
}
|
|
|
|
/* Footer fixed columns */
|
|
.debt-table tfoot .fixed-col {
|
|
background-color: #f8f9fa !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Đảm bảo tfoot cũng có z-index */
|
|
.debt-table tfoot tr {
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Optional: bóng nhẹ khi scroll để dễ nhận biết fixed */
|
|
.fixed-col {
|
|
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08);
|
|
}
|
|
</style> |