新学生管理

src/assets/stuImg/uploadfile.svg

@@ -0,0 +1,6 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.645 42.9922H7.52251C4.79001 42.9922 2.57751 40.7772 2.57751 38.0472V11.3747C2.57751 8.64219 4.79251 6.42969 7.52251 6.42969H11.1325C12.1425 6.42969 13.13 6.73969 13.96 7.31719L17.745 9.95469C18.575 10.5322 19.56 10.8422 20.5725 10.8422H36.645C39.3775 10.8422 41.59 13.0572 41.59 15.7872V38.0472C41.59 40.7797 39.3775 42.9922 36.645 42.9922Z" fill="#80B7F9"/>
+<path d="M14.4075 16.7324H45.24C46.9025 16.7324 48.085 18.3724 47.585 19.9799L40.8975 41.4949C40.575 42.5349 39.625 43.2399 38.5525 43.2399H6.75249C5.09249 43.2399 3.90749 41.6024 4.40499 39.9949L11.06 19.4799C11.72 17.5524 13.3325 16.7324 14.4075 16.7324Z" fill="#80B7F9"/>
+<path d="M41.59 38.0474V16.7324H14.4075C13.3325 16.7324 11.72 17.5524 11.06 19.4824L4.40503 39.9974C4.17253 40.7499 4.31003 41.5049 4.69003 42.0999C5.49253 42.6624 6.46753 42.9949 7.52253 42.9949H36.645C39.3775 42.9924 41.59 40.7799 41.59 38.0474Z" fill="#3E8BF8"/>
+<path d="M30.815 28.1077H27.4325V24.7227C27.4325 23.6177 26.5375 22.7227 25.4325 22.7227C24.3275 22.7227 23.4325 23.6177 23.4325 24.7227V28.1052H20.0475C18.9425 28.1052 18.0475 29.0002 18.0475 30.1052C18.0475 31.2102 18.9425 32.1052 20.0475 32.1052H23.43V35.4877C23.43 36.5927 24.325 37.4877 25.43 37.4877C26.535 37.4877 27.43 36.5927 27.43 35.4877V32.1052H30.8125C31.9175 32.1052 32.8125 31.2102 32.8125 30.1052C32.8125 29.0002 31.92 28.1077 30.815 28.1077Z" fill="white"/>
+</svg>

src/components/pages/studentManageNew/component/addstu.vue

