学生管理添加年级

src/components/pages/studentManageNew/index.vue

@@ -5,46 +5,72 @@
         <img src="../../../assets/stuImg/riqi.svg" alt="" />
         <span style="color: #86909c; font-size: 12px">{{ lang.GradeManagement }}</span>
       </div>
-      <!-- v-if="orglist.includes(org)" -->
-
-      <!-- <div > -->
       <div style="display: flex; gap: 10px;">
         <div v-if="orglist.includes(org) || this.role == 1" class="Clabtn" @click="openaddClass(1)">
           <img src="../../../assets/stuImg/jia.svg" alt="" />
-          <span>{{ lang.ssNewGrade }}</span>
+          <span>{{ lang.ssGradeType }}</span>
         </div>
         <div class="Clabtn" @click="openaddClass(0)">
           <img src="../../../assets/stuImg/jia.svg" alt="" />
-          <span>{{ lang.ssNewClass }}</span>
+          <span>{{ lang.ssClass }}</span>
         </div>
       </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">
+      <!-- <div v-if="this.role == 1" class="gradebtn" @click="editGrade">
+        <img src="../../../assets/stuImg/eidl.svg" style="width: 20px;" alt="" />
+        <span>{{ lang.ssEditGrade }}</span>
+      </div> -->
+      <el-menu
+        :default-active="activeId"
+        class="el-menu-vertical-demo"
+        v-loading="editGradeLoading"
+      >
+        <el-submenu v-for="item in tableData" :index="item.id" :key="item.id">
+          <template slot="title">
+            <div class="grade_submenu_title" @mouseenter="mouseEnter(item.id)" @mouseleave="mouseLeave()" >
               <div class="tabcla_box">{{ item.name }}</div>
               <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" style="font-weight: normal;" @click="handleClick(k.id, 0,k)">
-                <div class="tabcla_box">{{ k.name }}</div>
-                <span>{{ lang.ssStuCount.replace(/\*/g, k.pnum) }}</span>
-              </el-menu-item>
-            </el-menu-item-group>
-          </el-submenu>
-        </el-menu>
-      <!-- </div> -->
+              <div v-if="role == 1">
+                <el-popover
+                    placement="bottom-end"
+                    width="80"
+                    trigger="hover"
+                    popper-class="student-manage-action-popover"
+                    >
+                    <div class="action_box"   
+                    @mouseenter="mouseEnter2(item.id)"
+                    @mouseleave="mouseLeave2()">
+                      <template>
+                        <div @click="editGrade(item)">编辑</div>
+                        <div @click="deleteGradeItem(item.id)">删除</div>
+                      </template>
+                    </div>
+                      <div
+                        slot="reference"
+                        class="grade_submenu_arrow_box"
+                      >
+                        <img v-if="role == 1 && (mouseEnterId == item.id || mouseEnterId2 == item.id)" src="../../../assets/stuImg/act.svg" alt="">
+                      </div>
+                </el-popover>
+              </div>
+                
+              </div>
+          </template>
+          <el-menu-item-group
+            v-for="k in item.children"
+            :key="k.id"
+            :title="k.name"
+          >
+            <el-menu-item :index="k.id" style="font-weight: normal;" @click="handleClick(k.id, 0,k)">
+              <div class="tabcla_box">{{ k.name }}</div>
+              <span>{{ lang.ssStuCount.replace(/\*/g, k.pnum) }}</span>
+            </el-menu-item>
+          </el-menu-item-group>
+        </el-submenu>
+      </el-menu>
 
       <div class="line"></div>
       <div class="centerCss">
@@ -118,6 +144,7 @@
       </div>
     </el-dialog>
 
+    <!-- 新增年级弹框 -->
     <el-dialog
       :title="lang.AddGrade"
       :visible.sync="addgraVisible"
