refactor: 抽离导入结果弹窗为通用组件并适配所有导入页面

新增组件:
- ImportResultDialog.vue: 通用导入结果弹窗组件
  * 支持HTML内容渲染
  * 60vh高度限制,内容独立滚动
  * 美化滚动条样式(6px宽度、圆角设计)
  * 提供visible、content、title等props配置

适配页面:
1. 员工信息管理页面 (ccdiEmployee)
   - 使用ImportResultDialog组件替代内嵌Dialog
   - 简化数据状态管理(importResultVisible、importResultContent)
   - 添加handleImportResultClose方法处理关闭事件

2. 员工招聘信息页面 (ccdiStaffRecruitment)
   - 使用ImportResultDialog替代$modal.msgSuccess/msgError
   - 统一导入结果展示方式
   - 支持HTML格式的错误列表展示

3. 中介黑名单导入组件 (ccdiIntermediary/ImportDialog)
   - 使用ImportResultDialog替代$msgbox
   - 保留原有的消息解析逻辑(成功/失败分类处理)
   - 移除内联样式,使用组件样式

优势:
- 统一导入结果展示样式和交互体验
- 组件复用,减少代码重复
- 便于维护和扩展(一处修改,全局生效)
- 自适应滚动,支持大量失败数据展示

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
wkc
2026-02-05 16:31:01 +08:00
parent bb0e0b5dc9
commit 9aa3faf452
4 changed files with 172 additions and 73 deletions

View File

@@ -0,0 +1,108 @@
<template>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
:width="width"
:append-to-body="appendToBody"
:close-on-click-modal="closeOnClickModal"
@close="handleClose"
class="import-result-dialog-wrapper"
>
<div class="import-result-content" v-html="content"></div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleClose"> </el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: "ImportResultDialog",
props: {
// 控制弹窗显示/隐藏
visible: {
type: Boolean,
default: false
},
// 弹窗标题
title: {
type: String,
default: "导入结果"
},
// 导入结果内容支持HTML
content: {
type: String,
default: ""
},
// 弹窗宽度
width: {
type: String,
default: "700px"
},
// 是否插入到body元素上
appendToBody: {
type: Boolean,
default: true
},
// 是否可以通过点击modal关闭
closeOnClickModal: {
type: Boolean,
default: false
}
},
computed: {
dialogVisible: {
get() {
return this.visible;
},
set(val) {
this.$emit("update:visible", val);
}
}
},
methods: {
handleClose() {
this.dialogVisible = false;
this.$emit("close");
}
}
};
</script>
<style scoped>
/* 导入结果弹窗样式 */
.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;
}
/* 滚动条美化 - WebKit浏览器Chrome/Safari/Edge */
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar {
width: 6px;
}
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-track {
background: #f5f7fa;
border-radius: 3px;
}
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-thumb {
background: #c0c4cc;
border-radius: 3px;
}
.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>