兴趣班

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

@@ -0,0 +1,529 @@
+<template>
+  <div class="edit_interest_cla_box">
+    <!-- 编辑兴趣班弹框 -->
+    <el-dialog :visible.sync="InterestClaEditvisible" width="800px">
+      <template slot="title">
+        <div class="dia_title_box">
+          <span>编辑兴趣班</span>
+        </div>
+      </template>
+
+      <div class="dia_box_item" v-loading="isLoading">
+        <div class="addcla_box_item">
+          <span class="addcla_box_item_span">兴趣班名称:</span>
+          <el-input
+            v-model.trim="clainfo.name"
+            placeholder="请输入兴趣班名称"
+          ></el-input>
+        </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 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)"
+            >
+              <span>{{ item.username }}</span>
+            </el-tag>
+          </div>
+        </div>
+
+        <el-table
+          :data="interestClaAllStuData"
+          ref="tableData"
+          style="width: 100%"
+          :header-cell-style="{ background: '#E7EAF0' }"
+          height="300px"
+          :show-header="false"
+          class="tableList"
+          @selection-change="handleInterestClaSelectionChange"
+        >
+          <el-table-column
+            type="selection"
+            :selectable="checkSelectable"
+            width="55px"
+          >
+          </el-table-column>
+          <el-table-column
+            v-for="(item, index) in studentColumns"
+            :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 }}页/共{{ 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 @click="cancelAllSelection">取消</el-button>
+        <el-button type="primary" @click="confirmInterestClaEdit"
+          >确定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: "editInterstcla",
+  props: {
+    interestClaEditInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  watch: {
+    interestClaEditInfo: {
+      handler(newVal) {
+        this.clainfo = newVal;
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      userid: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+      role: this.$route.query.role,
+      clainfo: {}, // 班级信息
+      studentColumns: [
+        { label: "姓名", prop: "username" },
+        { label: "账号", prop: "acc" },
+        { label: "班级", prop: "classname" },
+      ],
+      editTabloading: false, // 编辑表格加载中
+      searchStuName: "", // 兴趣班编辑搜索学生姓名
+      selectedStuData: [], // 兴趣班编辑已选择学生数据
+      popoverVisible: false, // 兴趣班编辑搜索学生弹框显示
+      searchStuData: [], // 兴趣班编辑搜索学生数据
+      InterestClaEditvisible: false, // 兴趣班编辑信息
+      interestClaAllStuData: [], // 兴趣班编辑所有学生数据
+      isLoading: false, // 是否加载中
+      page: 1,
+      total: 0,
+      pageSize: 10,
+    };
+  },
+  methods: {
+    // 判断行是否可选
+    checkSelectable(row) {
+      return row.classid.indexOf(this.clainfo.id) == -1; // 状态为disabled的行禁用选择
+    },
+    // 删除搜索学生标签
+    handleClose(item) {
+      this.searchStuData = this.searchStuData.filter(
+        (e) => e.userid !== item.userid
+      );
+    },
+    // 删除已选择学生
+    handleSelectedStuClose(item) {
+      // 从已选择数据中移除
+      this.selectedStuData = this.selectedStuData.filter(
+        (e) => e.userid !== item.userid
+      );
+      // 如果该学生在当前页的表格中，取消其选中状态
+      this.$nextTick(() => {
+        if (this.$refs.tableData) {
+          const row = this.interestClaAllStuData.find(
+            (row) => row.userid === item.userid
+          );
+          if (row) {
+            this.$refs.tableData.toggleRowSelection(row, false);
+          }
+        }
+      });
+    },
+    // 关闭搜索学生弹框
+    selectNoneStu() {
+      this.popoverVisible = false;
+      this.searchStuData = [];
+      this.searchStuName = "";
+    },
+    // 确定添加搜索学生
+    selectStu() {
+      this.popoverVisible = false;
+      this.selectedStuData.push(...this.searchStuData);
+      this.handleSelectedStuData(this.selectedStuData);
+
+      this.searchStuData = [];
+      this.searchStuName = "";
+    },
+    // 兴趣班搜索学生
+    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.clainfo.id) == -1);
+          this.searchStuData = box;
+          this.editTabloading = false;
+        })
+        .catch((err) => {
+          this.editTabloading = false;
+          console.error(err);
+        });
+      // this.selectedStuData = console.log(this.searchStuName);
+    },
+    handleInterestClaSelectionChange(val) {
+      // console.log("handleInterestClaSelectionChange", val);
+      // 关键：selection-change 的 val 只包含“当前页”勾选项
+      // 为了支持“跨页保留 + 当前页可取消”，需要：
+      // 1) 先把 selectedStuData 中属于当前页的数据全部移除
+      // 2) 再把 val（当前页实际选中的）合并回去
+      const currentPageIds = new Set(
+        (this.interestClaAllStuData || []).map((row) => row.userid)
+      );
+      const otherPageSelected = (this.selectedStuData || []).filter(
+        (item) => !currentPageIds.has(item.userid)
+      );
+      this.selectedStuData = [...otherPageSelected, ...val];
+    },
+    handlePageChange(val) {
+      // console.log("handlePageChange", val);
+      this.page = val;
+      this.getdata();
+    },
+    cancelAllSelection() {
+      this.$refs.tableData.clearSelection();
+      this.selectedStuData = [];
+      this.searchStuData = [];
+      this.searchStuName = "";
+      this.clainfo = {};
+      this.InterestClaEditvisible = false;
+    },
+    handleSizeChange(val) {
+      console.log("val", val);
+      this.pageSize = val;
+      this.page = 1;
+      this.getdata();
+    },
+    // 修改班级名称确定
+    confirmClaEdit() {
+      let params = {
+        id: this.clainfo.id,
+        n: this.clainfo.name,
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "updateClass", params)
+        .then((res) => {
+          if (res.data[0] && res.data[0][0].classname == 1) {
+            this.$message({
+              message: "班级名称不能相同",
+              type: "error",
+            });
+            if (this.selectedStuData.length > 0) {
+              this.moveInterestClaStudent();
+            } 
+          } else {
+            this.$message({
+              message: "修改成功",
+              type: "success",
+            });
+            if (this.selectedStuData.length > 0) {
+              this.moveInterestClaStudent();
+            } else {
+              this.cancelAllSelection();
+              this.$emit("getInterestClass");
+            }
+          }
+        })
+        .catch((err) => {
+          this.$message({
+            message: this.lang.Modificationfailed,
+            type: "error",
+          });
+          console.error(err);
+        });
+    },
+    // 编辑兴趣班确定
+    confirmInterestClaEdit() {
+      if (this.clainfo.name == "") {
+        this.$message({
+          message: "请输入兴趣班名称",
+          type: "error",
+        });
+        return;
+      }
+      this.confirmClaEdit();
+    },
+    // 移动学生到兴趣班
+    moveInterestClaStudent() {
+      const promises = this.selectedStuData.map((item) => {
+        let box = [...item.classid.split(","), this.clainfo.id];
+        box = box.filter((item) => item != "");
+        return this.moveClassStudentPromise(item, box.join(","));
+      });
+      Promise.all(promises)
+        .then(() => {
+          this.$message({
+            message: "添加成功",
+            type: "success",
+          });
+          this.cancelAllSelection();
+          this.$emit("getInterestClass");
+        })
+        .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);
+          });
+      });
+    },
+    // 学生管理全部学生
+    getdata() {
+      this.isLoading = true;
+      let params = {
+        oid: this.oid,
+        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;
+          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 = "-";
+            }
+          });
+          this.interestClaAllStuData = res.data[0];
+          this.isLoading = false;
+          // 恢复表格选中状态
+          this.handleSelectedStuData(this.selectedStuData);
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    // 恢复表格选中状态
+    handleSelectedStuData(val) {
+      console.log("handleSelectedStuData", val);
+      this.$nextTick(() => {
+        if (this.$refs.tableData && val.length > 0) {
+          const selectedIds = new Set(val.map((item) => item.userid));
+          this.interestClaAllStuData.forEach((row) => {
+            if (selectedIds.has(row.userid)) {
+              this.$refs.tableData.toggleRowSelection(row, true);
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dia_box_item {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.addcla_box_item {
+  min-height: 35px;
+  /* line-height: 30px; */
+  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: 500px;
+}
+.cla_span {
+  background: #e8f3ff;
+  color: #0052d9;
+  padding: 5px 10px;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+.search_stu_box {
+  width: 670px;
+  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;
+  align-items: center;
+}
+.cla_box {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+</style>

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

@@ -23,7 +23,22 @@
           </el-tooltip>
         </div>
         <div class="topbox_area" v-if="boxType == 1">
-          <span>兴趣班列表</span>
+          <span
+            v-if="interestType == 0"
+            >兴趣班列表</span
+          >
+          <template v-if="interestType == 1">
+            <span
+              style="cursor: pointer"
+              @click="
+                interestType = 0;
+                refresh();
+              "
+              >兴趣班列表</span
+            >
+            <i class="el-icon-arrow-right"></i>
+            <span>学生列表</span>
+          </template>
         </div>
         <div class="topbox_area" v-if="boxType == 2">
           <span>学生列表</span>
@@ -51,15 +66,19 @@
         </div>
 
         <!-- 处理学生相关操作 -->
+        <div
+          @click="exportStudent"
+          class="action_btn"
+          v-if="boxType == 0 || (boxType == 1 && interestType == 1)"
+        >
+          <img
+            src="../../../../assets/stuImg/share.svg"
+            alt="导出"
+            class="action_img"
+          />
+          导出
+        </div>
         <template v-if="boxType == 0">
-          <div @click="exportStudent" class="action_btn">
-            <img
-              src="../../../../assets/stuImg/share.svg"
-              alt="导出"
-              class="action_img"
-            />
-            导出
-          </div>
           <template v-if="selectedData.length">
             <div class="action_btn action_btn2" @click="resetPassword">
               <i class="el-icon-lock"></i>
@@ -74,7 +93,7 @@
               style="background: #ff4d4f; color: #fff"
               @click="removeSelStu"
             >
-            <i class="el-icon-remove-outline"></i>
+              <i class="el-icon-remove-outline"></i>
               移除
             </div>
           </template>
@@ -90,8 +109,16 @@
 
         <!-- 处理兴趣班相关操作 -->
         <div
-          @click="editInterestCla(0)"
-          v-if="boxType == 1"
+          @click="addInterestCla()"
+          v-if="boxType == 1 && interestType == 0"
+          class="action_btn"
+        >
+          <i class="el-icon-plus"></i>
+          添加兴趣班
+        </div>
+        <div
+          @click="addStudent"
+          v-if="boxType == 1 && interestType == 1"
           class="action_btn"
         >
           <i class="el-icon-plus"></i>
@@ -110,7 +137,11 @@
         class="tableList"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" v-if="boxType == 0" width="55px">
+        <el-table-column
+          type="selection"
+          v-if="boxType == 0 || (boxType == 1 && interestType == 1)"
+          width="55px"
+        >
         </el-table-column>
         <el-table-column
           v-for="(item, index) in tableColumns"
@@ -118,7 +149,10 @@
           :label="item.label"
         >
           <template slot-scope="scope">
-            <div class="cla_box" v-if="item.label == '班级' && boxType == 0">
+            <div
+              class="cla_box"
+              v-if="item.label == '班级' && (boxType == 0 || boxType == 1)"
+            >
               <span
                 class="cla_span"
                 v-for="(cla, ind) in scope.row.classname"
@@ -127,7 +161,7 @@
                 {{ cla }}
               </span>
             </div>
-            <div v-else-if="item.label == '账号' && boxType == 0">
+            <div v-else-if="item.label == '账号' && (boxType == 0 || boxType == 2)">
               <span>{{ scope.row.acc.split("@")[0] }}</span>
             </div>
             <div v-else>
@@ -147,17 +181,23 @@
                 popper-class="student-manage-action-popover"
               >
                 <div class="action_box">
-                  <template v-if="boxType == 0 || boxType == 2">
+                  <template
+                    v-if="
+                      boxType == 0 ||
+                      boxType == 2 ||
+                      (boxType == 1 && interestType == 1)
+                    "
+                  >
                     <div @click="editStudent(scope.row)">编辑</div>
                     <div @click="deleteStudentL(scope.row, scope.row.state)">
                       删除
                     </div>
                   </template>
-                  <template v-if="boxType == 1">
-                    <div @click="editInterestCla(1,scope.row)">编辑</div>
+                  <template v-if="boxType == 1 && interestType == 0">
+                    <div @click="viewStudent(scope.row)">查看</div>
+                    <div @click="editInterestCla(scope.row)">编辑</div>
                     <div @click="deleteCla(scope.row.id)">删除</div>
                   </template>
-                  
                 </div>
                 <img
                   src="../../../../assets/stuImg/act.svg"
@@ -171,7 +211,10 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="page_box" v-if="boxType == 2 || boxType == 1">
+      <div
+        class="page_box"
+        v-if="boxType == 2 || (boxType == 1 && interestType == 0)"
+      >
         <el-pagination
           background
           @size-change="handleSizeChange"
@@ -184,10 +227,19 @@
         >
         </el-pagination>
       </div>
-      <div class="page_box" v-if="boxType == 0 && selectedData.length">
+      <div
+        class="page_box"
+        v-if="
+          (boxType == 0 || (boxType == 1 && interestType == 1)) &&
+          selectedData.length
+        "
+      >
         <div class="page_box_area">
-          <div style="display: flex; align-items: center; gap: 10px;">
-            <el-checkbox @change="handleCheckedAllSelection" v-model="checkedAllSelection"></el-checkbox>
+          <div style="display: flex; align-items: center; gap: 10px">
+            <el-checkbox
+              @change="handleCheckedAllSelection"
+              v-model="checkedAllSelection"
+            ></el-checkbox>
             <div @click="cancelAllSelection" class="action_btn">取消全选</div>
           </div>
 
@@ -202,19 +254,25 @@
       </div>
     </div>
 
-    <!-- 编辑兴趣班弹框 -->
-    <el-dialog :visible.sync="InterestClaEditvisible" width="700px">
+    <!-- 添加兴趣班弹框 -->
+    <el-dialog :visible.sync="addInterestClaVisible" width="500px">
       <template slot="title">
         <div class="dia_title_box">
-          <span>{{ interIsAdd == 0 ? '添加学生' : '编辑兴趣班' }}</span>
+          <span>添加兴趣班</span>
         </div>
       </template>
       <div class="dia_box_item">
-       
+        <div class="addcla_box_item">
+          <span>兴趣班名称:</span>
+          <el-input
+            v-model="interestName"
+            placeholder="请输入兴趣班名称"
+          ></el-input>
+        </div>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="InterestClaEditvisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmInterestClaEdit">确定</el-button>
+        <el-button @click="addInterestClaVisible = false">取消</el-button>
+        <el-button type="primary" @click="addInterestCla">确定</el-button>
       </div>
     </el-dialog>
     <!-- 移动班级学生弹框 -->
@@ -324,21 +382,27 @@
         <el-button type="primary" @click="confirmEditStu">确定</el-button>
       </div>
     </el-dialog>
+    <!-- 编辑兴趣班 -->
+    <editInterstcla ref="editInterstcla" @getInterestClass="getInterestClass" :interestClaEditInfo="InterestClaEditInfo" />
   </div>
 </template>
 
 <script>
+import editInterstcla from "./editInterstcla.vue";
 export default {
+  components: {
+    editInterstcla,
+  },
   props: {
     GrapTableData: {
       type: Array,
       default: () => [],
     },
-    activeId: {
+    activeIdL: {
       type: String,
       default: "",
     },
-    activeinfo: {
+    activeinfoData: {
       type: Object,
       default: () => {},
     },
@@ -353,6 +417,15 @@ export default {
       org: this.$route.query.org,
       oid: this.$route.query.oid,
       role: this.$route.query.role,
+      activeId: "", // 当前选中的班级id
+
+      interestName: "", // 兴趣班名称
+      interestType: 0, // 0 班级 1 班级内学生
+      InterestClaAddInfo: {}, // 兴趣班添加信息
+      addInterestClaVisible: false, // 兴趣班添加弹框
+     
+
+      InterestClaEditInfo: {}, // 兴趣班编辑信息
 
       cascaderData: [], // 班级级联数据
       cascaderDataPath: [], // 班级级联选中数据路径
@@ -368,10 +441,6 @@ export default {
       moveClaInfo: {}, // 移动班级学生信息
       moveClaCascaderDataPath: [], // 移动班级学生级联选中数据路径
 
-      InterestClaEditInfo: {}, // 兴趣班编辑信息
-      InterestClaEditvisible: false, // 兴趣班编辑信息
-      interIsAdd: 0, // 0 添加 1 编辑
-
       tableData: [], //表格数据
       selectedData: [], //选中数据
 
@@ -434,16 +503,91 @@ export default {
       },
       immediate: true,
     },
-    activeId(newVal) {
-      this.inp = "";
-      this.refresh();
+    activeinfoData:{
+      handler(newVal) {
+        this.activeinfo = newVal;
+      },
+      immediate: true,
+    },
+    activeIdL: {
+      handler(newVal) {
+        this.activeId = newVal;
+        this.inp = "";
+        this.interestType = 0;
+        this.refresh();
+      },
+      immediate: true,
     },
   },
   methods: {
+
+
+    // 编辑兴趣班
+    editInterestCla(row) {
+      this.$refs.editInterstcla.InterestClaEditvisible = true;
+      this.InterestClaEditInfo = JSON.parse(JSON.stringify(row));
+      this.$refs.editInterstcla.getdata();
+    },
+
+    // 查看兴趣班学生
+    viewStudent(row) {
+      this.interestType = 1;
+      this.tableColumns = this.studentColumns;
+      this.activeId = row.id;
+      this.refresh();
+      this.activeinfo = row;
+    },
+    // 新增班级
+    addInterestCla() {
+      if (!this.interestName) {
+        this.$message({
+          message: "请输入兴趣班名称",
+          type: "error",
+        });
+        return;
+      }
+      //新增班级
+      let params = [
+        {
+          claName: this.interestName,
+          gid: "",
+          oid: this.oid,
+          uid: this.userid,
+        },
+      ];
+      console.log(params);
+
+      this.ajax
+        .post(this.$store.state.api + "addClassgra", params)
+        .then((res) => {
+          if (res.data[0] && res.data[0][0].classname == 1) {
+            this.$message({
+              message: this.lang.Cannotsameothercla,
+              type: "error",
+            });
+          } else {
+            this.$message({
+              message: this.lang.AddSuccessful,
+              type: "success",
+            });
+            this.addInterestClaVisible = false;
+            this.interestName = "";
+            this.refresh();
+            this.$emit("getGrade");
+          }
+        })
+        .catch((err) => {
+          this.$message({
+            message: this.lang.Additionfailed,
+            type: "error",
+          });
+          console.error(err);
+        });
+    },
     handleCheckedAllSelection(val) {
       if (val) {
         // 全选所有表格数据
-        this.tableData.forEach(row => {
+        this.tableData.forEach((row) => {
           this.$refs.tableData.toggleRowSelection(row, true);
         });
       } else {
@@ -451,29 +595,29 @@ export default {
         this.$refs.tableData.clearSelection();
       }
     },
-    editInterestCla(type,row) {
-      this.InterestClaEditvisible = true;
-      this.InterestClaEditInfo = row;
-      this.interIsAdd = type;
-    },
-    // 编辑兴趣班确定
-    confirmInterestClaEdit() {
-      this.InterestClaEditvisible = false;
-      this.InterestClaEditInfo = {};
+    // 添加兴趣班
+    addInterestCla(row) {
+      this.addInterestClaVisible = true;
+      this.InterestClaAddInfo = row;
     },
+
     // 删除班级
     deleteCla(cid) {
       let params = {
         id: cid,
       };
       if (this.time()) {
-        this.$confirm("此操作将删除该班级，及班级所有已产生的授课数据， 是否继续？", "", {
-          cancelButtonText: "取消",
-          confirmButtonText: "确定",
-          showClose: false,
-          type: "warning",
-          customClass: "student-manage-delete-msgbox",
-        })
+        this.$confirm(
+          "此操作将删除该班级，及班级所有已产生的授课数据， 是否继续？",
+          "",
+          {
+            cancelButtonText: "取消",
+            confirmButtonText: "确定",
+            showClose: false,
+            type: "warning",
+            customClass: "student-manage-delete-msgbox",
+          }
+        )
           .then(() => {
             this.ajax
               .get(this.$store.state.api + "deleteClass", params)
@@ -511,7 +655,7 @@ export default {
         });
         return;
       }
-      this.$confirm("确定要移动该班级吗？", "提示", {
+      this.$confirm("确定要移动到该班级吗？", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
@@ -535,6 +679,8 @@ export default {
                   ...item.classid.split(","),
                   this.moveClaCascaderDataPath[1],
                 ];
+                box = box.filter((item) => item != '');
+                console.log("box", box);
                 return this.moveClassStudentPromise(item, box.join(","));
               });
               Promise.all(promises2)
@@ -893,10 +1039,16 @@ export default {
       this.tableData = [];
       if (this.boxType == 0) {
         // 清除选中数据
-        this.cancelAllSelection();
+        if (this.selectedData.length > 0) {
+          this.cancelAllSelection();
+        }
         this.getStudent();
       } else if (this.boxType == 1) {
-        this.getInterestClass();
+        if (this.interestType == 0) {
+          this.getInterestClass();
+        } else if (this.interestType == 1) {
+          this.getStudent();
+        }
       } else if (this.boxType == 2) {
         this.getAllStudent();
       }
@@ -1066,6 +1218,13 @@ export default {
     },
     // 导出学生
     exportStudent() {
+      if (this.selectedData.length == 0) {
+        this.$message({
+          message: "请先选中要导出的学生",
+          type: "error",
+        });
+        return;
+      }
       var res = this.selectedData;
       //如果value的json字段的key值和想要的headers值不一致时，可做如下更改
       //将和下面的Object.fromEntries结合，将json字段的key值改变为要求的excel的header值
@@ -1102,7 +1261,8 @@ export default {
     handleSelectionChange(val) {
       this.selectedData = val;
       // 同步全选复选框状态：当选中数量等于表格数据数量时，全选复选框应该被选中
-      this.checkedAllSelection = val.length > 0 && val.length === this.tableData.length;
+      this.checkedAllSelection =
+        val.length > 0 && val.length === this.tableData.length;
     },
 
     cancelAllSelection() {
@@ -1470,4 +1630,13 @@ export default {
 .addcla_box_item >>> .el-cascader-menu:first-child .el-cascader-menu__item {
   padding-left: 20px !important;
 }
+.selected_stu_box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.selected_stu_box_item {
+  background: #e8f3ff;
+  padding: 5px 10px;
+}
 </style>

src/components/pages/studentManageNew/index.vue

@@ -58,10 +58,10 @@
     </div>
     <div class="leftbox">
       <tableL
-        :activeId="activeId"
+        :activeIdL="activeId"
         :boxType="boxType"
         :GrapTableData="cascaderData"
-        :activeinfo="activeinfo"
+        :activeinfoData="activeinfo"
         @getGrade="getGrade"
       ></tableL>
     </div>
@@ -149,8 +149,7 @@ export default {
             e.children = box2.filter((item) => item.pid == e.id);
           });
           if (box2.length) {
-            let box = ['1','2'];
-            if(this.activeId == '' || (this.activeId && box.indexOf(this.activeId) == -1)){
+            if(this.activeId == '' || (this.activeId && box2.filter(item => item.id == this.activeId).length == 0)){
               console.log('111');
               
               this.activeId = box2[0].id;