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

<template>
  <div class="tabbox">
    <div class="topbox">
      <template>
        <div class="topbox_area" style="align-items: center;" v-if="boxType == 0">
          <span>{{ lang.ssStuList }}</span>
          <span v-if="!ClaEditvisible">{{ activeinfo.name }}</span>
          <input
            v-if="ClaEditvisible"
            ref="claEditInput"
            class="claInp"
            type="text"
            :placeholder="lang.ssEnterClassNamePlc"
            v-model.trim="ClaEditInfo.name"
            @blur="confirmClaEdit"
            @keyup.enter="confirmClaEdit"
          />
          <el-tooltip :content="lang.edit" 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="lang.Delete" 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" style="align-items: center;" v-if="boxType == 1">
          <span v-if="interestType == 0">{{ lang.ssInterClassList }}</span>
          <template v-if="interestType == 1">
            <span
              style="cursor: pointer;min-width: 35px;"
              @click="backInterestCla()"
              >{{ activeinfo.name }}</span
            >
            <i class="el-icon-arrow-right"></i>
            <span>{{ lang.ssStuList }}</span>
          </template>
        </div>
        <div class="topbox_area" style="align-items: center;" v-if="boxType == 2">
          <span>{{ lang.ssStuList }}</span>
          <span>{{ total }}{{ lang.ssPerson }}</span>
        </div>
      </template>

      <!-- 右边区域 -->
      <div class="topbox_area">
        <el-input
          :placeholder="lang.ssSearchStudent"
          v-model="inp"
          @blur="refresh"
          @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' : ''">
                {{ lang.ssSortEarliest }}
              </div>
              <div :class="insort == 0 ? 'topbox_areaConBck' : ''">
                {{ lang.ssSortLatest }}
              </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"
          />
          {{ lang.ssRefresh }}
        </div>

        <!-- 处理学生相关操作 -->
        <div
          @click="exportStudent"
          class="action_btn"
          v-if="boxType == 0 || (boxType == 1 && interestType == 1)"
        >
          <img
            src="../../../../assets/stuImg/share.svg"
            :alt="lang.ssExport"
            class="action_img"
          />
          {{ lang.ssExport }}
        </div>
        <template v-if="boxType == 0">
          <template v-if="selectedData.length">
            <div
              class="action_btn action_btn2 action_btn3"
              @click="resetPassword"
            >
              <i class="el-icon-lock"></i>
              {{ lang.ssResetPwd }}
            </div>
            <div class="action_btn action_btn2 action_btn3" @click="moveSelStu">
              <i class="el-icon-rank"></i>
              {{ lang.ssMove }}
            </div>
            <div
              class="action_btn action_btn4"
              style="background: #ff4d4f; color: #fff"
              @click="removeSelStu"
            >
              <i class="el-icon-remove-outline"></i>
              {{ lang.Remove }}
            </div>
          </template>
        </template>
        <div
          @click="addStudent"
          v-if="!selectedData.length && (boxType == 0 || boxType == 2)"
          class="action_btn"
        >
          <i class="el-icon-plus"></i>
          {{ lang.AddStudent }}
        </div>

        <!-- 处理兴趣班相关操作 -->
        <div
          @click="addInterestCla()"
          v-if="boxType == 1 && interestType == 0"
          class="action_btn"
        >
          <i class="el-icon-plus"></i>
          {{ lang.ssAddInterCla }}
        </div>
        <div
          @click="addStudent"
          v-if="
            boxType == 1 &&
              interestType == 1 &&
              activeinfo.createuserid == userid
          "
          class="action_btn"
        >
          <i class="el-icon-plus"></i>
          {{ lang.AddStudent }}
        </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 == lang.Class">
              <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 == lang.Account">
              <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)">{{ lang.edit }}</div>
                    <div
                      v-if="boxType == 1 && interestType == 1"
                      @click="deleteClassStudent(scope.row.userid)"
                    >
                      {{ lang.Remove }}
                    </div>
                    <div v-else @click="deleteStudentL(scope.row)">
                      {{ lang.Delete }}
                    </div>
                  </template>
                  <template v-if="boxType == 1 && interestType == 0">
                    <div @click="editInterestCla(scope.row)">
                      {{ lang.edit }}
                    </div>
                    <div
                      @click="
                        deleteCla(scope.row.id, 0, scope.row.createuserid)
                      "
                    >
                      {{ lang.Delete }}
                    </div>
                  </template>
                </div>
                <template v-if="boxType == 1 && interestType == 0">
                  <img
                    src="../../../../assets/stuImg/act.svg"
                    slot="reference"
                    alt=""
                    v-if="scope.row.createuserid == userid"
                    class="action_img"
                    style="cursor: pointer"
                  />
                </template>
                <template v-else>
                  <img
                    src="../../../../assets/stuImg/act.svg"
                    slot="reference"
                    alt=""
                    class="action_img"
                    style="cursor: pointer"
                  />
                </template>
              </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">
          <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
              "
            >
              {{ lang.ssCancelSelAll }}
            </div>
            <div class="action_btn" @click="allSel" v-else>
              {{ lang.SelectAll }}
            </div>
          </div>

          <div
            @click="deleteSelectionStudent"
            class="action_btn"
            v-if="boxType == 0"
            style="background: #ff4d4f; color: #fff"
          >
            {{ lang.Delete }}
          </div>
          <div
            class="action_btn"
            style="background: #ff4d4f; color: #fff"
            @click="removeSelStu"
            v-if="boxType == 1"
          >
            <i class="el-icon-remove-outline"></i>
            {{ lang.Remove }}
          </div>
        </div>
      </div>
    </div>

    <!-- 添加兴趣班弹框 -->
    <el-dialog
      :visible.sync="addInterestClaVisible"
      height="400px"
      width="442px"
    >
      <template slot="title">
        <div class="dia_title_box">
          <span>{{ lang.ssAddInterCla }}</span>
        </div>
      </template>
      <div class="dia_box_item2">
        <div class="addcla_box_item">
          <span>{{ lang.ssInterClaNameColon }}</span>
          <el-input
            v-model="interestName"
            :placeholder="lang.ssEnterInterClaNm"
          ></el-input>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
        style="display: flex;justify-content: flex-end;gap: 10px;"
      >
        <div @click="addInterestClaVisible = false">{{ lang.Cancel }}</div>
        <div
          @click="addInterestClaConfirm"
          style="background: #3681FC; color: #E6FFFFFF;"
        >
          {{ lang.Confirm }}
        </div>
      </div>
    </el-dialog>

    <!-- 移动班级学生弹框 -->
    <el-dialog :visible.sync="moveClaVisible" width="440px">
      <template slot="title">
        <div class="dia_title_box">
          <span>{{ lang.ssMoveStudent }}</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">
          {{ lang.Cancel }}
        </div>
        <div
          class="kbtn"
          @click="confirmMoveClaEdit"
          style="background: #3681FC; color: #E3EDFF;"
        >
          {{ lang.Confirm }}
        </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>{{ lang.ssEditInfo }}</span>
          <span @click="inPassword">{{ lang.ssResetPwd }}</span>
        </div>
      </template>
      <div class="dia_box_item">
        <div class="addcla_box_item">
          <span>{{ lang.Name }}{{ lang.ssColon }}</span>
          <el-input
            v-model="stuEditInfo.username"
            :placeholder="lang.ssEnterUserName"
          ></el-input>
        </div>
        <div class="addcla_box_item">
          <span>{{ lang.Account }}{{ lang.ssColon }}</span>
          <div>{{ stuEditInfo.acc }}</div>
        </div>
        <div class="addcla_box_item">
          <span>{{ lang.Class }}{{ lang.ssColon }}</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">{{ lang.Cancel }}</div>
        <div
          class="kbtn"
          @click="confirmEditStu"
          style="background: #3681FC; color: #E3EDFF;"
        >
          {{ lang.Confirm }}
        </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">
              {{ lang.ssConfirmDelStuOne.replace(/\*/g, delStuinfo.username) }}
            </div>
            <div v-if="deltypy == 2">
              {{ lang.ssConfirmDelStuNum.replace(/\*/g, selectedData.length) }}
            </div>
            <div v-if="deltypy == 3">{{ lang.ssConfirmDelClass }}</div>
            <div v-if="deltypy == 4">
              {{ lang.ssConfirmRemoveNum.replace(/\*/g, selectedData.length) }}
            </div>
            <div v-if="deltypy == 5">
              {{ lang.ssConfirmResetPwdN.replace(/\*/g, selectedData.length) }}
            </div>
            <div v-if="deltypy == 6">
              {{ lang.ssConfirmResetOne.replace(/\*/g, stuEditInfo.username) }}
            </div>
            <div v-if="deltypy == 9">{{ lang.ssConfirmMoveCla }}</div>
            <div v-if="deltypy == 10">
              {{ lang.ssConfirmEditStu.replace(/\*/g, stuEditInfo.username) }}
            </div>
          </div>
          <div class="msgContxt" v-if="deltypy == 7 || deltypy == 8">
            <div v-if="deltypy == 7">
              {{ lang.ssResetPwdSuccNum.replace(/\*/g, selectedData.length) }}
            </div>
            <div v-if="deltypy == 8">{{ lang.ssResetPwdSucc }}</div>
            <div>
              <span>{{ lang.ssDefaultPwdCoco }}</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="lang.Copy"
                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">
            {{ lang.Cancel }}
          </div>
          <div
            @click="confirmDelStu"
            style="background: #3681FC; color: #E3EDFF;"
          >
            {{ lang.Confirm }}
          </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 { myMixin } from "@/mixins/mixin.js"
