web/src/views/educational/timetable/index.vue

<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <div style="display: flex; align-items: center; flex: 1">
          <div style="flex: 1; text-align: center; font-size: 14px; font-weight: bold">
            <span style="margin-right: 16px">{{ tableText.semesterName }}</span>
            <span style="margin-right: 16px">{{ tableText.name }}</span>
            <span style="margin-right: 16px">{{ tableText.week }}</span>
            <span>课程表</span>
          </div>
          <div style="margin-right: 16px"> 总课时：{{ tableText.classHour }}</div>
          <a-button type="primary" @click="handleExport()">导出</a-button>
        </div>
      </template>
    </BasicTable>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable } from '/@/components/Table';
  import { tableColumns } from './data.config';
  import {
    getScheduleCourseTable,
    getScheduleWeekList,
    postScheduleScheduleWeekExportQuery,
  } from '/@/services/apis/ScheduleController';
  import { requestMagicApi } from '/@/api/magicApi';
  import { BasicOptionModel } from '/@/api/model/baseModel';
  import { orderBy } from 'lodash-es';
  import { downloadByData } from '/@/utils/file/download';
  import { formatToDate, formatToDateTime } from '/@/utils/dateUtil';

  const tableText = reactive({
    semesterName: '',
    name: '',
    week: '',
    classHour: '',
  });
  const reloadApi = async (data) => {
    const resData = await getScheduleCourseTable(data);

    const { classTimeList, courseList } = resData;
    const formData = getForm().getFieldsValue();

    tableText.semesterName = resData.semesterName;
    tableText.name = formData.courseType === 'teacher' ? resData.teacherName : resData.className;
    tableText.week = resData.week;
    tableText.classHour = resData.classHour;

    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:
              formData.courseType === 'teacher'
                ? weekFilter[0].className || '-'
                : weekFilter[0].teacherName || '-',
          };
        } 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 tabTitle = ref<string>('课表');

  const [registerTable, { getForm }] = useTable({
    api: reloadApi,
    title: tabTitle,
    rowKey: 'id',
    columns: tableColumns,
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: 'semesterId',
          label: '学期',
          component: 'ApiSelect',
          componentProps: {
            getPopupContainer: () => document.body,
            api: requestMagicApi,
            params: { url: 'baseData/semester/option' },
          },
          required: true,
          colProps: { span: 8 },
        },
        {
          field: 'courseType',
          label: '课表类型',
          component: 'Select',
          required: true,
          colProps: { span: 8 },
          componentProps: ({ formModel }) => {
            return {
              getPopupContainer: () => document.body,
              options: [
                { label: '教职工课表', value: 'teacher' },
                { label: '班级课表', value: 'class' },
              ],
              onChange: (value) => {
                formModel.teacherName = '';
                formModel.gradeId = '';
                formModel.majorSetId = '';
                formModel.classId = '';
                if (value === 'teacher') {
                  tabTitle.value = '教职工课表';
                }
                if (value === 'class') {
                  tabTitle.value = '班级课表';
                }
              },
            };
          },
        },
        {
          field: 'week',
          label: '周次',
          component: 'ApiSelect',
          required: true,
          colProps: { span: 8 },
          componentProps: {
            api: async () => {
              const data = await getScheduleWeekList({});

              return data.map((item) => {
                return {
                  label: `${item.weekCn}(${formatToDate(item.startDate, 'MM.DD')}~${formatToDate(
                    item.endDate,
                    'MM.DD',
                  )})`,
                  value: item.week,
                };
              });
            },
            getPopupContainer: () => document.body,
          },
        },
        {
          field: 'gradeId',
          label: '年级',
          component: 'ApiSelect',
          componentProps: ({ formActionType }) => {
            return {
              getPopupContainer: () => document.body,
              api: requestMagicApi,
              params: { url: 'baseData/grade/option' },
              showSearch: true,
              filterOption: (input: string, option: any) => {
                return (
                  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                  option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
              },
              onChange: async (vlaue) => {
                const { getFieldsValue, updateSchema } = formActionType;
                const formData = getFieldsValue();
                const classData = await requestMagicApi({
                  url: 'educational/class-by',
                  query: { grade_id: vlaue, major_set_id: formData.majorSetId },
                } as any);
                updateSchema({
                  field: 'classId',
                  componentProps: {
                    getPopupContainer: () => document.body,
                    options: classData,
                  },
                });
              },
            };
          },
          colProps: { span: 8 },
          ifShow: ({ values }) => {
            return values.courseType === 'class';
          },
        },
        {
          field: 'majorSetId',
          label: '专业',
          component: 'ApiSelect',
          required: true,
          componentProps: ({ formActionType }) => {
            return {
              getPopupContainer: () => document.body,
              api: requestMagicApi,
              params: { url: `/major/majorset/option` },
              showSearch: true,
              filterOption: (input: string, option: any) => {
                return (
                  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                  option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
              },
              onChange: async (vlaue) => {
                const { getFieldsValue, updateSchema } = formActionType;
                const formData = getFieldsValue();
                const classData = await requestMagicApi({
                  url: 'educational/class-by',
                  query: { grade_id: formData.gradeId, major_set_id: vlaue },
                } as any);
                updateSchema({
                  field: 'classId',
                  componentProps: {
                    getPopupContainer: () => document.body,
                    options: classData,
                  },
                });
              },
            };
          },
          colProps: { span: 8 },
          ifShow: ({ values }) => {
            return values.courseType === 'class';
          },
        },
        {
          field: 'classId',
          label: '班级',
          component: 'Select',
          componentProps: ({ formActionType }) => {
            const { getFieldsValue } = formActionType;
            const formData = getFieldsValue();
            return {
              api: requestMagicApi,
              getPopupContainer: () => document.body,
              params: {
                url: 'educational/class-by',
                query: { grade_id: formData.gradeId, major_set_id: formData.majorSetId },
              },
              showSearch: true,
              filterOption: (input: string, option: any) => {
                return (
                  option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                  option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
              },
            };
          },
          required: true,
          colProps: { span: 8 },
          ifShow: ({ values }) => {
            return values.courseType === 'class';
          },
        },
        {
          field: 'teacherName',
          label: '姓名/工号',
          component: 'Input',
          required: true,
          colProps: { span: 8 },
          ifShow: ({ values }) => {
            return values.courseType === 'teacher';
          },
        },
      ],
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    immediate: false,
    canResize: true,
    showIndexColumn: false,
    pagination: false,
  });

  const handleExport = async () => {
    const postData = getForm().getFieldsValue();
    const data = await postScheduleScheduleWeekExportQuery(postData);
    downloadByData(data.data, `周课表${formatToDateTime(new Date(), 'YYYYMMDDHHmmss')}.xlsx`);
  };

  onMounted(async () => {});
</script>

<style scoped lang="less"></style>