pbl-teacher-table/src/components/pages/studentManageNew/component/addstu.vue

<template>
  <div class="addstudia_box">
    <el-dialog class="addstudia" :visible.sync="addStuVisible" width="800px">
      <template #title>
        <div class="title_box">
          <div class="title_box_item">
            <span>{{ lang.ssAddStuTitle }}</span>
            <span v-if="boxType == 1" style="font-size: 13px"
              >({{ lang.ssFromExistL }})</span
            >
          </div>
        </div>
      </template>
      <div class="addStuBox" v-loading="userSuffixloading">
        <div class="bar_box" v-if="boxType != 1">
          <div
            v-for="item in stuListTypeList"
            :key="item.value"
            :class="{ active_bar: addStuType == item.value }"
            @click="changeStuListType(item.value)"
          >
            {{ item.label }}
          </div>
        </div>
        <!-- 手动添加学生 -->
        <div class="addcla_box" v-if="addStuType == 1">
          <div class="addcla_box_item" v-if="boxType != 2">
            <span class="addcla_box_item_span">{{ lang.ssBelongClass }}</span>
            <el-input
              v-model.trim="classInfo.name"
              disabled
              :placeholder="lang.Enterclass"
            ></el-input>
          </div>
          <div class="addcla_box_item" v-if="boxType == 2">
            <span class="addcla_box_item_span">{{ lang.ssBelongClass }}</span>
            <el-cascader
          :options="cascaderData"
          v-model="cascaderDataPath"
          @change="handleChangecascader"
          popper-class="myCascader"
          :props="{
            label: 'name',
            value: 'id',
            children: 'children',
          }"
        >
          <template slot-scope="{ data, node }">
            <!-- 一级选项（年级） -->
            <span v-if="node.level === 1">{{ data.name }}</span>
            <!-- 二级选项（班级）- 可以自定义显示 -->
            <span v-else-if="node.level === 2" class="cascader-class-item">
              <span>{{ data.name }}</span>
            </span>
            <!-- 其他级别（兜底） -->
            <span v-else>{{ data.name }}</span>
          </template>
        </el-cascader>
          </div>

          <div class="addcla_box_item" style="position: relative">
            <span class="addcla_box_item_span">{{ lang.StudentName }}：</span>
            <el-input
              v-model.trim="searchStuName"
              :placeholder="lang.ssEnterStuNameMul"
              slot="reference"
              @change="searchStu"
              @focus="popoverVisible = true"
            ></el-input>
            <div class="search_stu_box" v-if="popoverVisible">
              <div class="search_stu_box_content">
              
                <!-- <el-tag
                  v-for="(item, index) in searchStuData"
                  :key="index"
                  closable
                  :type="stuname2(item)"
                  @close="handleClose(index)"
                >
                  <span>{{ item }}</span>
                </el-tag> -->
                <div class="tagL" v-for="(item, index) in searchStuData" :key="index">
                  <div class="tagtit" v-if="stuname2(item) == 'danger'">
                    <div class="poptag">
                      <img src="../../../../assets/stuImg/tishi.svg" alt=""/>
                      <div>{{ lang.ssStuNameDup.replace(/\*/g, item) }}</div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;gap: 10px;">
                      <!-- <span>添加</span> -->
                      <span style="cursor: pointer;" @click="addpopStu(item)">添加</span>

                      <span style="cursor: pointer;color: #0052D9;" @click="delSeaStu(index)">删除</span>
                    </div>
                  </div>
                  <div class="tagitem" :class="stuname2(item) == 'danger' ? 'tagitem2' :''">
                    {{ item }}
                    <i @click="delSeaStu(index)" class="el-icon-close closeImg"></i>
                  </div>
                </div>

              </div>
              <div class="search_stu_box_footer">
              <div>{{ lang.ssInputStuCnt.replace(/\*/g, searchStuData.length) }}</div>
                <div class="dialog-footer">
                  <!-- <el-button size="small" @click="selectNoneStu"
                    >取消</el-button
                  > -->
                  <div  @click="selectNoneStu" class="kbtn">{{ lang.Cancel }}</div>
                  <div @click="selectStu" class="kbtn" style="background: #3681FC; color: #E6FFFFFF;">{{ lang.Confirm }}</div>
                  
                  <!-- <el-button size="small" type="primary" @click="selectStu"
                    >确定</el-button
                  > -->
                </div>
              </div>
            </div>
          </div>
          <div class="addcla_box_item">
            <span class="addcla_box_item_span">{{ lang.ssEntered }}</span>
            <div class="selected_stu_box">
              <!-- <el-tag
                v-for="(item, index) in selectedStuData"
                :key="index"
                closable
                :type="stuname(item)"
                @close="handleSelectedStuClose(index)"
              >
                <span>{{ item }}</span>
              </el-tag> -->
                <div class="tagL" v-for="(item, index) in selectedStuData" :key="index">
                  <div class="tagtit" v-if="stuname(item) == 'danger'">
                    <div class="poptag">
                      <img src="../../../../assets/stuImg/tishi.svg" alt=""/>
                      <div>{{ lang.ssStuNameDup.replace(/\*/g, item) }}</div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;gap: 10px;">
                      <!-- <span>添加</span> -->
                      <span style="cursor: pointer;" @click="addpopStu(item)">添加</span>
                      <span style="cursor: pointer;color: #0052D9;" @click="handleSelectedStuClose(index)">删除</span>
                    </div>
                  </div>
                  <div class="tagitem" :class="stuname(item) == 'danger' ? 'tagitem2' :''">
                    {{ item }}
                    <i @click="handleSelectedStuClose(index)" class="el-icon-close closeImg"></i>
                  </div>
                </div>
            </div>
          </div>
        </div>
        <!-- 批量上传学生 -->
        <div v-if="addStuType == 2">
          <div>
            <el-upload
              class="upload-demo"
              drag
              :http-request="handleChange"
              action="#"
              :show-file-list="false"
              accept=".xlsx,.xls"
              v-loading="uploadfileLoading"
            >
              <img src="@/assets/stuImg/uploadfile.svg" alt="upload" />
              <div style="color: #000">{{ lang.ssUploadClickDrag }}</div>
              <div class="upload-demo-tip">{{ lang.ssUploadTip }}</div>
            </el-upload>
            <div style="margin-top: 10px">
              {{ lang.ssUploadTempLbl }}
              <span class="download-template" @click="downloadTemplate"
                >{{ lang.ssDownloadTemp }}</span
              >
              <span style="margin-left: 10px;font-weight: 600;">{{ lang.ssAccColOptional }}</span>
            </div>
            <div v-if="boxType == 0" style="margin-top: 10px;font-weight: 600;">
              {{ lang.ssUploadNote }}
            </div>
            <div v-else style="margin-top: 10px;font-weight: 600;">
              {{ lang.ssSyncImportClassInfo }}
            </div>
            <!-- <div style="margin-top: 10px">
              学生列表批量上传需表格需添加“班级”列
            </div> -->
          </div>
        </div>
        <!-- 从已有学生中添加 -->
        <div v-if="addStuType == 3">
          <allClaAddStu
            ref="allClaAddSturef"
            @closeAllClaAddStu="closeAllClaAddStu"
            @getStudent="allClaAddStuGetStudent"
            :classInfo="classInfo"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <template v-if="addStuType == 1">
          <!-- <el-button size="small" @click="closeAllClaAddStu">取消</el-button> -->
          <div @click="closeAllClaAddStu" class="kbtn">{{ lang.Cancel }}</div>

          <div @click="addStu" class="kbtn" style="background: #3681FC; color: #E6FFFFFF;">{{ lang.Confirm }}</div>

          <!-- <el-button size="small" type="primary" @click="addStu"
            >确认</el-button
          > -->
        </template>
      </div>
    </el-dialog>
    <div class="pop-upBox">
      <el-dialog
        :visible.sync="popBoxdia"
        width="480px"
        :show-close="false"
      >
        <div class="msgCon">
            <img v-if="deltypy == 0 || deltypy == 2" style="width: 20px;" src="../../../../assets/stuImg/duil.svg" alt="">
            <img v-if="deltypy == 1" style="width: 20px;" src="../../../../assets/stuImg/tishi.svg" alt="">

            <div class="msgContxt">
              <div v-if="deltypy == 0 || deltypy == 2">
                {{ (impbox.length ? impbox[0].name : '') + lang.ssAddStuSucc.replace(/\*/g, impbox.length) }}
              </div>
              <div v-if="deltypy == 1">{{ lang.ssConfirmUpload }}？</div>

            </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <div @click="closePop" class="kbtn" v-if="deltypy == 1">{{ lang.Cancel }}</div>
          <div @click="confirmDelStu" class="kbtn" style="background: #3681FC; color: #E3EDFF;">{{ lang.Confirm }}</div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { v4 as uuidv4 } from "uuid";
