refactor: 使用Dialog组件替代MessageBox优化导入结果弹窗

变更说明:
- 添加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>
This commit is contained in:
wkc
2026-02-05 16:20:53 +08:00
parent f3a999c6aa
commit bb0e0b5dc9

View File

@@ -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组件 -->