fix: 彻底修复维修分类界面弹窗关闭按钮显示问题

- 为两个弹窗添加 :show-close="true" 强制显示关闭按钮
- 为两个弹窗添加 :close-on-click-modal="false" 禁用点击遮罩关闭
- 为两个弹窗添加 class="repair-category-dialog" 用于样式控制
- 添加专门的CSS样式强制显示关闭按钮,确保不被其他样式覆盖
- 使用 :deep() 穿透样式,确保对话框头部按钮和关闭按钮正常显示

解决方案:
1. 显式设置 show-close 属性为 true
2. 通过CSS强制设置 display: block、visibility: visible、opacity: 1
3. 确保关闭按钮颜色使用 --art-gray-500 变量

问题: 新增/修改维修类型弹窗和查看详情弹窗的右上角关闭按钮不显示
修复: 多重保障确保关闭按钮正常显示
This commit is contained in:
zlwu committed 2025-07-05 17:41:39 +08:00
1 parent 45ecab1c70
commit 18c374d66b
1 file changed
+36 -2
+36 -2
View File
@@ -123,7 +123,15 @@
</el-card>
<!-- 添加或修改维修类型对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body :show-close="true">
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="800px"
append-to-body
:show-close="true"
:close-on-click-modal="false"
class="repair-category-dialog"
>
<el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
@@ -210,7 +218,15 @@
</el-dialog>
<!-- 查看维修类型详情对话框 -->
<el-dialog title="维修类型详情" v-model="viewDialog.visible" width="800px" append-to-body :show-close="true">
<el-dialog
title="维修类型详情"
v-model="viewDialog.visible"
width="800px"
append-to-body
:show-close="true"
:close-on-click-modal="false"
class="repair-category-dialog"
>
<div v-if="viewData" class="category-detail">
<el-descriptions :column="2" border>
<el-descriptions-item label="类型名称">
@@ -670,6 +686,24 @@ onMounted(() => {
});
</script>
<style lang="scss" scoped>
// 强制显示关闭按钮
.repair-category-dialog {
:deep(.el-dialog__headerbtn) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
:deep(.el-dialog__close) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: var(--art-gray-500) !important;
}
}
</style>
<style lang="scss" scoped>
.page-container {
.table-container {