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

<template>
  <div class="tabbox">
    <div class="topbox">
      <template>
        <div class="topbox_area" v-if="boxType == 0">
          <span v-if="!ClaEditvisible">{{ activeinfo.name }}</span>
          <input v-if="ClaEditvisible" ref="claEditInput" class="claInp" type="text" 
            placeholder="请输入班级名称..."
            v-model.trim="ClaEditInfo.name" 
            @blur="confirmClaEdit"
            @keyup.enter="confirmClaEdit">
          <span>学生列表</span>
          <el-tooltip content="编辑" placement="top">
            <img
              :src="editBtnHovered || ClaEditvisible ? eidl : eidh"
              alt=""
              @click="editCla(activeinfo)"
              @mouseover="editBtnHovered = true"
              @mouseout="editBtnHovered = false"
              class="xk_img"
              :class="ClaEditvisible || editBtnHovered ? 'bacl' : ''"
            />
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <img
              :src="deleteBtnHovered ? delh : dell"
              alt=""
              @click="deleteCla(activeId,1)"
              @mouseover="deleteBtnHovered = true"
              @mouseout="deleteBtnHovered = false"
              class="xk_img xk_img2" 
            />
          </el-tooltip>
        </div>
        <div class="topbox_area" v-if="boxType == 1">
          <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>
          <span>{{ total }}人</span>
        </div>
      </template>

      <!-- 右边区域 -->
      <div class="topbox_area">
        <el-input
          :placeholder="boxType == 1 ? '搜索兴趣班...' : '搜索学生...'"
          v-model="inp"
          @keyup.enter.native="refresh"
          v-if="boxType == 0 || boxType == 2 || (boxType == 1 && interestType == 1)"
        >
          <i slot="prefix" @click="refresh" class="el-input__icon el-icon-search"></i>
        </el-input>

        <template v-if="(boxType == 1 && interestType == 0) || boxType == 2">
          <el-popover
            placement="bottom"
            trigger="hover"
            popper-class="topbox_area_popover"
          >
              <div class="topbox_areaCon">
                  <div :class="insort == 1 ? 'topbox_areaConBck' : ''">
                    按最早创建排序
                  </div>
                  <div :class="insort == 0 ? 'topbox_areaConBck' : ''">
                    按最晚创建排序
                  </div>
              </div>
             
              <img slot="reference" class="sortImg" v-if="insort == 0" @click="intSort('1')" src="../../../../assets/stuImg/jiang.svg" alt="">
              <img slot="reference" class="sortImg" v-if="insort == 1" @click="intSort('0')" src="../../../../assets/stuImg/sheng.svg" alt="">
          </el-popover>
          

        </template>


     

        <div @click="refresh" v-if="!selectedData.length" class="action_btn">
          <img
            src="../../../../assets/stuImg/cz.svg"
            alt="刷新"
            class="action_img"
          />
          刷新
        </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">
          <template v-if="selectedData.length">
            <div class="action_btn action_btn2" @click="resetPassword">
              <i class="el-icon-lock"></i>
              重置密码
            </div>
            <div class="action_btn action_btn2" @click="moveSelStu">
              <i class="el-icon-rank"></i>
              移动
            </div>
            <div
              class="action_btn"
              style="background: #ff4d4f; color: #fff"
              @click="removeSelStu"
            >
              <i class="el-icon-remove-outline"></i>
              移除
            </div>
          </template>
        </template>
        <div
          @click="addStudent"
          v-if="!selectedData.length && (boxType == 0 || boxType == 2)"
          class="action_btn"
        >
          <i class="el-icon-plus"></i>
          添加学生
        </div>

        <!-- 处理兴趣班相关操作 -->
        <div
          @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 && activeinfo.createuserid == userid"
          class="action_btn"
        >
          <i class="el-icon-plus"></i>
          添加学生
        </div>
      </div>
    </div>
    <div class="tabList" v-loading="isLoading">
      <el-table
        :data="tableData"
        ref="tableData"
        :header-cell-style="{ background: '#E7EAF0' }"
        :key="boxType"
        height="100%"
        class="tableList"
        @selection-change="handleSelectionChange"
        @row-click="viewStudent"

      >
        <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"
          :key="index"
          :width="item.wid"
          show-overflow-tooltip
          :label="item.label"
        >
          <template slot-scope="scope">
            <div
              class="cla_box"
              v-if="item.label == '班级'"
            >
              <span
                class="cla_span"
                v-for="(cla, ind) in stuClalist(scope.row.classname,1)"
                :key="ind + 'cla123'"
              >
                {{ cla }}
              </span>
              <span
                 v-if="stuClalist(scope.row.classname,2).length > 0"
              >
              <el-popover
                placement="bottom"
                min-width="80"
                trigger="hover"
                :visible-arrow="false"
              >
                <div class="action_box" style="display: flex;flex-direction: column;gap: 5px;justify-content: center;align-items: center;">
                    <div v-for="(cla, ind) in stuClalist(scope.row.classname,2)" :key="ind + 'cla'">
                      {{ cla }}
                    </div>
                </div>
                <div  slot="reference" style="display: flex;align-items: center;">
                  <img
                    src="../../../../assets/stuImg/act.svg"
                    style="width: 20px; cursor: pointer;"
                  />
                </div>
                
              </el-popover>
               
              </span>
            </div>
            <div v-else-if="item.label == '账号'">
              <span>{{ scope.row.acc.split("@")[0] }}</span>
            </div>
            <div v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </div>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column width="200" align="right" label="">
          <template slot-scope="scope">
            <div>
              <el-popover
                placement="bottom-end"
                width="60"
                trigger="hover"
                popper-class="student-manage-action-popover"
              >
                <div class="action_box">
                  <template
                    v-if="
                      boxType == 0 ||
                      boxType == 2 ||
                      (boxType == 1 && interestType == 1)
                    "
                  >
                    <div @click="editStudent(scope.row)">编辑</div>
                    <div v-if="boxType == 1 && interestType == 1" @click="deleteClassStudent(scope.row.userid)">
                      移除
                    </div>
                    <div v-else @click="deleteStudentL(scope.row)">
                      删除
                    </div>
                  </template>
                  <template v-if="boxType == 1 && interestType == 0 && scope.row.createuserid == userid">
                    <!-- <div @click="viewStudent(scope.row)">查看</div> -->
                    <div @click="editInterestCla(scope.row)">编辑</div>
                    <div @click="deleteCla(scope.row.id,0,scope.row.createuserid)">删除</div>
                  </template>
                </div>
                <img
                  src="../../../../assets/stuImg/act.svg"
                  slot="reference"
                  alt="编辑"
                  class="action_img"
                  style="cursor: pointer"
                />
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="page_box"
        v-if="boxType == 2 || (boxType == 1 && interestType == 0)"
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page.sync="page"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
      <div
        class="page_box"
        v-if="
          (boxType == 0 || (boxType == 1 && interestType == 1)) &&
          selectedData.length
        "
      >
        <div class="page_box_area" v-if="boxType == 0">
          <div style="display: flex; align-items: center; gap: 10px">
            <!-- <el-checkbox
              @change="handleCheckedAllSelection"
              v-model="checkedAllSelection"
            ></el-checkbox> -->
            
            <div class="action_btn" @click="cancelAllSelection" v-if="selectedData.length != 0 && selectedData.length == tableData.length">
              取消全选
            </div>
            <div class="action_btn" @click="allSel" v-else>全选</div>
          </div>

          <div
            @click="deleteSelectionStudent"
            class="action_btn"
            style="background: #ff4d4f; color: #fff"
          >
            删除
          </div>
        </div>
      </div>
    </div>

    <!-- 添加兴趣班弹框 -->
    <el-dialog :visible.sync="addInterestClaVisible" height="400px" width="442px">
      <template slot="title">
        <div class="dia_title_box">
          <span>添加兴趣班</span>
        </div>
      </template>
      <div class="dia_box_item2">
        <div class="addcla_box_item">
          <span>兴趣班名称:</span>
          <el-input
            v-model="interestName"
            placeholder="请输入兴趣班名称"
          ></el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;gap: 10px;">
        <div @click="addInterestClaVisible = false">取消</div>
        <div @click="addInterestClaConfirm" style="background: #3681FC; color: #E6FFFFFF;">确认</div>
      </div>
    </el-dialog>


    <!-- 移动班级学生弹框 -->
    <el-dialog :visible.sync="moveClaVisible" width="440px">
      <template slot="title">
        <div class="dia_title_box">
          <span>移动学生</span>
        </div>
      </template>
      <div style="width: 100%;height: 300px;padding-top: 20px;box-sizing: border-box;">
        <el-cascader
          :options="cascaderData"
          v-model="moveClaCascaderDataPath"
          @change="handlemoveChangecascader"
          popper-class="myCascader2"
          style="width: 100%;"
          :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 slot="footer" class="dialog-footer">
        <!-- <el-button @click="moveClaVisible = false">取消</el-button> -->
        <div class="kbtn" @click="moveClaVisible = false">取消</div>
        <div class="kbtn" @click="confirmMoveClaEdit" style="background: #3681FC; color: #E3EDFF;">确定</div>
        <!-- <el-button type="primary" @click="confirmMoveClaEdit">确定</el-button> -->
      </div>
    </el-dialog>
    <!-- 编辑信息 -->
    <el-dialog :visible.sync="stuEditvisible" width="500px">
      <template slot="title">
        <div class="dia_title_box">
          <span>编辑信息</span>
          <span @click="inPassword">重置密码</span>
        </div>
      </template>
      <div class="dia_box_item">
        <div class="addcla_box_item">
          <span>姓名:</span>
          <el-input
            v-model="stuEditInfo.username"
            placeholder="请输入姓名"
          ></el-input>
        </div>
        <div class="addcla_box_item">
          <span>账号:</span>
          <div>{{ stuEditInfo.acc }}</div>
        </div>
        <div 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',
              multiple: true,
            }"
          >
            <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>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="closeEditStu">取消</el-button> -->
        <div class="kbtn" @click="closeEditStu">取消</div>
        <div class="kbtn" @click="confirmEditStu" style="background: #3681FC; color: #E3EDFF;">确认</div>
        <!-- <el-button type="primary" @click="confirmEditStu">确定</el-button> -->
      </div>
    </el-dialog>
    <!-- 编辑兴趣班 -->
    <editInterstcla ref="editInterstcla" @getCascaderData="getCascaderData" :cascaderData="cascaderData" :interestClaEditInfo="InterestClaEditInfo" />
    
    <!-- 添加学生 -->
    <addStu ref="addStu" :boxType="boxType" :cascaderData="cascaderData" @getStudent="getStudent" @getCascaderData="getCascaderData" />
    
    <!-- 重置密码弹框 -->
    <!-- <msgbox ref="msgboxref" infomMsg="infomMsg"></msgbox> -->

    <div class="pop-upBox">
      <el-dialog
        :visible.sync="popBoxdia"
        width="480px"
        :show-close="false"
      >
        <div class="msgCon">
            <img style="width: 20px;" v-if="deltypy == 7 || deltypy == 8" src="../../../../assets/stuImg/duil.svg" alt="">
            <img style="width: 20px;" v-else src="../../../../assets/stuImg/tishi.svg" alt="">

            <div class="msgContxt">
              <div v-if="deltypy == 1">确认删除“{{delStuinfo.username}}”学生？ </div>
              <div v-if="deltypy == 2">确认删除这 {{selectedData.length}} 位学生？ </div>
              <div v-if="deltypy == 3">此操作将删除该班级，及班级所有已产生的授课数据， 是否继续？ </div>
              <div v-if="deltypy == 4">确定从当前班级移除{{ selectedData.length }}名学生吗？ </div>
              <div v-if="deltypy == 5">确定要重置 {{selectedData.length}} 个学生的密码吗？ </div>
              <div v-if="deltypy == 6">确定要重置 {{this.stuEditInfo.username}} 的密码吗？ </div>
              <div v-if="deltypy == 9">确定要移动到该班级吗？ </div>
              <div v-if="deltypy == 10">确定要修改 {{this.stuEditInfo.username}} 的学生信息吗？ </div>
            </div>
            <div class="msgContxt" v-if="deltypy == 7 || deltypy == 8">
              <div v-if="deltypy == 7">对{{selectedData.length}}个账户重置密码成功！ </div>
              <div v-if="deltypy == 8">重置密码成功！ </div>
              <div>
                <span>默认密码为：Coco1234</span>
                <el-tooltip class="item" effect="dark" content="复制" placement="top">
                  <img @click="copyText"
                    class="copyMg"
                    :src="deleteBtnHovered ? copy1 : copy"
                    @mouseover="deleteBtnHovered = true"
                    @mouseout="deleteBtnHovered = false"
                   alt="">
                </el-tooltip>
              </div>

            </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="closeDia"
          v-if="deltypy != 7 && deltypy != 8"
            >取 消</el-button
          > -->
          <div @click="closeDia" v-if="deltypy != 7 && deltypy != 8">取消</div>
          <div @click="confirmDelStu" style="background: #3681FC; color: #E3EDFF;">确认</div>
          <!-- <el-button type="primary" @click="confirmDelStu"
            >确 认</el-button
          > -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import editInterstcla from "./editInterstcla.vue";
