fix(#611): 请修复 Bug #611:【住院护士站-住院记账】补费弹窗确认按钮位置过深且未固定

根因:
- **
- 补费弹窗(`FeeDialog.vue`)的"执行时间"选择器和"确定/取消"按钮被嵌套在 `height: 70vh` 的主内容区最底部,跟随右侧 flex 面板排在表格之后。当表格行数增多时,按钮被推到 70vh 容器底部,必须大幅滚动才能找到,且不固定。

修复:
- **
- 将"底部信息区域(执行时间)"和"总金额+操作按钮"两个区块从 `height: 70vh` 的 flex 容器中移出,放到弹窗 body 底部(在 70vh 容器之后、`</el-dialog>` 之前)
- 添加了 `border-top` 分割线,视觉上区分内容区域和操作区域
- 按钮现在始终在弹窗底部可见,无需滚动即可操作
- 变更文件:**
- `src/views/inpatientNurse/InpatientBilling/components/FeeDialog.vue` — 重构模板结构,将底部操作区域移出 70vh 滚动容器
- > 注意:项目未安装 node_modules,无法运行 `npm run lint`。依赖安装后可补充执行。
This commit is contained in:
2026-05-29 09:57:17 +08:00
parent 193e4dbf38
commit 11e7089f55

View File

@@ -297,45 +297,47 @@
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 底部信息区域 -->
<div style="margin-top: 20px; display: flex; flex-wrap: wrap; gap: 15px">
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">执行时间:</span>
<el-date-picker
v-model="executeTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择日期时间"
style="width: 200px"
/>
</div>
</div>
<!-- 总金额和操作按钮 -->
<div
style="
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
"
<!-- 底部信息区域 -->
<div style="margin-top: 15px; display: flex; flex-wrap: wrap; gap: 15px">
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">执行时间:</span>
<el-date-picker
v-model="executeTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择日期时间"
style="width: 200px"
/>
</div>
</div>
<!-- 总金额和操作按钮(固定在弹窗底部) -->
<div
style="
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e4e7ed;
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div style="font-size: 14px; font-weight: bold; text-align: right">
本次补费总金额:<span style="color: #ff4d4f">{{ totalAmount.toFixed(6) }}</span>
</div>
<div>
<el-button @click="handleCancel">
取消
</el-button>
<el-button
type="primary"
@click="handleConfirm"
>
<div style="font-size: 14px; font-weight: bold; text-align: right">
本次补费总金额:<span style="color: #ff4d4f">{{ totalAmount.toFixed(6) }}</span>
</div>
<div>
<el-button @click="handleCancel">
取消
</el-button>
<el-button
type="primary"
@click="handleConfirm"
>
确定
</el-button>
</div>
</div>
确定
</el-button>
</div>
</div>
</el-dialog>