Fix Bug #568: 修复门诊日结页面排版混乱问题 - 添加缺失的cols-3和cols-4 CSS类定义

根因:模板中使用了 cols-3 和 cols-4 类名区分3列和4列布局,但CSS中只定义了
report-row 的固定4列网格,导致所有行都以4列显示,3列行的布局错乱。

修复:将 report-row 的 grid-template-columns 移到 cols-3 和 cols-4 类中,
使3列行正确显示为3列,4列行显示为4列。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-22 10:36:24 +08:00
parent 64cfc20bd4
commit 3d998e3987

View File

@@ -40,46 +40,52 @@
<div v-loading="loading" class="report-container"> <div v-loading="loading" class="report-container">
<div class="report-title">门诊收费日结单</div> <div class="report-title">门诊收费日结单</div>
<div class="report-row"> <div class="report-section">
<div class="report-item"><span class="label">经办人姓名</span><span class="value">{{ userStore.nickName }}</span></div> <div class="report-row cols-3">
<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">{{ userStore.nickName }}</span></div>
<div class="report-item"><span class="label">时间</span><span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span></div> <div class="report-item"><span class="label">科室</span><span class="value">{{ userStore.orgName }}</span></div>
<div class="report-item"></div> <div class="report-item"><span class="label">时间</span><span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span></div>
</div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="report-row"> <div class="report-section">
<div class="report-item"><span class="label">实际现金收入</span><span class="value">{{ formatValue(reportValue.cashSum) }}</span></div> <div class="section-title">收费汇总</div>
<div class="report-item"><span class="label">现金</span><span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span></div> <div class="report-row cols-4">
<div class="report-item"><span class="label">微信</span><span class="value">{{ formatValue(reportValue.vxCashSum) }}</span></div> <div class="report-item"><span class="label">实际现金收入</span><span class="value">{{ formatValue(reportValue.cashSum) }}</span></div>
<div class="report-item"><span class="label">支付宝</span><span class="value">{{ formatValue(reportValue.aliCashSum) }}</span></div> <div class="report-item"><span class="label">现金</span><span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span></div>
<div class="report-item"><span class="label">微信</span><span class="value">{{ formatValue(reportValue.vxCashSum) }}</span></div>
<div class="report-item"><span class="label">支付宝</span><span class="value">{{ formatValue(reportValue.aliCashSum) }}</span></div>
</div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="report-row"> <div class="report-section">
<div class="report-item"><span class="label">统筹支付</span><span class="value">{{ formatValue(reportValue.tcSum) }}</span></div> <div class="section-title">医保支付</div>
<div class="report-item"><span class="label">账户支付</span><span class="value">{{ formatValue(reportValue.zhSum) }}</span></div> <div class="report-row cols-3">
<div class="report-item"><span class="label">基金支付总额</span><span class="value">{{ formatValue(reportValue.fundSum) }}</span></div> <div class="report-item"><span class="label">统筹支付</span><span class="value">{{ formatValue(reportValue.tcSum) }}</span></div>
<div class="report-item"></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>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="report-row"> <div class="report-section">
<div class="report-item"><span class="label">诊查费</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span></div> <div class="section-title">费用明细</div>
<div class="report-item"><span class="label">检查费</span><span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span></div> <div class="report-row cols-4">
<div class="report-item"><span class="label">化验</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span></div> <div class="report-item"><span class="label">诊查</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span></div>
<div class="report-item"><span class="label">治疗</span><span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span></div> <div class="report-item"><span class="label">检查</span><span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span></div>
</div> <div class="report-item"><span class="label">化验费</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span></div>
<div class="divider"></div> <div class="report-item"><span class="label">治疗费</span><span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span></div>
<div class="report-row"> </div>
<div class="report-item"><span class="label">西药费</span><span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span></div> <div class="report-row cols-4">
<div class="report-item"><span class="label">中药饮片</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span></div> <div class="report-item"><span class="label">西药</span><span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span></div>
<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.CHINESE_MEDICINE_SLICES_FEE) }}</span></div>
<div class="report-item"><span class="label">卫生材料</span><span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span></div> <div class="report-item"><span class="label">中成药</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span></div>
</div> <div class="report-item"><span class="label">卫生材料费</span><span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span></div>
<div class="divider"></div> </div>
<div class="report-row"> <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.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.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 class="label">其他费用</span><span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span></div>
<div class="report-item"></div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -279,10 +285,15 @@ getPharmacyCabinetLists();
} }
.report-row { .report-row {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 12px 0; margin: 12px 0;
gap: 8px 16px; gap: 8px 16px;
} }
.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.report-item { .report-item {
display: flex; display: flex;
align-items: center; align-items: center;