feat(eam): 添加点检和维保项目的Excel导入功能

- 在eam.js中添加了点检和维保项目的上传和模板下载API接口
- 为点检项目页面添加Excel导入按钮和导入对话框功能
- 为维保项目页面添加Excel导入按钮和导入对话框功能
- 实现了文件上传、模板下载和BU选择的功能逻辑
- 添加了导入对话框的样式和文件拖拽上传界面
- 实现了导入数据的表单验证和错误处理机制

src/api/eam/eam.js

@@ -66,7 +66,7 @@ export const eamAdminLevelEdit = data => createAPI(`/pms/eam/eamAdminLevelEdit`,
 
 export const eamAdminLevelDelete = data => createAPI(`/pms/eam/eamAdminLevelDelete`,'post',data)
 
-//----------------点检项目------------------------
+//---------------点检项目------------------------
 export const eamPropertiesItemSearch = data => createAPI(`/pms/eam/eamPropertiesItemSearch`,'post',data)
 export const eamPropertiesItemSave = data => createAPI(`/pms/eam/eamPropertiesItemSave`,'post',data)
 export const eamPropertiesItemEdit = data => createAPI(`/pms/eam/eamPropertiesItemEdit`,'post',data)
@@ -75,6 +75,12 @@ export const saveItemAvailable = data => createAPI(`/pms/eam/saveItemAvailable`,
 export const searchItemAvailable = data => createAPI(`/pms/eam/searchItemAvailable`,'post',data)
 export const deleteItemAvailable = data => createAPI(`/pms/eam/deleteItemAvailable`,'post',data)
 export const deleteModalDetail = data => createAPI(`/pms/eam/deleteModalDetail`,'post',data)
+export const uploadEamPropertiesItemExcel = data => createAPI(`/pms/eam/uploadEamPropertiesItemExcel`,'post',data)
+export const downloadEamPropertiesItemTemplate = () => createAPI(`/pms/eam/downloadEamPropertiesItemTemplate`,'get',{},'download')
+
+//---------------维保项目------------------------
+export const uploadEamMaintenanceItemExcel = data => createAPI(`/pms/eam/uploadEamMaintenanceItemExcel`,'post',data)
+export const downloadEamMaintenanceItemTemplate = () => createAPI(`/pms/eam/downloadEamMaintenanceItemTemplate`,'get',{},'download')
 
 //---------------点检模板-------------------
 export const eamPropertiesModelSearch = data => createAPI(`/pms/eam/eamPropertiesModelSearch`,'post',data)

src/views/modules/eam/eamMaintenanceItem.vue

@@ -27,6 +27,7 @@
       <el-form-item label=" ">
         <el-button v-if="!authSearch" type="primary" @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>
 <!--        <download-excel-->
 <!--          :fields="fields()"-->
@@ -218,6 +219,68 @@
         <el-button type="primary" @click="itemModalFlag = false">关闭</el-button>
       </el-footer>
     </el-dialog>
+
+    <!-- 导入对话框 -->
+    <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>
 
@@ -231,7 +294,9 @@
     saveItemAvailable,
     deleteItemAvailable,
     getSiteAndBuByUserName,
-    getRoleByUserName
+    getRoleByUserName,
+    uploadEamMaintenanceItemExcel, // 导入维保项目Excel
+    downloadEamMaintenanceItemTemplate, // 下载维保项目导入模板
   } from "@/api/eam/eam.js"
   import {getTableDefaultListLanguage, getTableUserListLanguage} from "@/api/table.js"
   import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'
@@ -642,6 +707,11 @@
         authDelete: false,
         authChoose: false,
         menuId: this.$route.meta.menuId,
+        // 上传相关
+        uploadDialogVisible: false,
+        uploadFileName: '',
+        uploadFile: null,
+        uploadBu: '', // 上传时选择的BU
       }
     },
 
@@ -1090,12 +1160,159 @@
         this.authDelete = !deleteFlag
         this.authChoose = !chooseFlag
       },
+
+      // 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
+
+        // 调用后端导入接口
+        uploadEamMaintenanceItemExcel(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/downloadEamMaintenanceItemTemplate'),
+          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()
+        }
+      },
     }
   }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .el-table /deep/ .cell{
   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: 20px 30px;
+  max-height: calc(70vh - 120px);
+  overflow-y: auto;
+}
+
+/* 上传拖拽区域大小调整 */
+.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/eamPropertiesItem.vue

@@ -1,4 +1,4 @@
-<template>
+<template xmlns:margin-top="http://www.w3.org/1999/xhtml">
   <div class="mod-config">
     <el-form :inline="true" label-position="top" :model="searchData">
       <el-form-item label="BU">
@@ -27,6 +27,7 @@
       <el-form-item label=" ">
         <el-button v-if="!authSearch" type="primary" @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>
 <!--        <download-excel-->
 <!--          :fields="fields()"-->
@@ -222,6 +223,68 @@
         <el-button type="primary" @click="itemModalFlag = false">关闭</el-button>
       </el-footer>
     </el-dialog>
+
+    <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;" margin-top: -4px>
+          <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>
 
@@ -237,6 +300,8 @@
     getSiteAndBuByUserName,
     getRoleByUserName,
     queryItemNo,//获取 点检、维保项目编码
+    uploadEamPropertiesItemExcel, // 导入点检项目Excel
+    downloadEamPropertiesItemTemplate, // 下载点检项目导入模板
   } from "@/api/eam/eam.js"
   import {getTableDefaultListLanguage, getTableUserListLanguage} from "@/api/table.js"
   import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'
@@ -666,6 +731,11 @@
         authDelete: false,
         authChoose: false,
         menuId: this.$route.meta.menuId,
+        // 上传相关
+        uploadDialogVisible: false,
+        uploadFileName: '',
+        uploadFile: null,
+        uploadBu: '', // 上传时选择的BU
       }
     },
 
@@ -1124,6 +1194,128 @@
         this.authDelete = !deleteFlag
         this.authChoose = !chooseFlag
       },
+
+      // 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
+
+        // 调用后端导入接口
+        uploadEamPropertiesItemExcel(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为blob
+        this.$http({
+          url: this.$http.adornUrl('/pms/eam/downloadEamPropertiesItemTemplate'),
+          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()
+        }
+      },
     }
   }
 </script>
@@ -1136,4 +1328,29 @@
   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: 20px 30px;
+  max-height: calc(70vh - 120px);
+  overflow-y: auto;
+}
+
+/* 上传拖拽区域大小调整 */
+.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>