import addStu from "./addstu.vue";
// import msgbox from "./msgbox.vue";
export default {
  components: {
    editInterstcla,
    addStu,
  },
  props: {
    GrapTableData: {
      type: Array,
      default: () => [],
    },
    activeIdL: {
      type: String,
      default: "",
    },
    activeinfoData: {
      type: Object,
      default: () => {},
    },
    boxType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      userid: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      role: this.$route.query.role,
      activeId: "", // 当前选中的班级id
      activeinfo: {}, // 当前选中的班级信息
      eidl:require('../../../../assets/stuImg/eidl.svg'),
      eidh:require('../../../../assets/stuImg/eidh.svg'),

      dell:require('../../../../assets/stuImg/dell.svg'),
      delh:require('../../../../assets/stuImg/delh.svg'),

      copy1:require('../../../../assets/stuImg/copymsg1.svg'),
      copy:require('../../../../assets/stuImg/copymsg.svg'),

      popBoxdia:false,
      insort:0,
      EditStubox:'',

      delClaid:'',
      delClaidtype:'',

      infomMsg:{}, //消息提示

      delStuinfo:{},
      deltypy: 1, //1单个删除学生 2批量删除学生 3删除班级

      interestName: "", // 兴趣班名称
      interestType: 0, // 0 班级 1 班级内学生
      InterestClaAddInfo: {}, // 兴趣班添加信息
      addInterestClaVisible: false, // 兴趣班添加弹框
     

      InterestClaEditInfo: {}, // 兴趣班编辑信息

      cascaderData: [], // 班级级联数据
      cascaderDataPath: [], // 班级级联选中数据路径

      checkedAllSelection: false, // 全选

      stuEditvisible: false,
      stuEditInfo: {}, // 学生编辑信息
      ClaEditvisible: false, // 班级编辑信息
      ClaEditInfo: {}, // 班级编辑信息
      editBtnHovered: false, // 编辑按钮hover状态
      deleteBtnHovered: false, // 删除按钮hover状态

      moveClaVisible: false, // 移动班级学生弹框
      moveClaInfo: {}, // 移动班级学生信息
      moveClaCascaderDataPath: [], // 移动班级学生级联选中数据路径

      tableData: [], //表格数据
      selectedData: [], //选中数据

      page: 1,
      total: 0,
      pageSize: 10,
      isLoading: false,
      inp: "",

      tableColumns: [
        {
          label: "学生姓名",
          prop: "username",
        },
        {
          label: "账号",
          prop: "acc",
        },
        {
          label: "班级",
          prop: "classname",
          wid: "300",
        },
      ],
      studentColumns: [
        {
          label: "学生姓名",
          prop: "username",
        },
        {
          label: "账号",
          prop: "acc",
        },
        {
          label: "班级",
          prop: "classname",
          wid:"360"
        },
      ],
      // 兴趣班表格列
      tableInterestClaColumns: [
        {
          label: "班级信息",
          prop: "name",
        },
        {
          label: "学生人数",
          prop: "pnum",
        },
        {
          label: "时间",
          prop: "create_at",
        },
      ],
    };
  },
  watch: {
    GrapTableData: {
      handler(newVal) {
        this.cascaderData = newVal;
      },
      immediate: true,
    },
    activeinfoData:{
      handler(newVal) {
        this.activeinfo = newVal;
      },
      immediate: true,
    },
    activeIdL: {
      handler(newVal) {
        this.activeId = newVal;
        this.inp = "";
        this.interestType = 0;
        this.refresh();
      },
      immediate: true,
    },
  },
  computed: {
    stuClalist() {
      return function(data,val){
        // console.log(data, "data");
        if(data.length == 0){
          return [];
        }
        let list = JSON.parse(JSON.stringify(data)).split('/');
        // console.log(list, "list");
        if(list.length > 0 && val == 1){
          // console.log(list.slice(0, 2), "list.slice(0, 2)");
          return list.slice(0, 2);
        }else if(list.length > 0 && val == 2){
          // console.log(list.slice(2), "list.slice(2)");
          return list.slice(2);
        }
        return [];
      };
    },
  },
  methods: {
    copyText(){
      const text = 'Coco1234';
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(() => {
          this.$message.success('已复制到剪贴板');
        }).catch(() => {
          this.fallbackCopy(text);
        });
      } else {
        this.fallbackCopy(text);
      }
    },
    fallbackCopy(text) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.style.position = 'fixed';
      textarea.style.opacity = '0';
      document.body.appendChild(textarea);
      textarea.select();
      try {
        document.execCommand('copy');
        this.$message.success('已复制到剪贴板');
      } catch (err) {
        this.$message.error('复制失败');
      }
      document.body.removeChild(textarea);
    },
