实现的效果如下图
安装依赖
npm install xlsx --save
引入
import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX
结构
v-model="gmDrform.storageTime"
type="datetime"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
@change="gmDrTimeChange"
>
导入
data中的数据
gmDrform:{storageTime:""},//光猫导入
gmDr:false,
arrList:[],
methods中
gmDrClick(){ // 获取当前时间,并赋值给入库日期
this.gmDr=true
this.gmDrform.storageTime=this.nowTime()
},
gmDrTimeChange(val){//入库日期发生变化,保存到gmDrform.storageTime中
this.gmDrform.storageTime=val
},
gmDrClose(){//关闭模态框,清除数据
this.$refs.gmDrform.resetFields();
},
importExcel() {
this.dialogChangePwdVisible = true;
this.$refs.uploadExcel.click();
},
readExcel(e) {
const files = e.target.files;
if (files.length <= 0) {
//如果没有文件名
return false;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary"
});
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //获取到XLSX表格中的数据,并生成json格式的数据类型
// console.log(ws,666);
let arr = [];
ws.forEach((value, index, ws) => {
arr.push({
typeNo: ws[index]["光猫型号"] + "",
boxNo: ws[index]["光猫箱码"] + "",
snNos: ws[index]["光猫SN码"] + "",
storageTime:this.gmDrform.storageTime+"",
name:"光猫",
category:"光猫",
remarks:"",
});
})
for(let i in arr){
let item = arr[i]
for(let key in item){
// console.log(item[key]);
if(item[key] == "undefined"){
delete item[key]
}
}
}
this.arrList=arr//给arrList赋值,确定导入时传入
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
},
gmDrSure(){//确定导入
let headers={//axios发送请求时,需要配置请求头
headers:{ 'Accept': 'application/json','Content-Type': 'application/json' }
}
this.startLoading();
let url = this.config.httpHeadUrl + "/api/modem/admin/saveBatchModem";
this.$axios.post(url, JSON.stringify(this.arrList),headers ).then(res => {
this.$message.success("导入成功!");
this.gmDr = false;
this.handleCurrentChange(1);
this.$refs.uploadExcel.value = "";//把之前导入的清空
if(res.data.flag==0){
this.$message("导入表头不正确")
this.gmDr =true
}
},(error) => {
this.$refs.uploadExcel.value = "";//把之前导入的清空
})
},