无码视频青青,国产久热精品

實(shí)現(xiàn)從excel表格導(dǎo)入數(shù)據(jù)到vue項(xiàng)目列表中的功能
1、安裝依賴

npm install xlsx -S

2、封裝導(dǎo)入表格數(shù)據(jù)解析處理的函數(shù)

在src文件下新建utils文件夾（此文件夾一般存放自己封裝的公共的工具類函數(shù)），新建excel.js文件

文件截圖.png

在excel.js中引入

import XLSX form 'xlsx

封裝代碼如下：

import XLSX from 'xlsx'
/**
 * 
 * @param {File} file 文件
 * @param {Object} codeObj 每個(gè)對(duì)象所包含的屬性，屬性名
 * @return {Promise} 讀取文件為異步的，調(diào)用例如excel(file.raw, obj).then(res => {console.log(res)})，res為最終得到的數(shù)組數(shù)據(jù)
 */
export default function (file, codeObj, needAll) {

    return new Promise(resolve => {

        var reader = new FileReader();

        FileReader.prototype.readAsBinaryString = function (f) {

            var binary = "";

            var wb; //讀取完成的數(shù)據(jù)

            var outdata;

            var reader = new FileReader();

            reader.onload = function (e) {

                var bytes = new Uint8Array(reader.result);

                var length = bytes.byteLength;

                for (var i = 0; i < length; i++) {

                    binary += String.fromCharCode(bytes[i]);

                }
                
                wb = XLSX.read(binary, { type: 'binary', cellDates: true });
                let opt = {
                    defval: '',         // 設(shè)置默認(rèn)值為null, 沒(méi)設(shè)置的話，單元格為空的時(shí)候會(huì)缺少相應(yīng)的key
                }
                // outdata就是你想要的東西 excel導(dǎo)入的數(shù)據(jù)
                outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], opt);

                // excel 數(shù)據(jù)再處理
                let arr = []

                outdata.map(v => {

                    let obj = {}
                    for (let key in codeObj) {
                        obj[key] = v[codeObj[key]] || '';
                    }
                    if (JSON.stringify(obj) !== '{}') {
                        arr.push(obj)
                    }
                })
                if(needAll) {
                    resolve({data: [...arr], dataAll: outdata})
                }else {
                    resolve([...arr]);
                }
                
            }
            reader.readAsArrayBuffer(f);

        }

        reader.readAsBinaryString(file)

    })
}

3、在index.vue中引入excel.js

import excel from "@/utils/excel";

4、在index.vue中實(shí)現(xiàn)導(dǎo)入功能，代碼如下：

<el-upload action :auto-upload="false" :show-file-list="false" accept=".xlsx,.xls" :on-change="uploadChange">
     <el-button >導(dǎo)入</el-button>
 </el-upload>

js代碼如下：

data(){
    return{
      genderList: [
        { label: "男", value: 1 },
        { label: "女", value: 0 },
        { label: "保密", value: 2 },
      ]
    }
  },

uploadChange(file) {
      // console.log(file)

      // 新建對(duì)象，為excel表格表頭匹配字段
      let obj = {
        id:"編號(hào)",
        projectName: "入職項(xiàng)目",
        positionName: "入職崗位",
        name: "入職人姓名",
        sex: "入職人性別",
        mobile: "入職人電話",
        idNumber: "入職人身份證",
        applicantName: "招聘人姓名",
        departmentName: "招聘部門",
        higherLevel: "招聘經(jīng)理",
      };

      // 調(diào)用封裝好的方法處理excel文件數(shù)據(jù)
      excel(file.raw, obj).then((res) => {
        console.log(res)
      
        // 根據(jù)實(shí)際需求處理數(shù)據(jù)

        // 若要求導(dǎo)入數(shù)據(jù)中編號(hào)為必填，則沒(méi)有必填的數(shù)據(jù)刪除
        for (let i = res.length - 1; i > -1 ; i--) {
          if (res[i].id == '') {           
            res.splice(i, 1)
          }
        }

        // 若res數(shù)組為空，則彈出提示語(yǔ)
        if (!res.length) {
          this.$message.warning("請(qǐng)檢查導(dǎo)入文件，未檢測(cè)到符合模板的數(shù)據(jù)!");
          return;
        }

        // 處理數(shù)據(jù)，如sex:女，根據(jù)this.genderList數(shù)組中定義的 0代表女，1代表男，則處理成   sex:0
        res.map((item) => {                
          item.sex = this.getValue(this.genderList, item.sex);
        });

        
        // 若要求導(dǎo)入數(shù)據(jù)中姓名或入職項(xiàng)目為必填，否則給與警告提示
        for (let i = 0; i < res.length; i++) {         
          if (res[i].name == '' || res[i].projectName == ''){
            this.$message.warning("第"+(i+1) +"姓名或入職項(xiàng)目為必填!");
            return
          }
        }

        // res中數(shù)據(jù)處理好后調(diào)用相應(yīng)的導(dǎo)入接口
        if (res) {
          let params = {
            operationId: this.userMessage.employeeId,
            operationAll: 1,
            entryInfoList: res,
          };
          importEntryConfirm({ data: params }).then((result) => {
            if (result.code === 0) {
              this.dataList();
              this.$message.success(result.message);
            } else {
              this.$message.error(result.message);
            }
          });
        }
      });
    },

    // 根據(jù)label值找到value
    getValue(obj, label) {
      var res = obj.find((item) => item.label == label);       
      return res ? res.value : "";
    },

5、效果圖如下：
（1）頁(yè)面導(dǎo)入按鈕