perf[UploadExcel-component]: tweaks

This commit is contained in:
Pan 2018-06-12 10:53:08 +08:00
parent 9f8ac37497
commit c93fcefe54
2 changed files with 11 additions and 10 deletions

View file

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

View file

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