import pinyin from "../../../../../node_modules/js-pinyin/index";
import allClaAddStu from "./allClaAddStu.vue";
import { myMixin } from "@/mixins/mixin.js"
export default {
  mixins: [ myMixin ],
  name: "addStu",
  props: {
    boxType: {
      type: Number,
      default: 0,
    },
    cascaderData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    boxType: {
      handler(newVal) {
        if (newVal == 1) {
          this.stuListTypeList = [];
          this.addStuType = 3;
        } else if (newVal == 0) {
          this.stuListTypeList = this.tab1;
          this.addStuType = 1;
        } else if (newVal == 2) {
          this.stuListTypeList = this.tab2;
          this.addStuType = 1;
        }
        this.clearData();
      },
      immediate: true,
    },
  },
  components: {
    allClaAddStu,
  },
  data() {
    return {
      userid: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      role: this.$route.query.role,
      cascaderDataPath: [],

      userSuffixloading:false,
      deltypy:0,
      stuexcel:[],
      impbox:[],
      addpopStuList:[],
      popBoxdia:false,
      uploadfileLoading:false,
      addStuType: 1,
      schoolChar: "",
      userSuffix: "",
      addStuVisible: false,
      classInfo: {},
      stuListTypeList: [],
      tab1: [
        {
          label: this.lang.ssManualInput,
          value: 1,
        },
        {
          label: this.lang.ssBatchUp,
          value: 2,
        },
        {
          label: this.lang.ssFromExistL,
          value: 3,
        },
      ],
      tab2: [
        {
          label: this.lang.ssManualInput,
          value: 1,
        },
        {
          label: this.lang.ssBatchUp,
          value: 2,
        },
      ],
      searchStuName: "",
      searchStuData: [],
      selectedStuData: [],
      popoverVisible: false,
      
    };
  },
  computed: {
    stuname() {
      return (item) => {
        let box = this.selectedStuData.filter((e) => (e === item && this.addpopStuList.indexOf(item) == -1));
        // console.log(box);
        return box.length > 1 ? "danger" : "";
      };
    },
    stuname2() {
      return (item) => {
        let box = this.searchStuData.filter((e) => (e === item && this.addpopStuList.indexOf(item) == -1));
        // console.log(box);
        return box.length > 1 ? "danger" : "";
      };
    },
  },
  mounted() {
    this.getUser();
    this.getSchoolName();
  },
  methods: {
    stardop(){
      this.addStuVisible = true;
      this.searchStuName= "";
      console.log('666');

      // this.addStuType=1
      if (this.boxType == 1) {
        this.stuListTypeList = [];
        this.addStuType = 3;
        // this.nextTick(() => {
        //   this.$refs.allClaAddSturef.clearData();
        // });

      } else if (this.boxType == 0) {
        this.stuListTypeList = this.tab1;
        this.addStuType = 1;
      } else if (this.boxType == 2) {
        this.stuListTypeList = this.tab2;
        this.addStuType = 1;
      }
      this.searchStuData= [];
      this.selectedStuData= [];
      this.cascaderDataPath=[];
      this.impbox=[];
      this.addpopStuList=[];

    },
    addpopStu(val){
      this.addpopStuList.push(val)
    },
    delSeaStu(ind){
      this.searchStuData.splice(ind,1)
    },
    handleChangecascader(val) {
      console.log(val);
      // 更新级联选择器的选中数据路径
      this.cascaderDataPath = val || [];
      let box = this.cascaderData.flatMap((item) => item.children).filter((item) => this.cascaderDataPath[1]==item.id);
      console.log(box, "box");
      this.classInfo = box;
    },
    clearData() {
      this.searchStuName = "";
      this.searchStuData = [];
      this.selectedStuData = [];
      this.popoverVisible = false;
    },
    allClaAddStuGetStudent() {
      this.$emit("getStudent");
    },
    closeAllClaAddStu() {
      this.addStuVisible = false;
    },
    // 下载Excel模板
    downloadTemplate() {
      require.ensure([], () => {
        const {
          export_json_to_excel,
        } = require("../../../../common/Export2Excel");
        // 增加 colWidths 参数以调整列宽，例如调整为 [20, 35, 20]
        let tHeader = [this.lang.StudentName, this.lang.ssStuAccHd];
            
        if (this.boxType == 2) {
           tHeader = [this.lang.StudentName, this.lang.Class, this.lang.ssStuAccHd];
        }
        const data = [];
        const colWidths = [35]; // 设置每一列的宽度
        export_json_to_excel(
          tHeader,
          data,
          this.lang.Uploadstusamples,
          colWidths
        );
      });
    },

    // 上传Excel添加学生
    handleChange(file) {
      if (this.uploadfileLoading) {
        this.$message.warning(this.lang.ssUploading);
        return;
      }
      if (this.userSuffix == "") {
        this.$message.error(this.lang.ssGetSuffixReUp);
        this.getUser();
        return;
      }
      let _this = this;
      // 通过DOM取文件数据
      var rABS = false; //是否将文件读取为二进制字符串
      var f = file.file;
      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = async 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就是你想要的东西
          let da = [...outdata];
          console.log(da, "da");
          let arr = [];
          da.map((v) => {
            let obj = {};
            if (
              v[_this.lang.StudentName] !== undefined &&
              v[_this.lang.StudentName] !== "" 
            ) {
              obj.name = v[_this.lang.StudentName];
              const accountVal = String(v[_this.lang.ssStuAccHd] || '').trim();
              if (
                _this.org != "" &&
                _this.org != "null" &&
                _this.org != undefined &&
                _this.org &&
                _this.schoolChar
              ) {
                if (accountVal && /^[a-zA-Z0-9]+$/.test(accountVal)) {
                  obj.account = accountVal + '@' + _this.schoolChar + '.' + _this.userSuffix;
                } else {
                  obj.account = '';
                }

                obj.mail =
                  uuidv4() + "@" + _this.schoolChar + "." + _this.userSuffix;
              } else {
                if (accountVal && /^[a-zA-Z0-9]+$/.test(accountVal)) {
                  obj.account = accountVal + '@' + _this.userSuffix;
                } else {
                  obj.account = '';
                }
                obj.mail = uuidv4() + "@" + _this.userSuffix;
              }
              obj.class = _this.boxType == 2 ? v[_this.lang.Class] : _this.classInfo.id;
              arr.push(obj);
            }else{
              _this.$message.error(_this.lang.ssCheckStuNameCol);
              return;
            }
          });
          console.log(arr);
          if (!arr.length) {
            _this.$message.error(
              _this.lang.ssParseStuFail
            );
            return;
          }
         
          if (_this.boxType == 2) {
            let stuClassInfo = await _this.getClassInfo();
            console.log(stuClassInfo, "stuClassInfo");
            arr.forEach((e) => {
              let classInfo = stuClassInfo.find(item => item.name == e.class);
              if (classInfo) {
                e.class = classInfo.id;
              } else {
                e.class = '';
              }
            });
          }
          console.log(arr, "arr");
          
         

          if (_this.boxType == 2 && arr.filter(e => e.class).length !== arr.length) {
            _this.$message.error(_this.lang.ssCheckClassCol);
            return;
          }

          // 打开确认上传弹窗
          _this.deltypy = 1;
          _this.popBoxdia= true;
          _this.stuexcel = arr;
        };

        reader.readAsArrayBuffer(f);
      };

      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
    async getClassInfo() {
      return new Promise((resolve, reject) => {
        let params = {
          oid: this.oid,
        };
        this.ajax
          .get(this.$store.state.api + "selectGradeNew", params)
          .then((res) => {
            let box1 = JSON.parse(JSON.stringify(res.data[0]));
            let box2 = JSON.parse(JSON.stringify(res.data[1]));
          
            // box1.push({id:0,name:this.lang.ssInterestClass});

            const gradeIds = box1.filter(e => e.id !== 0).map(e => e.id);

            let box3 = [];

            box2.forEach((e) => {
              if (gradeIds.includes(e.pid)) {
                e.name = box1.find(item => item.id == e.pid).name + e.name;
                box3.push(e);
              }
            });
            resolve(box3);
          })
          .catch((err) => {
            console.error(err);
            reject(err);
          });
      });
    },
    // 手动输入添加学生
    addStu() {
      if (this.uploadfileLoading) {
        this.$message.warning(this.lang.ssUploading);
        return;
      }
      this.selectedStuData = this.selectedStuData.filter((item) => item != "");
      if (this.selectedStuData.length == 0) {
        this.$message.error(this.lang.ssEnterStu);
        return;
      }
      if (this.selectedStuData.length > 70) {
        this.$message.error(this.lang.ssAddStuMax70);
        return;
      }

      if ((this.boxType == 2 && this.cascaderDataPath.length == 0) || this.classInfo.name == "") {
        this.$message.error(this.lang.ssSelectBelCla);
        return;
      }

      if (this.userSuffix == "") {
        this.$message.error(this.lang.ssGetSuffixReAdd);
        this.getUser();
        return;
      }

      let mail = "";
      if (
        this.org != "" &&
        this.org != "null" &&
        this.org != undefined &&
        this.org &&
        this.schoolChar
      ) {
        mail = "@" + this.schoolChar + "." + this.userSuffix;
      } else {
        mail = "@" + this.userSuffix;
      }
      let classInfo = this.classInfo;
      if (this.boxType == 2) {
        classInfo = this.cascaderData.flatMap((item) => item.children).filter((item) => this.cascaderDataPath[1]==item.id)[0];
      }
      let box = this.selectedStuData.map((item) => {
        return {
          name: item,
          mail: uuidv4() + mail,
          class: classInfo.id,
        };
      });
      // 手动输入添加学生，打开弹框
      this.accUpdate(box,0);
    },
    async accUpdate(box,index) {
      console.log(box, "box");
      this.uploadfileLoading = true;
      this.impbox = box;
      let data1 = box.filter(e => !e.account);
      let data2 = box.filter(e => e.account);

      data2.forEach((e) => {
        e.mail = e.account;
      });

      try {
        const batchSize = 50;
        if (data1.length > 0) {
          if (data1.length > batchSize) {
            // 计算总批次数
            const totalBatches = Math.ceil(data1.length / batchSize);
            for (let i = 0; i < totalBatches; i++) {
              const batch = data1.slice(i * batchSize, (i + 1) * batchSize);
              await this.uploadBatch(batch); // 假设 uploadBatch 返回 Promise
              console.log(`普通上传第 ${i + 1} 批上传完成`, batch);
            }
          } else {
            // 长度不超过 10，直接上传整个数组
            await this.uploadBatch(data1);
          }
        }

        if (data2.length > 0) {
          if (data2.length > batchSize) {
            // 计算总批次数
            const totalBatches = Math.ceil(data2.length / batchSize);
            for (let i = 0; i < totalBatches; i++) {
              const batch = data2.slice(i * batchSize, (i + 1) * batchSize);
              await this.uploadBatchAccount (batch); // 假设 uploadBatch 返回 Promise
              console.log(`自定义账号上传第 ${i + 1} 批上传完成`, batch);
            }
          } else {
            // 长度不超过 10，直接上传整个数组
            await this.uploadBatchAccount (data2);
          }
        }


        this.$message({
          message: this.lang.ssAddOk,
          type: "success",
        });
        // excel与手动上传，上传完毕，打开弹框
        this.deltypy = index;
        this.popBoxdia= true;
        // this.addStuVisible = false;
        console.log('this.selectedStuData',this.selectedStuData);
        
        // this.selectedStuData = [];
        this.$emit("getCascaderData");
        this.addOp3('1', "", { type: "student_add" }, "success")
      } catch (err) {
        console.error(err);
        // 业务错误已在 uploadBatch / uploadBatchAccount 中提示
        if (!err || !err.business) {
          this.$message.error(this.lang.Additionfailed);
        }
      } finally {
        this.uploadfileLoading = false;
      }
    },
    async uploadBatch(box){
      return new Promise((resolve, reject) => {
        // this.impbox = box;
        let z = 2;
        let newArr = JSON.stringify(box);
        let params = [
          {
            arr: newArr,
            userpassword: "Coco1234",
            oid: this.oid,
          },
        ];
      console.log(params, "batchRegistrationMoreCopyNewl");
      // batchRegistrationMoreCopy
        this.ajax
          .post(this.$store.state.api + "batchRegistrationMoreCopyNewl", params)
          .then((res) => {
            console.log(res, "res");
            if (res.data.type == 1) {
              this.$message.error(this.lang.stunumberregistered);
              z = 1;
            }
            if (res.data.type == 2) {
              this.$message.error(this.lang.stuaccregistered);
              z = 1;
            }
            if (res.data.type == 3) {
              this.$message.error(this.lang.studuplicateIDs);
              z = 1;
            }
            if (z == 2) {
              console.log("添加成功");
              resolve(res);
            } else {
              reject({ business: true, res });
            }
          })
          .catch((err) => {
            console.error(err);
            this.addOp3('1', "", { type: "student_add" }, err)
            reject(err);
          });
        });
    },
    async uploadBatchAccount(box){
      return new Promise((resolve, reject) => {
        let z = 2;
        let newArr = JSON.stringify(box);
        let params = [
          {
            arr: newArr,
            userpassword: "Coco1234",
            oid: this.oid,
          },
        ];
      console.log(params, "batchRegistrationMoreAcc");
      // batchRegistrationMoreCopy
        this.ajax
          .post(this.$store.state.api + "batchRegistrationMoreAcc", params)
          .then((res) => {
            console.log(res, "res");
            if (res.data.type == 1) {
              this.$message.error(this.lang.stunumberregistered);
              z = 1;
            }
            if (res.data.type == 2) {
              this.$message.error(this.lang.stuaccregistered);
              z = 1;
            }
            if (res.data.type == 3) {
              this.$message.error(this.lang.studuplicateIDs);
              z = 1;
            }
            if (z == 2) {
              console.log("添加成功");
              resolve(res);
            } else {
              reject({ business: true, res });
            }
          })
          .catch((err) => {
            console.error(err);
            this.addOp3('1', "", { type: "student_add" }, err)
            reject(err);
          });
        });
    },
    confirmDelStu(){
          // this.addStuVisible = false;
          if (this.deltypy == 0 || this.deltypy == 2) {    //上传完毕，关闭弹窗
            this.impbox = []
            this.selectedStuData = [];
            // 关闭弹窗
            if(this.deltypy == 2){    //excel上传，关闭弹窗
              this.stuexcel = [];
              this.addStuVisible = false;
            }
          }else if (this.deltypy == 1) {     //excel上传，提示是否继续上传
            if (this.uploadfileLoading) {
              this.$message.warning(this.lang.ssUploading);
              return;
            }
            this.accUpdate(this.stuexcel,2);
          }
          this.popBoxdia= false;
    },
    closePop(){
      this.popBoxdia= false;
      if (this.deltypy == 1) {
        // excel上传，清空数据
        this.stuexcel = []
      }
    },
    // 修改账号
    updateAccount(arr) {
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "updateAccount", params)
        .then((res) => {
          console.log(res, "res");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleClose(index) {
      this.searchStuData.splice(index, 1);
    },
    changeStuListType(value) {
      this.addStuType = value;
      this.clearData();
    },
    searchStu() {
      this.searchStuData.push(
        ...this.searchStuName
          .split("，")
          .map((item) => item.trim())
          .filter((item) => item)
      );
      this.searchStuName = "";
    },
    selectNoneStu() {
      this.popoverVisible = false;
      this.searchStuData = [];
      this.searchStuName = "";
    },
    selectStu() {
      this.popoverVisible = false;
      this.selectedStuData.push(...this.searchStuData);
      this.searchStuData = [];
      this.searchStuName = "";
    },
    handleSelectedStuClose(index) {
      this.selectedStuData.splice(index, 1);
    },
    getSchoolName() {
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectSchoolName2", params)
        .then((res) => {
          // this.schoolName = res.data[0][0].name;
          console.log(res.data[0][0].name, "res.data[0][0].name");

          const cleanedSchoolName = res.data[0][0].name.replace(
            /[，。；：！“”‘’（）()]/g,
            ""
          ); // 去掉标点符号
          // console.log(pinyin);
          // console.log(pinyin.getFullChars(cleanedSchoolName));
          // console.log(pinyin.getCamelChars(cleanedSchoolName));
          this.schoolChar = pinyin
            .getCamelChars(cleanedSchoolName)
            .toLowerCase();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getUser() {
      let params = {
        userid: this.userid,
      };
      this.userSuffixloading = true;
      this.ajax
        .get(this.$store.state.api + "selectuserinfoyym", params)
        .then((res) => {
          this.userSuffix = res.data[0][0].accountNumber.split("@")[1];
          this.userSuffixloading = false;
        })
        .catch((err) => {
          console.error(err);
          this.userSuffixloading = false;
        });
    },
  },
};
</script>
<style>
.myCascader
  .el-cascader-panel
  .el-cascader-menu:first-child
  .el-scrollbar__wrap
  ul
  li
  label,
.myCascader
  .el-cascader-panel
  .el-cascader-menu:first-child
  .el-scrollbar__wrap
  ul
  li
  .el-checkbox {
  display: none !important;
}
.seaStutxt {
  width: 360px !important;
  min-width: 60px !important;
  padding: 16px !important;
}
.seaStuBtn{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
/* .seaStutxt .action_box > div {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.seaStutxt .action_box > div:hover {
  background: #e8f3ff;
  color: #0052d9;
} */
</style>
<style scoped>
.bar_box {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 20px;
  border-bottom: 0.5px solid #e7e7e7;
}
.bar_box div {
  cursor: pointer;
  padding-bottom: 5px;
  box-sizing: border-box;
}
.active_bar {
  border-bottom: 2px solid #0052d9 !important;
}
.addcla_box {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 30px;
  min-height: 300px;
}
.addcla_box_item {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.addcla_box_item >>> .el-cascader {
  width: 100%;
}
.addcla_box_item >>> .el-input__inner {
  width: 100%;
}
.addcla_box_item >>> .el-input__icon {
  width: 100%;
}
.addcla_box_item > .addcla_box_item_span {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
}
.search_stu_box {
  width: 670px;
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 100%;
  left: 90px;
  z-index: 1000;
  min-height: 110px;
  background: #fff;
  border: 1px solid #e8f3ff;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05);
}
.search_stu_box_content {
  display: flex;
  gap: 10px;
  flex: 1;
  padding: 10px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.selected_stu_box_item {
  background: #e8f3ff;
  padding: 0px 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  box-sizing: border-box;
}
.search_stu_box_footer {
  display: flex;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-top: 1px #e7e7e7 solid;
}
.selected_stu_box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.upload-demo {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 25px;
  border: 0.5px dashed #e7e7e7;
}
.upload-demo:hover {
  box-sizing: border-box;
  border: 0.5px dashed #0052d9;
}
.upload-demo >>> .el-upload {
  width: 100%;
  height: 100%;
}
.upload-demo >>> .el-upload-dragger {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: none;
  background: #f2f4f5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.upload-demo-tip {
  font-size: 12px;
  color: #999;
}
.download-template {
  color: #0052d9;
  cursor: pointer;
  border-bottom: 1px solid #0052d9;
}
.msgCon{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-sizing: border-box;
}
.msgContxt{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  color: #000000;
}
.tagL{
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
  box-sizing: border-box;
  background: #E7F3FF;
  border: 1px #DDE4E5 solid;
  position: relative;
}
.tagitem{
  height: 100%;
  padding: 0 25px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}

.tagtit{
  position: absolute;
  top: -116px;
  right: 0;
  background: #999;
  display: none;
  width: 304px;
  height: 116px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  padding: 10px;
  float: left;
  box-sizing: border-box;
  box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.08), 0px 16px 24px 2px rgba(0,0,0,0.04), 0px 6px 30px 5px rgba(0,0,0,0.05);
}
.poptag{
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
}
.tagtit img{
  width: 20px;
  margin-top: 5px;
}
/* tagtit 与 tagitem 是兄弟关系，需通过父元素 tagL 来联动 */
.tagL:hover .tagtit{
  display: block !important;
}
.tagitem2{
  background: #F7D9CF;
  border: none;
  color: #FE6331;
}
.pop-upBox >>> .el-dialog{
  border-radius: 8px !important;
  margin-top: 30vh !important;
}
.pop-upBox >>> .el-dialog__body{
  padding: 12px 23px; 
}
/* .addstudia >>> .el-dialog__body{
  padding: 10px 20px; 

} */
.msgCon{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-sizing: border-box;
}
.msgContxt{
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  color: #000000;
}
.kbtn{
  text-align: center;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 14px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.closeImg{
  font-size: 16px;
  cursor: pointer;
  display: none;
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  /* background: #fff; */
  /* border-radius: 50%; */
  /* padding: 2px; */
  /* box-sizing: border-box; */
}
.tagitem:hover .closeImg{
  display: block;
}
</style>