新增批量添加教师功能

src/components/register.vue

@@ -4,7 +4,10 @@
       <div style="width: 100%; margin: 0px auto">
         <div class="formTop">
           <div class="tx">
-            <img :src="ruleForm.headportrait ? ruleForm.headportrait : tx" alt />
+            <img
+              :src="ruleForm.headportrait ? ruleForm.headportrait : tx"
+              alt
+            />
           </div>
         </div>
         <div class="reBox">
@@ -19,15 +22,26 @@
                 style="width: 300px"
                 placeholder="请输入市区"
               ></el-input> -->
-              <el-cascader size="large" style="width: 300px" clearable :options="region" v-model="selectedOptions"
-                @change="handleChange" placeholder="请选择市区">
+              <el-cascader
+                size="large"
+                style="width: 300px"
+                clearable
+                :options="region"
+                v-model="selectedOptions"
+                @change="handleChange"
+                placeholder="请选择市区"
+              >
               </el-cascader>
             </div>
           </div>
           <div class="first">
             <div>详细地址</div>
             <div>
-              <el-input v-model="ruleForm.address" style="width: 300px" placeholder="请输入详细地址"></el-input>
+              <el-input
+                v-model="ruleForm.address"
+                style="width: 300px"
+                placeholder="请输入详细地址"
+              ></el-input>
             </div>
           </div>
           <div class="first">
@@ -36,10 +50,25 @@
               学校
             </div>
             <div>
-              <el-select v-model="ruleForm.school" filterable clearable @clear="clearSchoolList" :allow-create="false"
-                @focus="remoteMethodclick" remote placeholder="请输入学校" :remote-method="remoteMethod" :loading="loading"
-                no-data-text="暂未查询到此学校">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+              <el-select
+                v-model="ruleForm.school"
+                filterable
+                clearable
+                @clear="clearSchoolList"
+                :allow-create="false"
+                @focus="remoteMethodclick"
+                remote
+                placeholder="请输入学校"
+                :remote-method="remoteMethod"
+                :loading="loading"
+                no-data-text="暂未查询到此学校"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
                 </el-option>
               </el-select>
             </div>
@@ -50,7 +79,11 @@
               姓名
             </div>
             <div>
-              <el-input v-model="ruleForm.name" style="width: 300px" placeholder="请输入姓名"></el-input>
+              <el-input
+                v-model="ruleForm.name"
+                style="width: 300px"
+                placeholder="请输入姓名"
+              ></el-input>
             </div>
           </div>
           <div class="first">
@@ -59,18 +92,44 @@
               联系方式
             </div>
             <div>
-              <el-input v-model="ruleForm.phone" style="width: 300px" placeholder="请输入手机号或邮箱"></el-input>
+              <el-input
+                v-model="ruleForm.phone"
+                style="width: 300px"
+                placeholder="请输入手机号或邮箱"
+              ></el-input>
             </div>
           </div>
           <div class="isButton">
             <el-button @click="addRaceUser">确定提交</el-button>
             <el-button @click="goTo('/login')">返回登录</el-button>
           </div>
+          <div v-show="false">
+            <el-upload
+              class="upload-demo newCss"
+              :http-request="handleChange1"
+              :on-remove="handleRemove"
+              action="#"
+              :file-list="fileListUpload"
+              accept=".xlsx"
+            >
+              <el-button size="primary" type="primary">批量添加</el-button>
+            </el-upload>
+            <!-- <el-button @click="exportExcel">导出学生</el-button> -->
+            <div @click="getExcel">xls 上传样例</div>
+          </div>
         </div>
       </div>
     </div>
-    <el-dialog :show-close="false" title="提交成功" :visible.sync="dialogVisibleSuccess" :append-to-body="true"
-      width="600px" :close-on-click-modal="false" :before-close="handleClose" class="dialog_diy">
+    <el-dialog
+      :show-close="false"
+      title="提交成功"
+      :visible.sync="dialogVisibleSuccess"
+      :append-to-body="true"
+      width="600px"
+      :close-on-click-modal="false"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
       <div class="s_box">
         <div class="s_top">
           <span>恭喜您</span>
@@ -89,11 +148,18 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" class="tag-read" style="
+        <el-button
+          type="primary"
+          class="tag-read"
+          style="
             background: rgb(112, 183, 79);
             border-color: rgb(112, 183, 79);
             margin-right: 50px;