// 年级方法区域
    // 打开删除班级弹框
    deleteCla(cid,val,uid) {
      if (val == 0 && uid != this.userid) return this.$message.error('仅限创建者删除')

      this.delClaidtype = val;
      this.delClaid = cid
      this.popBoxdia =true
      this.deltypy = 3;
    },
    confirmdeleteCla(){
      let params = {
        id: this.delClaid,
      };
      if (this.time()) {
        this.ajax
          .get(this.$store.state.api + "deleteClass", params)
          .then((res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.popBoxdia =false;

            this.$emit("getGrade", this.delClaidtype);
            this.refresh()
            this.delClaid = '';
            this.deltypy = 0;
          })
          .catch((err) => {
            this.$message.error("删除失败");
            console.error(err);
          });
      }
    },
    // 修改班级名称弹框
    editCla(row) {
      this.ClaEditvisible = !this.ClaEditvisible;
      this.ClaEditInfo = JSON.parse(JSON.stringify(row));
      this.ClaEditInfo.name = '';
      if (this.ClaEditvisible) {
        this.$nextTick(() => {
          this.$refs.claEditInput.focus();
        });
      }
    },
    // 全选
    allSel(){
        this.tableData.forEach((row) => {
          this.$refs.tableData.toggleRowSelection(row, true);
        });
    },
    // 导出学生
    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值
      var array = [];
      for (var i = 0; i < res.length; i++) {
        var _json = {};
        _json["学生信息"] = res[i].username;
        _json["账号"] = res[i].acc;
        _json["班级"] = res[i].classname;
        array.push(_json);
      }

      var XLSX = require("xlsx");
      const workbook = XLSX.utils.book_new(); //创建一个新的工作簿对象
      let ws = XLSX.utils.json_to_sheet(array); //将json对象数组转化成工作表
      ws["!cols"] = [
        //设置每一列的宽度
        { wch: 20 },
        { wch: 20 },
        { wch: 20 },
      ];
      XLSX.utils.book_append_sheet(workbook, ws, "sheet1"); //把sheet添加到workbook里，第三个参数是sheet名
      XLSX.writeFile(workbook, this.activeinfo.name + "学生列表.xlsx");
      // const wopts = { bookType: "xlsx", bookSST: false, type: "array" };//写入的样式bookType:输出的文件类型，type：输出的数据类型，bookSST: 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
      // const wbout = XLSX.write(workbook, wopts);// 浏览器端和node共有的API,实际上node可以直接使用xlsx.writeFile来写入文件,但是浏览器没有该API
      // FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), `${title} demo.xlsx`);//保存文件
      this.$message({
        message: "导出成功",
        type: "success",
      });
      this.cancelAllSelection();
    },
    // 移动班级学生
    moveSelStu() {
      console.log("this.selectedData", this.selectedData);
      // 先移除班级
      let box = this.cascaderData
        .flatMap((item) => item.children)
        .find((item) => item.id == this.activeId);
      this.moveClaCascaderDataPath = [box.pid, this.activeId];
      console.log(this.moveClaCascaderDataPath, "this.moveClaCascaderDataPath");
      this.moveClaVisible = true;
    },
    // 确定移动
    confirmMoveClaEdit() {
      if (this.moveClaCascaderDataPath.length === 0) {
        this.$message({
          message: "请选择班级",
          type: "error",
        });
        return;
      }
      this.deltypy = 9;
      this.popBoxdia = true;
    },
    confirmMoveClaEditStu(){
      // this.$confirm("确定要移动到该班级吗？", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
          // 先移出班级
          const promises = this.selectedData.map((item) => {
            item.classid = item.classid
              .split(",")
              .filter((item) => item != this.activeId)
              .join(",");
            return this.deleteClassStudent(item.userid);
          });
          Promise.all(promises)
            .then(() => {
              // 再移入班级
              const promises2 = this.selectedData.map((item) => {
                let box = [
                  ...item.classid.split(","),
                  this.moveClaCascaderDataPath[1],
                ];
                box = box.filter((item) => item != '');
                console.log("box", box);
                return this.moveClassStudentPromise(item, box.join(","));
              });
              Promise.all(promises2)
                .then(() => {
                  this.$message({
                    message: "移动成功",
                    type: "success",
                  });
                  this.moveClaVisible = false;
                  this.moveClaCascaderDataPath = [];
                  this.popBoxdia = false;
                  this.$emit("getGrade");
                  this.refresh();
                })
                .catch((err) => {
                  console.error(err);
                  this.$message({
                    message: "移动失败",
                    type: "error",
                  });
                });
            })
            .catch(() => {});
        // })
        // .catch(() => {});
    },
    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);
          });
      });
    },
    // 批量移除班级学生
    removeSelStu() {
      this.deltypy = 4;
      this.popBoxdia = true;
    },
    confirmRemove(){
          const promises = this.selectedData.map((item) => {
            return this.deleteClassStudent(item.userid);
          });
          Promise.all(promises)
            .then(() => {
              this.$message({
                message: "移除成功",
                type: "success",
              });
              
              this.popBoxdia = false;
              this.refresh();
              this.$emit("getGrade");
              
            })
            .catch((err) => {
              console.error(err);
              this.$message({
                message: "移除失败",
                type: "error",
              });
              this.refresh();
            });
    },
    // 移除班级学生Promise
    deleteClassStudent(id) {
      return new Promise((resolve, reject) => {
        let params = [{ uid: id, cid: this.activeId }];
        this.ajax
          .post(this.$store.state.api + "deleteClassStudent", params)
          .then((res) => {
            console.log("res", res);
            resolve(res);
          })
          .catch((err) => {
            console.error(err);
            resolve(err);
          });
      });
    },

    // 批量重置密码
    resetPassword() {
      this.deltypy = 5;
      this.popBoxdia = true;
      // return this.msgbox();
      // this.$confirm(
      //   `确定要重置 ${this.selectedData.length} 个学生的密码吗？`,
      //   "提示",
      //   {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }
      // )
      //   .then(() => {
        
      //   })
      //   .catch(() => {});
    },
    confirmrestpsd(){
          const promises = this.selectedData.map((item) => {
            return this.doResetPassword(item.userid);
          });
          Promise.all(promises)
            .then(() => {
              this.popBoxdia = false;
              this.deltypy = 7;
              this.popBoxdia = true;
            })
            .catch((err) => {
              console.error(err);
              this.$message({
                message: "部分密码重置失败，请重试",
                type: "error",
              });
            });
    },
    // 执行重置密码操作（返回Promise）
    doResetPassword(id) {
      return new Promise((resolve, reject) => {
        let params = [
          {
            uid: id,
            pa: "Coco1234",
          },
        ];
        this.ajax
          .post(this.$store.state.api + "iniPassword", params)
          .then((res) => {
            resolve(res);
          })
          .catch((err) => {
            console.error(err);
            reject(err);
          });
      });
    },
    inPassword() {
      this.deltypy = 6;
      this.popBoxdia = true;

      // this.$confirm(
      //   `确定要重置 ${this.stuEditInfo.username} 的密码吗？`,
      //   "提示",
      //   {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }
      // )
      //   .then(() => {
         
      //   })
      //   .catch(() => {});
    },
    confirminPassword(){
        let params = [
            {
              uid: this.stuEditInfo.userid,
              pa: "Coco1234",
            },
          ];
          this.ajax
            .post(this.$store.state.api + "iniPassword", params)
            .then((res) => {
              // this.$message({
              //   message: "密码重置成功",
              //   type: "success",
              // });
              this.popBoxdia = false;
              this.deltypy = 8
              this.popBoxdia = true;

              // this.$refs.msgboxref.dialogVisible = true;

            })
            .catch((err) => {
              this.popBoxdia = false;
              this.$message({
                message: "密码重置失败",
                type: "error",
              });
            });
    },
    // 打开批量删除弹框
    deleteSelectionStudent() {
      this.deltypy = 2
      this.popBoxdia = true
    },
    // 打开单删删除学生弹框
    deleteStudentL(row) {
      this.deltypy = 1;
      this.delStuinfo = row;
      this.popBoxdia = true;
    },
    // 判断使用单删onedelstu ,twodelstu批量删除
    confirmDelStu(){
      if (this.deltypy == 1) {
          this.onedelstu()
      }else if (this.deltypy == 2) {
        this.twodelstu()
      }else if (this.deltypy == 3) {
        this.confirmdeleteCla()
      }else if(this.deltypy == 4){
        this.confirmRemove()
      }else if(this.deltypy == 5){
        this.confirmrestpsd()
      }else if(this.deltypy == 6){
        this.confirminPassword()
      }else if(this.deltypy == 7){
        this.cancelAllSelection();
        this.popBoxdia = false;
      }else if(this.deltypy == 8){
        this.popBoxdia = false;
      }else if(this.deltypy == 9){
        this.confirmMoveClaEditStu();
      }else if(this.deltypy == 10){
        this.update_Student(this.EditStubox);
      }
    },
    onedelstu(){
      let params = [{ uid: this.delStuinfo.userid, state: 0 }];
          this.ajax
            .post(this.$store.state.api + "deleteStudent", params)
            .then(() => {
              // this.getAllStudent();
              this.delStuinfo = {};
              this.popBoxdia = false;
              this.$emit("getGrade");

              this.refresh()
              this.$message({
                message: "删除成功",
                type: "success",
              });
            })
            .catch((err) => {
              console.error(err);
              this.popBoxdia = false;
              this.$message({
                message: "删除失败",
                type: "error",
              });
            });
    },
    twodelstu(){
      const promises = this.selectedData.map((item) => {
        return this.deleteStudentPromise(item.userid, item.state);
      });
      Promise.all(promises)
        .then(() => {
          this.refresh();
          this.popBoxdia = false;
          this.cancelAllSelection();
          this.$emit("getGrade");
          this.$message({
            message: "删除成功",
            type: "error",
          });
        })
        .catch((err) => {
          console.error(err);
          this.$message({
            message: "部分删除失败，请重试",
            type: "error",
          });
        });
    },
    // 删除学生Promise
    deleteStudentPromise(id, state) {
      return new Promise((resolve, reject) => {
        state = 0;
        let params = [{ uid: id, state: state }];
        this.ajax
          .post(this.$store.state.api + "deleteStudent", params)
          .then((res) => {
            resolve(res);
          })
          .catch((err) => {
            console.error(err);
            reject(err);
          });
      });
    },
    // 取消删除
    closeDia(){
      this.delStuinfo = {};
      this.popBoxdia = false;
    },
    // 移动班级学生级联选中数据路径改变
    handlemoveChangecascader(val) {
      console.log(val);
    },


    
