|
@@ -19,14 +19,14 @@
|
|
|
<!-- 节次列 -->
|
|
|
<el-table-column label="节次" width="80">
|
|
|
<template #default="scope">
|
|
|
- <!-- {{ getPeriodLabel(scope.$index) }} -->
|
|
|
+ {{ getPeriodLabel(scope.$index) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<!-- 时间段列 -->
|
|
|
<el-table-column label="时间" width="140">
|
|
|
<template #default="scope">
|
|
|
- <!-- {{ getTimeSlot(scope.$index) }} -->
|
|
|
+ {{ getTimeSlot(scope.$index) }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
@@ -37,7 +37,18 @@
|
|
|
:label="day"
|
|
|
min-width="120">
|
|
|
<template #default="scope">
|
|
|
- {{ getSchedule(scope.row, index) }}
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ backgroundColor: columnColorMap[index],
|
|
|
+ padding: '6px',
|
|
|
+ borderRadius: '4px',
|
|
|
+ minHeight: '40px'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ getSchedule(scope.row, index) }}
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
@@ -59,7 +70,7 @@ import isoWeek from 'dayjs/plugin/isoWeek';
|
|
|
import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear';
|
|
|
import weekOfYear from 'dayjs/plugin/weekOfYear';
|
|
|
import { computed, onMounted, ref } from 'vue';
|
|
|
-import { GetPermission } from './api';
|
|
|
+import { GetPermission,getScheduleData } from './api';
|
|
|
import { createCrudOptions } from './crud';
|
|
|
import { handleColumnPermission } from '/@/utils/columnPermission';
|
|
|
|
|
@@ -77,11 +88,22 @@ const totalWeeks = ref(dayjs().isoWeeksInYear())
|
|
|
const weekOffset = ref(0)
|
|
|
|
|
|
|
|
|
+const columnColorMap: string[] = [
|
|
|
+ '#e3f2fd',
|
|
|
+ '#e8f5e9',
|
|
|
+ '#fff3e0',
|
|
|
+ '#fce4ec',
|
|
|
+ '#ede7f6',
|
|
|
+ '#f3e5f5',
|
|
|
+ '#fbe9e7'
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
const displayWeek = computed(() => currentWeek.value + weekOffset.value)
|
|
|
|
|
|
|
|
|
const weekDates = computed(() => {
|
|
|
- // 使用 ISO 标准周一作为本周开始
|
|
|
const monday = dayjs().startOf('isoWeek').add(weekOffset.value, 'week')
|
|
|
return Array.from({ length: 7 }, (_, i) => {
|
|
|
const date = monday.add(i, 'day')
|
|
@@ -90,23 +112,55 @@ const weekDates = computed(() => {
|
|
|
})
|
|
|
|
|
|
function nextWeek() {
|
|
|
- if (currentWeek.value + weekOffset.value < totalWeeks.value) weekOffset.value++
|
|
|
+ if (currentWeek.value + weekOffset.value < totalWeeks.value){
|
|
|
+ weekOffset.value++;
|
|
|
+ loadData() ;
|
|
|
+ }
|
|
|
}
|
|
|
function prevWeek() {
|
|
|
- weekOffset.value--
|
|
|
+ weekOffset.value--;
|
|
|
+ loadData() ;
|
|
|
}
|
|
|
|
|
|
const headerStyle = {
|
|
|
- backgroundColor: '#f5f5f5', // 浅灰色背景
|
|
|
- fontWeight: 'bold', // 加粗文字
|
|
|
- color: '#333' // 字体颜色稍深
|
|
|
+ backgroundColor: '#f5f5f5',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: '#333',
|
|
|
+ textAlign: 'center'
|
|
|
+}
|
|
|
+
|
|
|
+const timeSlots = [
|
|
|
+ '08:15 - 08:55',
|
|
|
+ '09:00 - 09:40',
|
|
|
+ '09:50 - 10:30',
|
|
|
+ '10:40 - 11:20',
|
|
|
+ '11:25 - 12:05',
|
|
|
+ '13:30 - 14:10',
|
|
|
+ '14:20 - 15:00',
|
|
|
+ '15:10 - 15:50',
|
|
|
+ '16:00 - 16:40',
|
|
|
+ '16:50 - 17:30'
|
|
|
+]
|
|
|
+function getTimeSlot(index: number): string {
|
|
|
+ return timeSlots[index] || '—'
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const periodLabels = [
|
|
|
+ '第一节', '第二节', '第三节', '第四节', '第五节',
|
|
|
+ '第六节', '第七节', '第八节', '第九节', '第十节'
|
|
|
+]
|
|
|
+function getPeriodLabel(index: number): string {
|
|
|
+ return periodLabels[index] || `第${index + 1}节`
|
|
|
}
|
|
|
|
|
|
|
|
|
const scheduleData = ref<any[]>([])
|
|
|
-// async function loadData() {
|
|
|
-// scheduleData.value = await getScheduleData(currentWeek + weekOffset.value)
|
|
|
-// }
|
|
|
+async function loadData() {
|
|
|
+ // eslint-disable-next-line no-console
|
|
|
+ console.log(currentWeek.value + weekOffset.value);
|
|
|
+ scheduleData.value = await getScheduleData(currentWeek.value + weekOffset.value)
|
|
|
+}
|
|
|
|
|
|
function getSchedule(row: any, index: number) {
|
|
|
return row[`day${index + 1}`] || ''
|
|
@@ -120,6 +174,7 @@ onMounted(async () => {
|
|
|
resetCrudOptions(newOptions);
|
|
|
// 刷新
|
|
|
crudExpose.doRefresh();
|
|
|
+ await loadData();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
@@ -131,8 +186,8 @@ onMounted(async () => {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 20px;
|
|
|
- margin: 16px auto; /* 顶部/底部间距 + 自动居中 */
|
|
|
- width: fit-content; /* 宽度以内容为准 */
|
|
|
+ margin: 16px auto;
|
|
|
+ width: fit-content;
|
|
|
}
|
|
|
|
|
|
.week-display {
|