-          " @click="copy" :data-clipboard-text="copyText">复制账号</el-button>
+          "
+          @click="copy"
+          :data-clipboard-text="copyText"
+          >复制账号</el-button
+        >
         <el-button type="primary" @click="goTo('/login')">返回登陆</el-button>
       </span>
     </el-dialog>
@@ -104,6 +170,7 @@
 </template>
 
 <script>
+import $ from "jquery";
 import { regionData, CodeToText } from "element-china-area-data";
 import Clipboard from "clipboard";
 const Data = regionData.filter((ele) => {
@@ -127,6 +194,7 @@ export default {
       list: [],
       loading: false,
       schoolList: [],
+      fileListUpload: [],
       num: "",
       dialogVisibleSuccess: false,
       copyText: "",
@@ -145,6 +213,139 @@ export default {
     goTo(path) {
       this.$router.push(path);
     },
+    handleChange1(file) {
+      this.fileTemp = file.file;
+      if (this.fileTemp) {
+        if (
+          this.fileTemp.type ==
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
+          this.fileTemp.type == "application/vnd.ms-excel"
+        ) {
+          this.importCount = 1;
+          this.importfxx(this.fileTemp);
+        } else {
+          this.$message({
+            type: "warning",
+            message: "附件格式错误，请删除后重新上传！",
+          });
+        }
+      } else {
+        this.$message({
+          type: "warning",
+          message: "请上传附件！",
+        });
+      }
+    },
+    handleRemove(file, fileList) {
+      this.fileTemp = null;
+    },
+    importfxx(obj) {
+      const loading = this.$loading.service({
+        background: "rgba(255, 255, 255, 0.7)",
+        target: document.body,
+      });
+      var _$ = $;
+      this.importCount++;
+      let _this = this;
+      // 通过DOM取文件数据
+      this.file = obj;
+      var rABS = false; //是否将文件读取为二进制字符串
+      var f = this.file;
+      var reader = new FileReader();
+      //if (!FileReader.prototype.readAsBinaryString) {
+      FileReader.prototype.readAsBinaryString = function (f) {
+        var binary = "";
+        var rABS = false; //是否将文件读取为二进制字符串
+        var pt = this;
+        var wb; //读取完成的数据
+        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]);
+          }
+          var 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.da = [...outdata];
+          let arr = [];
+          this.da.map((v) => {
+            let obj = {};
+            obj.name = v["教师姓名"];
+            obj.mail = v["教师账号"];
+            obj.school = v["学校"];
+            arr.push(obj);
+          });
+          console.log(arr);
+          let _b = 1;
+          for (var i = 0; i < arr.length; i++) {
+            let item = arr[i];
+            if (item.school === "") {
+              _b = 1;
+              _this.$message.error("教师学校不能为空,请重新上传");
+              break;
+            } else if (item.name === "") {
+              _b = 1;
+              _this.$message.error("教师姓名不能为空,请重新上传");
+              break;
+            } else if (item.mail === "") {
+              _b = 1;
+              _this.$message.error("教师账号不能为空,请重新上传");
+            } else if (
+              !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
+                item.mail
+              )
+            ) {
+              _b = 1;
+              _this.$message.error("有教师账号格式不正确,请重新上传");
+              break;
+            }
+          }
+          let z = 2;
+          let newArr = JSON.stringify(arr);
+          let params = [
+            {
+              arr: newArr,
+              userpassword: 123456,
+            },
+          ];
+          _this.ajax
+            .post(_this.$store.state.api + "pbl_add_raceuser_oid", params)
+            .then((res) => {
+              if (z == 2) {
+                _this.$message({
+                  message: "新增成功",
+                  type: "success",
+                });
+              }
+              loading.close();
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+          _this.fileListUpload = [];
+        };
+
+        reader.readAsArrayBuffer(f);
+      };
+
+      if (rABS) {
+        reader.readAsArrayBuffer(f);
+      } else {
+        reader.readAsBinaryString(f);
+      }
+    },
     handleChange() {
       if (!this.selectedOptions) {
         return;
@@ -157,12 +358,12 @@ export default {
     },
     remoteMethodclick() {
       if (!this.options.length) {
-        var _option = []
+        var _option = [];
         for (var i = 0; i < 10; i++) {
           var _a = this.randomNum(0, 10);
-          _option.push(this.list[_a])
+          _option.push(this.list[_a]);
         }
-        this.options = _option
+        this.options = _option;
       }
     },
     remoteMethod(query) {
@@ -176,17 +377,27 @@ export default {
         }, 200);
       } else {
         // this.options = [];
-        var _option = []
+        var _option = [];
         for (var i = 0; i < 10; i++) {
           var _a = this.randomNum(0, 10);
-          _option.push(this.list[_a])
+          _option.push(this.list[_a]);
         }
-        this.options = _option
+        this.options = _option;
       }
     },
+    getExcel(res) {
+      require.ensure([], () => {
+        const {
+          export_json_to_excel,
+        } = require("../common/Export2Excel");
+        const tHeader = ["教师姓名", "教师账号", "学校"];
+        const data = [];
+        export_json_to_excel(tHeader, data, "上传教师样例");
+      });
+    },
     clearSchoolList() {
       // var _option = []
-      this.ruleForm.school = ""
+      this.ruleForm.school = "";
     },
     getSchool() {
       this.isloading = true;
@@ -200,12 +411,12 @@ export default {
           this.list = this.schoolList.map((item) => {
             return { value: item.id, label: item.name };
           });
-          var _option = []
+          var _option = [];
           for (var i = 0; i < 10; i++) {
             var _a = this.randomNum(0, this.list.length);
-            _option.push(this.list[_a])
+            _option.push(this.list[_a]);
           }
-          this.options = _option
+          this.options = _option;
           this.isloading = false;
         })
         .catch((err) => {
@@ -227,7 +438,7 @@ export default {
         this.$message.error("请填写手机号");
         return;
       }
-      this.isloading = true
+      this.isloading = true;
       let params = [
         {
           reg: this.ruleForm.region,
@@ -235,8 +446,8 @@ export default {
           sch: this.ruleForm.school,
           n: this.ruleForm.name,
           p: this.ruleForm.phone,
-          t:"1",
-          parent:"",
+          t: "1",
+          parent: "",
         },
       ];
       this.ajax
@@ -246,12 +457,12 @@ export default {
             message: "创建成功",
             type: "success",
           });
-          this.isloading = false
+          this.isloading = false;
           this.dialogVisibleSuccess = true;
           this.num = res.data.num;
         })
         .catch((err) => {
-          this.isloading = false
+          this.isloading = false;
           this.$message.error("创建失败");
           console.error(err);
         });
@@ -291,33 +502,33 @@ export default {
 </script>
 
 <style scoped>
-.dialog_diy>>>.el-dialog__header {
+.dialog_diy >>> .el-dialog__header {
   background: #3c3c3c !important;
   padding: 15px 20px;
 }
 
-.dialog_diy>>>.el-dialog__title {
+.dialog_diy >>> .el-dialog__title {
   color: #fff;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn {
+.dialog_diy >>> .el-dialog__headerbtn {
   top: 19px;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
   color: #fff;
 }
 
-.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
   color: #fff;
 }
 
-.dialog_diy>>>.el-dialog__body,
-.dialog_diy>>>.el-dialog__footer {
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
   background: #fafafa;
 }
 
-.dialog_diy>>>.el-dialog__footer {
+.dialog_diy >>> .el-dialog__footer {
   display: flex;
   justify-content: center;
 }
@@ -344,7 +555,7 @@ export default {
   margin: 20px 0;
 }
 
-.formTop>>>.el-form {
+.formTop >>> .el-form {
   margin: 0 auto;
 }
 
@@ -355,7 +566,7 @@ export default {
   min-height: 50px;
 }
 
-.tx>img {
+.tx > img {
   width: 100%;
   height: 100%;
 }
@@ -375,7 +586,7 @@ export default {
   width: 300px;
 }
 
-.first>div:nth-child(1) {
+.first > div:nth-child(1) {
   margin-bottom: 5px;
   font-weight: bold;
   display: flex;
@@ -385,7 +596,7 @@ export default {
   align-items: center;
 }
 
-.first>div:nth-child(2)>.el-select {
+.first > div:nth-child(2) > .el-select {
   width: 300px;
 }
 
@@ -393,7 +604,7 @@ export default {
   margin-top: 20px;
 }
 
-.isButton>>>.el-button {
+.isButton >>> .el-button {
   background: #5492ff !important;
   color: #fff !important;
   cursor: pointer;
@@ -441,7 +652,7 @@ export default {
   align-items: center;
 }
 
-.s_content .content div+div {
+.s_content .content div + div {
   margin-top: 20px;
 }