feat:课表

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

@@ -9,49 +9,170 @@
     :footer="null"
     :default-fullscreen="true"
   >
-    <Calendar v-model:value="dataValue" @panelChange="handelChange" v-if="isLoad">
-      <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 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="getWeeks()"
+                style="width: 120px"
+                placeholder="请选择周次"
+              />
             </div>
-            <Tag color="green" style="font-size: 10px"> {{ item.className }}</Tag>
-          </div>
-          <div class="flex justify-between mt-1">
-            <div>
-              {{ item.courseName }}
+            <div v-else>
+              <span class="mr-2">日期</span>
+              <DatePicker
+                v-model:value="dataValue"
+                @change="handelDateChange"
+                style="width: 120px"
+              />
             </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>
-      </template>
-    </Calendar>
+      </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 } from 'vue';
-  import { Calendar, Tag } from 'ant-design-vue';
+  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 } from '/@/services/apis/ScheduleController';
+  import {
+    getScheduleCourseTable,
+    getScheduleCurrentWeek,
+  } 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 isLoad = ref<Boolean>(false);
   const timePeriods = ['', '上午', '下午', '晚上', ''];
   defineEmits(['success', 'register']);
 
+  const state = reactive({
+    type: '1',
+    week: '',
+    semesterId: '',
+  });
+
+  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);
-    isLoad.value = true;
   });
 
   const getPageData = async (value) => {
@@ -71,6 +192,25 @@
     await getPageData(value);
   };
 
+  const handelTypeChange = async () => {};
+
+  const handelDateChange = async () => {
+    await getPageData(dataValue.value);
+  };
+
+  const handelWeekChange = async () => {
+    await reload();
+  };
+
+  const getWeeks = () => {
+    const weeks: BasicOptionModel[] = [];
+    for (let i = 0; i < 23; i++) {
+      const week = `${i + 1}`;
+      weeks.push({ label: week, value: week });
+    }
+    return weeks;
+  };
+
   const getListData = (value: Dayjs) => {
     const current = formatToDate(value);
     const { classTimeList = [], courseList = [] } = unref(modelDataRef);
@@ -97,6 +237,10 @@
     });
     return tabList;
   };
+
+  onMounted(async () => {
+    state.week = await getScheduleCurrentWeek({});
+  });
 </script>
 
 <style scoped lang="less">