@@ -136,6 +163,83 @@
         <div @click="addgra" style="background: #3681FC; color: #E6FFFFFF;">{{ lang.Confirm }}</div>
       </div>
     </el-dialog>
+
+    <!-- 编辑年级弹框 -->
+    <!-- <el-dialog
+      :title="lang.ssEditGrade"
+      :visible.sync="editGradeVisible"
+      width="500px"
+      :show-close="false"
+      class="addClassDialog2"
+    >
+      <div class="edit_grade_box" v-loading="editGradeLoading">
+        <div v-for="item in editGradeData" :key="item.id" class="edit_grade_box_item">
+          <div class="edit_grade_box_item_input">
+            <el-input @keyup.enter.native="confirmEditGrade(item.id)" v-if="item.id == editGradeId" v-model.trim="editGradeName" :placeholder="lang.EnterGrade"></el-input>
+            <div v-else>{{ item.name }}</div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 15px;">
+            <span style="cursor: pointer;" v-if="item.id == editGradeId" @click="confirmEditGrade(item.id)">确定</span>
+            <span v-else style="cursor: pointer;" @click="editGradeItem(item)">编辑</span>
+            <span style="cursor: pointer;" @click="deleteGradeItem(item.id)">删除</span>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <div @click="closeEditGrade" style="color: #363636;">{{ lang.Close }}</div>
+      </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/tishi.svg"
+            alt=""
+          />
+          <div class="msgContxt">
+            <div>
+              {{ lang.Aystdtg }}
+            </div>
+          </div>
+       
+        </div>
+        <span slot="footer" class="dialog-footer">
+        
+          <div @click="popBoxdia = false">
+            {{ lang.Cancel }}
+          </div>
+          <div
+            @click="confirmDeleteGrade"
+            style="background: #3681FC; color: #E3EDFF;"
+          >
+            {{ lang.Confirm }}
+          </div>
+        </span>
+      </el-dialog>
+    </div>
+
+
+    <el-dialog
+      :title="lang.ssEditGrade"
+      :visible.sync="editGradeVisible"
+      width="500px"
+      :show-close="false"
+      class="addClassDialog"
+    >
+      <div class="addcla_box">
+        <div class="addcla_box_item">
+          <span>{{ lang.ssGradeType }}:</span>
+          <el-input v-model.trim="editGradeName" :placeholder="lang.EnterGrade"></el-input>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <div @click="editGradeVisible = false" style="color: #363636;">{{ lang.Cancel }}</div>
+        <div @click="confirmEditGrade" style="background: #3681FC; color: #E6FFFFFF;">{{ lang.Confirm }}</div>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -154,6 +258,10 @@ export default {
       oid: this.$route.query.oid,
       role: this.$route.query.role,
 
+      mouseEnterId:'',
+      mouseEnterId2:'',
+
+      editGradeVisible:false,
       boxLoading: false, //年级区域loading
       addClassVisible: false,
       addgraVisible:false,
@@ -166,7 +274,12 @@ export default {
         "1973f6c7-1561-11ee-91d8-005056b86db5",
         "16ace517-b5c7-4168-a9bb-a9e0035df840"
       ],
-
+      popBoxdia:false,
+      editGradeId:'',
+      deleteGradeId:'',
+      editGradeLoading:false,
+      editGradeName:'',
+      editGradeData:[],
 
       tableData: [], //年级列表
       cascaderData: [], //年级列表加兴趣班列表
@@ -178,6 +291,104 @@ export default {
     };
   },
   methods: {
+    mouseEnter(id){
+      // console.log('mouseEnter', id);
+      this.mouseEnterId = id;
+    },
+    mouseLeave(){
+        this.mouseEnterId = '';
+    },
+    mouseEnter2(id){
+      this.mouseEnterId2 = id;
+    },
+    mouseLeave2(){
+      this.mouseEnterId2 = '';
+    },
+
+    // 编辑年级
+    editGrade(val){
+      console.log('editGrade');
+      this.editGradeId = val.id;
+      this.editGradeName = val.name;
+      this.editGradeVisible = true;
+    },
+
+    // 确认编辑年级
+    confirmEditGrade(){
+      if (!this.editGradeName) {
+        this.$message.error(this.lang.EnterGradeName)
+        this.editGradeName = this.tableData.find((item) => item.id == this.editGradeId).name
+        return;
+      }
+      // if (this.editGradeName == this.tableData.find((item) => item.id == this.editGradeId).name) {
+      //   console.log('111');
+      //   return;
+      // }
+      let params = {
+        id: this.editGradeId,
+        n: this.editGradeName,
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "updateGrade", params)
+        .then((res) => {
+          if (res.data[0] && res.data[0][0].classname == 1) {
+            this.$message({
+              message: this.lang.Cannotsameother,
+              type: "error",
+            });
+          } else {
+            this.$message({
+              message: this.lang.Editsuccessful,
+              type: "success",
+            });
+            this.addOp3('1', "", { type: "grade_edit" }, "success")
+            this.editGradeId = '';
+            this.editGradeName = '';
+            this.editGradeVisible = false;
+            this.getGrade();
+          }
+        })
+        .catch((err) => {
+          this.$message({
+            message: this.lang.Modificationfailed,
+            type: "error",
+          });
+          console.error(err);
+          this.addOp3('1', "", { type: "grade_edit" }, err)
+          this.editGradeLoading = false;
+        });
+    },
+
+    // 删除年级
+    deleteGradeItem(id){
+      this.popBoxdia = true;
+      this.deleteGradeId = id;
+    },
+    // 确认删除年级
+    confirmDeleteGrade(){
+      let params = {
+        id: this.deleteGradeId,
+      };
+      
+      this.ajax
+        .get(this.$store.state.api + "deleteGrade", params)
+        .then((res) => {
+          this.$message({
+            message: this.lang.Successfullydelete,
+            type: "success",
+          });
+          this.popBoxdia = false;
+          this.deleteGradeId = '';
+          this.getGrade();
+          this.addOp3('1', "", { type: "grade_delete" }, "success")
+        })
+        .catch((err) => {
+          this.$message.error(this.lang.Deletefailed);
+          this.addOp3('1', "", { type: "grade_delete" }, err)
+          console.error(err);
+        });
+    },
     // 添加年级
     addgra(){
       if (!this.addgraName) {
@@ -221,6 +432,7 @@ export default {
     },
     //获取年级列表
     getGrade(val = 0) {
+      this.editGradeLoading = true;
       let params = {
         oid: this.oid,
       };
@@ -263,8 +475,10 @@ export default {
 
           this.cascaderData = box3;
           this.tableData = box1;
+          this.editGradeLoading = false;
         })
         .catch((err) => {
+          this.editGradeLoading = false;
           this.boxLoading = false;
           console.error(err);
         });
@@ -340,6 +554,36 @@ export default {
         this.$refs.tableLref.refresh();
       }
     },
+    // closeEditGrade(){
+    //   this.editGradeVisible = false;
+    //   this.editGradeId = '';
+    //   this.editGradeName = '';
+    //   this.editGradeData = [];
+    // },
+    // 编辑年级
+    // editGradeItem(val){
+    //   this.editGradeId = val.id;
+    //   this.editGradeName = val.name;
+    // },
+    // 获取编辑年级数据
+    // getEditGradeData(){
+    //   this.editGradeLoading = true;
+    //   let params = {
+    //     cu:'',
+    //     oid: this.oid,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "selectGradenewyym", params)
+    //     .then((res) => {
+    //       this.editGradeData = res.data[0];
+    //       this.editGradeLoading = false;
+    //     })
+    //     .catch((err) => {
+    //       this.editGradeData = [];
+    //       this.editGradeLoading = false;
+    //       console.error(err);
+    //     });
+    // },
   },
   mounted() {
     this.boxLoading = true;
@@ -347,7 +591,45 @@ export default {
   },
 };
 </script>
+<style>
+
+/* 学生管理表格操作弹窗样式 - 全局样式（Element UI popover 挂载到 body，需要全局样式） */
+.student-manage-action-popover {
+  width: 80px !important;
+  min-width: 60px !important;
+  padding: 0 !important;
+}
 
+.grade_submenu_arrow_box{
+  display: flex;
+  align-items: center;
+}
+.grade_submenu_title{
+  width: 100%;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.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;
+}
+.student-manage-action-popover .el-popper{
+  margin-top: 0 !important;
+}
+</style>
 <style scoped>
 .box {
   padding: 15px;
@@ -474,6 +756,13 @@ export default {
   flex-direction: column;
   gap: 10px;
 }
+.edit_grade_box {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  gap: 10px;
+}
 .addcla_box_item {
   display: flex;
   align-items: center;
@@ -489,10 +778,22 @@ export default {
 }
 .addClassDialog >>> .el-dialog {
   border-radius: 10px !important;
-  height: 427px !important;
+  height: 500px !important;
   display: flex;
   flex-direction: column;
 }
+.addClassDialog2 >>> .el-dialog {
+  border-radius: 10px !important;
+  height: auto !important;
+  display: flex;
+  flex-direction: column;
+}
+.addClassDialog2 >>> .el-dialog__body {
+  max-height: 400px;
+  height: 300px;
+  overflow: auto;
+  padding-top: 10px;
+}
 .addClassDialog >>> .el-dialog__body {
   flex: 1;
 }
@@ -510,5 +811,63 @@ export default {
   box-sizing: border-box;
   font-size: 14px;
 }
-
+.gradebtn{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  color: #0052d9;
+  background: #e8f3ff;
+  border-radius: 3px;
+  padding: 5px 4px;
+  box-sizing: border-box;
+  height: 30px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.edit_grade_box_item{
+  display: flex;
+  align-items: center;
+  height: 35px;
+  justify-content: space-between;
+  gap: 10px;
+}
+.edit_grade_box_item_input{
+  flex: 1;
+  font-size: 14px;
+  color: #000000;
+}
+.edit_grade_box_item_input >>> .el-input{
+  width: 100%;
+}
+.edit_grade_box_item_input >>> .el-input__inner{
+  width: 100%;
+  height: 30px;
+  border: none;
+  padding: 0;
+  color: #000000;
+  font-size: 14px;
+  border-radius: 0;
+  border-bottom: 1px solid #ccc;
+}
+.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/lang/cn.json

@@ -2031,7 +2031,8 @@
   "ssNextQ":"下一题",
   "ssUntitledCourse":"暂未命名",
   "ssPPtUpProgress":"上传进度(*)",
-  "ssBilibiliVideoSearchKeyword":"请输入关键词"
+  "ssBilibiliVideoSearchKeyword":"请输入关键词",
+  "ssEditGrade":"编辑年级"
 
 
 

src/lang/en.json

@@ -2030,5 +2030,7 @@
   "ssNextQ":"Next question",
   "ssUntitledCourse":"Untitled Course",
   "ssPPtUpProgress":"Uploading (*)",
-  "ssBilibiliVideoSearchKeyword":"Please enter a keyword"
+  "ssBilibiliVideoSearchKeyword":"Please enter a keyword",
+  "ssEditGrade":"Edit Grade"
+
 }

src/lang/hk.json

@@ -2030,7 +2030,9 @@
   "ssNextQ":"下一題",
   "ssUntitledCourse":"暫未命名",
   "ssPPtUpProgress":"上傳進度(*)",
-  "ssBilibiliVideoSearchKeyword":"請輸入關鍵詞"
+  "ssBilibiliVideoSearchKeyword":"請輸入關鍵詞",
+  "ssEditGrade":"修改年級"
+