1. 程式人生 > >vue+element -UI前端Excel 檔案匯入資料

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));
                        
                    });
                });
            }