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

Fix Bug #568: 修复门诊日结页面排版混乱 - 清理重复CSS并使用表格布局

Browse Source 
根因: CSS存在重复定义（div布局+table布局混在一起，两个</style>标签），
导致样式冲突和排版混乱。

修复方案: 清理CSS，只保留表格布局样式（.report-table, .label-cell, .value-cell），
移除旧的div布局CSS（.report-row, .report-item, .label, .value等）。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
赵云
2026-05-22 12:18:08 +08:00
parent ba40d0087f
commit 25138478a0
1 changed files with 94 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,80 +42,51 @@
<div class="report-title">门诊收费日结单</div>
<div class="report-section">
<div class="section-title">基本信息</div>
<table class="report-table">
<tr>
<td class="label-cell">经办人姓名：</td>
<td class="value-cell">{{ userStore.nickName }}</td>
<td class="label-cell">科室：</td>
<td class="value-cell">{{ userStore.orgName }}</td>
<td class="label-cell">时间：</td>
<td class="value-cell" colspan="3">{{ queryTime[0] + '~' + queryTime[1] }}</td>
</tr>
</table>
<el-row :gutter="20" class="report-row">
<el-col :span="6"><span class="label">经办人姓名：</span><span class="value">{{ userStore.nickName }}</span></el-col>
<el-col :span="6"><span class="label">科室：</span><span class="value">{{ userStore.orgName }}</span></el-col>
<el-col :span="12"><span class="label">时间：</span><span class="value">{{ queryTime[0] + '~' + queryTime[1] }}</span></el-col>
</el-row>
</div>
<div class="divider"></div>
<div class="report-section">
<div class="section-title">收费汇总</div>
<table class="report-table">
<tr>
<td class="label-cell">实际现金收入：</td>
<td class="value-cell">{{ formatValue(reportValue.cashSum) }}</td>
<td class="label-cell">现金：</td>
<td class="value-cell">{{ formatValue(reportValue.rmbCashSum) }}</td>
<td class="label-cell">微信：</td>
<td class="value-cell">{{ formatValue(reportValue.vxCashSum) }}</td>
<td class="label-cell">支付宝：</td>
<td class="value-cell">{{ formatValue(reportValue.aliCashSum) }}</td>
</tr>
</table>
<el-row :gutter="20" class="report-row">
<el-col :span="6"><span class="label">实际现金收入：</span><span class="value">{{ formatValue(reportValue.cashSum) }}</span></el-col>
<el-col :span="6"><span class="label">现金：</span><span class="value">{{ formatValue(reportValue.rmbCashSum) }}</span></el-col>
<el-col :span="6"><span class="label">微信：</span><span class="value">{{ formatValue(reportValue.vxCashSum) }}</span></el-col>
<el-col :span="6"><span class="label">支付宝：</span><span class="value">{{ formatValue(reportValue.aliCashSum) }}</span></el-col>
</el-row>
</div>
<div class="divider"></div>
<div class="report-section">
<div class="section-title">医保支付</div>
<table class="report-table">
<tr>
<td class="label-cell">统筹支付：</td>
<td class="value-cell">{{ formatValue(reportValue.tcSum) }}</td>
<td class="label-cell">账户支付：</td>
<td class="value-cell">{{ formatValue(reportValue.zhSum) }}</td>
<td class="label-cell">基金支付总额：</td>
<td class="value-cell" colspan="3">{{ formatValue(reportValue.fundSum) }}</td>
</tr>
</table>
<el-row :gutter="20" class="report-row">
<el-col :span="6"><span class="label">统筹支付：</span><span class="value">{{ formatValue(reportValue.tcSum) }}</span></el-col>
<el-col :span="6"><span class="label">账户支付：</span><span class="value">{{ formatValue(reportValue.zhSum) }}</span></el-col>
<el-col :span="12"><span class="label">基金支付总额：</span><span class="value">{{ formatValue(reportValue.fundSum) }}</span></el-col>
</el-row>
</div>
<div class="divider"></div>
<div class="report-section">
<div class="section-title">费用明细</div>
<table class="report-table">
<tr>
<td class="label-cell">诊查费：</td>
<td class="value-cell">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</td>
<td class="label-cell">检查费：</td>
<td class="value-cell">{{ formatValue(reportValue.CHECK_FEE) }}</td>
<td class="label-cell">化验费：</td>
<td class="value-cell">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</td>
<td class="label-cell">治疗费：</td>
<td class="value-cell">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</td>
</tr>
<tr>
<td class="label-cell">西药费：</td>
<td class="value-cell">{{ formatValue(reportValue.WEST_MEDICINE) }}</td>
<td class="label-cell">中药饮片费：</td>
<td class="value-cell">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</td>
<td class="label-cell">中成药费：</td>
<td class="value-cell">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</td>
<td class="label-cell">卫生材料费：</td>
<td class="value-cell">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</td>
</tr>
<tr>
<td class="label-cell">诊疗费：</td>
<td class="value-cell">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</td>
<td class="label-cell">挂号费：</td>
<td class="value-cell">{{ formatValue(reportValue.REGISTRATION_FEE) }}</td>
<td class="label-cell">其他费用：</td>
<td class="value-cell" colspan="3">{{ formatValue(reportValue.OTHER_FEE) }}</td>
</tr>
</table>
<el-row :gutter="20" class="report-row">
<el-col :span="6"><span class="label">诊查费：</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span></el-col>
<el-col :span="6"><span class="label">检查费：</span><span class="value">{{ formatValue(reportValue.CHECK_FEE) }}</span></el-col>
<el-col :span="6"><span class="label">化验费：</span><span class="value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span></el-col>
<el-col :span="6"><span class="label">治疗费：</span><span class="value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span></el-col>
</el-row>
<el-row :gutter="20" class="report-row">
<el-col :span="6"><span class="label">西药费：</span><span class="value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span></el-col>
<el-col :span="6"><span class="label">中药饮片费：</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span></el-col>
<el-col :span="6"><span class="label">中成药费：</span><span class="value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span></el-col>
<el-col :span="6"><span class="label">卫生材料费：</span><span class="value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span></el-col>
</el-row>
<el-row :gutter="20" class="report-row">
<el-col :span="6"><span class="label">诊疗费：</span><span class="value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span></el-col>
<el-col :span="6"><span class="label">挂号费：</span><span class="value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span></el-col>
<el-col :span="12"><span class="label">其他费用：</span><span class="value">{{ formatValue(reportValue.OTHER_FEE) }}</span></el-col>
</el-row>
</div>
</div>
</div>
@@ -263,6 +234,35 @@ async function print() {
await boundAsync
.printReport(getPrintFileName(contractNo.value), jsonString)
.then((response) => {
console.log(response, 'response');
var res = JSON.parse(response);
if (!res.IsSuccess) {
proxy.$modal.msgError('调用打印插件失败:' + res.ErrorMessage);
}
})
.catch((error) => {
proxy.$modal.msgError('调用打印插件失败:' + error);
});
}
function getPrintFileName(value) {
switch (value) {
case '0000':
return '门诊日结单(按登录角色查询)自费.grf';
case '229900':
return '门诊日结单(按登录角色查询)省医保.grf';
case '220100':
return '门诊日结单(按登录角色查询)市医保.grf';
}
}
function formatValue(value) {
return value == null || value == undefined ? '0.00 元' : value.toFixed(2) + ' 元';
}
getList();
getPharmacyCabinetLists();
</script>
<style scoped>
.report-container {
width: 100%;
@@ -292,11 +292,27 @@ async function print() {
border-left: 3px solid #409eff;
}
.report-row {
display: grid;
margin: 12px 0;
gap: 10px 16px;
align-items: baseline;
}
.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;
}
.label {
display: inline-block;
width: 120px;
width: 140px;
flex-shrink: 0;
color: #606266;
white-space: nowrap;
text-align: right;
@@ -305,53 +321,30 @@ async function print() {
color: #303133;
font-weight: 500;
white-space: nowrap;
flex: 1;
}
.divider {
height: 1px;
background-color: #dcdfe6;
margin: 16px 0;
}
</style>
.section-title {
font-size: 15px;
font-weight: bold;
color: #303133;
margin: 8px 0;
padding-left: 8px;
border-left: 3px solid #409eff;
}
.report-table {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
}
.report-table td {
padding: 8px 4px;
vertical-align: middle;
}
.label-cell {
color: #606266;
white-space: nowrap;
text-align: right;
width: 100px;
}
.value-cell {
color: #303133;
font-weight: 500;
white-space: nowrap;
}
.divider {
height: 1px;
background-color: #dcdfe6;
margin: 16px 0;
@media screen and (max-width: 1200px) {
.cols-4 {
grid-template-columns: repeat(2, 1fr);
}
.span-2 {
grid-column: span 2;
}
}
@media screen and (max-width: 768px) {
.label-cell {
width: 80px;
font-size: 13px;
.cols-4 {
grid-template-columns: 1fr;
}
.value-cell {
font-size: 13px;
.span-2 {
grid-column: span 1;
}
.label {
width: 100px;
}
}
</style>