<template>
<basic-container>
<avue-crud
:table-loading="loading"
:data="data"
:option="option"
:page.sync="page"
@on-load="onLoad"
@row-update="rowUpdate"
@row-save="add"
@row-del="rowDel"
@search-change="searchChange"
@refresh-change="refreshChange"
>
<template slot="menuLeft">
<el-button
type="primary"
icon="el-icon-upload2"
size="small"
@click="excelChang"
>导入</el-button>
<el-dialog title="导入手机号" :visible.sync="dialogVisible" :modal-append-to-body="false">
<div><span style="color:red;">*</span>导入说明:请下载导入模板,在模板中填写用户的信息,将填写完毕的文件在文件上传窗口中选择后导入系统,导入数据后系统会显示提示信息,按提示信息操作即可。</div>
<el-button style="margin:10px 0 10px 0;" type="primary" icon="el-icon-upload" @click="downExcel">下载导入模版</el-button>
<el-upload
action="注入你的导入接口"
:on-change="onChange"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
>
<div class="grace-flex" style="width:100%;">
<el-input style="margin-right:20px;" v-model="input" :disabled="true"></el-input>
<el-button type="primary" icon="el-icon-upload2">导入</el-button>
</div>
</el-upload>
<textarea disabled style="width:100%;min-height:200px;" v-html="form"></textarea>
</el-dialog>
</template>
</avue-crud>
</basic-container>
</template>
<--------
主要 js部分
------->
/*
execl 导入/导出 方法 start
*/
// 文件选择回调
onChange(file, fileList) {
console.log(fileList);
this.fileData = file; // 保存当前选择文件
this.readExcel(); // 调用读取数据的方法
},
// 读取数据
readExcel(e) {
console.log(e);
let _self = this;
const files = _self.fileData;
console.log(files);
_self.input = files.name;
if (!files) {
//如果没有文件
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error("上传格式不正确,请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
// console.log(data)
const workbook = this.XLSX.read(data, {
type: "binary",
});
console.log(workbook.SheetNames);
if (workbook.SheetNames.length >= 1) {
this.$message({
message: "导入数据表格成功",
showClose: true,
type: "success",
});
}
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
_self.outputs = []; //清空接收数据
_self.studentlist = []; //清空接受数据
for (var i = 0; i < ws.length; i++) {
var sheetData = {
// 键名为绑定 el 表格的关键字,值则是 ws[i][对应表头名]
acm_id: _self.$route.query.data.id,
acd_grade: ws[i]["年级"],
acd_class: ws[i]["班级"],
parents_name: ws[i]["家长姓名"],
stu_name: ws[i]["学生姓名"],
acd_phone_num: ws[i]["手机号码"],
};
_self.studentlist.push(sheetData);
}
console.log(_self.studentlist, "77777");
_self.excelDr(_self.studentlist);
this.$refs.upload.value = "";
} catch (e) {
return false;
}
};
// 如果为原生 input 则应是 files[0]
fileReader.readAsBinaryString(files.raw);
},
// 导出方法
downExcel() {
this.$export.excel({
title: "手机号导入模版",
columns: [
{ label: "年级", prop: "acd_grade" },
{ label: "班级", prop: "acd_class" },
{ label: "家长姓名", prop: "parents_name" },
{ label: "学生姓名", prop: "stu_name" },
{ label: "手机号码", prop: "acd_phone_num" },
],
data: [],
});
},
/*execl 导入 方法 end*/