From bb0e0b5dc9e3fcd42f76bba61a6649a19f0ec040 Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Thu, 5 Feb 2026 16:20:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8Dialog=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=9B=BF=E4=BB=A3MessageBox=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5=E7=BB=93=E6=9E=9C=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

变更说明：
- 添加importResult数据状态管理弹窗显示和内容
- 创建专用Dialog组件展示导入结果，使用v-html渲染HTML
- 修改handleFileSuccess方法，使用Dialog替代$alert
- 添加Dialog专用样式，内容区域60vh高度支持独立滚动
- 美化滚动条样式（6px宽度、圆角设计、hover效果）
- 删除旧的MessageBox全局样式

修复问题：
- 解决CSS覆盖Element UI MessageBox样式不生效的问题
- 导入失败数据较多时，弹窗自适应页面高度

优势：
- 样式100%可控，无CSS优先级冲突
- Dialog组件自带良好的响应式布局
- 代码结构清晰，易于维护和扩展

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 ruoyi-ui/src/views/ccdiEmployee/index.vue | 131 ++++++++--------------
 1 file changed, 48 insertions(+), 83 deletions(-)

diff --git a/ruoyi-ui/src/views/ccdiEmployee/index.vue b/ruoyi-ui/src/views/ccdiEmployee/index.vue
index 5a622e0..26f9b24 100644
--- a/ruoyi-ui/src/views/ccdiEmployee/index.vue
+++ b/ruoyi-ui/src/views/ccdiEmployee/index.vue
@@ -247,6 +247,20 @@
         <el-button @click="upload.open = false" :disabled="upload.isUploading">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 导入结果对话框 -->
+    <el-dialog
+      :title="importResult.title"
+      :visible.sync="importResult.open"
+      width="700px"
+      append-to-body
+      class="import-result-dialog-wrapper"
+    >
+      <div class="import-result-content" v-html="importResult.content"></div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="importResult.open = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -346,6 +360,12 @@ export default {
         headers: { Authorization: "Bearer " + getToken() },
         // 上传的地址
         url: process.env.VUE_APP_BASE_API + "/ccdi/employee/importData"
+      },
+      // 导入结果弹窗
+      importResult: {
+        open: false,
+        title: "导入结果",
+        content: ""
       }
     };
   },
@@ -501,10 +521,9 @@ export default {
       this.upload.isUploading = false;
       this.upload.open = false;
       this.getList();
-      this.$alert(response.msg, "导入结果", {
-        dangerouslyUseHTMLString: true,
-        customClass: 'import-result-dialog'
-      });
+      // 显示导入结果弹窗
+      this.importResult.content = response.msg;
+      this.importResult.open = true;
     },
     // 提交上传文件
     submitFileForm() {
@@ -632,96 +651,42 @@ export default {
   font-size: 13px;
   margin-right: 8px;
 }
-</style>
 
-<style>
-/* 导入结果弹窗样式 - 全局样式，因为弹窗挂载在body下 */
-.import-result-dialog.el-message-box {
-  max-height: 70vh !important;
-  max-width: 700px !important;
-  width: 700px !important;
-  display: flex !important;
-  flex-direction: column !important;
-  position: fixed !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-.import-result-dialog .el-message-box__header {
-  flex-shrink: 0 !important;
-  padding: 15px 20px 10px !important;
-  border-bottom: 1px solid #ebeef5;
-}
-
-.import-result-dialog .el-message-box__content {
-  max-height: calc(70vh - 120px) !important;
-  overflow-y: auto !important;
-  overflow-x: hidden !important;
-  padding: 15px 20px !important;
-  flex-shrink: 1 !important;
-  scrollbar-width: thin;
-  scrollbar-color: #c0c4cc #f5f7fa;
-}
-
-.import-result-dialog .el-message-box__content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.import-result-dialog .el-message-box__content::-webkit-scrollbar-track {
-  background: #f5f7fa;
-  border-radius: 3px;
-}
-
-.import-result-dialog .el-message-box__content::-webkit-scrollbar-thumb {
-  background: #c0c4cc;
-  border-radius: 3px;
-}
-
-.import-result-dialog .el-message-box__content::-webkit-scrollbar-thumb:hover {
-  background: #909399;
-}
-
-.import-result-dialog .el-message-box__content p {
-  margin: 0;
-  padding: 0;
+/* 导入结果弹窗样式 */
+.import-result-dialog-wrapper .import-result-content {
+  max-height: 60vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px 0;
   line-height: 1.8;
   font-size: 14px;
   color: #606266;
 }
 
-.import-result-dialog .el-message-box__content br {
-  display: block;
-  margin: 4px 0;
-  content: "";
+/* 滚动条美化 */
+.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar {
+  width: 6px;
 }
 
-.import-result-dialog .el-message-box__btns {
-  flex-shrink: 0 !important;
-  padding: 10px 20px 15px !important;
-  border-top: 1px solid #ebeef5;
-  background: #fff;
+.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-track {
+  background: #f5f7fa;
+  border-radius: 3px;
 }
 
-/* 小屏幕适配 */
-@media screen and (max-height: 768px) {
-  .import-result-dialog.el-message-box {
-    max-height: 85vh !important;
-    max-width: 90vw !important;
-    width: 90vw !important;
-  }
-
-  .import-result-dialog .el-message-box__content {
-    max-height: calc(85vh - 100px) !important;
-    padding: 10px 15px !important;
-  }
+.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-thumb {
+  background: #c0c4cc;
+  border-radius: 3px;
 }
 
-/* 超小屏幕适配 */
-@media screen and (max-width: 768px) {
-  .import-result-dialog.el-message-box {
-    max-width: 95vw !important;
-    width: 95vw !important;
-  }
+.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-thumb:hover {
+  background: #909399;
 }
 
+/* Firefox滚动条 */
+.import-result-dialog-wrapper .import-result-content {
+  scrollbar-width: thin;
+  scrollbar-color: #c0c4cc #f5f7fa;
+}
+</style>
+
+<!-- 旧版MessageBox样式已废弃，现使用Dialog组件 -->