jingNing_H5_Mobile/src/pages/tdk/wdkb.vue

<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>