feat(eam): 添加维保模板Excel导入功能

- 在eam.js中新增uploadEamMaintenanceModelExcel和downloadEamMaintenanceModelTemplate接口
- 在eamMaintenanceModel.vue中添加导入按钮和导入对话框组件
- 实现维保模板Excel文件上传和解析功能
- 添加BU选择下拉框用于指定上传数据的业务单元
- 实现模板下载功能，使用XMLHttpRequest避免axios拦截器干扰
- 添加文件拖拽上传界面和相应的验证逻辑
- 实现上传成功后的数据刷新和界面清理功能
- 优化导入对话框的样式和用户体验
- 统一文件下载的实现方式，在属性模板中也使用XMLHttpRequest

src/api/eam/eam.js

@@ -92,6 +92,8 @@ export const saveModalDetails = data => createAPI(`/pms/eam/saveModalDetails`,'p
 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 uploadEamMaintenanceModelExcel = data => createAPI(`/pms/eam/uploadEamMaintenanceModelExcel`,'post',data)
+export const downloadEamMaintenanceModelTemplate = () => createAPI(`/pms/eam/downloadEamMaintenanceModelTemplate`,'get',{},'download')
 
 //---------------点检计划-------------------
 export const eamWorkPlanSearch = data => createAPI(`/pms/eam/eamWorkPlanSearch`,'post',data)

src/views/modules/eam/eamMaintenanceModel.vue

@@ -41,6 +41,7 @@
       <el-form-item label=" ">
         <el-button v-if="!authSearch" @click="getDataList()">查询</el-button>
         <el-button v-if="!authSave" type="primary" @click="addModal()">新增</el-button>
+        <el-button type="primary" icon="el-icon-upload" @click="importExcel" style="margin-left: 2px">导入</el-button>
         <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
         <el-button @click="exportDetailExcel()" type="primary" style="margin-left: 2px">{{'导出明细'}}</el-button>
 <!--        <download-excel-->
@@ -369,6 +370,69 @@
     </el-dialog>
 
     <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
+
+    <!-- 导入对话框 -->
+    <template>
+      <el-dialog
+        title="维保模板数据导入"
+        :close-on-click-modal="false"
+        :visible.sync="uploadDialogVisible"
+        width="400px"
+        top="12vh"
+        class="simple-dialog"
+        @close="handleUploadDialogClose"
+      >
+        <div style="margin-bottom: 8px;">
+          <el-button type="primary" @click="downloadTemplate" size="medium" style="width: 40%;">
+            <i class="el-icon-download"></i> 下载文件模板
+          </el-button>
+        </div>
+
+        <!-- BU选择 -->
+        <div style="margin-bottom: 15px;">
+          <el-form :inline="true" label-position="top" label-width="80px">
+            <el-form-item label="BU">
+              <el-select v-model="uploadBu" placeholder="请选择" style="width: 295px">
+                <el-option
+                  v-for="i in userBuList"
+                  :key="i.buNo"
+                  :label="i.sitename"
+                  :value="i.buNo">
+                  <span style="float: left;width: 100px">{{ i.sitename }}</span>
+                  <span style="float: right; color: #8492a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size: 11px;">
+                {{ i.buDesc }}
+              </span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 文件上传 -->
+        <div>
+          <el-upload
+            class="upload-demo"
+            drag
+            action="javascript:void(0);"
+            ref="uploadFile"
+            :on-change="handleFileChange"
+            :auto-upload="false"
+            :limit="1"
+            accept=".xlsx,.xls"
+            style="width: 100%;"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          </el-upload>
+        </div>
+
+        <!-- 底部 -->
+        <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmUpload" size="medium">保存</el-button>
+      <el-button @click="uploadDialogVisible = false" size="medium">关闭</el-button>
+    </span>
+      </el-dialog>
+    </template>
   </div>
 </template>
 
@@ -389,6 +453,8 @@
     getRoleByUserName,
     goUpItemEam,
     goDownItemEam,
+    uploadEamMaintenanceModelExcel, // 导入维保模板Excel
+    downloadEamMaintenanceModelTemplate, // 下载维保模板导入模板
   } from "@/api/eam/eam.js"
   import {getTableDefaultListLanguage, getTableUserListLanguage} from "@/api/table.js"
   import Chooselist from '@/views/modules/common/Chooselist_eam'
