AkkomaGang/admin-fe
6
2
Fork 9
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

perf[UploadExcel-component]: tweaks

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/UploadExcel/index.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div> <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"> <div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
Drop excel file here or 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>
</div> </div>
</template> </template>
@ -25,11 +25,12 @@ export default {
generateDate({ header, results }) { generateDate({ header, results }) {
this.excelData.header = header this.excelData.header = header
this.excelData.results = results this.excelData.results = results
this.$emit('on-selected-file', this.excelData) this.$emit('success', this.excelData)
}, },
handleDrop(e) { handleDrop(e) {
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
if (this.loading) return
const files = e.dataTransfer.files const files = e.dataTransfer.files
if (files.length !== 1) { if (files.length !== 1) {
this.$message.error('Only support uploading one file!') this.$message.error('Only support uploading one file!')
@ -48,17 +49,16 @@ export default {
handleUpload() { handleUpload() {
document.getElementById('excel-upload-input').click() document.getElementById('excel-upload-input').click()
}, },
handkeFileChange(e) { handleClick(e) {
const files = e.target.files const files = e.target.files
const itemFile = files[0] // only use files[0] const itemFile = files[0] // only use files[0]
if (!itemFile) return if (!itemFile) return
this.loading = true
this.readerData(itemFile).then(() => { this.readerData(itemFile).then(() => {
this.$refs['excel-upload-input'].value = null // fix can't select the same excel this.$refs['excel-upload-input'].value = null // fix can't select the same excel
this.loading = false
}) })
}, },
readerData(itemFile) { readerData(itemFile) {
this.loading = true
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader() const reader = new FileReader()
reader.onload = e => { reader.onload = e => {
@ -70,6 +70,7 @@ export default {
const header = this.get_header_row(worksheet) const header = this.get_header_row(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet) const results = XLSX.utils.sheet_to_json(worksheet)
this.generateDate({ header, results }) this.generateDate({ header, results })
this.loading = false
resolve() resolve()
} }
reader.readAsArrayBuffer(itemFile) reader.readAsArrayBuffer(itemFile)

8
src/views/excel/uploadExcel.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container"> <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 :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 v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
</el-table-column> </el-table-column>
@ -21,9 +21,9 @@ export default {
} }
}, },
methods: { methods: {
selected(data) { handleSuccess({ results, header }) {
this.tableData = data.results this.tableData = results
this.tableHeader = data.header this.tableHeader = header
} }
} }
} }