ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

批量导入被检设备

Browse Source
This commit is contained in:
hongawen
2025-01-16 19:45:48 +08:00
parent fe1bb04922
commit 07a5e32579
4 changed files with 215 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
frontend/src/components/ImportExcel/index.vue
View File

@@ -1,49 +1,48 @@
<template>
<el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
<el-form class="drawer-multiColumn-form" label-width="100px">
<el-form-item label="模板下载 :">
<el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
<el-dialog v-model='dialogVisible' :title='`批量添加${parameter.title}`' :destroy-on-close='true' width='580px'
draggable>
<el-form class='drawer-multiColumn-form' label-width='100px'>
<el-form-item label='模板下载 :'>
<el-button type='primary' :icon='Download' @click='downloadTemp'> 点击下载</el-button>
</el-form-item>
<el-form-item label="文件上传 :">
<el-form-item label='文件上传 :'>
<el-upload
action="#"
class="upload"
:drag="true"
:limit="excelLimit"
:multiple="true"
:show-file-list="true"
:http-request="uploadExcel"
:before-upload="beforeExcelUpload"
:on-exceed="handleExceed"
:on-success="excelUploadSuccess"
:on-error="excelUploadError"
action='#'
class='upload'
:drag='true'
:limit='excelLimit'
:multiple='true'
:show-file-list='true'
:http-request='uploadExcel'
:before-upload='beforeExcelUpload'
:on-exceed='handleExceed'
:accept="parameter.fileType!.join(',')"
>
<slot name="empty">
<el-icon class="el-icon--upload">
<slot name='empty'>
<el-icon class='el-icon--upload'>
<upload-filled />
</el-icon>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class='el-upload__text'>将文件拖到此处，或<em>点击上传</em></div>
</slot>
<template #tip>
<slot name="tip">
<div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
<slot name='tip'>
<div class='el-upload__tip'>请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
</slot>
</template>
</el-upload>
</el-form-item>
<el-form-item v-if="parameter.showCover" label="数据覆盖 :">
<el-switch v-model="isCover" />
<el-form-item v-if='parameter.showCover' label='数据覆盖 :'>
<el-switch v-model='isCover' />
</el-form-item>
</el-form>
</el-dialog>
</template>
<script setup lang="ts" name="ImportExcel">
import { ref } from "vue";
import { useDownload } from "@/hooks/useDownload";
import { Download } from "@element-plus/icons-vue";
import { ElNotification, UploadRequestOptions, UploadRawFile, ElMessage } from "element-plus";
<script setup lang='ts' name='ImportExcel'>
import { ref } from 'vue'
import { useDownload } from '@/hooks/useDownload'
import { Download } from '@element-plus/icons-vue'
import { ElNotification, UploadRequestOptions, UploadRawFile, ElMessage } from 'element-plus'
export interface ExcelParameterProps {
title: string; // 标题
@@ -57,78 +56,73 @@ export interface ExcelParameterProps {
}
// 是否覆盖数据
const isCover = ref(false);
const isCover = ref(false)
// 最大文件上传数
const excelLimit = ref(1);
const excelLimit = ref(1)
// dialog状态
const dialogVisible = ref(false);
const dialogVisible = ref(false)
// 父组件传过来的参数
const parameter = ref<ExcelParameterProps>({
title: "",
title: '',
fileSize: 5,
fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
});
fileType: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
})
// 接收父组件参数
const acceptParams = (params: ExcelParameterProps) => {
parameter.value = { ...parameter.value, ...params };
dialogVisible.value = true;
};
parameter.value = { ...parameter.value, ...params }
dialogVisible.value = true
}
// Excel 导入模板下载
const downloadTemp = () => {
if (!parameter.value.tempApi) return;
useDownload(parameter.value.tempApi, `${parameter.value.title}模板`,{},false);
};
if (!parameter.value.tempApi) return
useDownload(parameter.value.tempApi, `${parameter.value.title}模板`, {}, false)
}
// 文件上传
const uploadExcel = async (param: UploadRequestOptions) => {
let excelFormData = new FormData();
excelFormData.append("file", param.file);
if(parameter.value.patternId){
excelFormData.append("patternId",parameter.value.patternId)
let excelFormData = new FormData()
excelFormData.append('file', param.file)
if (parameter.value.patternId) {
excelFormData.append('patternId', parameter.value.patternId)
}
isCover.value && excelFormData.append("isCover", isCover.value as unknown as Blob);
isCover.value && excelFormData.append('isCover', isCover.value as unknown as Blob)
//await parameter.value.importApi!(excelFormData);
await parameter.value.importApi!(excelFormData)
.then(res => handleImportResponse( res))
parameter.value.getTableList && parameter.value.getTableList();
dialogVisible.value = false;
};
.then(res => handleImportResponse(res))
parameter.value.getTableList && parameter.value.getTableList()
dialogVisible.value = false
}
async function handleImportResponse( res: any) {
//console.log('res1', res.type);
if (res.type === 'application/json') {
//console.log('res2', res);
const fileReader = new FileReader()
fileReader.onloadend = () => {
try {
const jsonData = JSON.parse(fileReader.result)
// console.log('123',jsonData)
if (jsonData.code === 'A0000') {
ElMessage.success('导入成功')
} else {
//ElMessage.error('导入失败，请查看下载附件！')
}
} catch (err) {
console.log(err)
}
async function handleImportResponse(res: any) {
if (res.type === 'application/json') {
const fileReader = new FileReader()
fileReader.onloadend = () => {
try {
const jsonData = JSON.parse(fileReader.result)
if (jsonData.code === 'A0000') {
ElMessage.success('导入成功')
} else {
ElMessage.error(jsonData.message)
}
fileReader.readAsText(res)
} else {
//ElMessage.error('导入失败，请查看下载附件！')
// let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
// const url = window.URL.createObjectURL(blob)
// const link = document.createElement('a')
// link.href = url
// link.download = '终端入网检测失败列表'
// document.body.appendChild(link)
// link.click()
// link.remove()
} catch (err) {
console.log(err)
}
}
fileReader.readAsText(res)
} else {
ElMessage.error('导入失败，请查看下载附件！')
let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = '终端入网检测失败列表'
document.body.appendChild(link)
link.click()
link.remove()
}
}
/**
@@ -136,56 +130,56 @@ async function handleImportResponse( res: any) {
* @param file 上传的文件
* */
const beforeExcelUpload = (file: UploadRawFile) => {
const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType);
const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType)
const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!
if (!isExcel)
ElNotification({
title: "温馨提示",
message: "上传文件只能是 xls / xlsx 格式！",
type: "warning"
});
title: '温馨提示',
message: '上传文件只能是 xls / xlsx 格式！',
type: 'warning',
})
if (!fileSize)
setTimeout(() => {
ElNotification({
title: "温馨提示",
title: '温馨提示',
message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
type: "warning"
});
}, 0);
return isExcel && fileSize;
};
type: 'warning',
})
}, 0)
return isExcel && fileSize
}
// 文件数超出提示
const handleExceed = () => {
ElNotification({
title: "温馨提示",
message: "最多只能上传一个文件！",
type: "warning"
});
};
title: '温馨提示',
message: '最多只能上传一个文件！',
type: 'warning',
})
}
// 上传错误提示
const excelUploadError = () => {
ElNotification({
title: "温馨提示",
message: `批量添加${parameter.value.title}失败，请您重新上传！`,
type: "error"
});
};
// const excelUploadError = () => {
// ElNotification({
// title: '温馨提示',
// message: `批量添加${parameter.value.title}失败，请您重新上传！`,
// type: 'error',
// })
// }
// 上传成功提示
const excelUploadSuccess = () => {
ElNotification({
title: "温馨提示",
message: `批量添加${parameter.value.title}成功！`,
type: "success"
});
};
// const excelUploadSuccess = () => {
// ElNotification({
// title: '温馨提示',
// message: `批量添加${parameter.value.title}成功！`,
// type: 'success',
// })
// }
defineExpose({
acceptParams
});
acceptParams,
})
</script>
<style lang="scss" scoped>
<style lang='scss' scoped>
@import "./index.scss";
</style>