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

@@ -85,13 +85,23 @@
</el-button>
</div>
</el-dialog>
<!-- 导入结果对话框 -->
<import-result-dialog
:visible.sync="importResultVisible"
:content="importResultContent"
title="导入结果"
@close="handleImportResultClose"
/>
</template>
<script>
import {getToken} from "@/utils/auth";
import ImportResultDialog from "@/components/ImportResultDialog.vue";
export default {
name: "ImportDialog",
components: { ImportResultDialog },
props: {
visible: {
type: Boolean,
@@ -110,7 +120,10 @@ export default {
},
headers: { Authorization: "Bearer " + getToken() },
isUploading: false,
isFileSelected: false
isFileSelected: false,
// 导入结果弹窗
importResultVisible: false,
importResultContent: ""
};
},
computed: {
@@ -182,15 +195,16 @@ export default {
displayMessage = lines[0]; // 只取错误部分
}
this.$msgbox({
title: '导入结果',
dangerouslyUseHTMLString: true,
message: `<div style="overflow-y: auto; max-height: 60vh; padding-right: 10px; line-height: 1.6;">${displayMessage}</div>`,
confirmButtonText: '确定',
customClass: 'import-result-dialog'
});
// 显示导入结果弹窗
this.importResultContent = displayMessage;
this.importResultVisible = true;
this.$refs.upload.clearFiles();
},
// 导入结果弹窗关闭
handleImportResultClose() {
this.importResultVisible = false;
this.importResultContent = "";
},
handleFileError() {
this.isUploading = false;
this.$modal.msgError("导入失败,请检查文件格式是否正确");