~

src/pages/tdk/wdkb.vue

@@ -0,0 +1,172 @@
+<script setup lang='ts'>
+import { user } from '~/store/user'
+
+const skzc = ref(1)
+
+const WeekMap = '一二三四五六日'
+const tableData2 = ref<any>({})
+const loading_table2 = ref(false)
+
+async function queryApi2() {
+  loading_table2.value = true
+  tableData2.value = {}
+  await request({
+    url: '/xdjx/kbgl_jskbmx/index',
+    data: { limit: 100, xjj_xm: user.real_name, skzc: skzc.value },
+  }).then((res) => {
+    const d = res.data.page_data
+    // tableData2.value = (Array.from({ length: 8 }).map((_, i) => Array.from({ length: 7 }).map((_, j) => (null))))
+
+    d.forEach((el: any) => {
+      const { skjc, skxq } = el
+      tableData2.value[skjc] = tableData2.value[skjc] ?? {}
+      tableData2.value[skjc][skxq] = el
+    })
+    // alert(JSON.stringify(tableData2.value));
+  }).catch((err) => {
+    console.error(err)
+  }).finally(() => {
+    loading_table2.value = false
+  })
+}
+
+queryApi2()
+
+const columns = Array.from({ length: 8 }).map((_, i) => ({ text: `第${i + 1}周`, value: (i + 1) }))
+const fieldValue = ref('第1周')
+
+const showPicker = ref(false)
+
+function onConfirm({ selectedOptions }) {
+  showPicker.value = false
+  fieldValue.value = selectedOptions[0].text
+  skzc.value = selectedOptions[0].value
+
+  queryApi2()
+}
+</script>
+
+<template>
+  <div class="px-2px mb-32px">
+    <van-field v-model="fieldValue" is-link readonly label="周次" placeholder="选择城市" @click="showPicker = true" />
+  </div>
+
+  <van-popup v-model:show="showPicker" round position="bottom">
+    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
+  </van-popup>
+  <div v-if="loading_table2" class="flex_center py-4">
+    <van-loading />
+  </div>
+
+  <div v-else class="my_table">
+    <div class="thead divide-x divide-hex-ccc">
+      <div v-for="i in [1, 2, 3, 4, 5, 6, 7, 8]" :key="i" class="flex_center">
+        {{ i === 1 ? '' : `周${WeekMap[(i - 2)]}` }}
+      </div>
+    </div>
+
+    <div v-loading="loading_table2" class="tbody">
+      <div v-for="(i) in 8" :key="i" class="trow divide-x divide-hex-ccc">
+        <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-4px py-2px flex flex-col"
+              :class="tableData2[i][j - 1]?.tkzt_option_k === '3' ? 'text-hex-c0c4cc' : 'text-hex-606266'"
+            >
+              <div class="flex w-full mb-3px">
+                <div class="flex-auto font-bold">
+                  {{ tableData2[i][j - 1]?.subject_name }}
+                </div>
+              </div>
+              <div class="flex-none">
+                <div>{{ tableData2[i][j - 1]?.grade_name }}</div>
+                <div>{{ tableData2[i][j - 1]?.class_name }}</div>
+              </div>
+              <div v-show="tableData2[i][j - 1]?.tkzt_option_k !== '1'" class="flex-none text-10px">
+                {{ tableData2[i][j - 1]?.tkzt }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.flex_center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.my_table {
+  font-size: 14px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .thead {
+    padding: 0 4px;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    flex: none;
+    width: 100%;
+    height: 60px;
+    // background: rgba(102, 255, 255, 0.20);
+    // color: #66FFFF;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-weight: bold;
+
+    &>div {
+      width: 12.5%;
+      height: 100%;
+    }
+  }
+
+  .tbody {
+    padding: 0 4px;
+    font-size: 14px;
+
+    flex: auto;
+    // color: #fff;
+
+    .trow {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      height: 68px;
+      border-bottom: 1px solid #ccc;
+
+      .tcell {
+        width: 12.5%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        div {
+          font-size: 12px;
+          line-height: 12px;
+        }
+      }
+
+      // &:nth-of-type(2n) {
+      //   background: rgba(102, 255, 255, 0.10);
+      // }
+
+      // &:nth-of-type(2n+1) {
+      //   background: rgba(0, 0, 0, 0.10);
+      // }
+    }
+
+  }
+}
+</style>