src/renderer/src/views/classManage/basicGroup.vue

@@ -9,11 +9,8 @@
       <div style="font-size: 16px;font-weight: bold;color: #000;text-align: left;margin-bottom: 5px">可用分组</div>
       <div class="groupList">
         <template v-for="(item,index) in groupList" :key="index">
-          <el-card style="width: 20%;
-          margin-right: 10px;
-          margin-bottom: 10px;
-          cursor: pointer;
-          position: relative;"
+          <el-card 
+          class="card_div"
            v-if="item.parentid === 0"
            @mouseenter="cardEnter(item,index)"
            @mouseleave="cardLeave(item,index)"
@@ -391,6 +388,7 @@ watch(()=> props.classId,()=> {
 .groupList{
   display: flex;
   flex-wrap: wrap;
+  gap:10px;
 }
 .card-row {
   font-size: 12px;
@@ -415,4 +413,10 @@ watch(()=> props.classId,()=> {
   display: flex;
   flex-direction: column;
 }
+.card_div{
+  width: calc(20% - 10px);
+  margin-bottom: 10px;
+  cursor: pointer;
+  position: relative;
+}
 </style>

src/renderer/src/views/classManage/classInfo.vue

@@ -1,14 +1,69 @@
 <template>
   <el-card style="width: 100%;height: 100%">
-    <el-descriptions :column="1">
-      <el-descriptions-item label="班级名称">{{ classInfo.caption }}</el-descriptions-item>
-      <el-descriptions-item label="教师">
+    <el-descriptions
+      class="margin-top"
+      :column="6"
+      :size="size"
+      border
+    >
+      <el-descriptions-item :span="2" :width="120">
+        <template #label>
+          <div class="cell-item">
+            <el-icon :style="iconStyle">
+              <user />
+            </el-icon>
+            班级名称
+          </div>
+        </template>
+        {{ classInfo.caption }}
+      </el-descriptions-item>
+      <el-descriptions-item :span="2" :width="120">
+        <template #label>
+          <div class="cell-item">
+            <el-icon :style="iconStyle">
+              <tickets />
+            </el-icon>
+            学段
+          </div>
+        </template>
+        {{ currentGrade }}
+      </el-descriptions-item>
+      <el-descriptions-item :span="2" :width="120">
+        <template #label>
+          <div class="cell-item">
+            <el-icon :style="iconStyle">
+              <location />
+            </el-icon>
+            年级
+          </div>
+        </template>
+        {{ currentGradeName }}
+      </el-descriptions-item>
+      <el-descriptions-item :span="2" :width="120">
+        <template #label>
+          <div class="cell-item">
+            <el-icon :style="iconStyle">
+              <iphone />
+            </el-icon>
+            学生人数
+          </div>
+        </template>
+        {{ classInfo.classstudentcount || 0 }}人
+      </el-descriptions-item>
+      <el-descriptions-item :span="4" :width="120">
+        <template #label>
+          <div class="cell-item">
+            <el-icon :style="iconStyle">
+              <office-building />
+            </el-icon>
+            教师
+          </div>
+        </template>
         <template v-if="classInfo.teacher.length > 0">
           <el-tag style="margin-right: 5px;margin-bottom: 5px;" type="primary" v-for="(item, index) in classInfo.teacher" :key="index">{{item.name}}</el-tag>
         </template>
         <template v-else>{{ classInfo.teachername }}</template>
       </el-descriptions-item>
-      <el-descriptions-item label="学生人数">{{ classInfo.classstudentcount || 0 }}人</el-descriptions-item>
     </el-descriptions>
   </el-card>
 </template>
@@ -17,7 +72,7 @@
   import {ElMessage, ElMessageBox} from "element-plus";
   import { getClassmain,listClassuser,leaveClass} from '@/api/classManage/index'
   import useUserStore from '@/store/modules/user'
-  import {reactive,onMounted,nextTick,watch} from 'vue'
+  import {reactive,onMounted,nextTick,watch,ref} from 'vue'
   import delClassDemo from '@/store/modules/delClass'
   const props = defineProps({
     classId: {
@@ -31,6 +86,36 @@
   })
   const isDelClass = delClassDemo()
   const userStore = useUserStore().user
+  // 当前年级
+  const currentGradeName = ref('')
+  // 当前学段
+  const currentGrade = ref('')
+  // 获取年级
+  const gradeDataList = reactive([
+    [
+      { label: '一年级', agekey: 1, checked: false, current: 1 },
+      { label: '二年级', agekey: 2, checked: false, current: 1 },
+      { label: '三年级', agekey: 3, checked: false, current: 1 },
+      { label: '四年级', agekey: 4, checked: false, current: 1 },
+      { label: '五年级', agekey: 5, checked: false, current: 1 },
+      { label: '六年级', agekey: 6, checked: false, current: 1 },
+    ],
+    [
+      { label: '初一', agekey: 7, checked: false, current: 2 },
+      { label: '初二', agekey: 8, checked: false, current: 2 },
+      { label: '初三', agekey: 9, checked: false, current: 2 },
+    ],
+    [
+      { label: '高一', agekey: 10, checked: false, current: 3 },
+      { label: '高二', agekey: 11, checked: false, current: 3 },
+      { label: '高三', agekey: 12, checked: false, current: 3 },
+    ],
+  ])
+  const gradeData = reactive([
+    {current:1, label:'小学',},
+    {current:2, label:'初中',},
+    {current:3, label:'高中',},
+  ])
   //删除教室
   const deleteClassRoom = () => {
     ElMessageBox.alert('确认删除该班级？', {
@@ -53,6 +138,14 @@
     if(props.classId){
       getClassmain(props.classId).then(response => {
         Object.assign(classInfo,response.data)
+        //先把二级数组转化为一级数组，用于筛选
+        const flatGradeDataList = gradeDataList.flat();
+        //学段和年级的回显处理
+        const currentIndex = flatGradeDataList.findIndex(item => item.agekey === Number(response.data.agekey));
+        currentGradeName.value = flatGradeDataList[currentIndex].label
+        const current = flatGradeDataList[currentIndex].current
+        currentGrade.value = gradeData.find(item => item.current === current).label
+        console.log(classInfo,'classInfo');
         listClassuser({classid:props.classId,pageSize:100}).then(res => {
           classInfo.teacher = res.rows.filter(item => item.inrole === 'teacher')
           classInfo.student = res.rows.filter(item => item.inrole === 'student')
@@ -71,5 +164,14 @@
 </script>
 
 <style scoped>
-
+.el-descriptions {
+  margin-top: 20px;
+}
+.cell-item {
+  display: flex;
+  align-items: center;
+}
+.margin-top {
+  margin-top: 20px;
+}
 </style>