|
@@ -1,25 +1,176 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { RadioGroup, Radio, Divider, TypographyTitle, RadioButton } from 'ant-design-vue';
|
|
|
+ import FullCalendar from '@fullcalendar/vue3';
|
|
|
+ import dayGridPlugin from '@fullcalendar/daygrid';
|
|
|
+ import { CalendarOptions } from '@fullcalendar/core';
|
|
|
+ import interactionPlugin from '@fullcalendar/interaction';
|
|
|
+ import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+ import { getQueryByTenantId, editDay } from './teachorNoteach.api';
|
|
|
+ import { useShopInfoStore } from '/@/store/modules/shopInfo';
|
|
|
+ import { h, ref, onUnmounted } from 'vue';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ const { createWarningModal, createMessage } = useMessage();
|
|
|
+ const isChangeDay = ref(0);
|
|
|
+ const changeDay = ref(1);
|
|
|
+ const today = new Date();
|
|
|
+ const nonTeachingDays = ref<Date[]>([]);
|
|
|
+ const fullCalendarRef = ref();
|
|
|
+ const TeachingData = ref<{ day: string; id: string; isTeaching: number; orgCode: string }[]>([]);
|
|
|
+ const calendarOptions = ref<CalendarOptions>({
|
|
|
+ plugins: [dayGridPlugin, interactionPlugin],
|
|
|
+ initialView: 'dayGridMonth',
|
|
|
+ events: [{ title: '今天', start: new Date() }],
|
|
|
+ selectable: true,
|
|
|
+ selectMirror: true,
|
|
|
+ headerToolbar: {
|
|
|
+ left: '',
|
|
|
+ right: '',
|
|
|
+ },
|
|
|
+ locale: 'zh-cn',
|
|
|
+ dayCellClassNames: (arg) => {
|
|
|
+ const { date } = arg;
|
|
|
+ const day = date.getDay();
|
|
|
+ if (day === 0 || day === 6) {
|
|
|
+ return ['weekend-cell'];
|
|
|
+ }
|
|
|
+ // const isPast = date < today && !dayjs(date).isSame(dayjs(today), 'day');
|
|
|
+ if (isPast(date)) {
|
|
|
+ return ['past-day'];
|
|
|
+ }
|
|
|
+ // 判断是否为非教学日
|
|
|
+ // const isNonTeachingDay = nonTeachingDays.value.some((d) => dayjs(d).isSame(dayjs(date), 'day'));
|
|
|
+ if (isNonTeachingDay(date)) {
|
|
|
+ return ['non-teaching-day'];
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ select: handleClick,
|
|
|
+ });
|
|
|
+
|
|
|
+ function handleClick(selectInfo) {
|
|
|
+ const clickedDate = selectInfo.start;
|
|
|
+ const day = dayjs(clickedDate).day();
|
|
|
+ if (isPast(clickedDate) || day == 0 || day == 6) {
|
|
|
+ //今天之前的日期不允许点击//或者是周末也不允许点击
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ createWarningModal({
|
|
|
+ title: '日期类型修改',
|
|
|
+ okText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ content() {
|
|
|
+ const arr = [h(Radio, { value: 0 }, () => '教学日'), h(Radio, { value: 1 }, () => '非教学日')];
|
|
|
+ return h(
|
|
|
+ RadioGroup,
|
|
|
+ {
|
|
|
+ value: isChangeDay.value,
|
|
|
+ onChange(e) {
|
|
|
+ isChangeDay.value = e.target.value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ () => arr
|
|
|
+ );
|
|
|
+ },
|
|
|
+ okCancel: true,
|
|
|
+ onOk: async () => {
|
|
|
+ const findData = TeachingData.value.find((it) => dayjs(it.day).valueOf() == dayjs(clickedDate).valueOf());
|
|
|
+ if (!findData) return createMessage.error('添加失败,请重新选择');
|
|
|
+ await editDay({ isTeaching: isChangeDay.value, id: findData.id });
|
|
|
+ getTimeDay();
|
|
|
+ fullCalendarRef.value.getApi().render();
|
|
|
+
|
|
|
+ if (isChangeDay.value == 2) {
|
|
|
+ nonTeachingDays.value.push(clickedDate);
|
|
|
+ } else {
|
|
|
+ const index = findNonTeachingDayIndex(clickedDate);
|
|
|
+ if (index > -1) {
|
|
|
+ nonTeachingDays.value.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onCancel: () => {},
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function isNonTeachingDay(date: Date): boolean {
|
|
|
+ // 判断日期是否为非教学日
|
|
|
+ return nonTeachingDays.value.some((d) => dayjs(d).isSame(dayjs(date), 'day'));
|
|
|
+ }
|
|
|
+ function findNonTeachingDayIndex(clickedDate: Date): number {
|
|
|
+ // 找到非教学日在数组中的索引
|
|
|
+ return nonTeachingDays.value.findIndex((d) => dayjs(d).isSame(dayjs(clickedDate), 'day'));
|
|
|
+ }
|
|
|
+ function isPast(date) {
|
|
|
+ return date < today && !dayjs(date).isSame(dayjs(today), 'day');
|
|
|
+ }
|
|
|
+ function handleChangeDay() {
|
|
|
+ if (changeDay.value == 1) {
|
|
|
+ fullCalendarRef.value.getApi().today();
|
|
|
+ } else {
|
|
|
+ fullCalendarRef.value.getApi().next();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ async function getTimeDay() {
|
|
|
+ const res = await getQueryByTenantId({
|
|
|
+ tenantId: useShopInfoStore().currentId,
|
|
|
+ });
|
|
|
+ TeachingData.value = res;
|
|
|
+ nonTeachingDays.value = TeachingData.value.filter((it) => it.isTeaching).map((it) => new Date(it.day));
|
|
|
+ fullCalendarRef.value.getApi().render();
|
|
|
+ }
|
|
|
+
|
|
|
+ async function getData() {
|
|
|
+ await useShopInfoStore().getCurrentDep();
|
|
|
+ getTimeDay();
|
|
|
+ }
|
|
|
+ getData();
|
|
|
+ onUnmounted(() => {
|
|
|
+ useShopInfoStore().isShowSelect = false;
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
<template>
|
|
|
- <div class="w-full bg-white p-8 customer flex justify-center items-center">
|
|
|
- <div class="w-700px">
|
|
|
- <Calendar :fullscreen="false">
|
|
|
- <!-- <template #dateFullCellRender="{ current: time }">
|
|
|
- {{ dayjs(time).date() }}
|
|
|
- </template> -->
|
|
|
- <template #headerRender="{ value: current, type, onChange, onTypeChange }"> </template>
|
|
|
- </Calendar>
|
|
|
+ <div class="px-15 py-3 bg-white">
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <TypographyTitle :level="3"> {{ changeDay == 1 ? dayjs().format('YYYY-MM') : dayjs().add(1, 'month').format('YYYY-MM') }} </TypographyTitle>
|
|
|
+ <RadioGroup v-model:value="changeDay" @change="handleChangeDay">
|
|
|
+ <RadioButton :value="1">今天 </RadioButton>
|
|
|
+ <RadioButton :value="2">下一个月 </RadioButton>
|
|
|
+ </RadioGroup>
|
|
|
+ </div>
|
|
|
+ <Divider></Divider>
|
|
|
+ <div class="flex items-center justify-center customer">
|
|
|
+ <div class="w-70%">
|
|
|
+ <FullCalendar :options="calendarOptions" ref="fullCalendarRef"> </FullCalendar>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="mt-5 w-full text-right"> 红色数字为非教学日,蓝色数字为教学日。 </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts">
|
|
|
- import { Calendar } from 'ant-design-vue';
|
|
|
- import dayjs from 'dayjs';
|
|
|
-</script>
|
|
|
-
|
|
|
-<!-- <style scoped lang="less">
|
|
|
+<style lang="less" scoped>
|
|
|
.customer {
|
|
|
- :deep(.ant-picker-content thead tr th) {
|
|
|
- font-size: 28px;
|
|
|
+ :deep(.weekend-cell) {
|
|
|
+ .fc-daygrid-day-number {
|
|
|
+ color: red !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.past-day) {
|
|
|
+ .fc-daygrid-day-number {
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.non-teaching-day) {
|
|
|
+ .fc-daygrid-day-number {
|
|
|
+ color: red !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.fc-col-header) {
|
|
|
+ .fc-day-sat,
|
|
|
+ .fc-day-sun {
|
|
|
+ .fc-col-header-cell-cushion {
|
|
|
+ color: red !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-</style> -->
|
|
|
+</style>
|