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:
@@ -297,45 +297,47 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 底部信息区域 -->
|
<!-- 底部信息区域 -->
|
||||||
<div style="margin-top: 20px; display: flex; flex-wrap: wrap; gap: 15px">
|
<div style="margin-top: 15px; display: flex; flex-wrap: wrap; gap: 15px">
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<span style="margin-right: 8px">执行时间:</span>
|
<span style="margin-right: 8px">执行时间:</span>
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
v-model="executeTime"
|
v-model="executeTime"
|
||||||
type="datetime"
|
type="datetime"
|
||||||
format="YYYY-MM-DD HH:mm:ss"
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
placeholder="选择日期时间"
|
placeholder="选择日期时间"
|
||||||
style="width: 200px"
|
style="width: 200px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 总金额和操作按钮 -->
|
<!-- 总金额和操作按钮(固定在弹窗底部) -->
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
margin-top: 20px;
|
margin-top: 15px;
|
||||||
display: flex;
|
padding-top: 15px;
|
||||||
justify-content: space-between;
|
border-top: 1px solid #e4e7ed;
|
||||||
align-items: center;
|
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>
|
</el-button>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-button @click="handleCancel">
|
|
||||||
取消
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="handleConfirm"
|
|
||||||
>
|
|
||||||
确定
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|||||||
Reference in New Issue
Block a user