新学生管理

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog :visible.sync="addStuVisible" width="700px">
+    <el-dialog :visible.sync="addStuVisible" width="800px">
       <template #title>
         <div class="title_box">
           <div class="title_box_item">
@@ -25,7 +25,7 @@
         <!-- 手动添加学生 -->
         <div class="addcla_box" v-if="addStuType == 1">
           <div class="addcla_box_item" v-if="boxType != 2">
-            <span class="addcla_box_item_span">所属班级:</span>
+            <span class="addcla_box_item_span">所属班级：</span>
             <el-input
               v-model.trim="classInfo.name"
               disabled
@@ -33,7 +33,7 @@
             ></el-input>
           </div>
           <div class="addcla_box_item" v-if="boxType == 2">
-            <span class="addcla_box_item_span">所属年级:</span>
+            <span class="addcla_box_item_span">所属班级：</span>
             <el-cascader
           :options="cascaderData"
           v-model="cascaderDataPath"
@@ -59,7 +59,7 @@
           </div>
 
           <div class="addcla_box_item" style="position: relative">
-            <span class="addcla_box_item_span">学生姓名:</span>
+            <span class="addcla_box_item_span">学生姓名：</span>
             <el-input
               v-model.trim="searchStuName"
               placeholder="请输入学生姓名，多个姓名请用中文逗号(，)分隔"
@@ -69,6 +69,7 @@
             ></el-input>
             <div class="search_stu_box" v-if="popoverVisible">
               <div class="search_stu_box_content">
+              
                 <el-tag
                   v-for="(item, index) in searchStuData"
                   :key="index"
@@ -78,6 +79,7 @@
                 >
                   <span>{{ item }}</span>
                 </el-tag>
+
               </div>
               <div class="search_stu_box_footer">
                 <div>输入学生共{{ searchStuData.length }}人</div>
@@ -93,7 +95,7 @@
             </div>
           </div>
           <div class="addcla_box_item">
-            <span class="addcla_box_item_span">已选择学生:</span>
+            <span class="addcla_box_item_span">已输入：</span>
             <div class="selected_stu_box">
               <el-tag
                 v-for="(item, index) in selectedStuData"
@@ -117,20 +119,24 @@
               action="#"
               :show-file-list="false"
               accept=".xlsx,.xls"
+              v-loading="uploadfileLoading"
             >
               <img src="@/assets/stuImg/uploadfile.svg" alt="upload" />
               <div style="color: #000">点击或拖拽文件到此处上传</div>
               <div class="upload-demo-tip">支持格式:xlsx、xls,最多添加70人</div>
             </el-upload>
             <div style="margin-top: 10px">
-              上传模板:
+              上传模板：
               <span class="download-template" @click="downloadTemplate"
                 >下载模板</span
               >
             </div>
             <div style="margin-top: 10px">
-              注意:请按照模板格式填写学生信息,避免导入失败
+              注意：请按照模板格式填写学生信息,避免导入失败
             </div>
+            <!-- <div style="margin-top: 10px">
+              学生列表批量上传需表格需添加“班级”列
+            </div> -->
           </div>
         </div>
         <!-- 从已有学生中添加 -->
@@ -152,6 +158,25 @@
         </template>
       </div>
     </el-dialog>
+    <div class="pop-upBox">
+      <el-dialog
+        :visible.sync="popBoxdia"
+        width="480px"
+        :show-close="false"
+      >
+        <div class="msgCon">
+            <img style="width: 20px;" src="../../../../assets/stuImg/duil.svg" alt="">
+            <div class="msgContxt">
+              <div>{{impbox.length ? impbox[0].name : ''}}等{{impbox.length}} 名同学已添加成功</div>
+            </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="confirmDelStu"
+            >确 认</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
@@ -199,6 +224,10 @@ export default {
       role: this.$route.query.role,
       cascaderDataPath: [],
 
+      impbox:[],
+
+      popBoxdia:false,
+      uploadfileLoading:false,
       addStuType: 1,
       schoolChar: "",
       userSuffix: "",
@@ -247,7 +276,7 @@ export default {
       return (item) => {
         let box = this.searchStuData.filter((e) => e === item);
         // console.log(box);
-        return box.length > 1 ? "danger" : "";
+        return box.length > 1 ? "1" : "0";
       };
     },
   },
