From 18c374d66b4bedaaed083072dee20588c36fc0b1 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Sat, 5 Jul 2025 17:41:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BD=BB=E5=BA=95=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=BB=B4=E4=BF=AE=E5=88=86=E7=B1=BB=E7=95=8C=E9=9D=A2=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为两个弹窗添加 :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 变量

问题: 新增/修改维修类型弹窗和查看详情弹窗的右上角关闭按钮不显示
修复: 多重保障确保关闭按钮正常显示
---
 web/src/views/hq/pm/repairCategory/index.vue | 38 ++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/web/src/views/hq/pm/repairCategory/index.vue b/web/src/views/hq/pm/repairCategory/index.vue
index d56f00b2..b24be759 100644
--- a/web/src/views/hq/pm/repairCategory/index.vue
+++ b/web/src/views/hq/pm/repairCategory/index.vue
@@ -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 {