wilson
/
xujiecloud-vue
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(eam): 添加点检模板Excel导入功能 

- 在API中新增uploadEamPropertiesModelExcel和downloadEamPropertiesModelTemplate接口
- 在点检模板页面添加导入按钮和导入对话框组件
- 实现Excel文件上传、BU选择和数据验证功能
- 添加模板下载功能和文件上传拖拽界面
- 实现导入确认逻辑和错误处理机制
- 添加相关的样式定义和对话框布局优化
master
qiankanghui 3 days ago
parent
bc48716a1d
commit
4a21649910
2 changed files with 261 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/api/eam/eam.js
  2. 259
      src/views/modules/eam/eamPropertiesModel.vue

2
src/api/eam/eam.js
View File

@ -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)

259
src/views/modules/eam/eamPropertiesModel.vue
View File

@ -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-->
@ -347,6 +348,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 class="download-area">
<el-button type="primary" @click="downloadTemplate" size="medium" style="width: 40%;">
<i class="el-icon-download"></i> 下载文件模板
</el-button>
</div>
<!-- BU选择 -->
<div class="bu-area">
<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"
>
<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>
@ -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()
}
},
}
}
</script>
@ -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;
}
</style>
Write Preview
Loading…
Cancel
Save