build: 教师管理，表格调整

src/api/school/types.ts

@@ -72,7 +72,7 @@ export interface TeacherItem {
   // 折叠面板使用
   active: number[];
   // 教师的设备
-  equipment: EquipmentShown[];
+  equipment: TeacherEquipment;
   // 负责班级
   grades: GradeList[];
   // 表格行数
@@ -100,17 +100,3 @@ export interface Equipment {
   // 设备号
   sn: string;
 }
-
-/**
- * 设备页面展示排列
- */
-export interface EquipmentShown {
-  AI: string;
-  SW: string;
-  KL: string;
-  PP: string;
-  SU: string;
-  SC: string;
-  UF: string;
-  JM: string;
-}

src/views/teacher/index.vue

@@ -2,12 +2,7 @@
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
 import { CaretBottom } from "@element-plus/icons-vue";
-import {
-  EquipmentShown,
-  TeacherEquipment,
-  TeacherItem,
-  TeacherList,
-} from "@/api/school/types";
+import { TeacherItem, TeacherList } from "@/api/school/types";
 import {
   getTeacherEquipment,
   getTeacherGrade,
@@ -51,46 +46,7 @@ async function getGradeAndEquipment(teacher: TeacherItem) {
       if (!teacher.equipment || Object.keys(teacher.equipment).length == 0) {
         // 获取教师设备
         getTeacherEquipment(teacher.id).then(({ data }) => {
-          const temp: TeacherEquipment = data;
-          if (temp.AI && temp.AI.length > teacher.lines) {
-            teacher.lines = temp.AI.length;
-          }
-          if (temp.SW && temp.SW.length > teacher.lines) {
-            teacher.lines = temp.SW.length;
-          }
-          if (temp.KL && temp.KL.length > teacher.lines) {
-            teacher.lines = temp.KL.length;
-          }
-          if (temp.PP && temp.PP.length > teacher.lines) {
-            teacher.lines = temp.PP.length;
-          }
-          if (temp.SU && temp.SU.length > teacher.lines) {
-            teacher.lines = temp.SU.length;
-          }
-          if (temp.SC && temp.SC.length > teacher.lines) {
-            teacher.lines = temp.SC.length;
-          }
-          if (temp.UF && temp.UF.length > teacher.lines) {
-            teacher.lines = temp.UF.length;
-          }
-          if (temp.JM && temp.JM.length > teacher.lines) {
-            teacher.lines = temp.JM.length;
-          }
-          const equipments: EquipmentShown[] = [];
-          for (let i = 0; i < teacher.lines; i++) {
-            let item: EquipmentShown = {
-              AI: temp.AI[i]?.sn || "",
-              SW: temp.SW[i]?.sn || "",
-              KL: temp.KL[i]?.sn || "",
-              PP: temp.PP[i]?.sn || "",
-              SU: temp.SU[i]?.sn || "",
-              SC: temp.SC[i]?.sn || "",
-              UF: temp.UF[i]?.sn || "",
-              JM: temp.JM[i]?.sn || "",
-            };
-            equipments.push(item);
-          }
-          teacher.equipment = equipments;
+          teacher.equipment = data;
         });
       }
     })
@@ -166,25 +122,113 @@ watch(
               </span>
             </div>
           </template>
-          <el-row>
+          <el-row class="table-container">
             <el-col :span="19">
-              <el-table :data="teacher.equipment" style="width: 100%">
-                <el-table-column
-                  prop="AI"
-                  label="水母星球脑机"
-                  align="center"
-                />
-                <el-table-column prop="SW" label="智脑水舞" align="center" />
-                <el-table-column prop="KL" label="智脑恐龙" align="center" />
-                <el-table-column prop="PP" label="智脑碰碰车" align="center" />
-                <el-table-column prop="UF" label="智脑UFO" align="center" />
-                <el-table-column prop="SU" label="智脑SUV" align="center" />
-                <el-table-column prop="SC" label="智脑赛车" align="center" />
-                <el-table-column prop="JM" label="智脑积木" align="center" />
-              </el-table>
+              <el-row>
+                <el-col :span="3">
+                  <el-table
+                    :data="teacher.equipment ? teacher.equipment.AI : []"
+                    empty-text="-"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      prop="sn"
+                      label="水母星球脑机"
+                      align="center"
+                    />
+                  </el-table>
+                </el-col>
+                <el-col :span="3">
+                  <el-table
+                    :data="teacher.equipment ? teacher.equipment.SW : []"
+                    empty-text="-"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      prop="sn"
+                      label="智脑水舞"
+                      align="center"
+                    />
+                  </el-table>
+                </el-col>
+                <el-col :span="3">
+                  <el-table
+                    :data="teacher.equipment ? teacher.equipment.KL : []"
+                    empty-text="-"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      prop="sn"
+                      label="智脑恐龙"
+                      align="center"
+                    />
+                  </el-table>
+                </el-col>
+                <el-col :span="3">
+                  <el-table
+                    :data="teacher.equipment ? teacher.equipment.PP : []"
+                    empty-text="-"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      prop="sn"
+                      label="智脑碰碰车"
+                      align="center"
+                    />
+                  </el-table>
+                </el-col>
+                <el-col :span="3">
+                  <el-table
+                    :data="teacher.equipment ? teacher.equipment.UF : []"
+                    empty-text="-"
+                    style="width: 100%"
+                  >
+                    <el-table-column prop="sn" label="智脑UFO" align="center" />
+                  </el-table>
+                </el-col>
+                <el-col :span="3">
+                  <el-table
+                    :data="teacher.equipment ? teacher.equipment.SU : []"
+                    empty-text="-"
+                    style="width: 100%"
+                  >
+                    <el-table-column prop="sn" label="智脑SUV" align="center" />
+                  </el-table>
+                </el-col>
+                <el-col :span="3">
+                  <el-table
+                    :data="teacher.equipment ? teacher.equipment.SC : []"
+                    empty-text="-"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      prop="sn"
+                      label="智脑赛车"
+                      align="center"
+                    />
+                  </el-table>
+                </el-col>
+                <el-col :span="3">
+                  <el-table
+                    :data="teacher.equipment ? teacher.equipment.JM : []"
+                    empty-text="-"
+                    style="width: 100%"
+                  >
+                    <el-table-column
+                      prop="sn"
+                      label="智脑积木"
+                      align="center"
+                    />
+                  </el-table>
+                </el-col>
+              </el-row>
             </el-col>
             <el-col :span="5" class="grade">
-              <el-table :data="teacher.grades" style="width: 100%">
+              <el-table
+                :data="teacher.grades"
+                empty-text="-"
+                style="width: 100%"
+              >
                 <el-table-column prop="name" label="负责班级" align="center" />
               </el-table>
             </el-col>
@@ -260,6 +304,17 @@ watch(
     display: none;
   }
 }
+.table-container {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoAQMAAAAFeAI0AAAABlBMVEUAAADg5vHOG/+PAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjoC5oAAAA0ACB9zOkNgAAAABJRU5ErkJggg==")
+    repeat;
+}
+:deep(.el-table__empty-block),
+:deep(.el-table__empty-text) {
+  height: 40px !important;
+  line-height: 40px !important;
+  min-height: 40px !important;
+}
+
 :deep(.el-table th.el-table__cell) {
   background: #e9ebee;
 }