增加打印

main
岩仔88 7 days ago
parent 836979cea9
commit 43bfaf430f

@ -66,6 +66,45 @@ const toggleUnmatched = (idx) => {
}
const fmt = (val) => Number(val).toFixed(2)
const printRef = ref(null)
const handlePrint = () => {
const el = printRef.value
if (!el) return
const win = window.open('', '_blank')
win.document.write(`
<html>
<head>
<title>收费统计</title>
<style>
body { font-family: -apple-system, "Microsoft YaHei", sans-serif; padding: 20px; }
.print-header { display: block; text-align: center; font-size: 22px; font-weight: bold; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #e0e0e6; padding: 6px 10px; font-size: 14px; }
th { background: #f5f5f5; font-weight: bold; }
.tc { text-align: center; }
.tr { text-align: right; }
.bold-row td { font-weight: bold; border-top: 2px solid #e0e0e6; }
.chinese-amount { margin-top: 8px; padding: 6px 0; border-top: 1px solid #e0e0e6; border-bottom: 1px solid #e0e0e6; font-weight: bold; }
.category-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #e0e0e6; border-bottom: none; margin-top: 12px; }
.category-grid-single { grid-template-columns: 1fr; }
.category-grid-single .category-item:nth-child(odd) { border-right: none; }
.last-full { grid-column: 1 / -1; border-right: none !important; }
.category-item { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #e0e0e6; }
.category-item:nth-child(odd) { border-right: 1px solid #e0e0e6; }
.category-amount { font-weight: bold; }
.print-bar { display: none; }
</style>
</head>
<body>${el.innerHTML}</body>
</html>
`)
win.document.close()
win.focus()
win.print()
win.close()
}
</script>
<template>
<div>
@ -90,6 +129,13 @@ const fmt = (val) => Number(val).toFixed(2)
<!-- 结果区域 -->
<div v-if="loaded" mt-4>
<!-- 打印按钮 -->
<div class="print-bar">
<n-button @click="handlePrint" type="info" size="small"> </n-button>
</div>
<!-- 打印内容区 -->
<div ref="printRef">
<div class="print-header">收费统计</div>
<!-- 汇总表格 -->
<n-table :bordered="true" :single-line="false" size="small" class="stats-table">
<thead>
@ -120,9 +166,13 @@ const fmt = (val) => Number(val).toFixed(2)
<div class="chinese-amount">合计(大写): {{ total_chinese }}</div>
<!-- 分类明细 两列布局 -->
<div class="category-grid" mt-3>
<div :class="['category-grid', categories.length === 1 ? 'category-grid-single' : '']" mt-3>
<template v-for="(cat, idx) in categories" :key="idx">
<div :class="['category-item', {'clickable': cat.item_names && cat.item_names.length > 0}]"
<div :class="[
'category-item',
{'clickable': cat.item_names && cat.item_names.length > 0},
{'last-full': idx === categories.length - 1 && categories.length % 2 === 1}
]"
@click="cat.item_names && cat.item_names.length > 0 && toggleUnmatched(idx)">
<span :class="['category-name', {'unmatched': cat.name === '未匹配科室'}]">
<template v-if="cat.item_names && cat.item_names.length > 0">
@ -139,6 +189,7 @@ const fmt = (val) => Number(val).toFixed(2)
</div>
</template>
</div>
</div><!-- /printRef -->
</div>
</n-card>
</div>
@ -183,6 +234,19 @@ const fmt = (val) => Number(val).toFixed(2)
border-bottom: none;
}
.category-grid-single {
grid-template-columns: 1fr;
}
.category-grid-single .category-item:nth-child(odd) {
border-right: none;
}
.last-full {
grid-column: 1 / -1;
border-right: none !important;
}
.category-item {
display: flex;
justify-content: space-between;
@ -235,6 +299,16 @@ const fmt = (val) => Number(val).toFixed(2)
font-weight: bold;
color: #18a058;
}
.print-bar {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
}
.print-header {
display: none;
}
</style>
<route>
{"name":"appointment-stats","meta":{"title":"收费统计"}}

Loading…
Cancel
Save