vue+element -UI前端Excel 檔案匯入資料
在這裡我用到了一個外掛，需要在在main.js中全域性引入：
import { export_excel_to_json, export_json_to_excel } from '@/api/operExcel'
下載地址：https://download.csdn.net/download/qq_36597079/10634033
不多說，上原始碼
1.頁面樣式
<div class="filter-container">
<el-form :inline="true">
<el-form-item>
<el-button @click="handleExport" size="medium">匯出上傳模板</el-button>
</el-form-item>
<el-form-item>
<a class="el-button el-button--medium">選擇要上傳的檔案
<input id="fileSelect" type="file" @change="handleUpload" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" class="filecss" />
</a>
</el-form-item>
<el-form-item>
<el-button @click="handleExportResult">匯出校驗結果</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleData" size="medium">確認上傳</el-button>
</el-form-item>
</el-form>
</div>
<div>
<el-table :data="uploadData" stripe show-summary :summary-method="getSummaries" height="475" style="width: 100%" v-loading="loading" :element-loading-text="loadingtxt">
<el-table-column type="index" label="序號" width="70">
</el-table-column>
<el-table-column prop="basic_name" label="物業名稱" width="220">
</el-table-column>
<!--<el-table-column prop="basic_position" label="位置" width="180">
</el-table-column>-->
<el-table-column prop="fees_month" label="月份" width="180">
</el-table-column>
<el-table-column prop="pretax" label="稅前" width="180">
</el-table-column>
<el-table-column prop="Aftertax" label="稅後" width="180">
</el-table-column>
<el-table-column prop="result" label="檢驗結果" sortable>
<template slot-scope="scope">
<span style="color:red;" v-show="!scope.row.state">{{ scope.row.result }}</span>
<span v-show="scope.row.state">{{ scope.row.result }}</span>
</template>
</el-table-column>
<el-table-column prop="uploadResult" label="上傳結果" width="120" sortable>
<template slot-scope="scope">
<span style="color:red;" v-show="!scope.row.uploadState">{{ scope.row.uploadResult }}</span>
<span v-show="scope.row.uploadState">{{ scope.row.uploadResult }}</span>
</template>
</el-table-column>
</el-table>
</div>
2，記得加一下方法（核心方法）
import { export_excel_to_json, export_json_to_excel } from '@/api/operExcel'
3.js方法
handleExport() { //匯出上傳模板
const tHeader = ['物業名稱', '月份', '稅前', '稅後'];
const data = [];
export_json_to_excel(tHeader, data, '用電資訊上傳模板');
},
handleExportResult() { //匯出校驗上傳結果檔案
const tHeader = ['物業名稱', '月份', '稅前', '稅後', '校驗結果', '上傳結果'];
var Enumerable = require('linq');
const data = Enumerable.from(this.uploadData)
.select(function(x) {
return new Array(x.basic_name, x.fees_month, x.pretax, x.Aftertax, x.result, x.uploadResult)
})
.toArray();
export_json_to_excel(tHeader, data, '用電資訊上傳資料校驗結果');
},
handleData() { //資料上傳（上傳導資料庫了）
if(this.result.rightCount > 0) {
var Enumerable = require('linq');
var uploadData = Enumerable.from(this.uploadData)
.where(function(x) {
return x.state == true
})
.select(function(x) {
return JSON.parse('{"basic_Id":"' + x.basic_Id + '","fees_month":"' + x.fees_month + '","pretax":"' + x.pretax + '","Aftertax":' + x.Aftertax + '}')
})
.toArray();
var uploadsize = 500; //每次上傳最多記錄數
var times = Math.ceil(uploadData.length / uploadsize); //上傳次數
var execcount = 0;
for(var i = 0; i < times; i++) {
var patchData = Enumerable.from(uploadData)
.skip(i * uploadsize).take(uploadsize)
.toArray();
let params = patchData;
console.log(JSON.stringify(uploadData));
var dbres = [];
operData('property_electr_fees', params, 'add').then((res) => {
dbres = dbres.concat(res.data);
execcount += 1;
if(execcount == times) {
this.uploadResult(dbres);
}
}).catch(error => {
console.log(error);
execcount += 1;
if(execcount == times) {
this.uploadResult(dbres);
}
});
}
} else {
this.$notify({
title: '提示',
message: '沒有符合上傳條件的資料！',
type: 'warning'
});
}
},
//記錄上傳返回結果
uploadResult(dbres) {
var mydata = this.uploadData;
dbres.forEach(function(dbitem) {
mydata.forEach(function(item) {
if(dbitem.basic_name && item.basic_name == dbitem.basic_name) {
item.uploadResult = '上傳成功！';
item.uploadState = true;
}
});
});
this.$notify({
title: '資訊',
message: '上傳資料完成，結果請參考資料校驗表格的上傳結果欄！',
type: 'success'
});
},
getSummaries(param) { //底部驗證顯示
const sums = [];
if(this.uploadData) {
sums[1] = '校驗結果：';
var Enumerable = require('linq');
//記錄數
this.result.rightCount = Enumerable.from(this.uploadData).where(function($) {
return $.state == true
}).count();
sums[2] = '符合要求記錄數：' + this.result.rightCount;
this.result.errCount = Enumerable.from(this.uploadData).where(function($) {
return $.state == false
}).count();
sums[3] = '不符合記錄數：' + this.result.errCount;
}
return sums;
},
handleUpload(evt) { //選擇上傳檔案並校驗
export_excel_to_json(evt).then((res) => {
//var jsondata=res;
const filterName = ['物業名稱', '月份', '稅前', '稅後'];
const filterValue = ['basic_name', 'fees_month', 'pretax', 'Aftertax'];
const filterElse = ['"result":""', '"state":true', '"basic_Id":""', '"uploadResult":"未上傳"', '"uploadState":false']
var mydata = getFormatData(res, filterName, filterValue, filterElse);
let orgpar = {
// filter: {
// where: 'id='+basic_Id,
// }
};
operData('property_basics', orgpar, 'getdata').then((res) => {
var basicsdata = res.data;
var Enumerable = require('linq');
mydata.forEach(function(item) {
if(item.basic_name == null) {
item.result += '物業名稱不允許為空！';
item.state = false;
}
if(item.fees_month == null) {
item.result += '月份不允許為空！';
item.state = false;
}
if(item.basic_name) {
item.basic_Id = Enumerable.from(basicsdata)
.where(function(x) {
return x.basic_name == item.basic_name
})
.select(function(x) {
return x.id
})
.toJoinedString();
if(!item.basic_Id) {
item.result += '物業名稱不存在！';
item.state = false;
}
} else {
item.basic_Id = item.basic_Id
}
});
//
var arrEmail = Enumerable.from(mydata).where(function(x) {
return x.state == true && x.basic_name != null
}).select(function(x) {
return x.basic_name
}).toArray();
var arrPhone = Enumerable.from(mydata).where(function(x) {
return x.state == true && x.fees_month != null
}).select(function(x) {
return x.fees_month
}).toArray();
var chksize = 500; //每次最多記錄數
var times = Math.max(Math.ceil((arrEmail.length) / chksize), Math.ceil((arrPhone.length) / chksize)); //次數
var execcount = 0;
for(var i = 0; i < times; i++) {
var patchEmail = Enumerable.from(arrEmail)
.skip(i * chksize).take(chksize)
.toArray();
var patchPhone = Enumerable.from(arrPhone)
.skip(i * chksize).take(chksize)
.toArray();
let params = {};
if(patchEmail.length > 0 && patchPhone.length > 0) {
params = {
filter: {
"where": {
"or": [{
"basic_name": {
"inq": patchEmail
}
}, {
"fees_month": {
"inq": patchPhone
}
}]
},
"fields": ["basic_name", "fees_month"]
}
};
} else if(patchEmail.length > 0) {
params = {
filter: {
"where": {
"basic_name": {
"inq": patchEmail
}
},
"fields": ["basic_name"]
}
};
} else if(patchPhone.length > 0) {
params = {
filter: {
"where": {
"fees_month": {
"inq": personPhone
}
},
"fields": ["fees_month"]
}
};
}
console.log("這回"+JSON.stringify(params));
var dbres = [];
operData('v_property_elect_fees', params,"getdata").then((res) => {
dbres = dbres.concat(res.data);
console.log("這回是+"+JSON.stringify(dbres));
execcount += 1;
if(execcount == times) {
//檢查手機和email是否已存在於資料庫中
dbres.forEach(function(dbitem) {
mydata.forEach(function(item) {
if(dbitem.basic_name && item.basic_name == dbitem.basic_name&&dbitem.fees_month && item.fees_month == dbitem.fees_month) {
item.result += '系統中已存在該物業的月份！';
item.state = false;
}
});
});
}
});
}
this.uploadData = mydata;
console.log(JSON.stringify(this.uploadData));
});
});
}