wangyizhe/his
1
3
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix Bug #568: 修复门诊日结页面排版混乱 - 使用CSS Grid替代el-row布局

Browse Source 
根因：之前使用el-row/el-col配合float:right和margin-right:50px导致列对齐混乱。
修复：改用CSS Grid布局(repeat(4,1fr))确保列均匀对齐，添加响应式断点。
This commit is contained in:
赵云
2026-05-22 11:14:23 +08:00
parent cab2a92e9a
commit 00d7d2ce0b
1 changed files with 112 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
openhis-ui-vue3/src/views/clinicmanagement/dayEnd/index.vue
View File

@@ -38,131 +38,56 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div v-loading="loading" style="width: 1200px"> <div v-loading="loading" class="report-container">
<div style="text-align: center"> <div class="report-title">门诊收费日结单</div>
<h2>门诊收费日结单</h2> <div class="report-section">
<div class="section-title">基本信息</div>
<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-2"><span class="label">时间：</span><span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span></div>
</div>
</div> </div>
<div class="section-title">基本信息</div>
<el-row
:gutter="10"
style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
>
<el-col :span="4">
<span class="label">经办人姓名：</span>
<span class="value">{{ userStore.nickName }}</span>
</el-col>
<el-col :span="4">
<span class="label">科室：</span>
<span class="value">{{ userStore.orgName }}</span>
</el-col>
<el-col :span="5">
<span class="label">时间：</span>
<span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span>
</el-col>
</el-row>
<div class="divider"></div> <div class="divider"></div>
<div class="section-title">收费汇总</div> <div class="report-section">
<el-row <div class="section-title">收费汇总</div>
:gutter="10" <div class="report-row cols-4">
style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px" <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.rmbCashSum) }}</span></div>
<el-col :span="5"> <div class="report-item"><span class="label">微信：</span><span class="value">{{ formatValue(reportValue.vxCashSum) }}</span></div>
<span class="label">实际现金收入：</span> <div class="report-item"><span class="label">支付宝：</span><span class="value">{{ formatValue(reportValue.aliCashSum) }}</span></div>
<span class="value">{{ formatValue(reportValue.cashSum) }}</span> </div>
</el-col> </div>
<el-col :span="5">
<span class="label">现金：</span>
<span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span>
</el-col>
<el-col :span="5">
<span class="label">微信：</span>
<span class="value">{{ formatValue(reportValue.vxCashSum) }}</span>
</el-col>
<el-col :span="5">
<span class="label">支付宝：</span>
<span class="value">{{ formatValue(reportValue.aliCashSum) }}</span>
</el-col>
</el-row>
<div class="divider"></div> <div class="divider"></div>
<div class="section-title">医保支付</div> <div class="report-section">
<el-row <div class="section-title">医保支付</div>
:gutter="10" <div class="report-row cols-4">
style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px" <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>
<el-col :span="5"> <div class="report-item span-2"><span class="label">基金支付总额：</span><span class="value">{{ formatValue(reportValue.fundSum) }}</span></div>
<span class="label">统筹支付：</span> </div>
<span class="value">{{ formatValue(reportValue.tcSum) }}</span> </div>
</el-col>
<el-col :span="5">
<span class="label">账户支付：</span>
<span class="value">{{ formatValue(reportValue.zhSum) }}</span>
</el-col>
<el-col :span="5">
<span class="label">基金支付总额：</span>
<span class="value">{{ formatValue(reportValue.fundSum) }}</span>
</el-col>
</el-row>
<div class="divider"></div> <div class="divider"></div>
<div class="section-title">费用明细</div> <div class="report-section">
<el-row <div class="section-title">费用明细</div>
:gutter="10" <div class="report-row cols-4">
style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px" <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.CHECK_FEE) }}</span></div>
<el-col :span="5"> <div class="report-item"><span class="label">化验费：</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span></div>
<span class="label">诊查费：</span> <div class="report-item"><span class="label">治疗费：</span><span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span></div>
<span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span> </div>
</el-col> <div class="report-row cols-4">
<el-col :span="5"> <div class="report-item"><span class="label">西药费：</span><span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span></div>
<span class="label">检查费：</span> <div class="report-item"><span class="label">中药饮片费：</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span></div>
<span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span> <div class="report-item"><span class="label">中成药费：</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span></div>
</el-col> <div class="report-item"><span class="label">卫生材料费：</span><span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span></div>
<el-col :span="5"> </div>
<span class="label">化验费：</span> <div class="report-row cols-4">
<span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span> <div class="report-item"><span class="label">诊疗费：</span><span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span></div>
</el-col> <div class="report-item"><span class="label">挂号费：</span><span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span></div>
<el-col :span="5"> <div class="report-item span-2"><span class="label">其他费用：</span><span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span></div>
<span class="label">治疗费：</span> </div>
<span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span> </div>
</el-col>
</el-row>
<el-row
:gutter="10"
style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
>
<el-col :span="5">
<span class="label">西药费：</span>
<span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span>
</el-col>
<el-col :span="5">
<span class="label">中药饮片费：</span>
<span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span>
</el-col>
<el-col :span="5">
<span class="label">中成药费：</span>
<span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span>
</el-col>
<el-col :span="5">
<span class="label">卫生材料费：</span>
<span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span>
</el-col>
</el-row>
<el-row
:gutter="10"
style="margin: 12px 0; display: flex; align-items: center; padding: 0 20px"
>
<el-col :span="5">
<span class="label">诊疗费：</span>
<span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span>
</el-col>
<el-col :span="5">
<span class="label">挂号费：</span>
<span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span>
</el-col>
<el-col :span="5">
<span class="label">其他费用：</span>
<span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span>
</el-col>
</el-row>
</div> </div>
</div> </div>
</template> </template>
@@ -339,6 +264,22 @@ getList();
getPharmacyCabinetLists(); getPharmacyCabinetLists();
</script> </script>
<style scoped> <style scoped>
.report-container {
max-width: 1200px;
padding: 24px 32px;
background: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.report-title {
text-align: center;
font-size: 18px;
font-weight: bold;
margin: 16px 0;
}
.report-section {
margin: 8px 0;
}
.section-title { .section-title {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
@@ -347,19 +288,61 @@ getPharmacyCabinetLists();
padding-left: 8px; padding-left: 8px;
border-left: 3px solid #409eff; border-left: 3px solid #409eff;
} }
.report-row {
display: grid;
margin: 12px 0;
gap: 8px 16px;
}
.cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.span-2 {
grid-column: span 2;
}
.report-item {
display: flex;
align-items: center;
box-sizing: border-box;
min-width: 0;
overflow: hidden;
}
.label { .label {
display: inline-block; display: inline-block;
width: 120px !important; width: 120px;
flex-shrink: 0;
color: #606266;
white-space: nowrap;
text-align: right;
} }
.value { .value {
float: right; color: #303133;
} font-weight: 500;
.el-col { white-space: nowrap;
margin-right: 50px; overflow: hidden;
text-overflow: ellipsis;
} }
.divider { .divider {
height: 3px; height: 1px;
background-color: #000; background-color: #dcdfe6;
margin: 20px 0; margin: 12px 0;
}
@media screen and (max-width: 1200px) {
.cols-4 {
grid-template-columns: repeat(2, 1fr);
}
.span-2 {
grid-column: span 1;
}
}
@media screen and (max-width: 768px) {
.cols-4 {
grid-template-columns: 1fr;
}
.span-2 {
grid-column: span 1;
}
.label {
width: 100px;
}
} }
</style> </style>