Browse Source

no message

kllay 4 days ago
parent
commit
c346094081

+ 40 - 20
src/views/system/timetablemanage/api.ts

@@ -47,26 +47,46 @@ export function GetPermission() {
 }
 
 
-export function getScheduleData(weekNum: number): Promise<any[]> {
-	// 模拟请求课程数据,根据 weekNum 返回当前周数据
-	return new Promise((resolve) => {
-	const data = Array.from({ length: 5 }, (_, rowIndex) => {
-	return {
-		id: rowIndex,
-		day1: `课程 A-${weekNum}`,
-		day2: `课程 B-${weekNum}`,
-		day3: `课程 C-${weekNum}`,
-		day4: `课程 D-${weekNum}`,
-		day5: `课程 E-${weekNum}`
+  export async function getScheduleData(weekNum: number): Promise<any[]> {
+	const result = await GetPermission()
+	const rawList = result.data 
+  
+	// 初始化课表结构:10 节课 × 7 天
+	const table: any[] = Array.from({ length: 10 }, (_, i) => ({
+		id: i + 1,
+		day1: '',
+		day2: '',
+		day3: '',
+		day4: '',
+		day5: '',
+		day6: '',
+		day7: ''
+	}))
+  
+	// 映射 weekday(星期一到星期日)为 day1~day7
+	const dayMap: Record<number, string> = {
+		1: 'day1',
+		2: 'day2',
+		3: 'day3',
+		4: 'day4',
+		5: 'day5',
+		6: 'day6',
+		7: 'day7'
+	}
+  
+	// 填充课程内容
+	for (const item of rawList) {
+		const dayKey = dayMap[item.datetime] 
+		const periodIndex = item.class_number - 1 
+		const content = `${item.classdetail} (${item.teacher_name}) 班级:${item.classroom}`
+  
+		if (table[periodIndex] && dayKey) {
+			table[periodIndex][dayKey] = content
 		}
-	})
-	setTimeout(() => resolve(data), 500)
-	})
-  }
+	}
+  
+	return table
+  } 
+
   
-  export function saveCourse(data: any) {
-	// 保存课程(模拟)
-	// console.log('保存成功', data)
-	return Promise.resolve({ success: true })
-}
   

+ 3 - 3
src/views/system/timetablemanage/crud.tsx

@@ -56,9 +56,9 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 			rowHandle:{
 				show: false,
 			},
-			// table:{
-			// 	show:false,
-			// },
+			table:{
+				show:false,
+			},
 			actionbar: {
 				show:false,
 				buttons: {

+ 70 - 15
src/views/system/timetablemanage/index.vue

@@ -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 {