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

fix(#568): 请修复 Bug #568：[一般] [收费工作站-门诊日结]排版很乱

Browse Source 
根因：
- Bug #请修复 Bug #568 存在的问题

修复：
- ### 变更摘要
- 文件**: `src/views/clinicmanagement/dayEnd/index.vue`
- 1. **搜索表单布局修正**
- 将 `label-width="90px"` 改为 `label-width="auto"`，消除固定宽度导致的 label 列空白
- 移除 `search-buttons` 自定义 class，按钮改为独立的 `el-form-item`（不带 label），与查询条件在同一视觉基线
- 2. **标签/值对齐统一**（排版混乱的核心原因）
- 所有 `data-label` 改为**左对齐**（原来右对齐），符合报表"左标签右数值"的常规排版
- 标签去掉末尾冒号 `：`（`data-cell` 的 `justify-content: space-between` + 清晰的边框已足以区分）
- `data-value` 保持**右对齐**，金额数字加粗 `font-weight: 600` + 等宽数字字体 `font-variant-numeric: tabular-nums`
- `info-label` min-width 统一为 `90px`，与 data-label 规格一致
- 3. **数据卡片视觉增强**
- 新增浅色边框 `border: 1px solid #f0f0f0`，每个数据项有清晰的外框
- `padding` 从 `8px 12px` 加大到 `10px 16px`，间距更舒适
- 背景色仅在 hover 时变化（`transition: background-color 0.2s`）
- 圆角从 `4px` 提升到 `6px`
- 4. **分隔与间距优化**
- `el-divider` 上下间距从 `12px` 增加到 `16px`
- `summary-row` 上边距从 `8px` 增加到 `12px`
- `info-row` 每项底部加浅色分隔线 `border-bottom: 1px solid #f0f0f0`
- 5. **响应式适配**
- 小屏幕下 `data-cell` 缩小内边距，`data-label` 取消固定 min-width
- ### 验证结果
- `eslint` 检查通过 ✅（无错误）
- `vite build` 构建通过 ✅
This commit is contained in:
赵云
2026-05-29 01:17:28 +08:00
parent 8054cb31be
commit c9122d58be
1 changed files with 49 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@
ref="queryRef"
:model="queryParams"
:inline="true"
label-width="90px"
label-width="auto"
>
<el-form-item label="查询日期">
<el-date-picker
@@ -34,7 +34,7 @@
/>
</el-select>
</el-form-item>
<el-form-item class="search-buttons">
<el-form-item>
<el-button
type="primary"
plain
@@ -123,7 +123,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">总收入：</span>
<span class="data-label">总收入</span>
<span class="data-value">{{ formatValue(reportValue.cashSum) }}</span>
</div>
</el-col>
@@ -133,7 +133,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">现金：</span>
<span class="data-label">现金</span>
<span class="data-value">{{ formatValue(reportValue.rmbCashSum) }}</span>
</div>
</el-col>
@@ -143,7 +143,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">微信：</span>
<span class="data-label">微信</span>
<span class="data-value">{{ formatValue(reportValue.vxCashSum) }}</span>
</div>
</el-col>
@@ -153,7 +153,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">支付宝：</span>
<span class="data-label">支付宝</span>
<span class="data-value">{{ formatValue(reportValue.aliCashSum) }}</span>
</div>
</el-col>
@@ -174,7 +174,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">统筹支付：</span>
<span class="data-label">统筹支付</span>
<span class="data-value">{{ formatValue(reportValue.tcSum) }}</span>
</div>
</el-col>
@@ -184,7 +184,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">账户支付：</span>
<span class="data-label">账户支付</span>
<span class="data-value">{{ formatValue(reportValue.zhSum) }}</span>
</div>
</el-col>
@@ -194,7 +194,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">基金支付总额：</span>
<span class="data-label">基金支付总额</span>
<span class="data-value">{{ formatValue(reportValue.fundSum) }}</span>
</div>
</el-col>
@@ -204,7 +204,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">医保统筹+账户：</span>
<span class="data-label">医保统筹+账户</span>
<span class="data-value">{{ formatValue(Number(reportValue.zhSum || 0) + Number(reportValue.fundSum || 0)) }}</span>
</div>
</el-col>
@@ -225,7 +225,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">诊查费：</span>
<span class="data-label">诊查费</span>
<span class="data-value">{{ formatValue(reportValue.DIAGNOSTIC_FEE) }}</span>
</div>
</el-col>
@@ -235,7 +235,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">检查费：</span>
<span class="data-label">检查费</span>
<span class="data-value">{{ formatValue(reportValue.CHECK_FEE) }}</span>
</div>
</el-col>
@@ -245,7 +245,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">化验费：</span>
<span class="data-label">化验费</span>
<span class="data-value">{{ formatValue(reportValue.DIAGNOSTIC_TEST_FEE) }}</span>
</div>
</el-col>
@@ -255,7 +255,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">治疗费：</span>
<span class="data-label">治疗费</span>
<span class="data-value">{{ formatValue(reportValue.MEDICAL_EXPENSE_FEE) }}</span>
</div>
</el-col>
@@ -270,7 +270,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">西药费：</span>
<span class="data-label">西药费</span>
<span class="data-value">{{ formatValue(reportValue.WEST_MEDICINE) }}</span>
</div>
</el-col>
@@ -280,7 +280,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">中药饮片费：</span>
<span class="data-label">中药饮片费</span>
<span class="data-value">{{ formatValue(reportValue.CHINESE_MEDICINE_SLICES_FEE) }}</span>
</div>
</el-col>
@@ -290,7 +290,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">中成药费：</span>
<span class="data-label">中成药费</span>
<span class="data-value">{{ formatValue(reportValue.CHINESE_MEDICINE_FEE) }}</span>
</div>
</el-col>
@@ -300,7 +300,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">卫生材料费：</span>
<span class="data-label">卫生材料费</span>
<span class="data-value">{{ formatValue(reportValue.SANITARY_MATERIALS_FEE) }}</span>
</div>
</el-col>
@@ -315,7 +315,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">普通挂号费：</span>
<span class="data-label">普通挂号费</span>
<span class="data-value">{{ formatValue(reportValue.GENERAL_CONSULTATION_FEE) }}</span>
</div>
</el-col>
@@ -325,7 +325,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">挂号费：</span>
<span class="data-label">挂号费</span>
<span class="data-value">{{ formatValue(reportValue.REGISTRATION_FEE) }}</span>
</div>
</el-col>
@@ -335,7 +335,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">其他费用：</span>
<span class="data-label">其他费用</span>
<span class="data-value">{{ formatValue(reportValue.OTHER_FEE) }}</span>
</div>
</el-col>
@@ -345,7 +345,7 @@
:md="6"
>
<div class="data-cell">
<span class="data-label">退费金额：</span>
<span class="data-label">退费金额</span>
<span class="data-value">{{ formatValue(reportValue.returnFee) }}</span>
</div>
</el-col>
@@ -360,7 +360,7 @@
:md="6"
>
<div class="data-cell summary-cell">
<span class="data-label summary-label">费用总额：</span>
<span class="data-label summary-label">费用总额</span>
<span class="data-value value-highlight">{{ totalFeeAmount }}</span>
</div>
</el-col>
@@ -370,7 +370,7 @@
:md="6"
>
<div class="data-cell summary-cell">
<span class="data-label summary-label">医保报销：</span>
<span class="data-label summary-label">医保报销</span>
<span class="data-value value-highlight">{{ insuranceReimbursement }}</span>
</div>
</el-col>
@@ -604,13 +604,15 @@ getPharmacyCabinetLists();
align-items: center;
padding: 6px 0;
min-height: 32px;
border-bottom: 1px solid #f0f0f0;
}
.info-label {
color: #909399;
font-size: 13px;
white-space: nowrap;
min-width: 80px;
min-width: 90px;
text-align: left;
}
.info-value {
@@ -627,28 +629,34 @@ getPharmacyCabinetLists();
.data-cell {
display: flex;
align-items: center;
padding: 8px 12px;
margin-bottom: 4px;
justify-content: space-between;
padding: 10px 16px;
margin-bottom: 6px;
background: #fafafa;
border-radius: 4px;
min-height: 40px;
border: 1px solid #f0f0f0;
border-radius: 6px;
min-height: 44px;
transition: background-color 0.2s;
}
.data-cell:hover {
background: #f5f7fa;
}
.data-label {
color: #606266;
font-size: 13px;
white-space: nowrap;
min-width: 100px;
text-align: right;
padding-right: 8px;
flex-shrink: 0;
}
.data-value {
color: #303133;
font-size: 14px;
font-weight: 500;
flex: 1;
font-weight: 600;
text-align: right;
margin-left: 12px;
font-variant-numeric: tabular-nums;
}
.value-highlight {
@@ -658,7 +666,7 @@ getPharmacyCabinetLists();
}
.summary-row {
margin-top: 8px;
margin-top: 12px;
}
.summary-cell {
@@ -676,37 +684,27 @@ getPharmacyCabinetLists();
font-weight: 600;
color: #409eff;
padding: 8px 0 8px 12px;
margin: 8px 0 4px;
margin: 8px 0 6px;
border-left: 3px solid #409eff;
background: linear-gradient(90deg, rgba(64, 158, 255, 0.05) 0%, transparent 100%);
}
.search-buttons {
margin-bottom: 0;
}
.search-buttons .el-form-item__content {
justify-content: flex-start;
}
:deep(.el-divider--horizontal) {
margin: 12px 0;
margin: 16px 0;
}
.el-form--inline .el-form-item {
margin-bottom: 12px;
margin-right: 16px;
margin-right: 18px;
}
@media (max-width: 768px) {
.data-label {
min-width: 80px;
text-align: left;
padding-right: 4px;
min-width: auto;
}
.data-value {
text-align: left;
.data-cell {
padding: 8px 12px;
}
.info-label {