@@ -0,0 +1,690 @@
+<template>
+  <div>
+    <el-dialog :visible.sync="addStuVisible" width="700px">
+      <template #title>
+        <div class="title_box">
+          <div class="title_box_item">
+            <span>添加学生</span>
+            <span v-if="boxType == 1" style="font-size: 13px"
+              >(从已有学生中添加)</span
+            >
+          </div>
+        </div>
+      </template>
+      <div class="addStuBox">
+        <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">所属班级:</span>
+            <el-input
+              v-model.trim="classInfo.name"
+              disabled
+              placeholder="请输入所属班级"
+            ></el-input>
+          </div>
+          <div class="addcla_box_item" v-if="boxType == 2">
+            <span class="addcla_box_item_span">所属年级:</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">学生姓名:</span>
+            <el-input
+              v-model.trim="searchStuName"
+              placeholder="请输入学生姓名，多个姓名请用中文逗号(，)分隔"
+              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>
+              <div class="search_stu_box_footer">
+                <div>输入学生共{{ searchStuData.length }}人</div>
+                <div>
+                  <el-button size="small" @click="selectNoneStu"
+                    >取消</el-button
+                  >
+                  <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">已选择学生:</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>
+          </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"
+            >
+              <img src="@/assets/stuImg/uploadfile.svg" alt="upload" />
+              <div style="color: #000">点击或拖拽文件到此处上传</div>
+              <div class="upload-demo-tip">支持格式:xlsx、xls,最多添加70人</div>
+            </el-upload>
+            <div style="margin-top: 10px">
+              上传模板:
+              <span class="download-template" @click="downloadTemplate"
+                >下载模板</span
+              >
+            </div>
+            <div style="margin-top: 10px">
+              注意:请按照模板格式填写学生信息,避免导入失败
+            </div>
+          </div>
+        </div>
+        <!-- 从已有学生中添加 -->
+        <div v-if="addStuType == 3">
+          <allClaAddStu
+            ref="allClaAddStu"
+            @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>
+          <el-button size="small" type="primary" @click="addStu"
+            >确定</el-button
+          >
+        </template>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { v4 as uuidv4 } from "uuid";
+import pinyin from "../../../../../node_modules/js-pinyin/index";
+import allClaAddStu from "./allClaAddStu.vue";
+export default {
+  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: [],
+
+      addStuType: 1,
+      schoolChar: "",
+      userSuffix: "",
+      addStuVisible: false,
+      classInfo: {},
+      stuListTypeList: [],
+      tab1: [
+        {
+          label: "手动输入",
+          value: 1,
+        },
+        {
+          label: "批量上传",
+          value: 2,
+        },
+        {
+          label: "从已有学生中添加",
+          value: 3,
+        },
+      ],
+      tab2: [
+        {
+          label: "手动输入",
+          value: 1,
+        },
+        {
+          label: "批量上传",
+          value: 2,
+        },
+      ],
+      searchStuName: "",
+      searchStuData: [],
+      selectedStuData: [],
+      popoverVisible: false,
+    };
+  },
+  computed: {
+    stuname() {
+      return (item) => {
+        let box = this.selectedStuData.filter((e) => e === item);
+        // console.log(box);
+        return box.length > 1 ? "danger" : "";
+      };
+    },
+    stuname2() {
+      return (item) => {
+        let box = this.searchStuData.filter((e) => e === item);
+        // console.log(box);
+        return box.length > 1 ? "danger" : "";
+      };
+    },
+  },
+  mounted() {
+    this.getUser();
+    this.getSchoolName();
+  },
+  methods: {
+    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]
+        const tHeader = [this.lang.StudentName];
+        const data = [];
+        const colWidths = [35]; // 设置每一列的宽度
+        export_json_to_excel(
+          tHeader,
+          data,
+          this.lang.Uploadstusamples,
+          colWidths
+        );
+      });
+    },
+    // 上传Excel添加学生
+    handleChange(file) {
+      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 = 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];
+              if (
+                _this.org != "" &&
+                _this.org != "null" &&
+                _this.org != undefined &&
+                _this.org &&
+                _this.schoolChar
+              ) {
+                obj.mail =
+                  uuidv4() + "@" + _this.schoolChar + "." + _this.userSuffix;
+              } else {
+                obj.mail = uuidv4() + "@" + _this.userSuffix;
+              }
+              obj.class = _this.classInfo.name;
+              arr.push(obj);
+            }
+          });
+          console.log(arr);
+          if (arr.length > 70) {
+            _this.$message.error(_this.lang.Limitmore);
+            return;
+          }
+          if (!arr.length) {
+            _this.$message.error(
+              "未能提取上传学生信息，请检查数据格式，使用模板文件格式上传"
+            );
+            return;
+          }
+          _this.accUpdate(arr);
+        };
+
+        reader.readAsArrayBuffer(f);
+      };
+
+      if (rABS) {
+        reader.readAsArrayBuffer(f);
+      } else {
+        reader.readAsBinaryString(f);
+      }
+    },
+    // 手动输入添加学生
+    addStu() {
+      this.selectedStuData = this.selectedStuData.filter((item) => item != "");
+      if (this.selectedStuData.length == 0) {
+        this.$message.error("请输入学生");
+        return;
+      }
+      if (this.selectedStuData.length > 70) {
+        this.$message.error("一次最多添加70人");
+        return;
+      }
+
+      if (this.cascaderDataPath.length == 0 || this.classInfo.name == "") {
+        this.$message.error("请选择所属班级");
+        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 box = this.selectedStuData.map((item) => {
+        return {
+          name: item,
+          mail: uuidv4() + mail,
+          class: this.classInfo.name,
+        };
+      });
+      // console.log(box, "box");
+
+      this.accUpdate(box);
+    },
+    accUpdate(box) {
+      console.log(box, "box");
+
+      let z = 2;
+      let newArr = JSON.stringify(box);
+      let params = [
+        {
+          arr: newArr,
+          userpassword: "Coco1234",
+          oid: this.oid,
+        },
+      ];
+      console.log(params, "batchRegistrationMoreCopy");
+      // batchRegistrationMoreCopy
+      this.ajax
+        .post(this.$store.state.api + "batchRegistrationMoreCopy", params)
+        .then((res) => {
+          console.log(res, "res");
+          if (res.data.type == 1) {
+            this.$message.error("有学生手机号码已被注册");
+            z = 1;
+          }
+          if (res.data.type == 2) {
+            this.$message.error("有学生账号已被注册");
+            z = 1;
+          }
+          if (res.data.type == 3) {
+            this.$message.error("有学生学号重复");
+            z = 1;
+          }
+          if (z == 2) {
+            console.log("添加成功");
+            this.$message({
+              message: "添加成功",
+              type: "success",
+            });
+            this.selectedStuData = [];
+            this.$emit("getStudent");
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+
+    // 修改账号
+    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.ajax
+        .get(this.$store.state.api + "selectUser", params)
+        .then((res) => {
+          this.userSuffix = res.data[0][0].accountNumber.split("@")[1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+  },
+};
+</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;
+}
+</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: 570px;
+  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;
+  padding: 10px;
+}
+.search_stu_box_content {
+  display: flex;
+  gap: 10px;
+  flex: 1;
+}
+.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;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.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;
+}
+</style>

src/components/pages/studentManageNew/component/allClaAddStu.vue

@@ -0,0 +1,550 @@
+<template>
+  <div class="dia_box" v-loading="boxLoading">
+    <div class="dia_box_item">
+      <div class="addcla_box_item">
+        <span class="addcla_box_item_span">目标班级:</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">搜索学生:</span>
+        <el-input
+          v-model.trim="searchStuName"
+          placeholder="请输入学生姓名，多个姓名请用中文逗号(，)分隔"
+          slot="reference"
+          @change="searchStu"
+          @focus="popoverVisible = true"
+        ></el-input>
+
+        <div
+          class="search_stu_box"
+          v-if="popoverVisible"
+          v-loading="editTabloading"
+        >
+          <div class="search_stu_box_content">
+            <el-tag
+              v-for="item in searchStuData"
+              :key="item.userid"
+              closable
+              :type="item.acc"
+              @close="handleClose(item)"
+            >
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="item.acc"
+                placement="top-start"
+              >
+                <span>{{ item.username }}</span>
+              </el-tooltip>
+            </el-tag>
+          </div>
+          <div class="search_stu_box_footer">
+            <div>输入学生共{{ searchStuData.length }}人</div>
+            <div>
+              <el-button size="small" @click="selectNoneStu">取消</el-button>
+              <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">已选择:</span>
+        <div class="selected_stu_box">
+          <el-tag
+            v-for="(item, index) in selectedStuData"
+            :key="index"
+            closable
+            :type="item.acc"
+            @close="handleSelectedStuClose(item)"
+          >
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="item.acc"
+              placement="top-start"
+            >
+              <span>{{ item.username }}</span>
+            </el-tooltip>
+          </el-tag>
+        </div>
+      </div>
+      <div style="width: 100%">选择学生(可以多选)</div>
+      <el-table
+        :data="allClaAllStuData"
+        ref="tableData"
+        style="width: 100%"
+        :header-cell-style="{ background: '#E7EAF0' }"
+        height="300px"
+        :show-header="false"
+        class="tableList"
+        v-loading="tableLoading"
+        @selection-change="handleInterestClaSelectionChange"
+      >
+        <el-table-column
+          type="selection"
+          :selectable="checkSelectable"
+          width="55px"
+        >
+        </el-table-column>
+        <el-table-column
+          v-for="(item, index) in allClaColumns"
+          :key="index"
+          :label="item.label"
+        >
+          <template slot-scope="scope">
+            <div v-if="item.label == '账号'">
+              <span>{{ scope.row.acc.split("@")[0] }}</span>
+            </div>
+            <div class="cla_box" v-else-if="item.label == '班级'">
+              <span
+                class="cla_span"
+                v-for="(cla, ind) in scope.row.classname.split('/')"
+                :key="ind + 'cla'"
+              >
+                {{ cla }}
+              </span>
+            </div>
+            <div v-else>
+              <span>{{ scope.row[item.prop] }}</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page_box">
+        <div>
+          第{{ (page - 1) * pageSize + 1 }}条～第{{ page * pageSize }}条,共{{
+            total
+          }}条
+        </div>
+        <el-pagination
+          background
+          @current-change="handlePageChange"
+          :current-page.sync="page"
+          :page-size="pageSize"
+          layout="prev, pager, next"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="small" @click="closeAllClaAddStu">取消</el-button>
+      <el-button size="small" type="primary" @click="confirmAllClaAddStu"
+        >确定</el-button
+      >
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "allClaAddStu",
+  props: {
+    classInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      userid: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+      role: this.$route.query.role,
+      boxLoading: false,
+      tableLoading: false,
+      editTabloading: false,
+      cascaderDataPath: [],
+      cascaderData: [],
+      searchStuName: "",
+      searchStuData: [],
+      selectedStuData: [],
+      popoverVisible: false,
+      allClaAllStuData: [],
+      page: 1,
+      total: 0,
+      pageSize: 10,
+      allClaColumns: [
+        {
+          label: "姓名",
+          prop: "username",
+        },
+        {
+          label: "账号",
+          prop: "acc",
+        },
+        {
+          label: "班级",
+          prop: "classname",
+        },
+      ],
+    };
+  },
+  methods: {
+    // 删除已选择学生
+    handleSelectedStuClose(item) {
+      // 从已选择数据中移除
+      this.selectedStuData = this.selectedStuData.filter(
+        (e) => e.userid !== item.userid
+      );
+      // 如果该学生在当前页的表格中，取消其选中状态
+      this.$nextTick(() => {
+        if (this.$refs.tableData) {
+          const row = this.allClaAllStuData.find(
+            (row) => row.userid === item.userid
+          );
+          if (row) {
+            this.$refs.tableData.toggleRowSelection(row, false);
+          }
+        }
+      });
+    },
+    closeAllClaAddStu() {
+      this.$emit("closeAllClaAddStu");
+    },
+    confirmAllClaAddStu() {
+      if (this.selectedStuData.length === 0) {
+        this.$message({
+          message: "请选择学生",
+          type: "error",
+        });
+        return;
+      }
+      console.log("上传学生数据");
+      const promises2 = this.selectedStuData.map((item) => {
+        let box = [...item.classid.split(","), this.classInfo.id];
+        box = box.filter((item) => item != "");
+        return this.moveClassStudentPromise(item, box.join(","));
+      });
+      Promise.all(promises2)
+        .then(() => {
+          this.$message({
+            message: "移动成功",
+            type: "success",
+          });
+          this.selectedStuData = [];
+          this.$emit("getStudent");
+          if (this.cascaderDataPath.length > 0) {
+            this.getdata(this.cascaderDataPath[1]);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+          this.$message({
+            message: "移动失败",
+            type: "error",
+          });
+        });
+    },
+    moveClassStudentPromise(item, cid) {
+      return new Promise((resolve, reject) => {
+        let params = [
+          {
+            userid: item.userid,
+            username: item.acc,
+            alias: item.username,
+            ph: item.phonenumber,
+            sid: item.studentid,
+            cid: cid,
+          },
+        ];
+        console.log(params);
+
+        this.ajax
+          .post(this.$store.state.api + "updateStudentInfo", params)
+          .then((res) => {
+            resolve(res);
+          })
+          .catch((err) => {
+            console.error(err);
+            reject(err);
+          });
+      });
+    },
+    handleChangecascader(val) {
+      console.log(val);
+      this.getdata(val[1]);
+    },
+    selectNoneStu() {
+      this.popoverVisible = false;
+      this.searchStuName = "";
+      this.searchStuData = [];
+    },
+    searchStu() {
+      if (!this.searchStuName) {
+        this.$message({
+          message: "请输入学生姓名",
+          type: "error",
+        });
+        return;
+      }
+      this.editTabloading = true;
+      // 处理输入：去除多余空格，确保逗号分隔格式正确
+      let inpValue = this.searchStuName
+        .split(",")
+        .map((name) => name.trim())
+        .filter((name) => name)
+        .join(",");
+      let params = {
+        oid: this.oid,
+        inp: inpValue,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectchStu", params)
+        .then((res) => {
+          console.log(res.data[0], "res");
+          let box = res.data[0].filter(
+            (item) => item.classid.indexOf(this.classInfo.id) == -1
+          );
+          this.searchStuData = box;
+          this.editTabloading = false;
+        })
+        .catch((err) => {
+          this.editTabloading = false;
+          console.error(err);
+        });
+    },
+    handleClose(item) {
+      this.searchStuData = this.searchStuData.filter((e) => e !== item);
+    },
+    selectStu() {
+      this.popoverVisible = false;
+      const existingIds = new Set(
+        this.selectedStuData.map((item) => item.userid)
+      );
+      // 过滤掉重复的，只添加新的学生
+      const newStuData = this.searchStuData.filter(
+        (item) => !existingIds.has(item.userid)
+      );
+      this.selectedStuData.push(...newStuData);
+      this.handleSelectedStuData(this.selectedStuData);
+
+      this.searchStuData = [];
+      this.searchStuName = "";
+    },
+    handleInterestClaSelectionChange(val) {
+      const currentPageIds = new Set(
+        (this.allClaAllStuData || []).map((row) => row.userid)
+      );
+      const otherPageSelected = (this.selectedStuData || []).filter(
+        (item) => !currentPageIds.has(item.userid)
+      );
+      this.selectedStuData = [...otherPageSelected, ...val];
+    },
+    checkSelectable(row) {
+      return row.classid.indexOf(this.classInfo.id) == -1; // 状态为disabled的行禁用选择
+    },
+    handlePageChange(val) {
+      this.page = val;
+      this.getdata();
+    },
+    //获取年级列表
+    getGrade() {
+      this.boxLoading = true;
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectGradeNew", params)
+        .then((res) => {
+          this.boxLoading = false;
+
+          let box3 = JSON.parse(JSON.stringify(res.data[0]));
+          let box4 = JSON.parse(JSON.stringify(res.data[1]));
+
+          box3.forEach((e) => {
+            e.children = [];
+            e.children = box4.filter((item) => item.pid == e.id);
+          });
+
+          this.cascaderData = box3;
+        })
+        .catch((err) => {
+          this.boxLoading = false;
+          console.error(err);
+        });
+    },
+    getdata(cid) {
+      this.tableLoading = true;
+      let params = {
+        oid: this.oid,
+        cid: cid,
+        inp: "",
+        page: this.page,
+        num: this.pageSize,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectStudentManage", params)
+        .then((res) => {
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.allClaAllStuData = res.data[0];
+          this.tableLoading = false;
+          this.handleSelectedStuData(this.selectedStuData);
+        })
+        .catch((err) => {
+          this.tableLoading = false;
+          console.error(err);
+        });
+    },
+    // 恢复表格选中状态
+    handleSelectedStuData(val) {
+      this.$nextTick(() => {
+        if (this.$refs.tableData && val.length > 0) {
+          const selectedIds = new Set(val.map((item) => item.userid));
+          this.allClaAllStuData.forEach((row) => {
+            if (selectedIds.has(row.userid)) {
+              this.$refs.tableData.toggleRowSelection(row, true);
+            }
+          });
+        }
+      });
+    },
+  },
+  mounted() {
+    this.getGrade();
+  },
+};
+</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;
+}
+</style>
+<style scoped>
+.dia_box_item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.dia_box_item {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.addcla_box_item {
+  min-height: 35px;
+  /* line-height: 30px; */
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.addcla_box_item >>> .el-cascader {
+  width: 100%;
+}
+.addcla_box_item >>> .el-select {
+  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;
+}
+.tableList >>> .el-table__body-wrapper {
+  height: 350px;
+}
+.cla_span {
+  background: #e8f3ff;
+  color: #0052d9;
+  padding: 5px 10px;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+.search_stu_box {
+  width: 570px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 100%;
+  left: 90px;
+  z-index: 1000;
+  min-height: 160px;
+  background: #fff;
+  border: 1px solid #e8f3ff;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.search_stu_box_content {
+  display: flex;
+  gap: 10px;
+  flex: 1;
+}
+.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;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.selected_stu_box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.page_box {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  align-items: center;
+}
+.cla_box {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>

src/components/pages/studentManageNew/component/dia.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="dia_box">
-    <el-dialog :title="title" :visible.sync="visible" width="500px">
-      <div class="dia_box_item">
-        <span>班级名称</span>
-        <el-input v-model="classname" placeholder="请输入班级名称"></el-input>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" @click="confirm">确定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-export default {
-  name: "dia",
-  data() {
-    return {
-      title: "",
-      visible: false,
-      classname: '',
-    };
-  },
-  methods: {
-    confirm() {
-      this.visible = false;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.dia_box_item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-.dia_box_item span {
-  width: 80px;
-  flex-shrink: 0;
-  text-align: right;
-}
-</style>

src/components/pages/studentManageNew/component/editInterstcla.vue

@@ -20,13 +20,13 @@
           <span class="addcla_box_item_span">搜索学生:</span>
           <el-input
             v-model.trim="searchStuName"
-            placeholder="请输入学生姓名，多个姓名请用逗号分隔"
+            placeholder="请输入学生姓名，多个姓名请用中文逗号(，)分隔"
             slot="reference"
             @change="searchStu"
             @focus="popoverVisible = true"
           ></el-input>
 
-          <div class="search_stu_box" v-if="popoverVisible">
+          <div class="search_stu_box" v-if="popoverVisible" v-loading="editTabloading">
             <div class="search_stu_box_content">
               <el-tag
                 v-for="item in searchStuData"
@@ -57,7 +57,7 @@
           </div>
         </div>
         <div class="addcla_box_item">
-          <span class="addcla_box_item_span">已选择学生:</span>
+          <span class="addcla_box_item_span">已选择:</span>
           <div class="selected_stu_box">
             <el-tag
               v-for="(item, index) in selectedStuData"
@@ -70,7 +70,9 @@
             </el-tag>
           </div>
         </div>
-
+        <div>
+          选择学生(可以多选)
+        </div>
         <el-table
           :data="interestClaAllStuData"
           ref="tableData"
@@ -112,7 +114,7 @@
           </el-table-column>
         </el-table>
         <div class="page_box">
-          <div>第{{ page }}页/共{{ total }}页</div>
+          <div>第{{ (page - 1) * pageSize + 1 }}～{{ page * pageSize }}条,共{{ total }}条</div>
           <el-pagination
             background
             @current-change="handlePageChange"
@@ -141,6 +143,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    cascaderData: {
+      type: Array,
+      default: () => [],
+    },
   },
   watch: {
     interestClaEditInfo: {
@@ -213,7 +219,11 @@ export default {
     // 确定添加搜索学生
     selectStu() {
       this.popoverVisible = false;
-      this.selectedStuData.push(...this.searchStuData);
+      // 获取已存在的 userid 集合，避免重复添加
+      const existingIds = new Set(this.selectedStuData.map(item => item.userid));
+      // 过滤掉重复的，只添加新的学生
+      const newStuData = this.searchStuData.filter(item => !existingIds.has(item.userid));
+      this.selectedStuData.push(...newStuData);
       this.handleSelectedStuData(this.selectedStuData);
 
       this.searchStuData = [];
@@ -313,7 +323,7 @@ export default {
               this.moveInterestClaStudent();
             } else {
               this.cancelAllSelection();
-              this.$emit("getInterestClass");
+              this.$emit("getCascaderData");
             }
           }
         })
@@ -350,7 +360,7 @@ export default {
             type: "success",
           });
           this.cancelAllSelection();
-          this.$emit("getInterestClass");
+          this.$emit("getCascaderData");
         })
         .catch((err) => {
           console.error(err);
@@ -401,13 +411,23 @@ export default {
           this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
           let box1 = res.data[0];
           box1.forEach((e) => {
-            if (e.classname && e.classname != "null") {
-              e.classname =
-                (e.gname !== null && e.gname !== undefined ? e.gname : "") +
-                e.classname;
-            } else {
-              e.classname = "-";
-            }
+            // let list = e.classname.split(",");
+            let kk = [];
+            this.cascaderData.forEach(item => {
+              item.children.forEach(item2 => {  
+                if (e.classid.indexOf(item2.id) != -1) {
+                  kk.push(item.name + item2.name);
+                }
+              });
+            });
+            e.classname = kk.join("/");
+            // if (e.classname && e.classname != "null") {
+            //   e.classname =
+            //     (e.gname !== null && e.gname !== undefined ? e.gname : "") +
+            //     e.classname;
+            // } else {
+            //   e.classname = "-";
+            // }
           });
           this.interestClaAllStuData = res.data[0];
           this.isLoading = false;
@@ -473,7 +493,7 @@ export default {
 .cla_span {
   background: #e8f3ff;
   color: #0052d9;
-  padding: 5px 10px;
+  padding: 0px 10px;
   border-radius: 5px;
   box-sizing: border-box;
 }

src/components/pages/studentManageNew/component/table.vue

@@ -139,7 +139,7 @@
       >
         <el-table-column
           type="selection"
-          v-if="boxType == 0 || (boxType == 1 && interestType == 1)"
+          v-if="boxType == 0 "
           width="55px"
         >
         </el-table-column>
@@ -151,11 +151,11 @@
           <template slot-scope="scope">
             <div
               class="cla_box"
-              v-if="item.label == '班级' && (boxType == 0 || boxType == 1)"
+              v-if="item.label == '班级' && (boxType == 0 || boxType == 2)"
             >
               <span
                 class="cla_span"
-                v-for="(cla, ind) in scope.row.classname"
+                v-for="(cla, ind) in scope.row.classname.split('/')"
                 :key="ind + 'cla'"
               >
                 {{ cla }}
@@ -272,9 +272,11 @@
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="addInterestClaVisible = false">取消</el-button>
-        <el-button type="primary" @click="addInterestCla">确定</el-button>
+        <el-button type="primary" @click="addInterestClaConfirm">确定</el-button>
       </div>
     </el-dialog>
+
+
     <!-- 移动班级学生弹框 -->
     <el-dialog :visible.sync="moveClaVisible" width="500px">
       <template slot="title">
@@ -383,15 +385,18 @@
       </div>
     </el-dialog>
     <!-- 编辑兴趣班 -->
-    <editInterstcla ref="editInterstcla" @getInterestClass="getInterestClass" :interestClaEditInfo="InterestClaEditInfo" />
+    <editInterstcla ref="editInterstcla" @getCascaderData="getCascaderData" :cascaderData="cascaderData" :interestClaEditInfo="InterestClaEditInfo" />
+    <addStu ref="addStu" :boxType="boxType" :cascaderData="cascaderData" @getStudent="getStudent" />
   </div>
 </template>
 
 <script>
 import editInterstcla from "./editInterstcla.vue";
+import addStu from "./addstu.vue";
 export default {
   components: {
     editInterstcla,
+    addStu,
   },
   props: {
     GrapTableData: {
@@ -462,6 +467,7 @@ export default {
         {
           label: "班级",
           prop: "classname",
+          width: "200px",
         },
       ],
       studentColumns: [
@@ -476,6 +482,7 @@ export default {
         {
           label: "班级",
           prop: "classname",
+          width: "200px",
         },
       ],
       // 兴趣班表格列
@@ -509,6 +516,10 @@ export default {
       },
       immediate: true,
     },
+    // boxType(newVal) {
+    //   this.interestType = 0;
+    // },
+
     activeIdL: {
       handler(newVal) {
         this.activeId = newVal;
@@ -520,7 +531,10 @@ export default {
     },
   },
   methods: {
-
+    getCascaderData() {
+      this.$emit("getGrade");
+      this.getInterestClass();
+    },
 
     // 编辑兴趣班
     editInterestCla(row) {
@@ -538,7 +552,7 @@ export default {
       this.activeinfo = row;
     },
     // 新增班级
-    addInterestCla() {
+    addInterestClaConfirm() {
       if (!this.interestName) {
         this.$message({
           message: "请输入兴趣班名称",
@@ -904,6 +918,8 @@ export default {
     },
     handleChangecascader(val) {
       console.log(val);
+      // 更新级联选择器的选中数据路径
+      this.cascaderDataPath = val || [];
     },
 
     findCascaderPath(classid, cascaderData) {
@@ -911,43 +927,19 @@ export default {
         return [];
       }
       console.log("666");
-
-      // 解析逗号分隔的 classid 字符串
+      // 解析逗号分隔的 classid 字符串（班级字符串数组）
       const classIds = classid
         .split(",")
         .map((id) => id.trim())
         .filter((id) => id);
-      const result = [];
-
-      // 递归查找每个 classid 的完整路径
-      const findPath = (targetId, options, path = []) => {
-        for (let option of options) {
-          const currentPath = [...path, option.id];
-          // 如果是二级选项（班级），检查是否匹配
-          if (option.children && option.children.length > 0) {
-            for (let child of option.children) {
-              if (child.id === targetId) {
-                return [...currentPath, child.id];
-              }
-            }
-            // 递归查找子选项
-            const found = findPath(targetId, option.children, currentPath);
-            if (found) {
-              return found;
-            }
-          }
-        }
-        return null;
-      };
-
-      // 为每个 classid 查找路径
-      classIds.forEach((classId) => {
-        const path = findPath(classId, cascaderData);
-        if (path) {
-          result.push(path);
-        }
+      let result = [];
+      let box = cascaderData.flatMap((item) => item.children).filter((item) => classIds.includes(item.id));
+      // console.log(box, "box");
+      result = box.map((item) => {
+        return [item.pid, item.id];
       });
 
+     
       return result;
     },
 
@@ -1271,7 +1263,8 @@ export default {
       this.checkedAllSelection = false;
     },
     addStudent() {
-      console.log("添加学生");
+      this.$refs.addStu.addStuVisible = true;
+      this.$refs.addStu.classInfo = this.activeinfo;
     },
     closeEditStu() {
       this.stuEditvisible = false;
@@ -1309,12 +1302,15 @@ export default {
           this.isLoading = false;
           let box1 = res.data[0];
           box1.forEach((e) => {
-            // e.acc = e.acc.split("@")[0];
-            if (e.classname && e.classname != "null") {
-              e.classname = e.classname.split("/");
-            } else {
-              e.classname = [];
-            }
+            let kk = [];
+            this.cascaderData.forEach(item => {
+              item.children.forEach(item2 => {  
+                if (e.classid.indexOf(item2.id) != -1) {
+                  kk.push(item.name + item2.name);
+                }
+              });
+            });
+            e.classname = kk.join("/");
           });
           this.tableData = res.data[0];
         })
@@ -1364,13 +1360,15 @@ export default {
           this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
           let box1 = res.data[0];
           box1.forEach((e) => {
-            if (e.classname && e.classname != "null") {
-              e.classname =
-                (e.gname !== null && e.gname !== undefined ? e.gname : "") +
-                e.classname;
-            } else {
-              e.classname = "-";
-            }
+            let kk = [];
+            this.cascaderData.forEach(item => {
+              item.children.forEach(item2 => {  
+                if (e.classid.indexOf(item2.id) != -1) {
+                  kk.push(item.name + item2.name);
+                }
+              });
+            });
+            e.classname = kk.join("/");
           });
           this.tableData = res.data[0];
         })

src/components/pages/studentManageNew/index.vue

@@ -149,8 +149,10 @@ export default {
             e.children = box2.filter((item) => item.pid == e.id);
           });
           if (box2.length) {
-            if(this.activeId == '' || (this.activeId && box2.filter(item => item.id == this.activeId).length == 0)){
-              console.log('111');
+            // console.log('this.activeId',this.activeId);
+            // console.log('box2',box2);
+            // console.log('box2.indexOf(this.activeId)',box2.indexOf(this.activeId));
+            if(this.activeId == '' || (this.activeId && this.boxType == 1 && box2.filter(item => item.id == this.activeId).length == 0)){
               
               this.activeId = box2[0].id;
               this.activeinfo = box2[0];