实现的效果如下图
参考文献网址: https://blog.csdn.net/qq_3900…
https://blog.csdn.net/liyi_mo…
安装依赖
npm install xlsx --save
引入
import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX
结构
<el-dialog title="入库" class="dialogAdd" width="600px" :visible.sync="gmDr" @close="gmDrClose" >
<el-form :model="gmDrform" :rules="addFormRules" ref="gmDrform" style="margin-right: 20px;" label-position="right" label-width="100px" size="small">
<el-form-item label="入库日期" prop="storageTime">
<el-date-picker
v-model="gmDrform.storageTime"
type="datetime"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
@change="gmDrTimeChange"
></el-date-picker>
</el-form-item>
<el-row style="width:100px;padding-right:10px">
<el-button @click="importExcel" size="mini" style=" float:right">导入</el-button>
</el-row>
<input type="file" ref="uploadExcel" v-show="false" accept=".xls,.xlsx" @change="readExcel">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="gmDr = false">取 消</el-button>
<el-button size="mini" type="primary" @click="gmDrSure">确 定</el-button>
</div>
</el-dialog>
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 = "";//把之前导入的清空
})
},