From 4a21649910eb49bbfb91da8f80dda56c3549055a Mon Sep 17 00:00:00 2001 From: qiankanghui Date: Thu, 9 Jul 2026 14:32:17 +0800 Subject: [PATCH] =?UTF-8?q?feat(eam):=20=E6=B7=BB=E5=8A=A0=E7=82=B9?= =?UTF-8?q?=E6=A3=80=E6=A8=A1=E6=9D=BFExcel=E5=AF=BC=E5=85=A5=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在API中新增uploadEamPropertiesModelExcel和downloadEamPropertiesModelTemplate接口 - 在点检模板页面添加导入按钮和导入对话框组件 - 实现Excel文件上传、BU选择和数据验证功能 - 添加模板下载功能和文件上传拖拽界面 - 实现导入确认逻辑和错误处理机制 - 添加相关的样式定义和对话框布局优化 --- src/api/eam/eam.js | 2 + src/views/modules/eam/eamPropertiesModel.vue | 259 +++++++++++++++++++ 2 files changed, 261 insertions(+) diff --git a/src/api/eam/eam.js b/src/api/eam/eam.js index 1345f73..e7031fd 100644 --- a/src/api/eam/eam.js +++ b/src/api/eam/eam.js @@ -90,6 +90,8 @@ export const eamPropertiesModelDelete = data => createAPI(`/pms/eam/eamPropertie export const searchModalDetails = data => createAPI(`/pms/eam/searchModalDetails`,'post',data) export const saveModalDetails = data => createAPI(`/pms/eam/saveModalDetails`,'post',data) export const deleteModalDetails = data => createAPI(`/pms/eam/deleteModalDetails`,'post',data) +export const uploadEamPropertiesModelExcel = data => createAPI(`/pms/eam/uploadEamPropertiesModelExcel`,'post',data) +export const downloadEamPropertiesModelTemplate = () => createAPI(`/pms/eam/downloadEamPropertiesModelTemplate`,'get',{},'download') //---------------点检计划------------------- export const eamWorkPlanSearch = data => createAPI(`/pms/eam/eamWorkPlanSearch`,'post',data) diff --git a/src/views/modules/eam/eamPropertiesModel.vue b/src/views/modules/eam/eamPropertiesModel.vue index 891436f..27147fc 100644 --- a/src/views/modules/eam/eamPropertiesModel.vue +++ b/src/views/modules/eam/eamPropertiesModel.vue @@ -41,6 +41,7 @@ 查询 新增 + 导入 {{'导出'}} {{'导出明细'}} @@ -347,6 +348,69 @@ + + + + @@ -367,6 +431,8 @@ getRoleByUserName, goUpItemEam, goDownItemEam, + uploadEamPropertiesModelExcel, // 导入点检模板Excel + downloadEamPropertiesModelTemplate, // 下载点检模板导入模板 } from "@/api/eam/eam.js" import {getTableDefaultListLanguage, getTableUserListLanguage} from "@/api/table.js" import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js' @@ -1157,6 +1223,11 @@ authUpdate: false, authDelete: false, menuId: this.$route.meta.menuId, + // 上传相关 + uploadDialogVisible: false, + uploadFileName: '', + uploadFile: null, + uploadBu: '', // 上传时选择的BU } }, @@ -1729,6 +1800,128 @@ this.authUpdate = !updateFlag this.authDelete = !deleteFlag }, + + // Excel导入 + importExcel () { + this.uploadDialogVisible = true + this.uploadFileName = '' + this.uploadFile = null + this.uploadBu = '' // 清空BU选择 + // 清空el-upload组件的文件列表 + if (this.$refs.uploadFile) { + this.$refs.uploadFile.clearFiles() + } + }, + + // 文件选择变化 + handleFileChange (file) { + this.uploadFile = file.raw + this.uploadFileName = file.name + }, + + // 确认上传 + confirmUpload () { + // 验证BU是否选择 + if (!this.uploadBu || this.uploadBu === '') { + this.$message.warning('请先选择BU') + return + } + + if (!this.uploadFile) { + this.$message.warning('请先选择文件') + return + } + + const formData = new FormData() + formData.append('file', this.uploadFile) + formData.append('createBy', this.$store.state.user.name) + formData.append('site', this.uploadBu.split('_')[0]) // 从BU中提取site + formData.append('buNo', this.uploadBu.split('_')[1]) // 从BU中提取buNo + + // 调用后端导入接口 + uploadEamPropertiesModelExcel(formData).then(({data}) => { + if (data.code === 0) { + this.$message.success(data.msg || '导入成功') + this.uploadDialogVisible = false + // 清空文件信息 + this.uploadFileName = '' + this.uploadFile = null + this.uploadBu = '' + if (this.$refs.uploadFile) { + this.$refs.uploadFile.clearFiles() + } + this.getDataList() + } else { + this.$message.error(data.msg || '导入失败') + } + }).catch((error) => { + console.error('导入失败:', error) + const errorMsg = (error.response && error.response.data && error.response.data.msg) || error.message || '未知错误' + this.$message.error('导入失败: ' + errorMsg) + }) + }, + + // 下载模板 + downloadTemplate () { + const loading = this.$loading({ + lock: true, + text: '正在下载模板...', + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.7)' + }) + + // 使用axios直接请求，设置responseType为arraybuffer + this.$http({ + url: this.$http.adornUrl('/pms/eam/downloadEamPropertiesModelTemplate'), + method: 'get', + responseType: 'arraybuffer' // 使用arraybuffer避免乱码 + }).then(response => { + loading.close() + + // 创建Blob对象，指定正确的MIME类型 + const blob = new Blob([response.data], { + type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' + }) + + // 验证Blob大小 + if (blob.size === 0) { + this.$message.error('模板文件为空，请联系管理员') + return + } + + // 创建下载链接 + const url = window.URL.createObjectURL(blob) + const link = document.createElement('a') + link.href = url + link.download = '点检模板导入模板.xlsx' + link.style.display = 'none' + + document.body.appendChild(link) + link.click() + document.body.removeChild(link) + + // 释放URL对象 + setTimeout(() => { + window.URL.revokeObjectURL(url) + }, 100) + + this.$message.success('模板下载成功') + }).catch(error => { + loading.close() + console.error('模板下载失败:', error) + this.$message.error('模板下载失败：' + (error.message || '未知错误')) + }) + }, + + // 关闭上传对话框时清空文件 + handleUploadDialogClose () { + this.uploadFileName = '' + this.uploadFile = null + this.uploadBu = '' // 清空BU选择 + if (this.$refs.uploadFile) { + this.$refs.uploadFile.clearFiles() + } + }, } } @@ -1737,4 +1930,70 @@ height: auto; line-height: 1.5; } +.simple-dialog >>> .el-dialog { + border-radius: 8px; +} + + +/* body顶格 */ +.simple-dialog >>> .el-dialog__body { + padding: 0px 20px 10px 20px !important; +} + + +/* 内容不要额外缩进 */ +.simple-dialog >>> .el-dialog__body > div { + margin-left: 0 !important; +} + + +/* 下载区域 */ +.download-area { + margin-top: 0; + margin-bottom: 0; +} + + +/* 下载按钮 */ +.download-btn { + width: 40%; +} + + +/* BU区域 */ +.bu-area { + margin-top: 0; + margin-bottom: 5px; +} + + +/* BU label */ +.simple-dialog >>> .el-form-item__label { + padding-bottom: 0; + line-height: 22px; +} + + +/* 去掉form自带间距 */ +.simple-dialog >>> .el-form-item { + margin-bottom: 0; +} + + +/* 上传区域 */ +.upload-demo { + margin-top: 0; +} + + +/* 上传框 */ +.upload-demo .el-upload-dragger { + width: 100%; + height: 150px; +} + +.simple-dialog >>> .el-dialog__body { + padding-left: 10px !important; + padding-right: 0 !important; +}