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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user