@@ -256,6 +285,9 @@ export default {
     this.getSchoolName();
   },
   methods: {
+    delSeaStu(ind){
+      this.searchStuData.splice(ind,1)
+    },
     handleChangecascader(val) {
       console.log(val);
       // 更新级联选择器的选中数据路径
@@ -298,6 +330,7 @@ export default {
         );
       });
     },
+
     // 上传Excel添加学生
     handleChange(file) {
       let _this = this;
@@ -381,8 +414,10 @@ export default {
             cancelButtonText: '取消',
             type: 'warning',
           }).then(() => {
+            _this.uploadfileLoading = true;
             _this.accUpdate(arr);
           }).catch(() => {
+            _this.uploadfileLoading = false;
             _this.$message.info('已取消');
           });
         };
@@ -442,7 +477,7 @@ export default {
     },
     accUpdate(box) {
       console.log(box, "box");
-
+      this.impbox = box;
       let z = 2;
       let newArr = JSON.stringify(box);
       let params = [
@@ -476,16 +511,25 @@ export default {
               message: "添加成功",
               type: "success",
             });
-            this.addStuVisible = false;
-            this.selectedStuData = [];
+            this.popBoxdia= true;
+            // this.addStuVisible = false;
+            console.log('this.selectedStuData',this.selectedStuData);
+            
+            // this.selectedStuData = [];
             this.$emit("getCascaderData");
           }
+          this.uploadfileLoading = false;
         })
         .catch((err) => {
           console.error(err);
         });
     },
