完善教师课表和班级课表
This commit is contained in:
ywyonui
parent
26a32b8da5
commit
68142cf67f
@ -181,6 +181,25 @@ export const xxtsSaveByJlzxParamsApi = async (params: { jlId: string }) => {
|
||||
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>
|
||||
<view class="schedule-page">
|
||||
<!-- 单个班级选择器 -->
|
||||
<view class="class-selector" style="background-color: #4477ee;">
|
||||
<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 class="bj-picker">
|
||||
<NjBjPicker @change="changeNjBj" />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="week-selector" @click="openWeekPicker">
|
||||
<text>{{ weekInfo.displayText }}</text>
|
||||
<text>{{ curZc.mc }}</text>
|
||||
<uni-icons type="right" size="16" color="#fff"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="date-tabs">
|
||||
<view
|
||||
v-for="(day, index) in weekDates"
|
||||
:key="index"
|
||||
:class="['date-tab-item', { active: selectedDayIndex === index }]"
|
||||
@click="selectDay(index)"
|
||||
>
|
||||
<text class="weekday">{{ day.weekday }}</text>
|
||||
<text class="date">{{ day.dateMMDD }}</text>
|
||||
<view v-for="(day, index) in rqList" :key="index" :class="['date-tab-item', { active: curRqIndex === index }]"
|
||||
@click="selectDay(index)">
|
||||
<text class="weekday">{{ day.zjmc }}</text>
|
||||
<text class="date">{{ day.rqmc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="schedule-body">
|
||||
<view
|
||||
v-for="(timeSlot, index) in scheduleData"
|
||||
:key="index"
|
||||
class="schedule-row"
|
||||
>
|
||||
<view v-for="(sj, index) in sjList" :key="index" class="schedule-row">
|
||||
<view class="time-slot">
|
||||
<text class="slot-name">{{ timeSlot.name }}</text>
|
||||
<text class="slot-time">{{ timeSlot.timeRange }}</text>
|
||||
<text class="slot-name">{{ sj.mc }}</text>
|
||||
<text class="slot-time">{{ sj.kssj }}-{{ sj.jssj }}</text>
|
||||
</view>
|
||||
|
||||
<view class="course-container">
|
||||
<template v-if="timeSlot.subjects && timeSlot.subjects.length > 0">
|
||||
<view
|
||||
v-for="(course, courseIndex) in timeSlot.subjects"
|
||||
:key="courseIndex"
|
||||
:class="['course-card', getCourseColorClass(course.subject)]"
|
||||
>
|
||||
<text class="course-subject">{{ course.subject }}</text>
|
||||
<text class="course-class">{{ course.class }}</text>
|
||||
<template v-if="sj.pkkbList && sj.pkkbList.length > 0">
|
||||
<view v-for="(pkkb, pkkbIndex) in sj.pkkbList" :key="pkkbIndex"
|
||||
:class="['course-card', getCourseColorClass(pkkb.pkName)]">
|
||||
<text class="course-subject">{{ pkkb.pkName }}</text>
|
||||
<text class="course-class">{{ pkkb.jsName }}</text>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="empty-course">
|
||||
@ -72,22 +48,13 @@
|
||||
<text class="title">选择周</text>
|
||||
</view>
|
||||
<view class="week-list">
|
||||
<scroll-view
|
||||
scroll-y
|
||||
style="max-height: 60vh"
|
||||
:scroll-top="targetScrollTop"
|
||||
>
|
||||
<view
|
||||
v-for="(week, index) in availableWeeks"
|
||||
:key="index"
|
||||
:class="[
|
||||
<scroll-view scroll-y style="max-height: 60vh" :scroll-top="targetScrollTop">
|
||||
<view v-for="(zc, index) in zcList" :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>
|
||||
{ active: zc.djz === curZc.djz },
|
||||
]" @click="selectWeek(zc)">
|
||||
<text>{{ zc.mc }}</text>
|
||||
<text v-if="zc.dnDjz === dnDjz" class="current-tag">当前周</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@ -97,7 +64,11 @@
|
||||
</template>
|
||||
|
||||
<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/locale/zh-cn";
|
||||
import weekOfYear from "dayjs/plugin/weekOfYear";
|
||||
@ -107,319 +78,44 @@ dayjs.locale("zh-cn");
|
||||
dayjs.extend(weekOfYear);
|
||||
dayjs.extend(isoWeek);
|
||||
|
||||
interface Course {
|
||||
subject: string;
|
||||
class: string;
|
||||
}
|
||||
let dqZc = 0;
|
||||
let xqId = '';
|
||||
let bjId = '';
|
||||
|
||||
interface TimeSlot {
|
||||
name: string;
|
||||
timeRange: string;
|
||||
subjects?: Course[];
|
||||
}
|
||||
|
||||
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 changeNjBj = (nj: any, bj: any) => {
|
||||
bjId = bj.key;
|
||||
selectDay(curRqIndex.value);
|
||||
console.log(nj, bj);
|
||||
};
|
||||
|
||||
// 组合班级选择改变
|
||||
const onCombinedClassChange = (e: any) => {
|
||||
const index = parseInt(e.detail.value);
|
||||
selectedCombinedClassIndex.value = index;
|
||||
const selectedClass = combinedClassList.value[index];
|
||||
if (selectedClass && selectedClass.id !== selectedCombinedClassId.value) {
|
||||
selectedCombinedClassId.value = selectedClass.id;
|
||||
// 获取新班级的课表数据
|
||||
fetchScheduleData();
|
||||
}
|
||||
};
|
||||
// 这是当年的第几周
|
||||
const dnDjz = ref(dayjs().isoWeek());
|
||||
|
||||
// 当前选中周次
|
||||
const curZc = ref<any>({});
|
||||
// 当前选中日期序号
|
||||
const curRqIndex = ref(0)
|
||||
// 周次列表
|
||||
const zcList = ref<any>([])
|
||||
// 日期列表
|
||||
const rqList = ref<any>([])
|
||||
// 时间列表
|
||||
const sjList = ref<any>([])
|
||||
|
||||
const isLoading = ref(false);
|
||||
const currentDate = ref(dayjs());
|
||||
const selectedDayIndex = ref(0);
|
||||
const scheduleData = ref<TimeSlot[]>([]);
|
||||
|
||||
// 周选择相关
|
||||
const showWeekPicker = ref(false);
|
||||
const weekPopup = ref<any>(null);
|
||||
const weekInfo = reactive<WeekInfo>({
|
||||
weekNumber: 0,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
displayText: "",
|
||||
});
|
||||
const weekDates = ref<WeekDay[]>([]);
|
||||
|
||||
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 openWeekPicker = async () => {
|
||||
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();
|
||||
if (weekPopup.value) {
|
||||
@ -427,7 +123,7 @@ const openWeekPicker = async () => {
|
||||
} else {
|
||||
console.error("Week popup ref is not available.");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 关闭周选择弹窗
|
||||
const closeWeekPicker = () => {
|
||||
@ -444,32 +140,49 @@ const popupChange = (e: { show: boolean }) => {
|
||||
};
|
||||
|
||||
// 选择周
|
||||
const selectWeek = (week: WeekInfo) => {
|
||||
if (week.displayText === weekInfo.displayText) {
|
||||
const selectWeek = (zc: any) => {
|
||||
if (curZc.value && zc && zc.djz === curZc.value.djz) {
|
||||
// 如果点击的是当前已选中的周，则只关闭弹窗
|
||||
closeWeekPicker();
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新当前显示的周信息
|
||||
Object.assign(weekInfo, week);
|
||||
|
||||
// 更新 currentDate 以匹配新选择的周
|
||||
const selectedYear = parseInt(week.displayText.substring(0, 4));
|
||||
const selectedIsoWeek = week.weekNumber;
|
||||
currentDate.value = dayjs()
|
||||
.year(selectedYear)
|
||||
.isoWeek(selectedIsoWeek)
|
||||
.isoWeekday(1);
|
||||
|
||||
// 更新顶部日期tabs
|
||||
updateWeekDates();
|
||||
// 复制
|
||||
Object.assign(curZc.value, zc);
|
||||
Object.assign(rqList.value, curZc.value.drList);
|
||||
|
||||
// 关闭弹窗
|
||||
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 () => {
|
||||
// Make onMounted async
|
||||
initializeCurrentWeekInfo();
|
||||
generateAvailableWeeks();
|
||||
updateWeekDates();
|
||||
|
||||
// 先获取班级列表
|
||||
await fetchCombinedClassList();
|
||||
|
||||
// 设置默认选中的班级 (例如列表中的第一个)
|
||||
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.");
|
||||
// 如果没有班级可选，可能需要显示提示信息
|
||||
const res = await dqpkApi();
|
||||
const result = res.result;
|
||||
dqZc = res.result.dqZc;
|
||||
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>
|
||||
|
||||
@ -643,14 +349,17 @@ onMounted(async () => {
|
||||
background-color: #ffebee;
|
||||
border-left: 3px solid #f44336;
|
||||
}
|
||||
|
||||
&.color-phys {
|
||||
background-color: #e3f2fd;
|
||||
border-left: 3px solid #2196f3;
|
||||
}
|
||||
|
||||
&.color-math {
|
||||
background-color: #e8f5e9;
|
||||
border-left: 3px solid #4caf50;
|
||||
}
|
||||
|
||||
&.color-other {
|
||||
background-color: #f5f5f5;
|
||||
border-left: 3px solid #9e9e9e;
|
||||
|
||||
@ -1,42 +1,31 @@
|
||||
<template>
|
||||
<view class="schedule-page">
|
||||
<view class="week-selector" @click="openWeekPicker">
|
||||
<text>{{ weekInfo.displayText }}</text>
|
||||
<text>{{ curZc.mc }}</text>
|
||||
<uni-icons type="right" size="16" color="#fff"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="date-tabs">
|
||||
<view
|
||||
v-for="(day, index) in weekDates"
|
||||
:key="index"
|
||||
:class="['date-tab-item', { active: selectedDayIndex === index }]"
|
||||
@click="selectDay(index)"
|
||||
>
|
||||
<text class="weekday">{{ day.weekday }}</text>
|
||||
<text class="date">{{ day.dateMMDD }}</text>
|
||||
<view v-for="(day, index) in rqList" :key="index" :class="['date-tab-item', { active: curRqIndex === index }]"
|
||||
@click="selectDay(index)">
|
||||
<text class="weekday">{{ day.zjmc }}</text>
|
||||
<text class="date">{{ day.rqmc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="schedule-body">
|
||||
<view
|
||||
v-for="(timeSlot, index) in scheduleData"
|
||||
:key="index"
|
||||
class="schedule-row"
|
||||
>
|
||||
<view v-for="(sj, index) in sjList" :key="index" class="schedule-row">
|
||||
<view class="time-slot">
|
||||
<text class="slot-name">{{ timeSlot.name }}</text>
|
||||
<text class="slot-time">{{ timeSlot.timeRange }}</text>
|
||||
<text class="slot-name">{{ sj.mc }}</text>
|
||||
<text class="slot-time">{{ sj.kssj }}-{{ sj.jssj }}</text>
|
||||
</view>
|
||||
|
||||
<view class="course-container">
|
||||
<template v-if="timeSlot.subjects && timeSlot.subjects.length > 0">
|
||||
<view
|
||||
v-for="(course, courseIndex) in timeSlot.subjects"
|
||||
:key="courseIndex"
|
||||
:class="['course-card', getCourseColorClass(course.subject)]"
|
||||
>
|
||||
<text class="course-subject">{{ course.subject }}</text>
|
||||
<text class="course-class">{{ course.class }}</text>
|
||||
<template v-if="sj.pkkbList && sj.pkkbList.length > 0">
|
||||
<view v-for="(pkkb, pkkbIndex) in sj.pkkbList" :key="pkkbIndex"
|
||||
:class="['course-card', getCourseColorClass(pkkb.pkName)]">
|
||||
<text class="course-subject">{{ pkkb.pkName }}</text>
|
||||
<text class="course-class">{{ (pkkb.njmc || "无年级") + " " + (pkkb.bjmc || "无班级") }}</text>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="empty-course">
|
||||
@ -57,22 +46,13 @@
|
||||
<text class="title">选择周</text>
|
||||
</view>
|
||||
<view class="week-list">
|
||||
<scroll-view
|
||||
scroll-y
|
||||
style="max-height: 60vh"
|
||||
:scroll-top="targetScrollTop"
|
||||
>
|
||||
<view
|
||||
v-for="(week, index) in availableWeeks"
|
||||
:key="index"
|
||||
:class="[
|
||||
<scroll-view scroll-y style="max-height: 60vh" :scroll-top="targetScrollTop">
|
||||
<view v-for="(zc, index) in zcList" :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>
|
||||
{ active: zc.djz === curZc.djz },
|
||||
]" @click="selectWeek(zc)">
|
||||
<text>{{ zc.mc }}</text>
|
||||
<text v-if="zc.dnDjz === dnDjz" class="current-tag">当前周</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@ -82,7 +62,10 @@
|
||||
</template>
|
||||
|
||||
<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/locale/zh-cn";
|
||||
import weekOfYear from "dayjs/plugin/weekOfYear";
|
||||
@ -92,283 +75,36 @@ dayjs.locale("zh-cn");
|
||||
dayjs.extend(weekOfYear);
|
||||
dayjs.extend(isoWeek);
|
||||
|
||||
interface Course {
|
||||
subject: string;
|
||||
class: string;
|
||||
}
|
||||
let dqZc = 0;
|
||||
let xqId = '';
|
||||
|
||||
interface TimeSlot {
|
||||
name: string;
|
||||
timeRange: string;
|
||||
subjects?: Course[];
|
||||
}
|
||||
// 这是当年的第几周
|
||||
const dnDjz = ref(dayjs().isoWeek());
|
||||
|
||||
interface WeekInfo {
|
||||
weekNumber: number;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
displayText: string;
|
||||
}
|
||||
|
||||
interface WeekDay {
|
||||
dateFull: string;
|
||||
dateMMDD: string;
|
||||
weekday: string;
|
||||
}
|
||||
// 当前选中周次
|
||||
const curZc = ref<any>({});
|
||||
// 当前选中日期序号
|
||||
const curRqIndex = ref(0)
|
||||
// 周次列表
|
||||
const zcList = ref<any>([])
|
||||
// 日期列表
|
||||
const rqList = ref<any>([])
|
||||
// 时间列表
|
||||
const sjList = ref<any>([])
|
||||
|
||||
const isLoading = ref(false);
|
||||
const currentDate = ref(dayjs());
|
||||
const selectedDayIndex = ref(0);
|
||||
const scheduleData = ref<TimeSlot[]>([]);
|
||||
|
||||
// 周选择相关
|
||||
const showWeekPicker = ref(false);
|
||||
const weekPopup = ref<any>(null);
|
||||
const weekInfo = reactive<WeekInfo>({
|
||||
weekNumber: 0,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
displayText: "",
|
||||
});
|
||||
const weekDates = ref<WeekDay[]>([]);
|
||||
|
||||
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 openWeekPicker = async () => {
|
||||
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();
|
||||
if (weekPopup.value) {
|
||||
@ -376,7 +112,7 @@ const openWeekPicker = async () => {
|
||||
} else {
|
||||
console.error("Week popup ref is not available.");
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 关闭周选择弹窗
|
||||
const closeWeekPicker = () => {
|
||||
@ -393,32 +129,49 @@ const popupChange = (e: { show: boolean }) => {
|
||||
};
|
||||
|
||||
// 选择周
|
||||
const selectWeek = (week: WeekInfo) => {
|
||||
if (week.displayText === weekInfo.displayText) {
|
||||
const selectWeek = (zc: any) => {
|
||||
if (curZc.value && zc && zc.djz === curZc.value.djz) {
|
||||
// 如果点击的是当前已选中的周，则只关闭弹窗
|
||||
closeWeekPicker();
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新当前显示的周信息
|
||||
Object.assign(weekInfo, week);
|
||||
|
||||
// 更新 currentDate 以匹配新选择的周
|
||||
const selectedYear = parseInt(week.displayText.substring(0, 4));
|
||||
const selectedIsoWeek = week.weekNumber;
|
||||
currentDate.value = dayjs()
|
||||
.year(selectedYear)
|
||||
.isoWeek(selectedIsoWeek)
|
||||
.isoWeekday(1);
|
||||
|
||||
// 更新顶部日期tabs
|
||||
updateWeekDates();
|
||||
// 复制
|
||||
Object.assign(curZc.value, zc);
|
||||
Object.assign(rqList.value, curZc.value.drList);
|
||||
|
||||
// 关闭弹窗
|
||||
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";
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initializeCurrentWeekInfo();
|
||||
generateAvailableWeeks();
|
||||
updateWeekDates();
|
||||
fetchScheduleData();
|
||||
onMounted(async () => {
|
||||
const res = await dqpkApi();
|
||||
const result = res.result;
|
||||
dqZc = res.result.dqZc;
|
||||
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>
|
||||
|
||||
@ -578,14 +338,17 @@ onMounted(() => {
|
||||
background-color: #ffebee;
|
||||
border-left: 3px solid #f44336;
|
||||
}
|
||||
|
||||
&.color-phys {
|
||||
background-color: #e3f2fd;
|
||||
border-left: 3px solid #2196f3;
|
||||
}
|
||||
|
||||
&.color-math {
|
||||
background-color: #e8f5e9;
|
||||
border-left: 3px solid #4caf50;
|
||||
}
|
||||
|
||||
&.color-other {
|
||||
background-color: #f5f5f5;
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user