测试

src/pages/xdjx/tdkgl/wdtdk.vue

@@ -331,7 +331,7 @@ const queryApi2 = async () => {
     data: { limit: 100, xjj_zgbh: user.user_no, ...queryForm_Data2.value }
   }).then(res => {
     const d = res.data.page_data
-    tableData2.value = {}
+    // tableData2.value = {}
     // tableData2.value = (Array.from({ length: 8 }).map((_, i) => Array.from({ length: 7 }).map((_, j) => (null))))
 
     d.forEach((el: any) => {
@@ -339,7 +339,9 @@ const queryApi2 = async () => {
       tableData2.value[skjc] = tableData2.value[skjc] ?? {}
       tableData2.value[skjc][skxq] = el
     });
-    // console.log('tableData2 :>> ', tableData2.value);
+    // alert(JSON.stringify(tableData2.value));
+  }).catch(err => {
+    console.error(err)
   })
 }
 
@@ -387,26 +389,28 @@ const handleTargetChange = (item: any) => {
         </el-form-item>
       </el-form>
       <div class="divider"></div>
+      <!-- <div>{{ tableData2 }}</div> -->
       <div class="my_table">
-        <div class="thead">
-          <div v-for="i in 7" :key="i">
-            {{ `星期${WeekMap.at(i - 1)}` }}
+        <div class="thead divide-x">
+          <div v-for="i in 8" :key="i" class="flex_center">
+            {{ i === 1 ? '' : `星期${WeekMap.at(i - 2)}` }}
           </div>
         </div>
 
         <div class="tbody">
-          <div v-for="(i) in 8" :key="i" class="trow">
-            <div v-for="j in 8" :key="j" class="tcell">
-              <div v-if="tableData2[i - 1][j - 1]">
-                <div class="h-40px w-full"
-                  :class="tableData2[i - 1][j - 1]?.tkzt_option_k === '3' ? 'text-hex-909099' : 'text-dark-900'">
+          <div v-for="(i) in 8" :key="i" class="trow divide-x">
+            <div v-for="j in 8" :key="j" class="tcell h-full">
+              <div v-if="j === 1" class="w-full h-full flex_center">第{{ i }}节</div>
+              <div v-else-if="tableData2?.[i]?.[j - 1]">
+                <div class="h-full px-4 py-2 flex flex-col"
+                  :class="tableData2[i][j - 1]?.tkzt_option_k === '3' ? 'text-hex-c0c4cc' : 'text-hex-606266'">
                   <div class="flex w-full">
-                    <div class="flex-auto">{{ tableData2[i - 1][j - 1]?.lesson_name }}</div>
-                    <div class="flex-none text-sm" v-show="tableData2[i - 1][j - 1]?.tkzt_option_k !== '1'">
-                      {{ tableData2[i - 1][j - 1]?.tkzt }}
+                    <div class="flex-auto">{{ tableData2[i][j - 1]?.lesson_name }}</div>
+                    <div class="flex-none text-sm" v-show="tableData2[i][j - 1]?.tkzt_option_k !== '1'">
+                      {{ tableData2[i][j - 1]?.tkzt }}
                     </div>
                   </div>
-                  <div>{{ tableData2[i - 1][j - 1]?.class_name }}</div>
+                  <div>{{ tableData2[i][j - 1]?.class_name }}</div>
                 </div>
               </div>
 
@@ -416,18 +420,18 @@ const handleTargetChange = (item: any) => {
       </div>
       <!-- <el-table :data="tableData2" border>
         <el-table-column type="index" label="" width="60" />
-        <el-table-column v-for="i in 7" :key="i" :label="`星期${WeekMap.at(i - 1)}`" width="auto" show-overflow-tooltip>
+        <el-table-column v-for="i in 7" :key="i" :label="`星期${WeekMap.at(i)}`" width="auto" show-overflow-tooltip>
           <template #default="scope">
             <div class="h-40px w-full"
-              :class="scope.row[i - 1]?.tkzt_option_k === '3' ? 'text-hex-909099' : 'text-dark-900'">
+              :class="scope.row[i]?.tkzt_option_k === '3' ? 'text-hex-909099' : 'text-dark-900'">
               <div class="flex w-full">
-                <div class="flex-auto">{{ scope.row[i - 1]?.lesson_name }}</div>
-                <!~~ v-show="scope.row[i - 1]?.tkzt_option_k !== '1'" ~~>
-                <div class="flex-none text-sm" v-show="scope.row[i - 1]?.tkzt_option_k !== '1'">{{ scope.row[i -
+                <div class="flex-auto">{{ scope.row[i]?.lesson_name }}</div>
+                <!~~ <!~~ v-show="scope.row[i]?.tkzt_option_k !== '1'" ~~> ~~>
+                <div class="flex-none text-sm" v-show="scope.row[i]?.tkzt_option_k !== '1'">{{ scope.row[i -
                     1]?.tkzt
                 }}</div>
               </div>
-              <div>{{ scope.row[i - 1]?.class_name }}</div>
+              <div>{{ scope.row[i]?.class_name }}</div>
             </div>
           </template>
         </el-table-column>
@@ -736,3 +740,66 @@ lesson_name].join(' / ')">
   </el-tabs>
 
 </template>
+
+
+<style lang="scss" scoped>
+.my_table {
+  color: var(--el-text-color-regular);
+
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .thead {
+    padding: 0 0.25rem;
+    border-top: 1px solid var(--el-border-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    flex: none;
+    width: 100%;
+    height: 3.25rem;
+    // background: rgba(102, 255, 255, 0.20);
+    // color: #66FFFF;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    &>div {
+      width: 12.5%;
+      height: 100%;
+    }
+  }
+
+  .tbody {
+    padding: 0 0.25rem;
+    font-size: 14px;
+
+    flex: auto;
+    // color: #fff;
+
+    .trow {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      height: 4rem;
+      border-bottom: 1px solid var(--el-border-color-lighter);
+
+      .tcell {
+        width: 12.5%;
+        height: 100%;
+      }
+
+
+      // &:nth-of-type(2n) {
+      //   background: rgba(102, 255, 255, 0.10);
+      // }
+
+      // &:nth-of-type(2n+1) {
+      //   background: rgba(0, 0, 0, 0.10);
+      // }
+    }
+
+  }
+}
+</style>