From c93fcefe543a5b55ab0179fee453f9d6efded079 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 12 Jun 2018 10:53:08 +0800
Subject: [PATCH] perf[UploadExcel-component]: tweaks
---
src/components/UploadExcel/index.vue | 13 +++++++------
src/views/excel/uploadExcel.vue | 8 ++++----
2 files changed, 11 insertions(+), 10 deletions(-)
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index 9c1ec56a..51a3704d 100644
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -1,9 +1,9 @@
<template>
<div>
- <input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
+ <input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
Drop excel file here or
- <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
+ <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">Browse</el-button>
</div>
</div>
</template>
@@ -25,11 +25,12 @@ export default {
generateDate({ header, results }) {
this.excelData.header = header
this.excelData.results = results
- this.$emit('on-selected-file', this.excelData)
+ this.$emit('success', this.excelData)
},
handleDrop(e) {
e.stopPropagation()
e.preventDefault()
+ if (this.loading) return
const files = e.dataTransfer.files
if (files.length !== 1) {
this.$message.error('Only support uploading one file!')
@@ -48,17 +49,16 @@ export default {
handleUpload() {
document.getElementById('excel-upload-input').click()
},
- handkeFileChange(e) {
+ handleClick(e) {
const files = e.target.files
const itemFile = files[0] // only use files[0]
if (!itemFile) return
- this.loading = true
this.readerData(itemFile).then(() => {
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
- this.loading = false
})
},
readerData(itemFile) {
+ this.loading = true
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
@@ -70,6 +70,7 @@ export default {
const header = this.get_header_row(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet)
this.generateDate({ header, results })
+ this.loading = false
resolve()
}
reader.readAsArrayBuffer(itemFile)
diff --git a/src/views/excel/uploadExcel.vue b/src/views/excel/uploadExcel.vue
index 187f43af..85439ef6 100644
--- a/src/views/excel/uploadExcel.vue
+++ b/src/views/excel/uploadExcel.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <upload-excel-component @on-selected-file='selected'></upload-excel-component>
+ <upload-excel-component @success='handleSuccess'></upload-excel-component>
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
<el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
</el-table-column>
@@ -21,9 +21,9 @@ export default {
}
},
methods: {
- selected(data) {
- this.tableData = data.results
- this.tableHeader = data.header
+ handleSuccess({ results, header }) {
+ this.tableData = results
+ this.tableHeader = header
}
}
}