// 公共方法区域
    // 更新年级列表 (添加,删除学生,编辑兴趣班后需要)
    getCascaderData() {
      this.$emit("getGrade");
      this.refresh();
    },
    // 添加学生
    addStudent() {
      this.$refs.addStu.stardop()
      this.$refs.addStu.classInfo = this.activeinfo;
    },

// 兴趣班方法区域
    // 兴趣班排序
    intSort(val){
      this.insort = val;

      if (this.boxType == 1) {
        this.getInterestClass()
      }else if (this.boxType == 2) {
        this.getAllStudent()
      }
     
    },
    // 编辑兴趣班
    editInterestCla(row) {
      if (row.createuserid != this.userid) {
        return this.$message.error('仅限创建者编辑')
      }
      this.$refs.editInterstcla.InterestClaEditvisible = true;
      this.InterestClaEditInfo = JSON.parse(JSON.stringify(row));
      // this.$refs.editInterstcla.getdata();
    },
    // 查看兴趣班学生
    viewStudent(row, column, event) {
      // console.log('111');
      console.log(row, column, event);

      // if (row.createuserid != this.userid) return
      
      if (this.boxType == 1 && this.interestType == 0) {
        this.interestType = 1;
        this.tableColumns = this.studentColumns;
        this.activeId = row.id;
        this.refresh();
        this.activeinfo = row;
      }
      
    },
    // 新增班级
    addInterestClaConfirm() {
      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);
        });
    },
    // 添加兴趣班
    addInterestCla(row) {
      this.addInterestClaVisible = true;
      this.InterestClaAddInfo = row;
    },
    // 移除单个学生
    deleteClassStudent(id) {
      let params = [{ uid: id, cid: this.activeId }];
      this.ajax
        .post(this.$store.state.api + "deleteClassStudent", params)
        .then((res) => {
          console.log("res", res);

          this.refresh()
        })
        .catch((err) => {
          console.error(err);
        });
    },





    // 修改学生信息
    confirmEditStu() {
      // console.log(this.cascaderDataPath);
      if (this.stuEditInfo.username === "") {
        this.$message({
          message: "请输入姓名",
          type: "error",
        });
        return;
      }
      if (this.cascaderDataPath.length === 0) {
        this.$message({
          message: "请选择班级",
          type: "error",
        });
        return;
      }

      this.EditStubox = this.cascaderDataPath.map((item) => item[1]).join(",");
      // console.log(box);

      // console.log("this.stuEditInfo", this.stuEditInfo);

      this.deltypy = 10;
      this.popBoxdia = true;
      // this.$confirm(
      //   `确定要修改 ${this.stuEditInfo.username} 的学生信息吗？`,
      //   "提示",
      //   {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }
      // )
      //   .then(() => {
      //     this.update_Student(box);
      //   })
      //   .catch(() => {
      //     return;
      //   });
    },
    // 修改学生信息
    update_Student(cid) {
      let params = [
        {
          userid: this.stuEditInfo.userid,
          username: this.stuEditInfo.acc,
          alias: this.stuEditInfo.username,
          ph: this.stuEditInfo.phonenumber,
          sid: this.stuEditInfo.studentid,
          cid: cid,
        },
      ];
      // return console.log(params);
      this.ajax
        .post(this.$store.state.api + "updateStudentInfo", params)
        .then((res) => {
          this.$message({
            message: this.lang.Editsuccessful,
            type: "success",
          });
          this.stuEditvisible = false;
          this.refresh();
          this.popBoxdia = false;
          this.EditStubox = '';
          this.stuEditInfo = {};
          this.cascaderDataPath = [];
        })
        .catch((err) => {
          this.isLoading = false;
          this.$message({
            message: this.lang.Modificationfailed,
            type: "error",
          });
          console.error(err);
        });
    },

    // 编辑学生
    editStudent(row) {
      this.stuEditvisible = true;
      this.stuEditInfo = { ...row };
      // 根据 classid 找到对应的路径数组（多选模式需要二维数组）
      this.cascaderDataPath = row.classid
        ? this.findCascaderPath(row.classid, this.cascaderData)
        : [];
    },
    handleChangecascader(val) {
      console.log(val);
      // 更新级联选择器的选中数据路径
      this.cascaderDataPath = val || [];
    },
    findCascaderPath(classid, cascaderData) {
      if (!classid || !cascaderData || cascaderData.length === 0) {
        return [];
      }
      // 解析逗号分隔的 classid 字符串（班级字符串数组）
      const classIds = classid
        .split(",")
        .map((id) => id.trim())
        .filter((id) => id);
      console.log('classIds',classIds);
        
      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 ? 0 : item.pid, item.id];
      });

     
      return result;
    },

    // 刷新
    refresh() {
      this.page = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableData = [];
      if (this.boxType == 0) {
        // 清除选中数据
        if (this.selectedData.length > 0) {
          this.cancelAllSelection();
        }
        this.getStudent();
      } else if (this.boxType == 1) {
        if (this.interestType == 0) {
          this.getInterestClass();
        } else if (this.interestType == 1) {
          this.getStudent();
        }
      } else if (this.boxType == 2) {
        this.getAllStudent();
      }
    },


    // 全选
    handleSelectionChange(val) {
      this.selectedData = val;
      // 同步全选复选框状态：当选中数量等于表格数据数量时，全选复选框应该被选中
      this.checkedAllSelection =
        val.length > 0 && val.length === this.tableData.length;
    },

    // 清除多选table数据
    cancelAllSelection() {
      this.$refs.tableData.clearSelection();
      this.selectedData = [];
      this.checkedAllSelection = false;
    },

    closeEditStu() {
      this.stuEditvisible = false;
      this.stuEditInfo = {};
    },
    handlePageChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      if (this.boxType == 0) {
        this.getStudent();
      } else if (this.boxType == 1) {
        this.getInterestClass();
      } else if (this.boxType == 2) {
        this.getAllStudent();
      }
    },
    handleSizeChange(val) {
      console.log(`每页条数: ${val}`);
      this.pageSize = val;
      this.page = 1;
      if (this.boxType == 0) {
        this.getStudent();
      } else if (this.boxType == 1) {
        this.getInterestClass();
      } else if (this.boxType == 2) {
        this.getAllStudent();
      }
    },
    getStudent() {
      this.isLoading = true;
      this.tableColumns = [];
      this.tableColumns = this.studentColumns;
      let params = {
        oid: this.oid,
        claid: this.activeId,
        inp: this.inp,
      };
      this.ajax
        .get(this.$store.state.api + "selectclaStu", params)
        .then((res) => {
          this.isLoading = false;
          let box1 = res.data[0];
          box1.forEach((e) => {
            let kk = [];
            this.cascaderData.forEach(item => {
              item.children.forEach(item2 => {  
                if (e.classid && e.classid.indexOf(item2.id) != -1) {
                  kk.push(item.name + item2.name);
                }else{
                }
              });
            });
            e.classname = kk.join("/");
          });
          this.tableData = res.data[0];
          console.log(JSON.parse(JSON.stringify(this.tableData)),'this.tableData');
          
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    // 获取兴趣班
    getInterestClass() {
      this.isLoading = true;
      this.tableColumns = this.tableInterestClaColumns;
      let params = {
        oid: this.oid,
        inp: this.inp,
        srt: this.insort,
        page: this.page,
        pageSize: this.pageSize,
      };
      console.log('params',params);
      
      this.ajax
        .get(this.$store.state.api + "selectInterestcla", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    // 学生管理全部学生
    getAllStudent() {
      this.isLoading = true;
      this.cancelAllSelection();
      this.tableColumns = this.studentColumns;
      let params = {
        oid: this.oid,
        cid: "",
        inp: this.inp,
        srt:this.insort,
        page: this.page,
        num: this.pageSize,
      };
      this.ajax
        .get(this.$store.state.api + "selectStudentManagesrt", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          let box1 = res.data[0];
          box1.forEach((e) => {
            let kk = [];
            this.cascaderData.forEach(item => {
              item.children.forEach(item2 => {  
                if (e.classid && e.classid.indexOf(item2.id) != -1) {
                  kk.push(item.name + item2.name);
                }else{
                }
              });
            });
            e.classname = kk.join("/");
          });
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    // 修改班级名称
    confirmClaEdit() {
      if (this.ClaEditInfo.name == '' || this.ClaEditInfo.name == this.activeinfo.name) {
        this.ClaEditvisible = false
        return
      }
      let params = {
        id: this.ClaEditInfo.id,
        n: this.ClaEditInfo.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: this.lang.Cannotsameothercla,
              type: "error",
            });
          } else {
            this.$message({
              message: this.lang.Editsuccessful,
              type: "success",
            });
            this.$emit("getGrade");
            this.ClaEditvisible = false;
            this.ClaEditInfo = {};
          }
        })
        .catch((err) => {
          this.$message({
            message: this.lang.Modificationfailed,
            type: "error",
          });
          console.error(err);
        });
    }
  },
 
};
</script>

<style>
/* 学生管理表格操作弹窗样式 - 全局样式（Element UI popover 挂载到 body，需要全局样式） */
.student-manage-action-popover {
  width: 70px !important;
  min-width: 60px !important;
  padding: 0 !important;
}

.student-manage-action-popover .action_box > div {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.student-manage-action-popover .action_box > div:hover {
  background: #e8f3ff;
  color: #0052d9;
}
.topbox_area_popover{
  width: 152px !important;
  min-width: 60px !important;
  padding: 0 !important;
}
/* 学生管理重置密码消息框样式 - 全局样式（Element UI msgbox 挂载到 body，需要全局样式） */
.student-manage-reset-password-msgbox .el-message-box__status {
  top: 0 !important;
  transform: none !important;
  align-self: flex-start !important;
}
.student-manage-reset-password-msgbox .el-message-box__message {
  padding-left: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
}
.student-manage-reset-password-msgbox .el-message-box__message > p {
  margin-top: 0 !important;
}
.student-manage-reset-password-msgbox .el-message-box__btns {
  text-align: right !important;
}
.student-manage-reset-password-msgbox
  .el-message-box__btns
  .el-button--primary {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}
.student-manage-reset-password-msgbox
  .el-message-box__btns
  .el-button--primary:hover {
  background-color: #66b1ff !important;
  border-color: #66b1ff !important;
}
/* 学生管理删除确认对话框样式 - 按钮右对齐 */
.student-manage-delete-msgbox .el-message-box__btns {
  text-align: right !important;
}
.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;
}
.myCascader2 .el-cascader{
  /* width: 100% !important; */
  display: block !important;
}
.myCascader2 .el-cascader-panel{
  width: 400px !important;
}
.myCascader2 .el-cascader-menu__list{
  width: 200px;
}
</style>

<style scoped>

.sortImg{
  width: 30px;
  background: #F4F4F4;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 8px;
  cursor: pointer;
}
.tabbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.topbox {
  background: #fff;
  height: 60px;
  width: 100%;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  padding: 5px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbox_area {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbox_areaCon{
  width: 100%;padding: 8px;
  box-sizing: border-box;display: flex;
  flex-direction: column;gap: 5px;
  align-content: center;
}
.topbox_areaCon div{
  padding: 5px 10px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 2px;
}
.topbox_areaConBck{
  background: #E8F3FF;
  color: #498DFC;
}
.xk_img {
  width: 20px;
  height: 20px;
  padding: 3px;
  cursor: pointer;
}
.xk_img2:hover{
  background: #FFDFD5;
  border-radius: 4px;
}
.topbox_area >>> .el-input {
  width: 150px;
}
.topbox_area >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
  width: 150px;
}
.topbox_area >>> .el-input__icon {
  line-height: 30px;
}
.tabList {
  flex: 1;
  overflow: auto;
  border-radius: 0 0 8px 8px;
  display: grid;
  flex-direction: column;
  background: #fff;
}
.tableList >>> .has-gutter .gutter {
  background: #e7eaf0 !important;
}
.tableList >>> .el-table__header-wrapper .el-checkbox {
  display: none;
}
.cla_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 30px;
  line-height: 30px;
}
.cla_span {
  background: #e8f3ff;
  color: #0052d9;
  padding: 0px 25px;
  border-radius: 5px;
  box-sizing: border-box;
}
.cla_span:nth-child(1) {
  background: #e8f3ff;
  color: #0052d9;
}

.cla_span:nth-child(2) {
  background: #fff1d5;
  color: #df8a00;
}
.action_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: #f6f6f6;
  padding: 7px 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 5px;
}
.action_btn2 {
  background: #0052d9;
  color: #fff;
}
.page_box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.page_box_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* padding: 0 10px; */
  box-sizing: border-box;
}
.dia_box_item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 400px;
  padding-left: 4px;
  padding-right: 12px;
  box-sizing: border-box;
}
.dia_box_item2{
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* height: 400px; */
  padding-left: 4px;
  padding-right: 12px;
  box-sizing: border-box;
}
.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 span {
  /* width: 80px; */
  flex-shrink: 0;
  text-align: right;
}
.tabbox >>> .el-dialog {
  border-radius: 10px !important;
}
.dia_title_box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
  align-items: baseline;
  box-sizing: border-box;
}
.dia_title_box span:nth-child(1) {
  font-size: 16px;
}
.dia_title_box span:nth-child(2) {
  font-size: 12px;
  color: #689ce9;
  cursor: pointer;
  border-bottom: 1px solid #689ce9;
}
.cascader-class-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.class-student-count {
  color: #86909c;
  font-size: 12px;
}
/* 隐藏一级选项（年级）的多选按钮 */
.addcla_box_item
  >>> .el-cascader-panel
  .el-cascader-menu
  .el-cascader-menu__wrap
  .el-checkbox {
  display: none !important;
}
.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;
}
.tabbox >>> .el-table--enable-row-transition .el-table__body td{
  padding: 12px 30px;
}
.tabbox >>> .el-table th{
  /* padding: 12px 20px; */
  padding-left: 30px;
  box-sizing: border-box;
}
.claInp{
  border: none;
  outline: none;
  height: 30px;
  line-height: 30px;
  width: 130px;
  font-size: 16px;
}
.bacl{
  background: #E8F3FF;
  border-radius: 4px;
}

.pop-upBox >>> .el-dialog{
  border-radius: 8px !important;
  margin-top: 30vh !important;
}
.pop-upBox >>> .el-dialog__body{
  padding: 12px 23px; 
}
.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;
}
.copyMg{
  width: 22px;
  cursor: pointer;
  padding: 2px;
}
.copyMg:hover{
  background: #E8F3FF;
  border-radius: 2px;
}
.dialog-footer div{
  /* width: 100px; */
  text-align: center;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
}
.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;
}
</style>