-
+    confirmDelStu(){
+          // this.addStuVisible = false;
+          this.popBoxdia= false;
+          this.impbox = []
+          this.selectedStuData = [];
+    },
     // 修改账号
     updateAccount(arr) {
       let params = {
@@ -588,6 +632,26 @@ export default {
   .el-checkbox {
   display: none !important;
 }
+.seaStutxt {
+  width: 360px !important;
+  min-width: 60px !important;
+  padding: 16px !important;
+}
+.seaStuBtn{
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-end;
+}
+/* .seaStutxt .action_box > div {
+  padding: 8px 15px;
+  cursor: pointer;
+  font-size: 14px;
+  text-align: center;
+}
+.seaStutxt .action_box > div:hover {
+  background: #e8f3ff;
+  color: #0052d9;
+} */
 </style>
 <style scoped>
 .bar_box {
@@ -633,7 +697,7 @@ export default {
   text-align: right;
 }
 .search_stu_box {
-  width: 570px;
+  width: 670px;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -644,12 +708,15 @@ export default {
   background: #fff;
   border: 1px solid #e8f3ff;
   box-sizing: border-box;
-  padding: 10px;
+  border-radius: 2px;
+  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05);
 }
 .search_stu_box_content {
   display: flex;
   gap: 10px;
   flex: 1;
+  padding: 10px;
+  box-sizing: border-box;
 }
 .selected_stu_box_item {
   background: #e8f3ff;
@@ -662,9 +729,12 @@ export default {
 .search_stu_box_footer {
   display: flex;
   height: 40px;
+  padding: 0 10px;
+  box-sizing: border-box;
   justify-content: space-between;
   align-items: center;
   box-sizing: border-box;
+  border-top: 1px #e7e7e7 solid;
 }
 .selected_stu_box {
   display: flex;
@@ -714,4 +784,54 @@ export default {
   cursor: pointer;
   border-bottom: 1px solid #0052d9;
 }
+.msgCon{
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  box-sizing: border-box;
+}
+.msgContxt{
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 16px;
+  color: #000000;
+}
+.tagL{
+  height: 30px;
+  line-height: 30px;
+  border-radius: 3px;
+  box-sizing: border-box;
+  background: #E7F3FF;
+  border: 1px #DDE4E5 solid;
+}
+.tagitem{
+  height: 100%;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+.tagitem2{
+  background: #FEF0F0;
+  border: 1px #FEF0F0 solid;
+}
+.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;
+}
 </style>

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

@@ -156,6 +156,31 @@
         >确定</el-button
       >
     </div>
+
+    <div class="pop-upBox">
+      <el-dialog
+        :visible.sync="popBoxdia"
+        width="480px"
+        append-to-body
+        class="upBox"
+        :show-close="false"
+      >
+        <div class="msgCon">
+            <img style="width: 20px;" src="../../../../assets/stuImg/duil.svg" alt="">
+            <div class="msgContxt" v-if="selectedStuData.length">
+                {{selectedStuData[0].username}}等{{selectedStuData.length}}名同学已添加成功
+            </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+        
+          <el-button type="primary"
+            class="btnpop"
+          @click="confirmDelStu"
+            >确 认</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
@@ -184,6 +209,7 @@ export default {
       popoverVisible: false,
       allClaAllStuData: [],
       page: 1,
+      popBoxdia:false,
       total: 0,
       pageSize: 10,
       allClaColumns: [
@@ -203,6 +229,11 @@ export default {
     };
   },
   methods: {
+    confirmDelStu(){
+      this.$refs.tableData.clearSelection();
+      this.selectedStuData = [];
+      this.popBoxdia = false;
+    },
     // 删除已选择学生
     handleSelectedStuClose(item) {
       // 从已选择数据中移除
@@ -240,11 +271,7 @@ export default {
       });
       Promise.all(promises2)
         .then(() => {
-          this.$message({
-            message: "移动成功",
-            type: "success",
-          });
-          this.selectedStuData = [];
+          this.popBoxdia = true
           this.$emit("getStudent");
           if (this.cascaderDataPath.length > 0) {
             this.getdata(this.cascaderDataPath[1]);
@@ -303,16 +330,18 @@ export default {
       this.editTabloading = true;
       // 处理输入：去除多余空格，确保逗号分隔格式正确
       let inpValue = this.searchStuName
-        .split(",")
+        .split("，")
         .map((name) => name.trim())
         .filter((name) => name)
         .join(",");
-      let params = {
+        console.log('inpValue',inpValue);
+
+      let params = [{
         oid: this.oid,
         inp: inpValue,
-      };
+      }];
       this.ajax
-        .get(this.$store.state.api + "selectchStu", params)
+        .post(this.$store.state.api + "selectchStu", params)
         .then((res) => {
           console.log(res.data[0], "res");
           let box = res.data[0].filter(
@@ -358,7 +387,7 @@ export default {
     },
     handlePageChange(val) {
       this.page = val;
-      this.getdata();
+      this.getdata(this.cascaderDataPath[1]);
     },
     //获取年级列表
     getGrade() {
@@ -429,6 +458,7 @@ export default {
 </script>
 
 <style>
+
 .myCascader
   .el-cascader-panel
   .el-cascader-menu:first-child
@@ -445,8 +475,22 @@ export default {
   .el-checkbox {
   display: none !important;
 }
+.myCascader .el-cascader-panel{
+  width: 670px !important;
+}
+.myCascader .el-cascader-menu__list{
+  width: 335px;
+}
+
 </style>
 <style scoped>
+.upBox >>> .el-dialog{
+  border-radius: 8px !important;
+  margin-top: 30vh !important;
+}
+.upBox >>> .el-dialog__body{
+  padding: 10px 23px; 
+}
 .dia_box_item {
   display: flex;
   align-items: center;
@@ -493,23 +537,26 @@ export default {
   box-sizing: border-box;
 }
 .search_stu_box {
-  width: 570px;
+  width: 670px;
   position: absolute;
   display: flex;
   flex-direction: column;
   top: 100%;
   left: 90px;
   z-index: 1000;
-  min-height: 160px;
+  min-height: 110px;
   background: #fff;
   border: 1px solid #e8f3ff;
   box-sizing: border-box;
-  padding: 10px;
+  border-radius: 2px;
+  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.1), 0px 8px 10px 1px rgba(0,0,0,0.06), 0px 3px 14px 2px rgba(0,0,0,0.05);
 }
 .search_stu_box_content {
   display: flex;
   gap: 10px;
   flex: 1;
+  padding: 10px;
+  box-sizing: border-box;
 }
 .selected_stu_box_item {
   background: #e8f3ff;
@@ -522,9 +569,12 @@ export default {
 .search_stu_box_footer {
   display: flex;
   height: 40px;
+  padding: 0 10px;
+  box-sizing: border-box;
   justify-content: space-between;
   align-items: center;
   box-sizing: border-box;
+  border-top: 1px #e7e7e7 solid;
 }
 .selected_stu_box {
   display: flex;
@@ -547,4 +597,26 @@ export default {
   justify-content: flex-end;
   gap: 10px;
 }
+
+.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;
+}
+.btnpop{
+  width: 60px !important;
+  height: 32px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #3681FC;
+}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="edit_interest_cla_box">
     <!-- 编辑兴趣班弹框 -->
-    <el-dialog :visible.sync="InterestClaEditvisible" width="800px">
+    <el-dialog :visible.sync="InterestClaEditvisible" width="700px">
       <template slot="title">
         <div class="dia_title_box">
           <span>编辑兴趣班</span>
@@ -16,7 +16,7 @@
             placeholder="请输入兴趣班名称"
           ></el-input>
         </div>
-        <div class="addcla_box_item" style="position: relative">
+        <!-- <div class="addcla_box_item" style="position: relative">
           <span class="addcla_box_item_span">搜索学生:</span>
           <el-input
             v-model.trim="searchStuName"
@@ -124,7 +124,7 @@
             :total="total"
           >
           </el-pagination>
-        </div>
+        </div> -->
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancelAllSelection">取消</el-button>
@@ -241,10 +241,12 @@ export default {
       this.editTabloading = true;
       // 处理输入：去除多余空格，确保逗号分隔格式正确
       let inpValue = this.searchStuName
-        .split(",")
+        .split("，")
         .map((name) => name.trim())
         .filter((name) => name)
         .join(",");
+        console.log('inpValue',inpValue);
+        
       let params = {
         oid: this.oid,
         inp: inpValue,
@@ -283,11 +285,11 @@ export default {
       this.getdata();
     },
     cancelAllSelection() {
-      this.$refs.tableData.clearSelection();
-      this.selectedStuData = [];
-      this.searchStuData = [];
-      this.searchStuName = "";
-      this.clainfo = {};
+      // this.$refs.tableData.clearSelection();
+      // this.selectedStuData = [];
+      // this.searchStuData = [];
+      // this.searchStuName = "";
+      // this.clainfo = {};
       this.InterestClaEditvisible = false;
     },
     handleSizeChange(val) {
@@ -319,12 +321,12 @@ export default {
               message: "修改成功",
               type: "success",
             });
-            if (this.selectedStuData.length > 0) {
-              this.moveInterestClaStudent();
-            } else {
+            // if (this.selectedStuData.length > 0) {
+            //   this.moveInterestClaStudent();
+            // } else {
               this.cancelAllSelection();
               this.$emit("getCascaderData");
-            }
+            // }
           }
         })
         .catch((err) => {

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="msgdia">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="480px"
+      :show-close="false"
+      :before-close="handleClose"
+    >
+      <div class="msgCon">
+          <img style="width: 20px;" src="../../../../assets/stuImg/duil.svg" alt="">
+          <div class="msgContxt">
+            <div>对8个账户重置密码成功！ </div>
+            <div>
+              <span>默认密码为：Coco1234</span>
+              <img @click="copyText" style="width: 20px;cursor: pointer;scale: 1.2;" src="../../../../assets/stuImg/copy2.svg" alt="">
+            </div>
+          </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 认</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    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);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.msgdia >>> .el-dialog{
+  border-radius: 8px !important;
+  /* margin: auto !important; */
+  margin-top: 30vh !important;
+}
+.msgdia >>> .el-dialog__body{
+  padding: 12px 23px; 
+}
+.msgCon{
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  /* padding: 0 3px; */
+  box-sizing: border-box;
+}
+.msgContxt{
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 16px;
+  color: #000000;
+}
+</style>

src/components/pages/studentManageNew/index.vue

@@ -5,36 +5,49 @@
         <img src="../../../assets/stuImg/riqi.svg" alt="" />
         <span style="color: #86909c; font-size: 12px">年级管理</span>
       </div>
-      <div class="Clabtn" @click="openaddClass">
-        <img src="../../../assets/stuImg/jia.svg" alt="" />
-        <span>新班级</span>
-      </div>
+      <!-- v-if="orglist.includes(org)" -->
+
+      <template v-loading="boxLoading">
+        <div v-if="orglist.includes(org)" class="Clabtn" @click="openaddClass(1)">
+          <img src="../../../assets/stuImg/jia.svg" alt="" />
+          <span>新年级</span>
+        </div>
+        <div class="Clabtn" @click="openaddClass(0)">
+          <img src="../../../assets/stuImg/jia.svg" alt="" />
+          <span>新班级</span>
+        </div>
+
+        <el-menu
+          :default-active="activeId"
+          class="el-menu-vertical-demo"
+        >
+          <el-submenu v-for="item in tableData" :index="item.id" :key="item.id">
+            <template slot="title">
+              <span>{{ item.name }}</span>
+              <img
+                class="grade-submenu-arrow"
+                src="../../../assets/stuImg/zankai.svg"
+                alt=""
+              />
+            </template>
+            <el-menu-item-group
+              v-for="k in item.children"
+              :key="k.id"
+              :title="k.name"
+            >
+              <el-menu-item :index="k.id" @click="handleClick(k.id, 0,k)">
+                <span>{{ k.name }}</span>
+                <span>（{{ k.pnum }}人）</span>
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+        </el-menu>
+      </template>
 
-      <el-menu
-        :default-active="activeId"
-        class="el-menu-vertical-demo"
-        v-loading="boxLoading"
-      >
-        <el-submenu v-for="item in tableData" :index="item.id" :key="item.id">
-          <template slot="title">
-            <span>{{ item.name }}</span>
-          </template>
-          <el-menu-item-group
-            v-for="k in item.children"
-            :key="k.id"
-            :title="k.name"
-          >
-            <el-menu-item :index="k.id" @click="handleClick(k.id, 0,k)">
-              <span>{{ k.name }}</span>
-              <span>（{{ k.pnum }}人）</span>
-            </el-menu-item>
-          </el-menu-item-group>
-        </el-submenu>
-      </el-menu>
       <div class="line"></div>
       <div class="centerCss">
         <img src="../../../assets/stuImg/inf.svg" alt="" />
-        <span style="color: #86909c; font-size: 12px">年级管理</span>
+        <span style="color: #86909c; font-size: 12px">兴趣班管理</span>
       </div>
       <div
         class="por"
@@ -56,6 +69,8 @@
         学生列表
       </div>
     </div>
+
+    <!-- 右侧table区域 -->
     <div class="leftbox">
       <tableL
         :activeIdL="activeId"
@@ -71,12 +86,13 @@
       title="添加班级"
       :visible.sync="addClassVisible"
       width="500px"
+      :show-close="false"
       class="addClassDialog"
     >
       <div class="addcla_box">
         <div class="addcla_box_item">
-          <span>所属年级:</span>
-          <el-select v-model="addclaGrade" placeholder="请选择年级">
+          <span>所属班级:</span>
+          <el-select v-model="addclaGrade" placeholder="请选择班级">
             <el-option
               v-for="item in tableData"
               :key="item.id"
@@ -94,8 +110,27 @@
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="addClassVisible = false">取 消</el-button>
-        <el-button type="primary" @click="addClass">确 定</el-button>
+        <div @click="addClassVisible = false">取 消</div>
+        <div @click="addClass" style="background: #3681FC; color: #fff;">确 定</div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      title="添加年级"
+      :visible.sync="addgraVisible"
+      width="500px"
+      :show-close="false"
+      class="addClassDialog"
+    >
+      <div class="addcla_box">
+        <div class="addcla_box_item">
+          <span>年级:</span>
+          <el-input v-model.trim="addgraName" placeholder="请输入年级"></el-input>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <div @click="addgraVisible = false">取 消</div>
+        <div @click="addgra" style="background: #3681FC; color: #fff;">确 定</div>
       </div>
     </el-dialog>
   </div>
@@ -113,14 +148,23 @@ export default {
       org: this.$route.query.org,
       oid: this.$route.query.oid,
       role: this.$route.query.role,
-      boxLoading: false,
-      addClassVisible: false,
 
+      boxLoading: false, //年级区域loading
+      addClassVisible: false,
+      addgraVisible:false,
       addclaName: "", // 新增班级名称
       addclaGrade: "", // 新增班级所属年级
 
-      tableData: [],
-      cascaderData: [],
+      addgraName:'',
+
+      orglist:[
+        "1973f6c7-1561-11ee-91d8-005056b86db5",
+        "16ace517-b5c7-4168-a9bb-a9e0035df840"
+      ],
+
+
+      tableData: [], //年级列表
+      cascaderData: [], //年级列表加兴趣班列表
 
       activeId: "", // 当前选中的班级id
       activeinfo: {}, // 当前选中的班级信息
@@ -129,8 +173,49 @@ export default {
     };
   },
   methods: {
+    // 添加年级
+    addgra(){
+      if (!this.addgraName) {
+        this.$message.error('请输入年级名称')
+      }
+      this.boxLoading = true;
+      let params = {
+        name: this.addgraName,
+        oid: this.oid,
+        uid: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "insertGrade", params)
+        .then((res) => {
+          if (res.data[0] && res.data[0][0].classname == 1) {
+            this.$message({
+              message: this.lang.Cannotsameother,
+              type: "error",
+            });
+            this.boxLoading = false;
+
+          } else {
+            this.$message({
+              message: this.lang.AddSuccessful,
+              type: "success",
+            });
+            this.addgraVisible = false;
+            this.addgraName = "";
+            this.getGrade()
+          }
+        })
+        .catch((err) => {
+          this.$message({
+            message: this.lang.Additionfailed,
+            type: "error",
+          });
+          this.boxLoading = false;
+
+          console.error(err);
+        });
+    },
     //获取年级列表
-    getGrade() {
+    getGrade(val = 0) {
       this.boxLoading = true;
       let params = {
         oid: this.oid,
@@ -149,16 +234,11 @@ export default {
             e.children = box2.filter((item) => item.pid == e.id);
           });
           if (box2.length) {
-            // console.log('this.activeId',this.activeId);
-            // console.log('box2',box2);
-            // console.log('box2.indexOf(this.activeId)',box2.indexOf(this.activeId));
-            // || (this.activeId && this.boxType == 1 && box2.filter(item => item.id == this.activeId).length == 0)
-            if(this.activeId == ''){
+            if(this.activeId == '' || val ==1){
               console.log('111');
-              
               this.activeId = box2[0].id;
-              this.activeinfo = box2[0];
             }
+            this.activeinfo = box2[0];
           }
 
           box3.push({id:0,name:"兴趣班",children:[]});
@@ -181,8 +261,12 @@ export default {
         });
     },
 
-    openaddClass() {
-      this.addClassVisible = true;
+    openaddClass(val) {
+      if (val) {
+        this.addgraVisible = true;
+      }else{
+        this.addClassVisible = true;
+      }
     },
     // 新增班级
     addClass() {
@@ -299,6 +383,9 @@ export default {
 }
 .rigbox >>> .el-menu li {
   padding: 0 !important;
+  font-weight: 600;
+  font-family: PingFang SC, PingFang SC !important;
+  /* color: rgba(0,0,0,0.9) !important; */
 }
 .rigbox >>> .el-submenu .el-menu-item {
   min-width: 146px !important;
@@ -317,6 +404,19 @@ export default {
   height: 35px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+}
+.rigbox >>> .grade-submenu-arrow {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+.rigbox >>> .el-submenu.is-opened > .el-submenu__title .grade-submenu-arrow {
+  transform: rotate(180deg);
+}
+.rigbox >>> .el-submenu__icon-arrow {
+  display: none;
 }
 .el-menu-item:focus,
 .el-menu-item:hover {
@@ -329,7 +429,7 @@ export default {
 }
 .por {
   cursor: pointer;
-  padding: 5px;
+  padding: 8px 5px;
   box-sizing: border-box;
 }
 .active {
@@ -351,11 +451,32 @@ export default {
   width: 100%;
 }
 .addcla_box_item span {
-  width: 80px;
+  /* width: 80px; */
   flex-shrink: 0;
   text-align: right;
 }
 .addClassDialog >>> .el-dialog {
   border-radius: 10px !important;
+  height: 427px !important;
+  display: flex;
+  flex-direction: column;
+}
+.addClassDialog >>> .el-dialog__body {
+  flex: 1;
 }
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.dialog-footer div{
+  width: 100px;
+  text-align: center;
+  padding: 7px 14px;
+  cursor: pointer;
+  border-radius: 5px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
 </style>