weicw
135 lines
3.5 KiB
Vue
135 lines
3.5 KiB
Vue
<template>
|
|
<div class="training-report">
|
|
<div
|
|
v-for="section in sections"
|
|
:key="section.key || section.title"
|
|
class="report-section"
|
|
>
|
|
<table class="report-table">
|
|
<thead>
|
|
<tr>
|
|
<th colspan="9" class="section-title">
|
|
{{ section.title }}
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th rowspan="2" class="institution-col">培训机构名称</th>
|
|
<th colspan="2">开卡统计</th>
|
|
<th colspan="2">核销次数</th>
|
|
<th colspan="2">过期次数</th>
|
|
<th colspan="2">未核销次数</th>
|
|
</tr>
|
|
<tr>
|
|
<th>次数</th>
|
|
<th>收款金额</th>
|
|
<th>次数</th>
|
|
<th>核销金额</th>
|
|
<th>次数</th>
|
|
<th>过期金额</th>
|
|
<th>次数</th>
|
|
<th>剩余金额</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="row in section.rows || []"
|
|
:key="row.trainingInstitutionName"
|
|
>
|
|
<td>{{ row.trainingInstitutionName || '-' }}</td>
|
|
<td>{{ formatCount(row.openCount) }}</td>
|
|
<td>{{ formatAmount(row.openAmount) }}</td>
|
|
<td>{{ formatCount(row.verifyCount) }}</td>
|
|
<td>{{ formatAmount(row.verifyAmount) }}</td>
|
|
<td>{{ formatCount(row.expiredCount) }}</td>
|
|
<td>{{ formatAmount(row.expiredAmount) }}</td>
|
|
<td>{{ formatCount(row.unverifiedCount) }}</td>
|
|
<td>{{ formatAmount(row.remainingAmount) }}</td>
|
|
</tr>
|
|
<tr class="total-row">
|
|
<td>合计</td>
|
|
<td>{{ formatCount(section.total?.openCount) }}</td>
|
|
<td>{{ formatAmount(section.total?.openAmount) }}</td>
|
|
<td>{{ formatCount(section.total?.verifyCount) }}</td>
|
|
<td>{{ formatAmount(section.total?.verifyAmount) }}</td>
|
|
<td>{{ formatCount(section.total?.expiredCount) }}</td>
|
|
<td>{{ formatAmount(section.total?.expiredAmount) }}</td>
|
|
<td>{{ formatCount(section.total?.unverifiedCount) }}</td>
|
|
<td>{{ formatAmount(section.total?.remainingAmount) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { ThinkTrainingBusinessSection } from '@/api/think/thinkOrder/model';
|
|
|
|
defineProps<{
|
|
sections: ThinkTrainingBusinessSection[];
|
|
}>();
|
|
|
|
const formatCount = (value?: number | string) => {
|
|
if (value === undefined || value === null || value === '') {
|
|
return '0';
|
|
}
|
|
return String(value);
|
|
};
|
|
|
|
const formatAmount = (value?: number | string) => {
|
|
if (value === undefined || value === null || value === '') {
|
|
return '0';
|
|
}
|
|
return String(value);
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.training-report {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 28px;
|
|
}
|
|
|
|
.report-section {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.report-table {
|
|
width: 100%;
|
|
min-width: 1200px;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
background: #fff;
|
|
}
|
|
|
|
.report-table th,
|
|
.report-table td {
|
|
padding: 12px 10px;
|
|
border: 1px solid #1f1f1f;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.report-table th {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 22px;
|
|
line-height: 1.4;
|
|
padding: 16px 12px !important;
|
|
}
|
|
|
|
.institution-col {
|
|
width: 240px;
|
|
}
|
|
|
|
.total-row td {
|
|
font-weight: 600;
|
|
}
|
|
</style>
|