// import msgbox from "./msgbox.vue";
export default {
  mixins: [ myMixin ],
  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: []
    };
  },
  created() {
    this.tableColumns = this.studentColumns;
  },
  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: {
    studentColumns() {
      return [
        { label: this.lang.StudentName, prop: "username" },
        { label: this.lang.Account, prop: "acc" },
        { label: this.lang.Class, prop: "classname", wid: "360" }
      ];
    },
    tableInterestClaColumns() {
      return [
        { label: this.lang.ClassName, prop: "name" },
        { label: this.lang.NumberofStudents, prop: "pnum" },
        { label: this.lang.ssTime, prop: "create_at" }
      ];
    },
    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(this.lang.ssCopySucc);
          })
          .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(this.lang.ssCopySucc);
      } catch (err) {
        this.$message.error(this.lang.ssCopyFail);
      }
      document.body.removeChild(textarea);
    },
    // 年级方法区域
    // 打开删除班级弹框
    deleteCla(cid, val, uid) {
      if (val == 0 && uid != this.userid)
        return this.$message.error(this.lang.ssOnlyCreatorDel);

      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: this.lang.ssDeleteSucc,
              type: "success"
            });
            this.popBoxdia = false;

            this.$emit("getGrade", this.delClaidtype);
            this.refresh();
            this.delClaid = "";
            this.deltypy = 0;
          })
          .catch(err => {
            this.$message.error(this.lang.Deletefailed);
            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: this.lang.ssSelectStuExp,
          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[this.lang.studentinformation] = res[i].username;
        _json[this.lang.Account] = res[i].acc;
        _json[this.lang.Class] = 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 + this.lang.ssStuListXlsx);
      this.$message({
        message: this.lang.Exportsuccessful,
        type: "success"
      });
      this.addOp3('1', "", { type: "student_export" }, "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: this.lang.SelectClass,
          type: "error"
        });
        return;
      }
      this.deltypy = 9;
      this.popBoxdia = true;
    },
    confirmMoveClaEditStu() {
      // this.$confirm("确定要移动到该班级吗？", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      // 先移出班级
      if (this.moveClaCascaderDataPath[1] == this.activeId) {
        this.$message({
          message: this.lang.ssMoveStuSame,
          type: "error"
        });
        return;
      }
      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: this.lang.ssMoveStuSucc,
                type: "success"
              });
              this.moveClaVisible = false;
              this.moveClaCascaderDataPath = [];
              this.popBoxdia = false;
              this.$emit("getGrade");
              this.refresh();
            })
            .catch(err => {
              console.error(err);
              this.$message({
                message: this.lang.ssMoveStuFail,
                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: this.lang.ssRemoveStuSucc,
            type: "success"
          });

          this.popBoxdia = false;
          this.refresh();
          this.$emit("getGrade");
        })
        .catch(err => {
          console.error(err);
          this.$message({
            message: this.lang.ssRemoveStuFail,
            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: this.lang.ssResetPwdPartErr,
            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: this.lang.ssResetPwdFail,
            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();
        this.addOp3('1', "", { type: "student_delete" }, "success")
      } else if (this.deltypy == 2) {
        this.twodelstu();
        this.addOp3('1', "", { type: "student_delete" }, "success")
      } else if (this.deltypy == 3) {
        this.confirmdeleteCla();
        this.addOp3('1', "", { type: "class_delete" }, "success")
      } else if (this.deltypy == 4) {
        this.confirmRemove();
        this.addOp3('1', "", { type: "student_remove" }, "success")
      } else if (this.deltypy == 5) {
        this.confirmrestpsd();
        this.addOp3('1', "", { type: "student_reset_password" }, "success")
      } else if (this.deltypy == 6) {
        this.confirminPassword();
        this.addOp3('1', "", { type: "student_reset_password" }, "success")
      } 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();
        this.addOp3('1', "", { type: "student_move" }, "success")
      } else if (this.deltypy == 10) {
        this.update_Student(this.EditStubox);
        this.addOp3('1', "", { type: "student_edit" }, "success")
      }
    },
    // 删除学生
    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: this.lang.ssDeleteSucc,
            type: "success"
          });
        })
        .catch(err => {
          console.error(err);
          this.popBoxdia = false;
          this.$message({
            message: this.lang.Deletefailed,
            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: this.lang.ssDeleteSucc,
            type: "success"
          });
        })
        .catch(err => {
          console.error(err);
          this.$message({
            message: this.lang.ssPartDelFail,
            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.lang.ssOnlyCreatorEdit);
      }
      this.$refs.editInterstcla.InterestClaEditvisible = true;
      this.InterestClaEditInfo = JSON.parse(JSON.stringify(row));
    },
    // 兴趣班级返回到兴趣班列表
    backInterestCla() {
      this.interestType = 0;
      this.tableColumns = this.tableInterestClaColumns;
      this.getInterestClass();
    },
    // 查看兴趣班学生
    viewStudent(row) {
      // console.log('111');
      // console.log(row, column, event);
      if (this.boxType == 1 && this.interestType == 0) {
        this.interestType = 1;
        this.tableColumns = this.studentColumns;
        this.activeId = row.id;
        this.tableData = [];
        this.getStudent();
        this.activeinfo = row;
      }
    },
    // 新增班级
    addInterestClaConfirm() {
      if (!this.interestName) {
        this.$message({
          message: this.lang.ssEnterInterClaNm,
          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: this.lang.ssEnterUserName,
          type: "error"
        });
        return;
      }
      if (this.cascaderDataPath.length === 0) {
        this.$message({
          message: this.lang.SelectClass,
          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() {
      // 将tab表格页数重置
      this.page = 1;
      this.pageSize = 10;
      this.total = 0;
      // 清除表格数据
      this.tableData = [];
      // 清除选中数据
      this.selectedData = [];

      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"
            });
            this.addOp3('1', "", { type: "class_edit" }, err)
          } else {
            this.$message({
              message: this.lang.Editsuccessful,
              type: "success"
            });
            this.$emit("getGrade");
            this.ClaEditvisible = false;
            this.ClaEditInfo = {};
            this.addOp3('1', "", { type: "class_edit" }, "success")
          }
        })
        .catch(err => {
          this.$message({
            message: this.lang.Modificationfailed,
            type: "error"
          });
          console.error(err);
          this.addOp3('1', "", { type: "class_edit" }, err)
        });
    }
  }
};
</script>

<style>
/* 学生管理表格操作弹窗样式 - 全局样式（Element UI popover 挂载到 body，需要全局样式） */
.student-manage-action-popover {
  width: 80px !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 {
  height: 32px;
  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: 32px;
  line-height: 32px;
  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;
}
.tabList >>> .el-table {
  background: #e7eaf0;
}
.tabList >>> .el-table__body-wrapper {
  border-radius: 8px 8px 0 0;
  background: #fff;
}
/* 针对整个表格添加圆角 */
/* .tabList >>> .el-table__body tbody tr:first-child td:first-child {
  border-radius: 8px 8px 0 0;
} */
.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: 0px 15px;
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 6px;
}
.action_btn3:hover {
  background: #1b6df0;
  border-color: #1b6df0;
  color: #fff;
}
.action_btn4:hover {
  background: #f57e6b !important;
  border-color: #f57e6b !important;
  color: #fff;
}
.action_btn2 {
  background: #3370ff;
  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;
  border-bottom: 1px solid #e7e7e7;
}
.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>