vue+elementテンプレートexcelファイルをインポートし、対応するtableを生成
41270 ワード
// , , ,
//1.
//
//
<ImportExcel @changeExcl="changeExcl" @closeExcl="closeExcl" @uploadExcl="uploadExcl" @downloadExcl="downloadExcl" :upload="upload" :downloadExclShow="downloadExclShow"/>
//
<template>
<div class="feadFile">
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
:inline="true"
width="1000px"
class="dialog"
:loading="loading"
:before-close="closeExclPop"
:modal-append-to-body="false"
>
<div class="import">
<div class="file">
<el-form ref="queryForm" label-position="top" label-width="68px">
<div class="query-form-model">
<el-form-item>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-success="handleFileSuccess"
:auto-upload="false"
:on-change="importf"
>
<el-button type="primary"> </el-button>
</el-upload>
<!-- <input type="file" placeholder=" " @change="changeUpataExcl" /> -->
</el-form-item>
<el-form-item label>
<el-button size="small" type="primary" @click="onSubmit"> </el-button>
</el-form-item>
<el-form-item label v-if="downloadExclShow">
<el-button size="small" type="primary" @click="downloadExclFunc()"> </el-button>
</el-form-item>
</div>
</el-form>
</div>
</div>
<div class="el-table-view">
<el-table :data="importData" v-if="tableShow">
<template v-if="importData.length===0" slot="empty">
<p class="table-no-data">
<img src="@/assets/image/empty-table-bg.png" />
</p>
</template>
<el-table-column
v-for="(item , index) in importDataThead"
:key="index"
:prop="item"
:label="item"
width="150px"
></el-table-column>
</el-table>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "feadFile",
data() {
return {
importData: [], //
importDataThead: [],//
upData: null, // excel
tableShow: false, // ,table
files: {}, //
file: {},
loading:false,
};
},
props: { //
updateExclShow: {
//
type: Boolean,
default: false
},
downloadExclShow: {
//
type: Boolean,
default: false
},
uploadExcl: {
//
type: Function,
required: false
},
closeExcl: {
type: Function,
required: false
},
downloadExcl: {
type: Function,
required: false
},
changeExcl: {
//
type: Function,
required: false
},
upload: {
type: Object,
default: {}
}
},
methods: {
closeExclPop(done) {
var _this = this;
this.$emit("closeExcl");
this.clearFilesFunc();
_this.importData = [];
_this.importDataThead = [];
this.tableShow = false;
},
importf(obj, fileList) {
var _this = this;
var XLSX = require("xlsx");
var files = event.currentTarget.files;
var workbook; //
var fileReader = new FileReader();
console.log(2);
fileReader.onload = ev => {
console.log(2);
var data = ev.target.result;
var workbook = XLSX.read(data, {
type: "binary"
});
var persons = [];
try {
var data = ev.target.result;
var workbook = XLSX.read(data, {
type: "binary"
});
var persons = [];
} catch (e) {
this.msgError(' ')
return;
}
var fromTo = "";
console.log("workbook", workbook);
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]["!ref"];
persons = persons.concat(
XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
);
}
}
console.log(persons)
this.importDataThead = Array.from(Object.keys(persons[0])).map(
item => {
return item;
}
);
this.importData = persons;
console.log();
this.tableShow = true;
var data = {
importDataThead: _this.importDataThead, //
importData: _this.importData, //
files: files //
};
this.$emit("changeExcl", data);
};
fileReader.readAsBinaryString(files[0]);
},
// excel
onSubmit(e) {
var _this = this;
this.$refs.upload.submit();
this.$emit("uploadExcl");
_this.importData = [];
_this.importDataThead = [];
this.tableShow = false;
},
//
downloadExclFunc() {
this.$emit("downloadExcl");
},
//
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
this.loading = true
console.log(" :", file);
},
//
handleFileSuccess(response, file, fileList) {
var _this = this;
console.log(" :", response);
if(response.code == 200){
this.$message({
message:' ',
type: "success",
duration: 1500
})
_this.$emit("uploadExcl",response);
}
else{
this.$message({
message:response.msg,
type: "error",
duration: 1500
})
}
this.loading = false
this.clearFilesFunc(file)
},
//
clearFilesFunc(file){
console.log(' :',file)
this.$refs['upload'].clearFiles();
}
}
};
</script>
<style lang="scss" scoped>
// .dialog{
.el-dialog {
padding: 20px 0;
max-height: 400px;
overflow: auto;
}
.el-table-view {
height: 380px;
margin-bottom: 10px;
border: 1px solid #e6e6e6;
}
// }
</style>