<template>
  <basic-container>
    <avue-crud
      :table-loading="loading"
      :data="data"
      :option="option"
      :page.sync="page"
      @on-load="onLoad"
      @row-update="rowUpdate"
      @row-save="add"
      @row-del="rowDel"
      @search-change="searchChange"
      @refresh-change="refreshChange"
    >
      <template slot="menuLeft">
        <el-button
          type="primary"
          icon="el-icon-upload2"
          size="small"
          @click="excelChang"
        >导入</el-button>
        <el-dialog title="导入手机号" :visible.sync="dialogVisible" :modal-append-to-body="false">
          <div><span style="color:red;">*</span>导入说明：请下载导入模板，在模板中填写用户的信息，将填写完毕的文件在文件上传窗口中选择后导入系统，导入数据后系统会显示提示信息，按提示信息操作即可。</div>
          <el-button style="margin:10px 0 10px 0;" type="primary" icon="el-icon-upload" @click="downExcel">下载导入模版</el-button>
          <el-upload
            action="注入你的导入接口"
            :on-change="onChange"
            :auto-upload="false"
            :show-file-list="false"
            accept=".xls, .xlsx"
          >
            <div class="grace-flex" style="width:100%;">
              <el-input style="margin-right:20px;"  v-model="input" :disabled="true"></el-input>
              <el-button type="primary" icon="el-icon-upload2">导入</el-button>
            </div>
          </el-upload>
          <textarea disabled style="width:100%;min-height:200px;" v-html="form"></textarea>
        </el-dialog>
      </template>
    </avue-crud>
  </basic-container>
</template>

<--------

主要 js部分

------->

 /*
        execl 导入/导出 方法  start
    */
    // 文件选择回调
    onChange(file, fileList) {
      console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel(e) {
      console.log(e);
      let _self = this;
      const files = _self.fileData;
      console.log(files);
      _self.input = files.name;
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();

      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          // console.log(data)
          const workbook = this.XLSX.read(data, {
            type: "binary",
          });
          console.log(workbook.SheetNames);
          if (workbook.SheetNames.length >= 1) {
            this.$message({
              message: "导入数据表格成功",
              showClose: true,
              type: "success",
            });
          }
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          _self.outputs = []; //清空接收数据
          _self.studentlist = []; //清空接受数据
          for (var i = 0; i < ws.length; i++) {
            var sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              acm_id: _self.$route.query.data.id,
              acd_grade: ws[i]["年级"],
              acd_class: ws[i]["班级"],
              parents_name: ws[i]["家长姓名"],
              stu_name: ws[i]["学生姓名"],
              acd_phone_num: ws[i]["手机号码"],
            };
            _self.studentlist.push(sheetData);
          }
          console.log(_self.studentlist, "77777");
          _self.excelDr(_self.studentlist);
          this.$refs.upload.value = "";
        } catch (e) {
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
    // 导出方法
    downExcel() {
      this.$export.excel({
        title: "手机号导入模版",
        columns: [
          { label: "年级", prop: "acd_grade" },
          { label: "班级", prop: "acd_class" },
          { label: "家长姓名", prop: "parents_name" },
          { label: "学生姓名", prop: "stu_name" },
          { label: "手机号码", prop: "acd_phone_num" },
        ],
        data: [],
      });
    },
    /*execl 导入 方法  end*/