<template> <!-- 公共导入组件 --> <upload-excel :on-success="success" /> </template> <script> import { importEmployee } from '@/api/employees' export default { data() { return { type: this.$route.query.type } }, methods: { // 声明一个函数 async success({ header, results }) { if (this.type === 'user') { // 中文转化为英文 const userRelations = { '入职日期': 'timeOfEntry', '手机号': 'mobile', '姓名': 'username', '转正日期': 'correctionTime', '工号': 'workNumber' } console.log(header, results) const arr = [] // 遍历所有的数组 results.forEach(item => { // 需要将每一个条数据里面的中文都换成英文 const userInfo = {} Object.keys(item).forEach(key => { // key是当前的中文名 找到对应的英文名 // `new Date()` 可以有参数,字符串日期转换成时间格式,如果没有参数获取的是当前的时间对象 if (userRelations[key] === 'timeOfEntry' || userRelations[key] === 'correctionTime') { userInfo[userRelations[key]] = new Date(this.formatDate(item[key], '/')) // 只有这样, 才能入库 } else { userInfo[userRelations[key]] = item[key] } }) // 最终userInfo变成了全是英文 arr.push(userInfo) }) console.log(arr) await importEmployee(arr) this.$message.success('导入成功') } this.$router.back() // 回到上一页 }, // 处理Excel时间 formatDate(numb, format) { const time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) const year = time.getFullYear() + '' const month = time.getMonth() + 1 + '' const date = time.getDate() - 1 + '' if (format && format.length === 1) { return year + format + month + format + date } return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date) } } } </script> <style> </style>
时间: 2024-02-14 09:22:09 浏览: 22
这是一个使用了element-ui的upload组件,导入了一个名为upload-excel的自定义组件,该组件在上传成功后会调用success方法,将上传的数据进行处理后再调用importEmployee方法进行导入操作。在处理数据的过程中,使用了一个函数formatDate来处理Excel中的时间数据,并且将中文字段名转换为对应的英文字段名,最终将处理后的数据存储在一个数组中,传递给importEmployee方法进行导入操作。
相关问题
<div> <excel-upload :importTemplate="importTemplate" :show.sync="openExcel" ref="excelUpload" :action="api" @on-success="handleFileSuccess" :data="{ unitOrgId: conPO.orgId }" /> </div>
这是一段 Vue.js 代码,使用了一个自定义组件 `<excel-upload>`。这个组件具有一些属性和事件:
- `importTemplate`:用于指定导入模板的路径或配置。
- `show`:一个双向绑定的属性,用于控制是否显示上传组件。
- `openExcel`:与 `show` 属性进行双向绑定,用于控制是否显示上传组件。
- `ref="excelUpload"`:为组件添加一个引用,以便在其他地方可以通过引用来访问组件的方法和属性。
- `action`:指定上传文件的 API 地址。
- `@on-success`:监听上传成功的事件,当上传成功时,会触发 `handleFileSuccess` 方法。
- `data`:指定上传文件时需要传递的数据,其中 `unitOrgId` 是传递给后端的参数。
总的来说,这段代码是一个用于上传 Excel 文件的组件,通过指定一些属性和事件,实现上传功能,并且可以在上传成功后执行一些自定义的逻辑。
<script setup> import VueUploadComponent from "vue-upload-component"; import { upload } from "@/api/conf"; const isUploading = ref(false); const allowedExtensions = ref(["jpg", "jpeg", "png", "gif"]); const maxFileSize = ref(10 * 1024 * 1024); const uploadedFiles = ref([]); function handleInputFilter(uploadData) { // 文件过滤器 if (uploadData.file.type.indexOf("image/") !== 0) { return Promise.reject("只能上传图片文件"); } return Promise.resolve(uploadData); } function handleBeforeUpload(uploadData) { // 开始上传前的回调 this.isUploading = true; return uploadData; } function handleUploading(uploadData) { console.log("uploading", uploadData.progress); } function handleUploadSuccess(uploadData) { console.log("success", uploadData.url); this.uploadedFiles.push({ id: uploadData.response.id, name: uploadData.file.name, size: uploadData.file.size, url: uploadData.response.url, }); this.isUploading = false; } function handleUploadError(uploadData) { console.error("error", uploadData.error); this.isUploading = false; } function fileSize(size) { if (size < 1024) { return size + "B"; } else if (size < 1024 * 1024) { return (size / 1024).toFixed(2) + "KB"; } else { return (size / 1024 / 1024).toFixed(2) + "MB"; } } function deleteFile(index) { this.uploadedFiles.splice(index, 1); } </script> <template> <div> <vue-upload-component :http-client="upload" :multiple="true" :accept="'image/*'" :extensions="allowedExtensions" :maxSize="maxFileSize" @input-filter="handleInputFilter" @before-upload="handleBeforeUpload" @uploading="handleUploading" @upload-success="handleUploadSuccess" @upload-error="handleUploadError" > <template v-slot:default> <div class="upload-area"> <div v-if="!isUploading"> <i class="iconfont icon-add"></i> <span class="text">点击上传</span> </div> <div v-else> <i class="iconfont icon-loading"></i> <span class="text">上传中...</span> </div> </div> </template> </vue-upload-component> <div class="preview-area"> <div v-for="(file, index) in uploadedFiles" :key="file.id"> <img :src="file.url" class="preview-image" /> <div class="preview-name">{{ file.name }}</div> <div class="preview-size">{{ fileSize(file.size) }}</div> <div class="preview-delete" @click="deleteFile(index)">删除</div> </div> </div> </div> </template> 优化一下
首先,可以将一些处理函数和变量移出 `setup`,放到 `data()` 或 `methods` 中,以便更好地组织代码。同时,可以使用 `computed` 来计算文件大小,使得代码更加简洁。另外,可以将上传成功后的文件信息作为一个对象,而不是多个独立的属性,这样可以更好地管理文件信息。
修改后的代码如下:
```
<template>
<div>
<vue-upload-component
:http-client="upload"
:multiple="true"
:accept="'image/*'"
:extensions="allowedExtensions"
:maxSize="maxFileSize"
@input-filter="handleInputFilter"
@before-upload="handleBeforeUpload"
@uploading="handleUploading"
@upload-success="handleUploadSuccess"
@upload-error="handleUploadError"
>
<template v-slot:default>
<div class="upload-area">
<div v-if="!isUploading">
<i class="iconfont icon-add"></i>
<span class="text">点击上传</span>
</div>
<div v-else>
<i class="iconfont icon-loading"></i>
<span class="text">上传中...</span>
</div>
</div>
</template>
</vue-upload-component>
<div class="preview-area">
<div v-for="(file, index) in uploadedFiles" :key="file.id">
<img :src="file.url" class="preview-image" />
<div class="preview-info">
<div class="preview-name">{{ file.name }}</div>
<div class="preview-size">{{ fileSize(file.size) }}</div>
<div class="preview-delete" @click="deleteFile(index)">删除</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueUploadComponent from "vue-upload-component";
import { upload } from "@/api/conf";
export default {
components: {
VueUploadComponent,
},
data() {
return {
isUploading: false,
allowedExtensions: ["jpg", "jpeg", "png", "gif"],
maxFileSize: 10 * 1024 * 1024,
uploadedFiles: [],
};
},
computed: {
fileSize() {
return function(size) {
if (size < 1024) {
return size + "B";
} else if (size < 1024 * 1024) {
return (size / 1024).toFixed(2) + "KB";
} else {
return (size / 1024 / 1024).toFixed(2) + "MB";
}
};
},
},
methods: {
handleInputFilter(uploadData) {
// 文件过滤器
if (uploadData.file.type.indexOf("image/") !== 0) {
return Promise.reject("只能上传图片文件");
}
return Promise.resolve(uploadData);
},
handleBeforeUpload(uploadData) {
// 开始上传前的回调
this.isUploading = true;
return uploadData;
},
handleUploading(uploadData) {
console.log("uploading", uploadData.progress);
},
handleUploadSuccess(uploadData) {
console.log("success", uploadData.url);
const file = {
id: uploadData.response.id,
name: uploadData.file.name,
size: uploadData.file.size,
url: uploadData.response.url,
};
this.uploadedFiles.push(file);
this.isUploading = false;
},
handleUploadError(uploadData) {
console.error("error", uploadData.error);
this.isUploading = false;
},
deleteFile(index) {
this.uploadedFiles.splice(index, 1);
},
},
};
</script>
```