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:
@@ -336,12 +336,21 @@
|
||||
<el-button @click="upload.open = false" :disabled="upload.isUploading">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 导入结果对话框 -->
|
||||
<import-result-dialog
|
||||
:visible.sync="importResultVisible"
|
||||
:content="importResultContent"
|
||||
title="导入结果"
|
||||
@close="handleImportResultClose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addStaffRecruitment, delStaffRecruitment, getStaffRecruitment, listStaffRecruitment, updateStaffRecruitment, importTemplate } from "@/api/ccdiStaffRecruitment";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import ImportResultDialog from "@/components/ImportResultDialog.vue";
|
||||
|
||||
// 身份证号校验正则
|
||||
const idCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
|
||||
@@ -350,6 +359,7 @@ const gradPattern = /^((19|20)\d{2})(0[1-9]|1[0-2])$/;
|
||||
|
||||
export default {
|
||||
name: "StaffRecruitment",
|
||||
components: { ImportResultDialog },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
@@ -453,7 +463,10 @@ export default {
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + "/ccdi/staffRecruitment/importData"
|
||||
}
|
||||
},
|
||||
// 导入结果弹窗
|
||||
importResultVisible: false,
|
||||
importResultContent: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -590,15 +603,18 @@ export default {
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.isUploading = false;
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
this.upload.open = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$modal.msgError(response.msg);
|
||||
}
|
||||
this.upload.open = false;
|
||||
this.getList();
|
||||
// 显示导入结果弹窗
|
||||
this.importResultContent = response.msg || response;
|
||||
this.importResultVisible = true;
|
||||
this.$refs.upload.clearFiles();
|
||||
},
|
||||
// 导入结果弹窗关闭
|
||||
handleImportResultClose() {
|
||||
this.importResultVisible = false;
|
||||
this.importResultContent = "";
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit();
|
||||
|
||||
Reference in New Issue
Block a user