@@ -1181,6 +1247,11 @@
         authUpdate: false,
         authDelete: false,
         menuId: this.$route.meta.menuId,
+        // 上传相关
+        uploadDialogVisible: false,
+        uploadFileName: '',
+        uploadFile: null,
+        uploadBu: '', // 上传时选择的BU
       }
     },
 
@@ -1789,6 +1860,140 @@
         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
+
+        // 调用后端导入接口
+        uploadEamMaintenanceModelExcel(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)'
+        })
+
+        // 使用原生XMLHttpRequest处理文件下载,避免axios拦截器干扰
+        const xhr = new XMLHttpRequest()
+        xhr.open('GET', this.$http.adornUrl('/pms/eam/downloadEamMaintenanceModelTemplate'), true)
+        xhr.responseType = 'blob'
+        
+        // 添加token
+        const token = this.$cookie.get('token')
+        if (token) {
+          xhr.setRequestHeader('token', token)
+        }
+        
+        xhr.onload = () => {
+          loading.close()
+          
+          if (xhr.status === 200) {
+            const blob = xhr.response
+            
+            // 验证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('模板下载成功')
+          } else {
+            console.error('模板下载失败,状态码:', xhr.status)
+            this.$message.error('模板下载失败：服务器错误')
+          }
+        }
+        
+        xhr.onerror = () => {
+          loading.close()
+          console.error('网络错误')
+          this.$message.error('模板下载失败：网络错误')
+        }
+        
+        xhr.send()
+      },
+
+      // 关闭上传对话框时清空文件
+      handleUploadDialogClose () {
+        this.uploadFileName = ''
+        this.uploadFile = null
+        this.uploadBu = '' // 清空BU选择
+        if (this.$refs.uploadFile) {
+          this.$refs.uploadFile.clearFiles()
+        }
+      },
     }
   }
 </script>
@@ -1797,4 +2002,38 @@
   height: auto;
   line-height: 1.5;
 }
+.simple-dialog >>> .el-dialog {
+  margin-top: 12vh !important;
+  max-height: 70vh;
+  border-radius: 8px;
+}
+
+.simple-dialog >>> .el-dialog__body {
+  padding: 10px 20px;
+  max-height: calc(70vh - 120px);
+  overflow-y: auto;
+}
+
+/* 导入对话框内部元素靠左对齐 */
+.simple-dialog >>> .el-dialog__body > div {
+  text-align: left;
+}
+
+.simple-dialog >>> .el-form-item__label {
+  text-align: left !important;
+}
+
+/* 上传拖拽区域大小调整 */
+.upload-demo .el-upload-dragger {
+  width: 100%;
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.upload-demo .el-upload-dragger .el-icon-upload {
+  margin-bottom: 10px;
+}
 </style>

src/views/modules/eam/eamPropertiesModel.vue

@@ -1870,18 +1870,22 @@
           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 => {
+        // 使用原生XMLHttpRequest处理文件下载,避免axios拦截器干扰
+        const xhr = new XMLHttpRequest()
+        xhr.open('GET', this.$http.adornUrl('/pms/eam/downloadEamPropertiesModelTemplate'), true)
+        xhr.responseType = 'blob'
+        
+        // 添加token
+        const token = this.$cookie.get('token')
+        if (token) {
+          xhr.setRequestHeader('token', token)
+        }
+        
+        xhr.onload = () => {
           loading.close()
           
-          // 创建Blob对象，指定正确的MIME类型
-          const blob = new Blob([response.data], {
-            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
-          })
+          if (xhr.status === 200) {
+            const blob = xhr.response
             
             // 验证Blob大小
             if (blob.size === 0) {
@@ -1906,11 +1910,19 @@
             }, 100)
             
             this.$message.success('模板下载成功')
-        }).catch(error => {
+          } else {
+            console.error('模板下载失败,状态码:', xhr.status)
+            this.$message.error('模板下载失败：服务器错误')
+          }
+        }
+        
+        xhr.onerror = () => {
           loading.close()
-          console.error('模板下载失败:', error)
-          this.$message.error('模板下载失败：' + (error.message || '未知错误'))
-        })
+          console.error('网络错误')
+          this.$message.error('模板下载失败：网络错误')
+        }
+        
+        xhr.send()
       },
 
       // 关闭上传对话框时清空文件