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>
|
<el-button @click="upload.open = false" :disabled="upload.isUploading">取 消</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -346,6 +360,12 @@ export default {
|
|||||||
headers: { Authorization: "Bearer " + getToken() },
|
headers: { Authorization: "Bearer " + getToken() },
|
||||||
// 上传的地址
|
// 上传的地址
|
||||||
url: process.env.VUE_APP_BASE_API + "/ccdi/employee/importData"
|
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.isUploading = false;
|
||||||
this.upload.open = false;
|
this.upload.open = false;
|
||||||
this.getList();
|
this.getList();
|
||||||
this.$alert(response.msg, "导入结果", {
|
// 显示导入结果弹窗
|
||||||
dangerouslyUseHTMLString: true,
|
this.importResult.content = response.msg;
|
||||||
customClass: 'import-result-dialog'
|
this.importResult.open = true;
|
||||||
});
|
|
||||||
},
|
},
|
||||||
// 提交上传文件
|
// 提交上传文件
|
||||||
submitFileForm() {
|
submitFileForm() {
|
||||||
@@ -632,96 +651,42 @@ export default {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
/* 导入结果弹窗样式 */
|
||||||
/* 导入结果弹窗样式 - 全局样式,因为弹窗挂载在body下 */
|
.import-result-dialog-wrapper .import-result-content {
|
||||||
.import-result-dialog.el-message-box {
|
max-height: 60vh;
|
||||||
max-height: 70vh !important;
|
overflow-y: auto;
|
||||||
max-width: 700px !important;
|
overflow-x: hidden;
|
||||||
width: 700px !important;
|
padding: 10px 0;
|
||||||
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;
|
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-result-dialog .el-message-box__content br {
|
/* 滚动条美化 */
|
||||||
display: block;
|
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar {
|
||||||
margin: 4px 0;
|
width: 6px;
|
||||||
content: "";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-result-dialog .el-message-box__btns {
|
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-track {
|
||||||
flex-shrink: 0 !important;
|
background: #f5f7fa;
|
||||||
padding: 10px 20px 15px !important;
|
border-radius: 3px;
|
||||||
border-top: 1px solid #ebeef5;
|
|
||||||
background: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 小屏幕适配 */
|
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-thumb {
|
||||||
@media screen and (max-height: 768px) {
|
background: #c0c4cc;
|
||||||
.import-result-dialog.el-message-box {
|
border-radius: 3px;
|
||||||
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:hover {
|
||||||
@media screen and (max-width: 768px) {
|
background: #909399;
|
||||||
.import-result-dialog.el-message-box {
|
|
||||||
max-width: 95vw !important;
|
|
||||||
width: 95vw !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 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