完善教师课表和班级课表
This commit is contained in:
parent
26a32b8da5
commit
68142cf67f
@ -181,6 +181,25 @@ export const xxtsSaveByJlzxParamsApi = async (params: { jlId: string }) => {
|
|||||||
return await post("/api/xxts/saveByJlzxParams", params);
|
return await post("/api/xxts/saveByJlzxParams", params);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前学期和周次
|
||||||
|
*/
|
||||||
|
export const gzlGetDqXqAndZcApi = async () => {
|
||||||
|
return await get("/api/gzl/getDqXqAndZc");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前学期排课公共配置(排课设置、排课周次、排课时间)
|
||||||
|
*/
|
||||||
|
export const dqpkApi = async () => {
|
||||||
|
return await get("/mobile/jz/pkkb/dqpk" );
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 单日的排课课表
|
||||||
|
*/
|
||||||
|
export const drpkkbApi = async (params: any) => {
|
||||||
|
return await get("/mobile/js/pkkb/drpkkb", params);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,57 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="schedule-page">
|
<view class="schedule-page">
|
||||||
<!-- 单个班级选择器 -->
|
<view class="bj-picker">
|
||||||
<view class="class-selector" style="background-color: #4477ee;">
|
<NjBjPicker @change="changeNjBj" />
|
||||||
<picker
|
|
||||||
mode="selector"
|
|
||||||
:range="combinedClassRange"
|
|
||||||
:value="selectedCombinedClassIndex"
|
|
||||||
@change="onCombinedClassChange"
|
|
||||||
>
|
|
||||||
<view class="picker-item">
|
|
||||||
<text>{{ selectedCombinedClassName || "选择班级" }}</text>
|
|
||||||
<uni-icons type="bottom" size="14" color="#666"></uni-icons>
|
|
||||||
</view>
|
|
||||||
</picker>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="week-selector" @click="openWeekPicker">
|
<view class="week-selector" @click="openWeekPicker">
|
||||||
<text>{{ weekInfo.displayText }}</text>
|
<text>{{ curZc.mc }}</text>
|
||||||
<uni-icons type="right" size="16" color="#fff"></uni-icons>
|
<uni-icons type="right" size="16" color="#fff"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="date-tabs">
|
<view class="date-tabs">
|
||||||
<view
|
<view v-for="(day, index) in rqList" :key="index" :class="['date-tab-item', { active: curRqIndex === index }]"
|
||||||
v-for="(day, index) in weekDates"
|
@click="selectDay(index)">
|
||||||
:key="index"
|
<text class="weekday">{{ day.zjmc }}</text>
|
||||||
:class="['date-tab-item', { active: selectedDayIndex === index }]"
|
<text class="date">{{ day.rqmc }}</text>
|
||||||
@click="selectDay(index)"
|
|
||||||
>
|
|
||||||
<text class="weekday">{{ day.weekday }}</text>
|
|
||||||
<text class="date">{{ day.dateMMDD }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="schedule-body">
|
<view class="schedule-body">
|
||||||
<view
|
<view v-for="(sj, index) in sjList" :key="index" class="schedule-row">
|
||||||
v-for="(timeSlot, index) in scheduleData"
|
|
||||||
:key="index"
|
|
||||||
class="schedule-row"
|
|
||||||
>
|
|
||||||
<view class="time-slot">
|
<view class="time-slot">
|
||||||
<text class="slot-name">{{ timeSlot.name }}</text>
|
<text class="slot-name">{{ sj.mc }}</text>
|
||||||
<text class="slot-time">{{ timeSlot.timeRange }}</text>
|
<text class="slot-time">{{ sj.kssj }}-{{ sj.jssj }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="course-container">
|
<view class="course-container">
|
||||||
<template v-if="timeSlot.subjects && timeSlot.subjects.length > 0">
|
<template v-if="sj.pkkbList && sj.pkkbList.length > 0">
|
||||||
<view
|
<view v-for="(pkkb, pkkbIndex) in sj.pkkbList" :key="pkkbIndex"
|
||||||
v-for="(course, courseIndex) in timeSlot.subjects"
|
:class="['course-card', getCourseColorClass(pkkb.pkName)]">
|
||||||
:key="courseIndex"
|
<text class="course-subject">{{ pkkb.pkName }}</text>
|
||||||
:class="['course-card', getCourseColorClass(course.subject)]"
|
<text class="course-class">{{ pkkb.jsName }}</text>
|
||||||
>
|
|
||||||
<text class="course-subject">{{ course.subject }}</text>
|
|
||||||
<text class="course-class">{{ course.class }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<view v-else class="empty-course">
|
<view v-else class="empty-course">
|
||||||
@ -72,22 +48,13 @@
|
|||||||
<text class="title">选择周</text>
|
<text class="title">选择周</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="week-list">
|
<view class="week-list">
|
||||||
<scroll-view
|
<scroll-view scroll-y style="max-height: 60vh" :scroll-top="targetScrollTop">
|
||||||
scroll-y
|
<view v-for="(zc, index) in zcList" :key="index" :class="[
|
||||||
style="max-height: 60vh"
|
'week-item',
|
||||||
:scroll-top="targetScrollTop"
|
{ active: zc.djz === curZc.djz },
|
||||||
>
|
]" @click="selectWeek(zc)">
|
||||||
<view
|
<text>{{ zc.mc }}</text>
|
||||||
v-for="(week, index) in availableWeeks"
|
<text v-if="zc.dnDjz === dnDjz" class="current-tag">当前周</text>
|
||||||
:key="index"
|
|
||||||
:class="[
|
|
||||||
'week-item',
|
|
||||||
{ active: week.displayText === weekInfo.displayText },
|
|
||||||
]"
|
|
||||||
@click="selectWeek(week)"
|
|
||||||
>
|
|
||||||
<text>{{ week.displayText }}</text>
|
|
||||||
<text v-if="isCurrentWeek(week)" class="current-tag">当前周</text>
|
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
@ -97,7 +64,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, computed, onMounted, nextTick } from "vue";
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
|
import { dqpkApi, drpkkbApi } from "@/api/base/server";
|
||||||
|
import NjBjPicker from "@/pages/components/NjBjPicker/index.vue";
|
||||||
|
import { useUserStore } from "@/store/modules/user";
|
||||||
|
const { getJs } = useUserStore();
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import "dayjs/locale/zh-cn";
|
import "dayjs/locale/zh-cn";
|
||||||
import weekOfYear from "dayjs/plugin/weekOfYear";
|
import weekOfYear from "dayjs/plugin/weekOfYear";
|
||||||
@ -107,319 +78,44 @@ dayjs.locale("zh-cn");
|
|||||||
dayjs.extend(weekOfYear);
|
dayjs.extend(weekOfYear);
|
||||||
dayjs.extend(isoWeek);
|
dayjs.extend(isoWeek);
|
||||||
|
|
||||||
interface Course {
|
let dqZc = 0;
|
||||||
subject: string;
|
let xqId = '';
|
||||||
class: string;
|
let bjId = '';
|
||||||
}
|
|
||||||
|
|
||||||
interface TimeSlot {
|
// 改变了年级班级
|
||||||
name: string;
|
const changeNjBj = (nj: any, bj: any) => {
|
||||||
timeRange: string;
|
bjId = bj.key;
|
||||||
subjects?: Course[];
|
selectDay(curRqIndex.value);
|
||||||
}
|
console.log(nj, bj);
|
||||||
|
|
||||||
interface WeekInfo {
|
|
||||||
weekNumber: number;
|
|
||||||
startDate: string;
|
|
||||||
endDate: string;
|
|
||||||
displayText: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface WeekDay {
|
|
||||||
dateFull: string;
|
|
||||||
dateMMDD: string;
|
|
||||||
weekday: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 模拟后端返回的组合班级列表数据
|
|
||||||
interface CombinedClass {
|
|
||||||
id: string; // 唯一标识,例如 'g1c101'
|
|
||||||
name: string; // 显示名称,例如 '一年级 01班'
|
|
||||||
}
|
|
||||||
const combinedClassList = ref<CombinedClass[]>([]);
|
|
||||||
|
|
||||||
// 组合班级选择相关
|
|
||||||
const selectedCombinedClassId = ref<string>("");
|
|
||||||
const selectedCombinedClassIndex = ref(-1);
|
|
||||||
|
|
||||||
const combinedClassRange = computed(() =>
|
|
||||||
combinedClassList.value.map((c) => c.name)
|
|
||||||
);
|
|
||||||
const selectedCombinedClassName = computed(() => {
|
|
||||||
const cls = combinedClassList.value.find(
|
|
||||||
(c) => c.id === selectedCombinedClassId.value
|
|
||||||
);
|
|
||||||
return cls ? cls.name : "";
|
|
||||||
});
|
|
||||||
|
|
||||||
// 模拟获取后端班级列表
|
|
||||||
const fetchCombinedClassList = async () => {
|
|
||||||
console.log("Fetching combined class list from backend...");
|
|
||||||
isLoading.value = true; // 可以复用 loading 状态
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 300)); // 模拟网络延迟
|
|
||||||
// 假设后端返回的数据
|
|
||||||
combinedClassList.value = [
|
|
||||||
{ id: "g1c101", name: "一年级 01班" },
|
|
||||||
{ id: "g1c102", name: "一年级 02班" },
|
|
||||||
{ id: "g2c201", name: "二年级 01班" },
|
|
||||||
{ id: "g2c202", name: "二年级 02班" },
|
|
||||||
{ id: "g2c203", name: "二年级 03班" },
|
|
||||||
{ id: "g3c301", name: "三年级 01班" },
|
|
||||||
];
|
|
||||||
console.log("Combined class list loaded:", combinedClassList.value);
|
|
||||||
isLoading.value = false;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 组合班级选择改变
|
// 这是当年的第几周
|
||||||
const onCombinedClassChange = (e: any) => {
|
const dnDjz = ref(dayjs().isoWeek());
|
||||||
const index = parseInt(e.detail.value);
|
|
||||||
selectedCombinedClassIndex.value = index;
|
// 当前选中周次
|
||||||
const selectedClass = combinedClassList.value[index];
|
const curZc = ref<any>({});
|
||||||
if (selectedClass && selectedClass.id !== selectedCombinedClassId.value) {
|
// 当前选中日期序号
|
||||||
selectedCombinedClassId.value = selectedClass.id;
|
const curRqIndex = ref(0)
|
||||||
// 获取新班级的课表数据
|
// 周次列表
|
||||||
fetchScheduleData();
|
const zcList = ref<any>([])
|
||||||
}
|
// 日期列表
|
||||||
};
|
const rqList = ref<any>([])
|
||||||
|
// 时间列表
|
||||||
|
const sjList = ref<any>([])
|
||||||
|
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
const currentDate = ref(dayjs());
|
|
||||||
const selectedDayIndex = ref(0);
|
|
||||||
const scheduleData = ref<TimeSlot[]>([]);
|
|
||||||
|
|
||||||
// 周选择相关
|
// 周选择相关
|
||||||
const showWeekPicker = ref(false);
|
const showWeekPicker = ref(false);
|
||||||
const weekPopup = ref<any>(null);
|
const weekPopup = ref<any>(null);
|
||||||
const weekInfo = reactive<WeekInfo>({
|
|
||||||
weekNumber: 0,
|
|
||||||
startDate: "",
|
|
||||||
endDate: "",
|
|
||||||
displayText: "",
|
|
||||||
});
|
|
||||||
const weekDates = ref<WeekDay[]>([]);
|
|
||||||
const selectedWeekNumber = ref(0);
|
const selectedWeekNumber = ref(0);
|
||||||
const availableWeeks = ref<WeekInfo[]>([]);
|
|
||||||
|
|
||||||
// 计算当前周的周一日期
|
|
||||||
const currentWeekMonday = computed(() => currentDate.value.isoWeekday(1));
|
|
||||||
|
|
||||||
// 初始化当前周信息
|
|
||||||
const initializeCurrentWeekInfo = () => {
|
|
||||||
const now = dayjs();
|
|
||||||
currentDate.value = now; // Ensure currentDate is today
|
|
||||||
const monday = now.isoWeekday(1);
|
|
||||||
const friday = monday.add(4, "day");
|
|
||||||
const year = monday.year();
|
|
||||||
const weekNum = monday.isoWeek();
|
|
||||||
|
|
||||||
weekInfo.weekNumber = weekNum;
|
|
||||||
weekInfo.startDate = monday.format("MM.DD");
|
|
||||||
weekInfo.endDate = friday.format("MM.DD");
|
|
||||||
weekInfo.displayText = `${year}年 第${weekNum}周 (${monday.format(
|
|
||||||
"MM.DD"
|
|
||||||
)}-${friday.format("MM.DD")})`;
|
|
||||||
selectedWeekNumber.value = weekNum;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生成可选择的周列表 - 只显示当前年份
|
|
||||||
const generateAvailableWeeks = () => {
|
|
||||||
const weeks: WeekInfo[] = [];
|
|
||||||
const currentYear = dayjs().year();
|
|
||||||
|
|
||||||
for (let weekNum = 1; weekNum <= 53; weekNum++) {
|
|
||||||
const monday = dayjs().year(currentYear).isoWeek(weekNum).isoWeekday(1);
|
|
||||||
|
|
||||||
if (monday.isoWeekYear() === currentYear) {
|
|
||||||
const friday = monday.add(4, "day");
|
|
||||||
const actualWeekNum = monday.isoWeek();
|
|
||||||
weeks.push({
|
|
||||||
weekNumber: actualWeekNum,
|
|
||||||
startDate: monday.format("MM.DD"),
|
|
||||||
endDate: friday.format("MM.DD"),
|
|
||||||
displayText: `${currentYear}年 第${actualWeekNum}周 (${monday.format(
|
|
||||||
"MM.DD"
|
|
||||||
)}-${friday.format("MM.DD")})`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const uniqueWeeks = weeks.filter(
|
|
||||||
(week, index, self) =>
|
|
||||||
index === self.findIndex((w) => w.weekNumber === week.weekNumber)
|
|
||||||
);
|
|
||||||
|
|
||||||
availableWeeks.value = uniqueWeeks;
|
|
||||||
console.log("Generated weeks:", availableWeeks.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 检查是否是当前周
|
|
||||||
const isCurrentWeek = (week: WeekInfo) => {
|
|
||||||
return dayjs().isoWeek() === week.weekNumber;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新顶部日期tabs
|
|
||||||
const updateWeekDates = () => {
|
|
||||||
const monday = currentDate.value.isoWeekday(1);
|
|
||||||
const dates: WeekDay[] = [];
|
|
||||||
const weekdaysZh = ["周一", "周二", "周三", "周四", "周五"];
|
|
||||||
for (let i = 0; i < 5; i++) {
|
|
||||||
const day = monday.add(i, "day");
|
|
||||||
dates.push({
|
|
||||||
dateFull: day.format("YYYY-MM-DD"),
|
|
||||||
dateMMDD: day.format("M/DD"),
|
|
||||||
weekday: weekdaysZh[i],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
weekDates.value = dates;
|
|
||||||
|
|
||||||
// 确定新一周的默认选中日期
|
|
||||||
const todayWeekday = dayjs().isoWeekday();
|
|
||||||
if (currentDate.value.isSame(dayjs(), "isoWeek")) {
|
|
||||||
if (todayWeekday >= 1 && todayWeekday <= 5) {
|
|
||||||
selectedDayIndex.value = todayWeekday - 1;
|
|
||||||
} else {
|
|
||||||
selectedDayIndex.value = 0; // 如果是周末,默认选中周一
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
selectedDayIndex.value = 0; // 非本周,默认选中周一
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取课表数据
|
|
||||||
const fetchScheduleData = async () => {
|
|
||||||
// 检查是否已选择组合班级
|
|
||||||
if (!selectedCombinedClassId.value) {
|
|
||||||
console.log("请先选择班级");
|
|
||||||
scheduleData.value = []; // 清空课表
|
|
||||||
isLoading.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(
|
|
||||||
`正在获取 ${selectedCombinedClassName.value} 第${weekInfo.weekNumber}周 课表数据...`
|
|
||||||
);
|
|
||||||
isLoading.value = true;
|
|
||||||
|
|
||||||
// --- 这里替换为实际的 API 请求 ---
|
|
||||||
// 在请求中代入 selectedCombinedClassId.value 和 weekInfo
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500)); // 模拟网络请求
|
|
||||||
|
|
||||||
const timeSlotTemplates = [
|
|
||||||
{ name: "上1", timeRange: "08:00-08:45" },
|
|
||||||
{ name: "上2", timeRange: "08:55-09:40" },
|
|
||||||
{ name: "上3", timeRange: "10:00-10:45" },
|
|
||||||
{ name: "上4", timeRange: "10:55-11:40" },
|
|
||||||
{ name: "下1", timeRange: "14:00-14:45" },
|
|
||||||
{ name: "下2", timeRange: "14:55-15:40" },
|
|
||||||
{ name: "下3", timeRange: "16:00-16:45" },
|
|
||||||
{ name: "下4", timeRange: "16:55-17:40" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const mockData: TimeSlot[] = [];
|
|
||||||
const isOddWeek = weekInfo.weekNumber % 2 === 1;
|
|
||||||
|
|
||||||
console.log(`模拟生成 ${selectedCombinedClassId.value} 的课表`);
|
|
||||||
for (const slot of timeSlotTemplates) {
|
|
||||||
const subjectsForDay = generateSubjectsForDay(
|
|
||||||
slot.name,
|
|
||||||
selectedDayIndex.value,
|
|
||||||
isOddWeek,
|
|
||||||
selectedCombinedClassId.value // 传递组合班级ID
|
|
||||||
);
|
|
||||||
mockData.push({
|
|
||||||
name: slot.name,
|
|
||||||
timeRange: slot.timeRange,
|
|
||||||
subjects: subjectsForDay,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
scheduleData.value = mockData;
|
|
||||||
isLoading.value = false;
|
|
||||||
console.log("课表数据加载完成:", scheduleData.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据周次和组合班级ID生成不同的课程数据
|
|
||||||
const generateSubjectsForDay = (
|
|
||||||
slotName: string,
|
|
||||||
dayIndex: number,
|
|
||||||
isOddWeek: boolean,
|
|
||||||
combinedClassId: string // 使用组合ID
|
|
||||||
): Course[] => {
|
|
||||||
const subjects: Course[] = [];
|
|
||||||
// 基于 combinedClassId 生成模拟数据
|
|
||||||
const className =
|
|
||||||
combinedClassList.value.find((c) => c.id === combinedClassId)?.name ||
|
|
||||||
combinedClassId;
|
|
||||||
|
|
||||||
if (combinedClassId === "g1c101") {
|
|
||||||
if (dayIndex === 0) {
|
|
||||||
// 周一
|
|
||||||
if (slotName === "上1" || slotName === "上2") {
|
|
||||||
subjects.push({
|
|
||||||
subject: isOddWeek ? "语文" : "数学",
|
|
||||||
class: `(${className})`,
|
|
||||||
});
|
|
||||||
} else if (slotName === "上3") {
|
|
||||||
subjects.push({ subject: "体育", class: `(${className})` });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (combinedClassId === "g2c201") {
|
|
||||||
if (dayIndex === 1 && slotName === "上2") {
|
|
||||||
subjects.push({ subject: "英语", class: `(${className})` });
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 其他班级通用模拟
|
|
||||||
if (dayIndex === 3 && slotName === "下1") {
|
|
||||||
subjects.push({ subject: "科学", class: `(${className})` });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 通用班会
|
|
||||||
if (subjects.length === 0 && dayIndex === 4 && slotName === "下4") {
|
|
||||||
subjects.push({ subject: "班会", class: `(${className})` });
|
|
||||||
}
|
|
||||||
|
|
||||||
return subjects;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择日期
|
|
||||||
const selectDay = (index: number) => {
|
|
||||||
selectedDayIndex.value = index;
|
|
||||||
fetchScheduleData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 调整估算的周列表项高度
|
|
||||||
const ESTIMATED_WEEK_ITEM_HEIGHT = 53.5; // px (精确值)
|
|
||||||
|
|
||||||
const targetScrollTop = ref(0); // 新增:用于绑定 scroll-top
|
const targetScrollTop = ref(0); // 新增:用于绑定 scroll-top
|
||||||
|
|
||||||
|
|
||||||
// 打开周选择弹窗
|
// 打开周选择弹窗
|
||||||
const openWeekPicker = async () => {
|
const openWeekPicker = async () => {
|
||||||
showWeekPicker.value = true;
|
showWeekPicker.value = true;
|
||||||
|
|
||||||
// 确保列表数据已准备好
|
|
||||||
if (availableWeeks.value.length === 0) {
|
|
||||||
console.warn("Available weeks list is empty.");
|
|
||||||
// generateAvailableWeeks(); // 可选:如果列表可能为空则重新生成
|
|
||||||
}
|
|
||||||
|
|
||||||
// 找到当前周的索引
|
|
||||||
const currentIndex = availableWeeks.value.findIndex(
|
|
||||||
(week) => week.weekNumber === weekInfo.weekNumber
|
|
||||||
);
|
|
||||||
|
|
||||||
if (currentIndex !== -1) {
|
|
||||||
// 使用调整后的高度重新计算
|
|
||||||
const calculatedScrollTop = currentIndex * ESTIMATED_WEEK_ITEM_HEIGHT;
|
|
||||||
|
|
||||||
// 简化设置逻辑,直接在 nextTick 后设置
|
|
||||||
await nextTick();
|
|
||||||
targetScrollTop.value = calculatedScrollTop;
|
|
||||||
} else {
|
|
||||||
// 如果找不到当前周,滚动到顶部
|
|
||||||
await nextTick();
|
|
||||||
targetScrollTop.value = 0; // 直接设置为 0
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开弹窗
|
// 打开弹窗
|
||||||
await nextTick();
|
await nextTick();
|
||||||
if (weekPopup.value) {
|
if (weekPopup.value) {
|
||||||
@ -427,7 +123,7 @@ const openWeekPicker = async () => {
|
|||||||
} else {
|
} else {
|
||||||
console.error("Week popup ref is not available.");
|
console.error("Week popup ref is not available.");
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// 关闭周选择弹窗
|
// 关闭周选择弹窗
|
||||||
const closeWeekPicker = () => {
|
const closeWeekPicker = () => {
|
||||||
@ -444,32 +140,49 @@ const popupChange = (e: { show: boolean }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 选择周
|
// 选择周
|
||||||
const selectWeek = (week: WeekInfo) => {
|
const selectWeek = (zc: any) => {
|
||||||
if (week.displayText === weekInfo.displayText) {
|
if (curZc.value && zc && zc.djz === curZc.value.djz) {
|
||||||
// 如果点击的是当前已选中的周,则只关闭弹窗
|
// 如果点击的是当前已选中的周,则只关闭弹窗
|
||||||
closeWeekPicker();
|
closeWeekPicker();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
// 复制
|
||||||
// 更新当前显示的周信息
|
Object.assign(curZc.value, zc);
|
||||||
Object.assign(weekInfo, week);
|
Object.assign(rqList.value, curZc.value.drList);
|
||||||
|
|
||||||
// 更新 currentDate 以匹配新选择的周
|
|
||||||
const selectedYear = parseInt(week.displayText.substring(0, 4));
|
|
||||||
const selectedIsoWeek = week.weekNumber;
|
|
||||||
currentDate.value = dayjs()
|
|
||||||
.year(selectedYear)
|
|
||||||
.isoWeek(selectedIsoWeek)
|
|
||||||
.isoWeekday(1);
|
|
||||||
|
|
||||||
// 更新顶部日期tabs
|
|
||||||
updateWeekDates();
|
|
||||||
|
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
closeWeekPicker();
|
closeWeekPicker();
|
||||||
|
|
||||||
// 获取新的课表数据
|
// 选中第一天
|
||||||
fetchScheduleData();
|
selectDay(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择日期
|
||||||
|
const selectDay = (index: number) => {
|
||||||
|
curRqIndex.value = index;
|
||||||
|
if (!rqList.value.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drpkkbApi({
|
||||||
|
jsId: "", // getJs.id,
|
||||||
|
bjId: bjId,
|
||||||
|
xqId: xqId,
|
||||||
|
rq: "",
|
||||||
|
// rq: rqList.value[index].rq, // 暂时废弃,目前小学都按周几进行查询
|
||||||
|
zj: rqList.value[index].zj
|
||||||
|
}).then(res => {
|
||||||
|
// 根据接口返回的result判断是否已报名
|
||||||
|
if (res && res.resultCode === 1) {
|
||||||
|
sjList.value = res.result;
|
||||||
|
} else {
|
||||||
|
// 接口调用成功但返回错误
|
||||||
|
console.warn("检查报名状态接口返回错误:", res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
// 接口调用失败
|
||||||
|
console.error("调用检查报名状态接口失败:", error);
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 判断课程颜色
|
// 判断课程颜色
|
||||||
@ -482,24 +195,17 @@ const getCourseColorClass = (subject: string | undefined): string => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
// Make onMounted async
|
const res = await dqpkApi();
|
||||||
initializeCurrentWeekInfo();
|
const result = res.result;
|
||||||
generateAvailableWeeks();
|
dqZc = res.result.dqZc;
|
||||||
updateWeekDates();
|
xqId = res.result.dqXq.id;
|
||||||
|
zcList.value = result.zcList;
|
||||||
// 先获取班级列表
|
sjList.value = result.sjList;
|
||||||
await fetchCombinedClassList();
|
let zc = zcList.value.find((item:any) => item.djz === dqZc);
|
||||||
|
if (!zc) {
|
||||||
// 设置默认选中的班级 (例如列表中的第一个)
|
zc = zcList.value[0];
|
||||||
if (combinedClassList.value.length > 0) {
|
|
||||||
selectedCombinedClassId.value = combinedClassList.value[0].id;
|
|
||||||
selectedCombinedClassIndex.value = 0;
|
|
||||||
// 获取初始课表数据
|
|
||||||
await fetchScheduleData();
|
|
||||||
} else {
|
|
||||||
console.warn("No classes available to display schedule for.");
|
|
||||||
// 如果没有班级可选,可能需要显示提示信息
|
|
||||||
}
|
}
|
||||||
|
selectWeek(zc);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -643,14 +349,17 @@ onMounted(async () => {
|
|||||||
background-color: #ffebee;
|
background-color: #ffebee;
|
||||||
border-left: 3px solid #f44336;
|
border-left: 3px solid #f44336;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.color-phys {
|
&.color-phys {
|
||||||
background-color: #e3f2fd;
|
background-color: #e3f2fd;
|
||||||
border-left: 3px solid #2196f3;
|
border-left: 3px solid #2196f3;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.color-math {
|
&.color-math {
|
||||||
background-color: #e8f5e9;
|
background-color: #e8f5e9;
|
||||||
border-left: 3px solid #4caf50;
|
border-left: 3px solid #4caf50;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.color-other {
|
&.color-other {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-left: 3px solid #9e9e9e;
|
border-left: 3px solid #9e9e9e;
|
||||||
|
|||||||
@ -1,42 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="schedule-page">
|
<view class="schedule-page">
|
||||||
<view class="week-selector" @click="openWeekPicker">
|
<view class="week-selector" @click="openWeekPicker">
|
||||||
<text>{{ weekInfo.displayText }}</text>
|
<text>{{ curZc.mc }}</text>
|
||||||
<uni-icons type="right" size="16" color="#fff"></uni-icons>
|
<uni-icons type="right" size="16" color="#fff"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="date-tabs">
|
<view class="date-tabs">
|
||||||
<view
|
<view v-for="(day, index) in rqList" :key="index" :class="['date-tab-item', { active: curRqIndex === index }]"
|
||||||
v-for="(day, index) in weekDates"
|
@click="selectDay(index)">
|
||||||
:key="index"
|
<text class="weekday">{{ day.zjmc }}</text>
|
||||||
:class="['date-tab-item', { active: selectedDayIndex === index }]"
|
<text class="date">{{ day.rqmc }}</text>
|
||||||
@click="selectDay(index)"
|
|
||||||
>
|
|
||||||
<text class="weekday">{{ day.weekday }}</text>
|
|
||||||
<text class="date">{{ day.dateMMDD }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="schedule-body">
|
<view class="schedule-body">
|
||||||
<view
|
<view v-for="(sj, index) in sjList" :key="index" class="schedule-row">
|
||||||
v-for="(timeSlot, index) in scheduleData"
|
|
||||||
:key="index"
|
|
||||||
class="schedule-row"
|
|
||||||
>
|
|
||||||
<view class="time-slot">
|
<view class="time-slot">
|
||||||
<text class="slot-name">{{ timeSlot.name }}</text>
|
<text class="slot-name">{{ sj.mc }}</text>
|
||||||
<text class="slot-time">{{ timeSlot.timeRange }}</text>
|
<text class="slot-time">{{ sj.kssj }}-{{ sj.jssj }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="course-container">
|
<view class="course-container">
|
||||||
<template v-if="timeSlot.subjects && timeSlot.subjects.length > 0">
|
<template v-if="sj.pkkbList && sj.pkkbList.length > 0">
|
||||||
<view
|
<view v-for="(pkkb, pkkbIndex) in sj.pkkbList" :key="pkkbIndex"
|
||||||
v-for="(course, courseIndex) in timeSlot.subjects"
|
:class="['course-card', getCourseColorClass(pkkb.pkName)]">
|
||||||
:key="courseIndex"
|
<text class="course-subject">{{ pkkb.pkName }}</text>
|
||||||
:class="['course-card', getCourseColorClass(course.subject)]"
|
<text class="course-class">{{ (pkkb.njmc || "无年级") + " " + (pkkb.bjmc || "无班级") }}</text>
|
||||||
>
|
|
||||||
<text class="course-subject">{{ course.subject }}</text>
|
|
||||||
<text class="course-class">{{ course.class }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<view v-else class="empty-course">
|
<view v-else class="empty-course">
|
||||||
@ -57,22 +46,13 @@
|
|||||||
<text class="title">选择周</text>
|
<text class="title">选择周</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="week-list">
|
<view class="week-list">
|
||||||
<scroll-view
|
<scroll-view scroll-y style="max-height: 60vh" :scroll-top="targetScrollTop">
|
||||||
scroll-y
|
<view v-for="(zc, index) in zcList" :key="index" :class="[
|
||||||
style="max-height: 60vh"
|
'week-item',
|
||||||
:scroll-top="targetScrollTop"
|
{ active: zc.djz === curZc.djz },
|
||||||
>
|
]" @click="selectWeek(zc)">
|
||||||
<view
|
<text>{{ zc.mc }}</text>
|
||||||
v-for="(week, index) in availableWeeks"
|
<text v-if="zc.dnDjz === dnDjz" class="current-tag">当前周</text>
|
||||||
:key="index"
|
|
||||||
:class="[
|
|
||||||
'week-item',
|
|
||||||
{ active: week.displayText === weekInfo.displayText },
|
|
||||||
]"
|
|
||||||
@click="selectWeek(week)"
|
|
||||||
>
|
|
||||||
<text>{{ week.displayText }}</text>
|
|
||||||
<text v-if="isCurrentWeek(week)" class="current-tag">当前周</text>
|
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
@ -82,7 +62,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, reactive, computed, onMounted, nextTick } from "vue";
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
|
import { dqpkApi, drpkkbApi } from "@/api/base/server";
|
||||||
|
import { useUserStore } from "@/store/modules/user";
|
||||||
|
const { getJs } = useUserStore();
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import "dayjs/locale/zh-cn";
|
import "dayjs/locale/zh-cn";
|
||||||
import weekOfYear from "dayjs/plugin/weekOfYear";
|
import weekOfYear from "dayjs/plugin/weekOfYear";
|
||||||
@ -92,283 +75,36 @@ dayjs.locale("zh-cn");
|
|||||||
dayjs.extend(weekOfYear);
|
dayjs.extend(weekOfYear);
|
||||||
dayjs.extend(isoWeek);
|
dayjs.extend(isoWeek);
|
||||||
|
|
||||||
interface Course {
|
let dqZc = 0;
|
||||||
subject: string;
|
let xqId = '';
|
||||||
class: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TimeSlot {
|
// 这是当年的第几周
|
||||||
name: string;
|
const dnDjz = ref(dayjs().isoWeek());
|
||||||
timeRange: string;
|
|
||||||
subjects?: Course[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface WeekInfo {
|
// 当前选中周次
|
||||||
weekNumber: number;
|
const curZc = ref<any>({});
|
||||||
startDate: string;
|
// 当前选中日期序号
|
||||||
endDate: string;
|
const curRqIndex = ref(0)
|
||||||
displayText: string;
|
// 周次列表
|
||||||
}
|
const zcList = ref<any>([])
|
||||||
|
// 日期列表
|
||||||
interface WeekDay {
|
const rqList = ref<any>([])
|
||||||
dateFull: string;
|
// 时间列表
|
||||||
dateMMDD: string;
|
const sjList = ref<any>([])
|
||||||
weekday: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
const currentDate = ref(dayjs());
|
|
||||||
const selectedDayIndex = ref(0);
|
|
||||||
const scheduleData = ref<TimeSlot[]>([]);
|
|
||||||
|
|
||||||
// 周选择相关
|
// 周选择相关
|
||||||
const showWeekPicker = ref(false);
|
const showWeekPicker = ref(false);
|
||||||
const weekPopup = ref<any>(null);
|
const weekPopup = ref<any>(null);
|
||||||
const weekInfo = reactive<WeekInfo>({
|
|
||||||
weekNumber: 0,
|
|
||||||
startDate: "",
|
|
||||||
endDate: "",
|
|
||||||
displayText: "",
|
|
||||||
});
|
|
||||||
const weekDates = ref<WeekDay[]>([]);
|
|
||||||
const selectedWeekNumber = ref(0);
|
const selectedWeekNumber = ref(0);
|
||||||
const availableWeeks = ref<WeekInfo[]>([]);
|
|
||||||
|
|
||||||
// 计算当前周的周一日期
|
|
||||||
const currentWeekMonday = computed(() => currentDate.value.isoWeekday(1));
|
|
||||||
|
|
||||||
// 初始化当前周信息
|
|
||||||
const initializeCurrentWeekInfo = () => {
|
|
||||||
const now = dayjs();
|
|
||||||
currentDate.value = now; // Ensure currentDate is today
|
|
||||||
const monday = now.isoWeekday(1);
|
|
||||||
const friday = monday.add(4, "day");
|
|
||||||
const year = monday.year();
|
|
||||||
const weekNum = monday.isoWeek();
|
|
||||||
|
|
||||||
weekInfo.weekNumber = weekNum;
|
|
||||||
weekInfo.startDate = monday.format("MM.DD");
|
|
||||||
weekInfo.endDate = friday.format("MM.DD");
|
|
||||||
weekInfo.displayText = `${year}年 第${weekNum}周 (${monday.format(
|
|
||||||
"MM.DD"
|
|
||||||
)}-${friday.format("MM.DD")})`;
|
|
||||||
selectedWeekNumber.value = weekNum;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 生成可选择的周列表 - 只显示当前年份
|
|
||||||
const generateAvailableWeeks = () => {
|
|
||||||
const weeks: WeekInfo[] = [];
|
|
||||||
const currentYear = dayjs().year();
|
|
||||||
|
|
||||||
for (let weekNum = 1; weekNum <= 53; weekNum++) {
|
|
||||||
const monday = dayjs().year(currentYear).isoWeek(weekNum).isoWeekday(1);
|
|
||||||
|
|
||||||
if (monday.isoWeekYear() === currentYear) {
|
|
||||||
const friday = monday.add(4, "day");
|
|
||||||
const actualWeekNum = monday.isoWeek();
|
|
||||||
weeks.push({
|
|
||||||
weekNumber: actualWeekNum,
|
|
||||||
startDate: monday.format("MM.DD"),
|
|
||||||
endDate: friday.format("MM.DD"),
|
|
||||||
displayText: `${currentYear}年 第${actualWeekNum}周 (${monday.format(
|
|
||||||
"MM.DD"
|
|
||||||
)}-${friday.format("MM.DD")})`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const uniqueWeeks = weeks.filter(
|
|
||||||
(week, index, self) =>
|
|
||||||
index === self.findIndex((w) => w.weekNumber === week.weekNumber)
|
|
||||||
);
|
|
||||||
|
|
||||||
availableWeeks.value = uniqueWeeks;
|
|
||||||
console.log("Generated weeks:", availableWeeks.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 检查是否是当前周
|
|
||||||
const isCurrentWeek = (week: WeekInfo) => {
|
|
||||||
return dayjs().isoWeek() === week.weekNumber;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 更新顶部日期tabs
|
|
||||||
const updateWeekDates = () => {
|
|
||||||
const monday = currentDate.value.isoWeekday(1);
|
|
||||||
const dates: WeekDay[] = [];
|
|
||||||
const weekdaysZh = ["周一", "周二", "周三", "周四", "周五"];
|
|
||||||
for (let i = 0; i < 5; i++) {
|
|
||||||
const day = monday.add(i, "day");
|
|
||||||
dates.push({
|
|
||||||
dateFull: day.format("YYYY-MM-DD"),
|
|
||||||
dateMMDD: day.format("M/DD"),
|
|
||||||
weekday: weekdaysZh[i],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
weekDates.value = dates;
|
|
||||||
|
|
||||||
// 确定新一周的默认选中日期
|
|
||||||
const todayWeekday = dayjs().isoWeekday();
|
|
||||||
if (currentDate.value.isSame(dayjs(), "isoWeek")) {
|
|
||||||
if (todayWeekday >= 1 && todayWeekday <= 5) {
|
|
||||||
selectedDayIndex.value = todayWeekday - 1;
|
|
||||||
} else {
|
|
||||||
selectedDayIndex.value = 0; // 如果是周末,默认选中周一
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
selectedDayIndex.value = 0; // 非本周,默认选中周一
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取课表数据
|
|
||||||
const fetchScheduleData = async () => {
|
|
||||||
console.log(`正在获取第${weekInfo.weekNumber}周课表数据...`);
|
|
||||||
isLoading.value = true;
|
|
||||||
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
const timeSlotTemplates = [
|
|
||||||
{ name: "上1", timeRange: "08:00-08:45" },
|
|
||||||
{ name: "上2", timeRange: "08:55-09:40" },
|
|
||||||
{ name: "上3", timeRange: "10:00-10:45" },
|
|
||||||
{ name: "上4", timeRange: "10:55-11:40" },
|
|
||||||
{ name: "下1", timeRange: "14:00-14:45" },
|
|
||||||
{ name: "下2", timeRange: "14:55-15:40" },
|
|
||||||
{ name: "下3", timeRange: "16:00-16:45" },
|
|
||||||
{ name: "下4", timeRange: "16:55-17:40" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const mockData: TimeSlot[] = [];
|
|
||||||
|
|
||||||
// 这里可以根据weekInfo.weekNumber添加不同的模拟数据
|
|
||||||
// 例如奇数周和偶数周的课程安排不同
|
|
||||||
const isOddWeek = weekInfo.weekNumber % 2 === 1;
|
|
||||||
|
|
||||||
for (const slot of timeSlotTemplates) {
|
|
||||||
const subjectsForDay = generateSubjectsForDay(
|
|
||||||
slot.name,
|
|
||||||
selectedDayIndex.value,
|
|
||||||
isOddWeek
|
|
||||||
);
|
|
||||||
mockData.push({
|
|
||||||
name: slot.name,
|
|
||||||
timeRange: slot.timeRange,
|
|
||||||
subjects: subjectsForDay,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
scheduleData.value = mockData;
|
|
||||||
isLoading.value = false;
|
|
||||||
console.log("课表数据加载完成:", scheduleData.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据周次生成不同的课程数据
|
|
||||||
const generateSubjectsForDay = (
|
|
||||||
slotName: string,
|
|
||||||
dayIndex: number,
|
|
||||||
isOddWeek: boolean
|
|
||||||
): Course[] => {
|
|
||||||
const subjects: Course[] = [];
|
|
||||||
|
|
||||||
// 模拟不同日期和时间段的课程数据
|
|
||||||
// 可以根据isOddWeek参数生成不同的课程安排
|
|
||||||
if (dayIndex === 0) {
|
|
||||||
// 周一
|
|
||||||
if (slotName === "上1" || slotName === "上2") {
|
|
||||||
subjects.push({
|
|
||||||
subject: isOddWeek ? "语文" : "数学",
|
|
||||||
class: "小2018级01班",
|
|
||||||
});
|
|
||||||
} else if (slotName === "上3") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
} else if (slotName === "下1" || slotName === "下2") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
}
|
|
||||||
} else if (dayIndex === 1) {
|
|
||||||
// 周二
|
|
||||||
if (slotName === "上1" || slotName === "上2") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
} else if (slotName === "下1") {
|
|
||||||
subjects.push({
|
|
||||||
subject: isOddWeek ? "语文" : "数学",
|
|
||||||
class: "小2018级01班",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else if (dayIndex === 2) {
|
|
||||||
// 周三
|
|
||||||
if (slotName === "上2") {
|
|
||||||
subjects.push({
|
|
||||||
subject: isOddWeek ? "语文" : "数学",
|
|
||||||
class: "小2018级01班",
|
|
||||||
});
|
|
||||||
} else if (slotName === "下1") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
} else if (slotName === "下3") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
}
|
|
||||||
} else if (dayIndex === 3) {
|
|
||||||
// 周四
|
|
||||||
if (slotName === "上4") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
} else if (slotName === "下1") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
}
|
|
||||||
} else if (dayIndex === 4) {
|
|
||||||
// 周五
|
|
||||||
if (slotName === "上1") {
|
|
||||||
subjects.push({
|
|
||||||
subject: isOddWeek ? "语文" : "数学",
|
|
||||||
class: "小2018级01班",
|
|
||||||
});
|
|
||||||
} else if (slotName === "上2") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
} else if (slotName === "下2") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
} else if (slotName === "下4") {
|
|
||||||
subjects.push({ subject: "体育", class: "小2018级01班" });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return subjects;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 选择日期
|
|
||||||
const selectDay = (index: number) => {
|
|
||||||
selectedDayIndex.value = index;
|
|
||||||
fetchScheduleData();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 调整估算的周列表项高度
|
|
||||||
const ESTIMATED_WEEK_ITEM_HEIGHT = 53.5; // px (精确值)
|
|
||||||
|
|
||||||
const targetScrollTop = ref(0); // 新增:用于绑定 scroll-top
|
const targetScrollTop = ref(0); // 新增:用于绑定 scroll-top
|
||||||
|
|
||||||
|
|
||||||
// 打开周选择弹窗
|
// 打开周选择弹窗
|
||||||
const openWeekPicker = async () => {
|
const openWeekPicker = async () => {
|
||||||
showWeekPicker.value = true;
|
showWeekPicker.value = true;
|
||||||
|
|
||||||
// 确保列表数据已准备好
|
|
||||||
if (availableWeeks.value.length === 0) {
|
|
||||||
console.warn("Available weeks list is empty.");
|
|
||||||
// generateAvailableWeeks(); // 可选:如果列表可能为空则重新生成
|
|
||||||
}
|
|
||||||
|
|
||||||
// 找到当前周的索引
|
|
||||||
const currentIndex = availableWeeks.value.findIndex(
|
|
||||||
(week) => week.weekNumber === weekInfo.weekNumber
|
|
||||||
);
|
|
||||||
|
|
||||||
if (currentIndex !== -1) {
|
|
||||||
// 使用调整后的高度重新计算
|
|
||||||
const calculatedScrollTop = currentIndex * ESTIMATED_WEEK_ITEM_HEIGHT;
|
|
||||||
|
|
||||||
// 简化设置逻辑,直接在 nextTick 后设置
|
|
||||||
await nextTick();
|
|
||||||
targetScrollTop.value = calculatedScrollTop;
|
|
||||||
} else {
|
|
||||||
// 如果找不到当前周,滚动到顶部
|
|
||||||
await nextTick();
|
|
||||||
targetScrollTop.value = 0; // 直接设置为 0
|
|
||||||
}
|
|
||||||
|
|
||||||
// 打开弹窗
|
// 打开弹窗
|
||||||
await nextTick();
|
await nextTick();
|
||||||
if (weekPopup.value) {
|
if (weekPopup.value) {
|
||||||
@ -376,7 +112,7 @@ const openWeekPicker = async () => {
|
|||||||
} else {
|
} else {
|
||||||
console.error("Week popup ref is not available.");
|
console.error("Week popup ref is not available.");
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// 关闭周选择弹窗
|
// 关闭周选择弹窗
|
||||||
const closeWeekPicker = () => {
|
const closeWeekPicker = () => {
|
||||||
@ -393,32 +129,49 @@ const popupChange = (e: { show: boolean }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 选择周
|
// 选择周
|
||||||
const selectWeek = (week: WeekInfo) => {
|
const selectWeek = (zc: any) => {
|
||||||
if (week.displayText === weekInfo.displayText) {
|
if (curZc.value && zc && zc.djz === curZc.value.djz) {
|
||||||
// 如果点击的是当前已选中的周,则只关闭弹窗
|
// 如果点击的是当前已选中的周,则只关闭弹窗
|
||||||
closeWeekPicker();
|
closeWeekPicker();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
// 复制
|
||||||
// 更新当前显示的周信息
|
Object.assign(curZc.value, zc);
|
||||||
Object.assign(weekInfo, week);
|
Object.assign(rqList.value, curZc.value.drList);
|
||||||
|
|
||||||
// 更新 currentDate 以匹配新选择的周
|
|
||||||
const selectedYear = parseInt(week.displayText.substring(0, 4));
|
|
||||||
const selectedIsoWeek = week.weekNumber;
|
|
||||||
currentDate.value = dayjs()
|
|
||||||
.year(selectedYear)
|
|
||||||
.isoWeek(selectedIsoWeek)
|
|
||||||
.isoWeekday(1);
|
|
||||||
|
|
||||||
// 更新顶部日期tabs
|
|
||||||
updateWeekDates();
|
|
||||||
|
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
closeWeekPicker();
|
closeWeekPicker();
|
||||||
|
|
||||||
// 获取新的课表数据
|
// 选中第一天
|
||||||
fetchScheduleData();
|
selectDay(0);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择日期
|
||||||
|
const selectDay = (index: number) => {
|
||||||
|
curRqIndex.value = index;
|
||||||
|
if (!rqList.value.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
drpkkbApi({
|
||||||
|
jsId: getJs.id,
|
||||||
|
bjId: "",
|
||||||
|
xqId: xqId,
|
||||||
|
rq: "",
|
||||||
|
// rq: rqList.value[index].rq, // 暂时废弃,目前小学都按周几进行查询
|
||||||
|
zj: rqList.value[index].zj
|
||||||
|
}).then(res => {
|
||||||
|
// 根据接口返回的result判断是否已报名
|
||||||
|
if (res && res.resultCode === 1) {
|
||||||
|
sjList.value = res.result;
|
||||||
|
} else {
|
||||||
|
// 接口调用成功但返回错误
|
||||||
|
console.warn("检查报名状态接口返回错误:", res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
// 接口调用失败
|
||||||
|
console.error("调用检查报名状态接口失败:", error);
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 判断课程颜色
|
// 判断课程颜色
|
||||||
@ -430,11 +183,18 @@ const getCourseColorClass = (subject: string | undefined): string => {
|
|||||||
return "color-other";
|
return "color-other";
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
initializeCurrentWeekInfo();
|
const res = await dqpkApi();
|
||||||
generateAvailableWeeks();
|
const result = res.result;
|
||||||
updateWeekDates();
|
dqZc = res.result.dqZc;
|
||||||
fetchScheduleData();
|
xqId = res.result.dqXq.id;
|
||||||
|
zcList.value = result.zcList;
|
||||||
|
sjList.value = result.sjList;
|
||||||
|
let zc = zcList.value.find((item:any) => item.djz === dqZc);
|
||||||
|
if (!zc) {
|
||||||
|
zc = zcList.value[0];
|
||||||
|
}
|
||||||
|
selectWeek(zc);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -578,14 +338,17 @@ onMounted(() => {
|
|||||||
background-color: #ffebee;
|
background-color: #ffebee;
|
||||||
border-left: 3px solid #f44336;
|
border-left: 3px solid #f44336;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.color-phys {
|
&.color-phys {
|
||||||
background-color: #e3f2fd;
|
background-color: #e3f2fd;
|
||||||
border-left: 3px solid #2196f3;
|
border-left: 3px solid #2196f3;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.color-math {
|
&.color-math {
|
||||||
background-color: #e8f5e9;
|
background-color: #e8f5e9;
|
||||||
border-left: 3px solid #4caf50;
|
border-left: 3px solid #4caf50;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.color-other {
|
&.color-other {
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-left: 3px solid #9e9e9e;
|
border-left: 3px solid #9e9e9e;
|
||||||
@ -671,4 +434,31 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 年级班级选择器样式 - 调整为单个选择器 */
|
||||||
|
.class-selector {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center; // 居中显示
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 15px;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
|
||||||
|
.picker-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 15px; // 稍微调整padding
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
min-width: 150px; // 给个最小宽度
|
||||||
|
justify-content: space-between; // 让文字和图标分开
|
||||||
|
|
||||||
|
text {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user