Browse Source

feat(eam): 添加点检项目清单导入功能

- 在API中新增uploadEamPropertiesItemDetailExcel和downloadEamPropertiesItemDetailTemplate方法
- 在点检模板页面添加导入点检项目按钮和相应的对话框组件
- 实现点检项目文件上传、模板下载和导入确认逻辑
- 添加点检项目导入相关的数据属性和方法
- 实现点检项目模板下载功能和对话框关闭清理逻辑
master
qiankanghui 2 days ago
parent
commit
a7f48e12bb
  1. 2
      src/api/eam/eam.js
  2. 175
      src/views/modules/eam/eamPropertiesModel.vue

2
src/api/eam/eam.js

@ -77,6 +77,8 @@ export const deleteItemAvailable = data => createAPI(`/pms/eam/deleteItemAvailab
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 uploadEamPropertiesItemDetailExcel = data => createAPI(`/pms/eam/uploadEamPropertiesItemDetailExcel`,'post',data)
export const downloadEamPropertiesItemDetailTemplate = () => createAPI(`/pms/eam/downloadEamPropertiesItemDetailTemplate`,'get',{},'download')
//---------------维保项目------------------------
export const uploadEamMaintenanceItemExcel = data => createAPI(`/pms/eam/uploadEamMaintenanceItemExcel`,'post',data)

175
src/views/modules/eam/eamPropertiesModel.vue

@ -42,6 +42,7 @@
<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 type="primary" icon="el-icon-upload" @click="importItemExcel" 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-->
@ -411,6 +412,48 @@
</el-dialog>
</template>
<!-- 导入点检项目对话框 -->
<template>
<el-dialog
title="点检项目清单导入"
:close-on-click-modal="false"
:visible.sync="uploadItemDialogVisible"
width="400px"
top="12vh"
class="simple-dialog"
@close="handleUploadItemDialogClose"
>
<div class="download-area">
<el-button type="primary" @click="downloadItemTemplate" size="medium" style="width: 40%;">
<i class="el-icon-download"></i> 下载文件模板
</el-button>
</div>
<!-- 文件上传 -->
<div>
<el-upload
class="upload-demo"
drag
action="javascript:void(0);"
ref="uploadItemFile"
:on-change="handleItemFileChange"
:auto-upload="false"
:limit="1"
accept=".xlsx,.xls"
>
<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="confirmItemUpload" size="medium">保存</el-button>
<el-button @click="uploadItemDialogVisible = false" size="medium">关闭</el-button>
</span>
</el-dialog>
</template>
</div>
</template>
@ -433,7 +476,9 @@
goDownItemEam,
uploadEamPropertiesModelExcel, // Excel
downloadEamPropertiesModelTemplate, //
} from "@/api/eam/eam.js"
uploadEamPropertiesItemDetailExcel, // Excel
downloadEamPropertiesItemDetailTemplate //
} from '@/api/eam/eam.js'
import {getTableDefaultListLanguage, getTableUserListLanguage} from "@/api/table.js"
import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'
import Chooselist from '@/views/modules/common/Chooselist_eam'
@ -1228,6 +1273,11 @@
uploadFileName: '',
uploadFile: null,
uploadBu: '', // BU
//
uploadItemDialogVisible: false,
uploadItemFileName: '',
uploadItemFile: null,
uploadItemBu: '', // BU
}
},
@ -1861,6 +1911,56 @@
})
},
//
importItemExcel () {
this.uploadItemDialogVisible = true
this.uploadItemFileName = ''
this.uploadItemFile = null
// el-upload
if (this.$refs.uploadItemFile) {
this.$refs.uploadItemFile.clearFiles()
}
},
//
handleItemFileChange (file) {
this.uploadItemFile = file.raw
this.uploadItemFileName = file.name
},
//
confirmItemUpload () {
if (!this.uploadItemFile) {
this.$message.warning('请先选择文件')
return
}
const formData = new FormData()
formData.append('file', this.uploadItemFile)
formData.append('userId', this.$store.state.user.name)
//
uploadEamPropertiesItemDetailExcel(formData).then(({data}) => {
if (data.code === 0) {
this.$message.success(data.msg || '导入成功')
this.uploadItemDialogVisible = false
//
this.uploadItemFileName = ''
this.uploadItemFile = null
if (this.$refs.uploadItemFile) {
this.$refs.uploadItemFile.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({
@ -1925,6 +2025,70 @@
xhr.send()
},
//
downloadItemTemplate () {
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/downloadEamPropertiesItemDetailTemplate'), 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 = ''
@ -1934,6 +2098,15 @@
this.$refs.uploadFile.clearFiles()
}
},
//
handleUploadItemDialogClose () {
this.uploadItemFileName = ''
this.uploadItemFile = null
if (this.$refs.uploadItemFile) {
this.$refs.uploadItemFile.clearFiles()
}
}
}
}
</script>

Loading…
Cancel
Save