vue项目导入xlsx后在页面展示并生成组织架构图

基础版本

点击查看代码

<template>
  <div>
    <h4>导入</h4>
    <div>
      <el-upload
        class="upload-demo"
        action="#"
        :on-change="handleChange"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        :file-list="fileListUpload"
        :limit="limitUpload"
        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :auto-upload="false"
      >
        <el-button size="small" type="primary">点击导入</el-button>
        <div slot="tip" class="el-upload__tip">
          只 能 上 传 xlsx / xls 文 件
        </div>
      </el-upload>
    </div>
    <el-button size="small" type="primary" @click="goData">数据转换</el-button>
    <!-- <el-table :data="list" border style="width: 100%">
      <el-table-column
        v-for="(item, index) in headerList"
        :prop="item"
        :label="item"
        width="180"
        :key="index"
      >
      </el-table-column>
    </el-table> -->
    <div v-if="newLists.length > 0">
      <vue2-org-tree :data="newLists[0]" :props="props" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'renData',
  data() {
    return {
      props: { label: 'name', children: 'children', expand: 'expand' },
      limitUpload: 1,
      fileListUpload: [],
      fileTemp: null, // 关键！！！！存放组件上传的excel file 用于实现读取数据
      list: [],
      headerList: [],
      newLists: [],
    };
  },
  watch: {
    fileTemp(val) {
      if (val) {
        if (
          val.type ==
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          val.type == 'application/vnd.ms-excel'
        ) {
          this.importExcelData(val);
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式错误，请删除后重新上传！',
          });
        }
      }
    },
  },
  methods: {
    transZh(list) {
      const map = {
        上级ID: 'supId',
        员工ID: 'empId',
        真实姓名: 'name',
        身份证号: 'cardID',
      };
      let newList = [];
      list.forEach((element) => {
        const userInfo = {};
        for (const key in element) {
          // if (Object.hasOwnProperty.call(element, key)) {
          // 格式处理
          userInfo[map[key]] = element[key];
          // }
        }
        newList.push(userInfo);
      });
      return newList;
    },
    transTree(mList) {
      let newList = [];
      let empObj = {};
      mList.map((item) => {
        empObj[item.empId] = item;
      });
      mList.forEach((ite) => {
        let parent = empObj[ite.supId];
        if (parent) {
          if (!parent.children) {
            parent.children = [];
          }
          parent.children.push(ite);
        } else {
          newList.push(ite);
        }
      });
      return newList;
    },
    goData() {
      let ress = this.transZh(this.list);
      console.log('ress', ress);
      let resTree = this.transTree(ress);
      console.log('resTree', resTree);
      this.newLists = resTree;
    },
    importExcelData(obj) {
      let _this = this;
      // 通过DOM取文件数据
      this.file = obj;
      let rABS = false; //是否将文件读取为二进制字符串
      let file = this.file;
      let reader = new FileReader();
      FileReader.prototype.readAsBinaryString = function (f) {
        let binary = '';
        let rABS = false; //是否将文件读取为二进制字符串
        let wb; //读取完成的数据
        let outdata;
        let reader = new FileReader();
        reader.onload = function (e) {
          let bytes = new Uint8Array(reader.result);
          let length = bytes.byteLength;
          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          let XLSX = require('xlsx');
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: 'base64',
            });
          } else {
            wb = XLSX.read(binary, {
              type: 'binary',
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
          _this.list = outdata;
          if (_this.list.length > 0) {
            for (const key in _this.list[0]) {
              _this.headerList.push(key);
            }
          }
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(file);
      } else {
        reader.readAsBinaryString(file);
      }
    },
    handleChange(file, fileList) {
      this.fileTemp = file.raw; // file.raw 及上传的excel
    },
    handleExceed(file, fileList) {
      this.$message({
        type: 'warning',
        message: '只能读取一个文件,请删除后再重传',
      });
    },
    handleRemove(file, fileList) {
      this.fileTemp = null;
    },
  },
};
</script>

<style lang="scss" scoped></style>