web/src/views/sys/door/components/timetable/calendar.vue

<template>
  <BasicModal
    :destroyOnClose="true"
    :maskClosable="false"
    v-bind="$attrs"
    @register="registerModal"
    title="我的课表"
    :width="1002"
    :footer="null"
    :default-fullscreen="true"
  >
    <div class="h-full">
      <div style="height: 34px">
        <div class="flex justify-end">
          <div>
            <div v-if="state.type === '1'">
              <span class="mr-2">周次</span>
              <Select
                v-model:value="state.week"
                @change="handelWeekChange"
                :options="state.weekList"
                style="width: 180px"
                placeholder="请选择周次"
              />
            </div>
            <div v-else>
              <span class="mr-2">日期</span>
              <DatePicker
                v-model:value="dataValue"
                @change="handelDateChange"
                style="width: 180px"
              />
            </div>
          </div>
          <div class="ml-4">
            <Radio.Group v-model:value="state.type" buttonStyle="solid" @change="handelTypeChange">
              <Radio.Button value="1">周视图</Radio.Button>
              <Radio.Button value="2">月视图</Radio.Button>
            </Radio.Group>
          </div>
        </div>
      </div>
      <div style="height: calc(100vh - 34px)">
        <BasicTable @register="registerTable" v-show="state.type === '1'" />
        <Calendar v-model:value="dataValue" @panelChange="handelChange" v-show="state.type === '2'">
          <template #headerRender></template>
          <template #dateCellRender="{ current }">
            <div class="c-item" v-for="(item, index) in getListData(current)" :key="index">
              <div class="flex justify-between items-center">
                <div class="flex">
                  <div>
                    {{ item.timeNumber }}
                  </div>
                  <div class="c-item-time">
                    {{ item.time }}
                  </div>
                </div>
                <Tag color="green" style="font-size: 10px"> {{ item.className }}</Tag>
              </div>
              <div class="flex justify-between mt-1">
                <div>
                  {{ item.courseName }}
                </div>
              </div>
            </div>
          </template>
        </Calendar>
      </div>
    </div>
  </BasicModal>
