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:
@@ -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组件 -->
|
||||
|
||||
Reference in New Issue
Block a user