elementui之封裝下載模板和導(dǎo)入文件組件方式
更新時間：2022年12月07日 10:46:50 作者：牛先森家的牛奶
這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
elementui封裝下載模板和上傳組件
封裝代碼如下
<template>
<div>
<el-dialog
:title="exportStatus? '導(dǎo)入結(jié)果' : '一鍵導(dǎo)入數(shù)據(jù)'"
:visible.sync="dialogVisible"
width="905px"
:before-close="handleClose"
class="export-standard-speech"
>
<div class="standard-export" v-if="!exportStatus">
<div class="export-title">1、下載導(dǎo)入模板</div>
<div class="export-warning">根據(jù)提示完善表格內(nèi)容</div>
<div class="export-download-btn">
<img
src="@/assets/img/download-demo-icon.png"
width="12px"
style="
vertical-align: baseline;
margin-right: 3px;
margin-top:2px;
display: inline-block;
"
/>
<a
class="a-line"
:href="downloadDemoUrl" rel="external nofollow"
download="項目導(dǎo)入模板.xlsx"
title="下載空的表格模板"
>下載空的表格模板</a>
</div>
<div class="export-title">2、上傳完善后的表格</div>
<el-upload
class="upload-demo-xls"
drag
ref="speechDemoUpload"
action=""
:file-list="fileList"
:auto-upload="false"
:show-file-list="false"
accept=".xls,.xlsx,.csv"
:on-change="handleChange"
>
<div class="el-upload__text" v-if="!uploadStatus">將文件拖到此處，或點擊<em>上傳</em></div>
<div class="el-upload__text" v-else>
<span class="file-name">{{ this.file && this.file.name }}</span>
<span class="file-size">（{{bytesToSize(this.file.size)}}）</span>
<span class="file-select">重新選擇</span>
</div>
</el-upload>
<div class="h32 flex-center-center" style="margin-top:38px">
<Button text="取消" background="#fff" border="#4646E6" color="#4646E6" class="ml10" @click.native="cancelExport" ></Button>
<Button text="導(dǎo)入" background="#4646E6" color="#fff" class="ml10" @click.native="xlsDemoExport" :setGray="isFile"></Button>
</div>
</div>
<div v-if="exportStatus && failNum > 0">
<div class="fail-num">
<img src="@/assets/img/export-fail-img.png" alt="" class="mr10">
導(dǎo)入失敗
<span>{{failNum}}條</span>
數(shù)據(jù)
</div>
<div class="export-fail-table">
<div class="export-fail-text">以下為導(dǎo)入失敗的項目，您可修改后重新導(dǎo)入</div>
<el-table
:data="tableData"
height="220"
>
<el-table-column
prop="lineNum"
label="Execel行數(shù)"
width="220"
align="left"
>
</el-table-column>
<el-table-column
prop="projectCode"
label="項目編號"
width="220"
align="center"
>
</el-table-column>
<el-table-column
prop="failReason"
label="失敗原因"
width="220"
align="right"
>
</el-table-column>
</el-table>
</div>
<div class="h32 flex-center-center" style="margin-top:23px">
<Button text="關(guān)閉" background="#fff" border="#4646E6" color="#4646E6" @click.native="cancelExport" ></Button>
</div>
</div>
<div v-if="exportStatus && failNum == 0">
<div class="success-img">
<img src="@/assets/img/export-success-img.png" alt="" class="mr10">
</div>
<div class="success-text">
成功導(dǎo)入
<span>{{ successNum }}條</span>
數(shù)據(jù)
</div>
<div class="h32 flex-center-center" style="margin-top:23px">
<Button text="完成" background="#4646E6" color="#fff" class="" @click.native="cancelExport"></Button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import Button from "@/components/Button";
import { upload, service } from '@/utils/request-brand'
import { bytesToSize } from '@/utils'
export default {
name: 'ImportData',
components: {
Button
},
props: {
showDialogVisible: {
type: Boolean,
default: false,
required: true
},
downloadDemoUrl:{
type: String,
required: true
},
uploadFileUrl:{
type: String,
required: true
},
// 考慮上傳時其他參數(shù)的情況
otherUploadData:{
type: Object,
default:() => {
return {}
}
}
},
computed: {
userAccountID() {
return this.$store.state.user.userAccountID;
},
isFile(){
if(this.file){
return false
} else {
return true
}
}
},
watch: {
showDialogVisible(newVal) {
// console.log(newVal);
this.dialogVisible = newVal
}
},
data () {
return {
dialogVisible: false,
fileList: [],
file: null,
// 上傳文件的狀態(tài)切換
uploadStatus: false,
successNum: 0,
failNum: 0,
tableData: [],
// 導(dǎo)入的狀態(tài)
exportStatus: false,
};
},
methods: {
bytesToSize,
handleClose(done) {
this.dialogVisible = false
this.$emit('dialogVisible', false)
},
// 取消或者清空上傳的文件和數(shù)據(jù)
cancelExport(){
// this.$refs.speechDemoUpload.clearFiles()
this.fileList = []
this.file = null
this.successNum = 0
this.failNum = 0
this.tableData = []
this.uploadStatus = false
this.exportStatus = false
this.$emit('dialogVisible', false)
},
// 上傳的文件改變時（覆蓋原來的文件）
handleChange(file, fileList){
// console.log(file);
let extension = file.raw.name.substring(file.raw.name.lastIndexOf(".") + 1);
let size = file.size / 1024 / 1024;
// let size = file.size / 1024;
// console.log(extension, extension.toLowerCase() !== "xlsx");
if (!['xlsx','xls','csv'].includes(extension.toLowerCase())) {
this.$message.warning("文件格式不正確，請上傳xls / xlsx / csv格式");
return false;
}
if (size > 10) {
this.$message.warning("文件過大，請進(jìn)行拆分后分多次上傳");
return false
}
// console.log(file.raw, fileList);
if (fileList.length > 0) {
this.fileList = [fileList[fileList.length - 1]] // 這一步，是展示最后一次選擇的csv文件
this.file = this.fileList[0].raw
}
// console.log(this.file);
this.uploadStatus = true
},
async xlsDemoExport(){
if (!this.file) {
// return this.$message.error('請上傳文件')
return false
}
const formData = new FormData()
formData.append('file', this.file)
// 添加其他參數(shù)
if(Object.values(this.otherUploadData).length > 0){
for (let key in this.otherUploadData) {
formData.append(key, this.otherUploadData[key])
}
}
// 調(diào)用上傳接口...
this.$loading.show()
// `${process.env.VUE_APP_BASE_BRAND_API}/v1/inspectionSpeechArt/importExcel
upload.uploadFile(this.uploadFileUrl, formData).then(res => {
if(res.code == 0){
this.exportStatus = true
this.tableData = res.item.failList.map(item => {
let obj = {}
obj.lineNum = item.lineNum
obj.failReason = item .failReason
obj.projectCode = item. projectCode
return obj
})
this.failNum = res.item.failNum
this.successNum = res.item.successNum
} else {
this.$message.error(res.message)
}
this.$loading.hide()
}).catch((error) => {
console.log(error);
this.$message.error('上傳失敗，請稍后再試或聯(lián)系IT解決')
this.$loading.hide()
})
},
},
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog{
width: 25%;
border-radius: 12px;
margin-top:-8vh !important;
top: 50%;
transform: translateY(-50%);
}
::v-deep .el-dialog__header {
border-bottom: 1px solid #efeff6;
padding-left: 50px;
.el-dialog__title,
.el-dialog__headerbtn i {
color: #36395c !important;
font-size: 18px !important;
font-weight: 600;
}
}
</style>
<style lang="scss">
.export-standard-speech {
.el-list-enter-active,
.el-list-leave-active {
transition: none;
}
.el-list-enter,
.el-list-leave-active {
opacity: 0;
}
.el-upload-list {
height: 40px;
}
// 表格body
.el-dialog__body{
padding: 30px 100px;
}
// 導(dǎo)入
.standard-export{
.upload-demo-xls{
width: 100%;
margin-top: 20px;
}
.el-upload.el-upload--text{
width: 100%;
}
.el-upload-dragger{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #EFEFF6;
height: 120px;
.el-upload__text{
font-weight: 600;
color: #36395C;
.file-name{
color: #4646E6;
}
.file-size{
color: #CCCDD8;
}
.file-select{
color: #4646E6;
text-decoration: underline;
}
}
}
.export-title{
font-size: 14px;
color: #36395C;
font-weight: 600;
line-height: 20px;
}
.export-warning{
font-size: 14px;
color: #CCCDD8;
line-height: 20px;
}
.export-download-btn{
width: 165px;
height: 36px;
border: 1px solid #4646E6;
color: #4646E6;
opacity: 1;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0 30px;
}
}
// 導(dǎo)入失敗的表格數(shù)據(jù)
.fail-num{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
font-size: 16px;
color: #36395C;
font-weight: 600;
span{
color: #EF6E49;
margin: 0 3px;
}
}
.export-fail-table{
width: 100%;
height: 280px;
border: 1px solid #EFEFF6;
border-radius: 6px;
padding: 0 20px;
.export-fail-text{
font-size: 14px;
line-height: 20px;
color: #36395C;
font-weight: 600;
margin-bottom: 20px;
margin-top: 20px;
}
.el-table__row {
height: 60px;
td {
padding: 0 30px;
}
}
.has-gutter tr {
height: 60px;
}
.has-gutter tr th {
font-size: 14px;
color: #333333;
font-family: Arial;
padding: 0 20px;
}
thead th {
font-size: 14px;
color: #333333;
font-weight: 600;
height: 40px;
background: #F5F6FB;
}
// 滾動條的寬度
.el-table__body-wrapper::-webkit-scrollbar {
width: 6px; // 橫向滾動條
height: 6px; // 縱向滾動條
}
// 滾動條的滑塊
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #E2E2E2;
border-radius: 3px;
}
}
.success-img{
display: flex;
justify-content: center;
align-items: center;
margin-top: 103px;
}
.success-text{
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 50px;
font-size: 16px;
color: #36395C;
font-weight: 600;
span{
color: #4646E6;
margin: 0 3px;
}
}
}
</style>
頁面使用
只上傳文件的形式
<template>
<div class="upload">
<Button text="批量導(dǎo)入" background="#36395C" color="#fff" :icon="true" @click.native="handleExportBtn" />
// ...
<ImportData
:showDialogVisible="exportVisible"
:downloadDemoUrl="downloadStandardSpeech"
:uploadFileUrl="uploadFileUrl"
@dialogVisible="closeVisible"
/>
</div>
</template>
<script>
import ImportData from '@/views/components/ImportData.vue'
export default {
name: "index",
components: {
ImportData,
},
data() {
return {
// 導(dǎo)入彈框顯示和隱藏
exportVisible: false,
downloadStandardSpeech: `${process.env.VUE_APP_EXPORTDEOM_API}/fileResources/templates_standardSpeech.xlsx`, // 模板下載文件地址,
uploadFileUrl: 'http://10.0.0.10:3000/v1/inspectionSpeechArt/importExcel' // 可以寫在配置文件中
};
},
computed: {
userAccountID() {
return this.$store.state.user.userAccountID;
},
},
// created() {
// this.getDataList();
// this.getCheckType();
// },
activated() {
this.getDataList();
this.getCheckType();
},
watch:{},
methods: {
// 導(dǎo)入
handleExportBtn(){
this.exportVisible = true
},
// 關(guān)閉導(dǎo)入
closeVisible(){
this.exportVisible = false
// 刷新列表等操作
},
},
};
</script>
<style lang="scss" scoped>
</style>
上傳文件和其他必傳參數(shù)的形式
<template>
<div class="upload">
<Button text="批量導(dǎo)入" background="#36395C" color="#fff" :icon="true" @click.native="handleExportBtn" />
// ...
<ImportData
:showDialogVisible="exportVisible"
:downloadDemoUrl="downloadStandardSpeech"
:uploadFileUrl="uploadFileUrl"
:otherUploadData="otherUploadData"
@dialogVisible="closeVisible"
/>
</div>
</template>
<script>
import ImportData from '@/views/components/ImportData.vue'
export default {
name: "index",
components: {
ImportData,
},
data() {
return {
// 導(dǎo)入彈框顯示和隱藏
exportVisible: false,
downloadStandardSpeech: `${process.env.VUE_APP_EXPORTDEOM_API}/fileResources/templates_standardSpeech.xlsx`, // 模板下載文件地址,
uploadFileUrl: 'http://10.0.0.10:3000/v1/inspectionSpeechArt/importExcel',
otherUploadData: {},
};
},
computed: {
userAccountID() {
return this.$store.state.user.userAccountID;
},
},
// created() {
// this.getDataList();
// this.getCheckType();
// this.otherUploadData = { key : 'value' };
// },
activated() {
this.getDataList();
this.getCheckType();
this.otherUploadData = { key : 'value' };
},
watch:{},
methods: {
// 導(dǎo)入
handleExportBtn(){
this.exportVisible = true
},
// 關(guān)閉導(dǎo)入
closeVisible(){
this.exportVisible = false
// 刷新列表等操作
},
},
};
</script>
<style lang="scss" scoped>
</style>
效果如下
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用echarts實現(xiàn)柱狀圖動態(tài)排序效果
echarts在前端開發(fā)中實屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實現(xiàn)柱狀圖動態(tài)排序效果,感興趣的可以了解下2023-10-10
詳解如何實現(xiàn)Element樹形控件Tree在懶加載模式下的動態(tài)更新
這篇文章主要介紹了詳解如何實現(xiàn)Element樹形控件Tree在懶加載模式下的動態(tài)更新，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
Vue3中provide和inject作用和場景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實現(xiàn)跨層組件通信,本文通過實例介紹Vue3 provide和inject的相關(guān)知識,感興趣的朋友一起看看吧2023-11-11
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本篇文章主要介紹了詳解vue組件化開發(fā)-vuex狀態(tài)管理庫，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
這篇文章主要為大家詳細(xì)介紹了Vue分頁器實現(xiàn)原理，編寫了分頁器組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Vue 實現(xiàn)對quill-editor組件中的工具欄添加title
這篇文章主要介紹了Vue 實現(xiàn)對quill-editor組件中的工具欄添加title，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
VuePress 靜態(tài)網(wǎng)站生成方法步驟
這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue-router之實現(xiàn)導(dǎo)航切換過渡動畫效果
今天小編就為大家分享一篇vue-router之實現(xiàn)導(dǎo)航切換過渡動畫效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Element的Pagination分頁sync問題小結(jié)
本文主要介紹了Element的Pagination分頁sync問題小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07