</template>
<script setup lang="ts">
  import { ref, unref, reactive, onMounted } from 'vue';
  import { Calendar, Tag, Radio, DatePicker, Select } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Dayjs } from 'dayjs';
  import { dateUtil, formatToDate } from '/@/utils/dateUtil';
  import {
    getScheduleCourseTable,
    getScheduleCurrentWeek,
    getScheduleWeekList,
  } from '/@/services/apis/ScheduleController';
  import { BasicOptionModel } from '/@/api/model/baseModel';
  import { BasicTable, useTable } from '/@/components/Table';
  import { tableColumns } from '/@/views/educational/timetable/data.config';
  import { orderBy } from 'lodash-es';

  const modelDataRef = ref<Recordable[]>([]);

  const dataValue = ref<Dayjs>();
  const timePeriods = ['', '上午', '下午', '晚上', ''];
  defineEmits(['success', 'register']);

  const state = reactive({
    type: '1',
    week: '',
    semesterId: '',
    weekList: [],
  });

  const reloadApi = async () => {
    const resData = await getScheduleCourseTable({
      week: state.week,
    });

    const { classTimeList, courseList } = resData;

    const timePeriods = ['', '上午', '下午', '晚上', ''];

    const displayData: Recordable[] = [];
    let timePeriod = -1;

    orderBy(classTimeList, ['timePeriod', 'number'], ['asc', 'asc']).forEach((item) => {
      let rowSpan = 0;
      if (timePeriod !== item.timePeriod) {
        timePeriod = item.timePeriod;
        rowSpan = classTimeList.filter((row) => row.timePeriod === timePeriod).length;
      }

      const getWeekObj = (weeks) => {
        const weekFilter = courseList.filter(
          (row) =>
            Number(row.timePeriod) === item.timePeriod &&
            Number(row.timeNumber) === item.number &&
            row.weeks === weeks,
        );
        if (weekFilter && weekFilter.length > 0) {
          return {
            siteName: weekFilter[0].classroomName || '-',
            courseName: weekFilter[0].courseName || '-',
            name: weekFilter[0].className || '1',
          };
        } else {
          return {};
        }
      };

      let displayItem: Recordable = {
        rowSpan: rowSpan,
        timePeriod: timePeriods[item.timePeriod],
        timeNumber: {
          title: `${item.shortName}`,
          time: `${item.summerStartTime}-${item.summerEndTime}`,
        },
        week1: getWeekObj(1),
        week2: getWeekObj(2),
        week3: getWeekObj(3),
        week4: getWeekObj(4),
        week5: getWeekObj(5),
        week6: getWeekObj(6),
        week7: getWeekObj(7),
      };

      displayData.push(displayItem);
    });

    return displayData;
  };

  const [registerTable, { reload }] = useTable({
    api: reloadApi,
    title: '',
    rowKey: 'id',
    columns: tableColumns,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    immediate: false,
    canResize: true,
    showIndexColumn: false,
    pagination: false,
  });

  const [registerModal, { setModalProps }] = useModalInner(async () => {
    dataValue.value = dateUtil(new Date());
    reload();
    await getPageData(dataValue.value);
  });

  const getPageData = async (value) => {
    setModalProps({ confirmLoading: true });
    const startDate = dateUtil(value).startOf('month').format('YYYY-MM-DD') + ' 00:00:00';
    const endDate = dateUtil(value).endOf('month').format('YYYY-MM-DD') + ' 23:59:59';

    modelDataRef.value = await getScheduleCourseTable({
      startDate: startDate,
      endDate: endDate,
    });

    setModalProps({ confirmLoading: false });
  };

  const handelChange = async (value: Dayjs) => {
    await getPageData(value);
  };

  const handelTypeChange = async () => {};

  const handelDateChange = async () => {
    await getPageData(dataValue.value);
  };

  const handelWeekChange = async () => {
    await reload();
  };

  const getWeeks = async () => {
    const data = await getScheduleWeekList({});

    state.weekList = data.map((item) => {
      return {
        label: `${item.weekCn}(${formatToDate(item.startDate, 'MM.DD')}~${formatToDate(
          item.endDate,
          'MM.DD',
        )})`,
        value: item.week,
      };
    });
  };

  const getListData = (value: Dayjs) => {
    const current = formatToDate(value);
    const { classTimeList = [], courseList = [] } = unref(modelDataRef);
    const itemFilter = courseList.filter((item) => item.scheduleDate === current);

    const tabList: Recordable[] = [];

    itemFilter.forEach((item) => {
      const classTimeFilter = classTimeList.filter(
        (row) =>
          row.timePeriod === Number(item.timePeriod) && row.number === Number(item.timeNumber),
      );

      const classTimeItem = classTimeFilter.length > 0 ? classTimeFilter[0] : {};

      tabList.push({
        className: item.className,
        classroomName: item.classroomName || '-',
        courseName: item.courseName,
        timePeriod: timePeriods[Number(item.timePeriod)],
        timeNumber: `${classTimeItem.shortName}`,
        time: `${classTimeItem?.summerStartTime}~${classTimeItem?.summerEndTime}`,
      });
    });
    return tabList;
  };

  onMounted(async () => {
    state.week = await getScheduleCurrentWeek({});
    await getWeeks();
  });
</script>

<style scoped lang="less">
  .c-item {
    border-radius: 6px;
    background: linear-gradient(135deg, rgb(247, 248, 251) 0%, rgb(247, 248, 251) 100%);
    padding: 4px;
    margin-bottom: 4px;
    color: rgb(127, 127, 128);
    font-size: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    &-time {
      color: rgb(22, 100, 255);
    }

    &-tag {
      border-radius: 8px;
      background: rgb(22, 100, 255);
      color: #fff;
      padding: 2px 6px;
    }
  }
</style>