Fix Bug #568: 修复门诊日结页面排版混乱问题

根因:费用明细最后一行使用cols-3导致与上面cols-4行不对齐
修复:统一使用cols-4网格布局,对需要占两列的项使用span-2

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-22 10:56:25 +08:00
parent fce3c9ab01
commit 4c462e00db
2 changed files with 9 additions and 11 deletions

View File

@@ -41,10 +41,10 @@
<div v-loading="loading" class="report-container">
<div class="report-title">门诊收费日结单</div>
<div class="report-section">
<div class="report-row cols-3">
<div class="report-row cols-4">
<div class="report-item"><span class="label">经办人姓名</span><span class="value">{{ userStore.nickName }}</span></div>
<div class="report-item"><span class="label">科室</span><span class="value">{{ userStore.orgName }}</span></div>
<div class="report-item"><span class="label">时间</span><span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span></div>
<div class="report-item span-2"><span class="label">时间</span><span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span></div>
</div>
</div>
<div class="divider"></div>
@@ -60,10 +60,10 @@
<div class="divider"></div>
<div class="report-section">
<div class="section-title">医保支付</div>
<div class="report-row cols-3">
<div class="report-row cols-4">
<div class="report-item"><span class="label">统筹支付</span><span class="value">{{ formatValue(reportValue.tcSum) }}</span></div>
<div class="report-item"><span class="label">账户支付</span><span class="value">{{ formatValue(reportValue.zhSum) }}</span></div>
<div class="report-item"><span class="label">基金支付总额</span><span class="value">{{ formatValue(reportValue.fundSum) }}</span></div>
<div class="report-item span-2"><span class="label">基金支付总额</span><span class="value">{{ formatValue(reportValue.fundSum) }}</span></div>
</div>
</div>
<div class="divider"></div>
@@ -81,10 +81,10 @@
<div class="report-item"><span class="label">中成药费</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span></div>
<div class="report-item"><span class="label">卫生材料费</span><span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span></div>
</div>
<div class="report-row cols-3">
<div class="report-row cols-4">
<div class="report-item"><span class="label">诊疗费</span><span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span></div>
<div class="report-item"><span class="label">挂号费</span><span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span></div>
<div class="report-item"><span class="label">其他费用</span><span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span></div>
<div class="report-item span-2"><span class="label">其他费用</span><span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span></div>
</div>
</div>
</div>
@@ -302,12 +302,12 @@ getPharmacyCabinetLists();
margin: 12px 0;
gap: 8px 16px;
}
.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.span-2 {
grid-column: span 2;
}
.report-item {
display: flex;
align-items: center;

View File

@@ -383,8 +383,6 @@ const isWithdrawableStatus = (row) => String(getBillStatus(row)) === '1';
const isReportStatus = (row) => ['6', '8'].includes(String(getBillStatus(row)));
const isIssuedStatus = (row) => String(getBillStatus(row)) === '1';
/**
* 是否可管理该申请单:申请者本人或管理员
*/