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:
108
ruoyi-ui/src/components/ImportResultDialog.vue
Normal file
108
ruoyi-ui/src/components/ImportResultDialog.vue
Normal 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>
|
||||
Reference in New Issue
Block a user