|
@@ -8,56 +8,59 @@
|
|
|
<span class="week-display">{{ displayWeek }} 周</span>
|
|
|
<el-button type="primary" icon="el-icon-arrow-right" @click="nextWeek" circle
|
|
|
:disabled="currentWeek + weekOffset >= totalWeeks" >></el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="success" icon="el-icon-plus" @click="openDialog()">添加课程</el-button>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
- <el-table
|
|
|
- :data="scheduleData"
|
|
|
- style="width: 100%; background-color: white"
|
|
|
- :header-cell-style="headerStyle"
|
|
|
+ <el-table :data="scheduleData" style="width: 100%; background-color: white" :header-cell-style="headerStyle">
|
|
|
+
|
|
|
+ <el-table-column label="时间段" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ scope.row.timeLabel }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 星期一至星期日列 -->
|
|
|
+ <el-table-column
|
|
|
+ v-for="(day, index) in weekDates"
|
|
|
+ :key="index"
|
|
|
+ :label="day"
|
|
|
+ min-width="160"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ backgroundColor: columnColorMap[index],
|
|
|
+ padding: '6px',
|
|
|
+ borderRadius: '4px',
|
|
|
+ whiteSpace: 'pre-line',
|
|
|
+ minHeight: '40px'
|
|
|
+ }"
|
|
|
>
|
|
|
- <!-- 节次列 -->
|
|
|
- <el-table-column label="节次" width="80">
|
|
|
- <template #default="scope">
|
|
|
- {{ getPeriodLabel(scope.$index) }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- 时间段列 -->
|
|
|
- <el-table-column label="时间" width="140">
|
|
|
- <template #default="scope">
|
|
|
- {{ getTimeSlot(scope.$index) }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <!-- 周一至周日列 -->
|
|
|
- <el-table-column
|
|
|
- v-for="(day, index) in weekDates"
|
|
|
- :key="index"
|
|
|
- :label="day"
|
|
|
- min-width="120">
|
|
|
- <template #default="scope">
|
|
|
- <div
|
|
|
- :style="{
|
|
|
- backgroundColor: columnColorMap[index],
|
|
|
- padding: '6px',
|
|
|
- borderRadius: '4px',
|
|
|
- minHeight: '40px'
|
|
|
- }"
|
|
|
- >
|
|
|
- {{ getSchedule(scope.row, index) }}
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- </el-table>
|
|
|
+ <div
|
|
|
+ v-for="course in scope.row[`day${index + 1}`]"
|
|
|
+ :key="course.id"
|
|
|
+ style="margin-bottom: 4px; cursor: pointer"
|
|
|
+ @click.stop="openDialogEdit(course)"
|
|
|
+ >
|
|
|
+ {{ course.classdetail }} 老师:({{ course.teacher_name }}) 班级:{{ course.classroom }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
|
|
+
|
|
|
+ <AdditionDialog ref="dialogRef" @saved="loadData" />
|
|
|
|
|
|
</fs-page>
|
|
|
</template>
|
|
@@ -73,6 +76,7 @@ import { computed, onMounted, ref } from 'vue';
|
|
|
import { GetPermission,getScheduleData } from './api';
|
|
|
import { createCrudOptions } from './crud';
|
|
|
import { handleColumnPermission } from '/@/utils/columnPermission';
|
|
|
+import AdditionDialog from './AdditionDialog/index.vue';
|
|
|
|
|
|
|
|
|
|
|
@@ -100,16 +104,95 @@ const columnColorMap: string[] = [
|
|
|
|
|
|
|
|
|
|
|
|
+const timeLabels = ref<string[]>([]); // 从接口获取
|
|
|
+
|
|
|
+function getTimeSlot(index: number): string {
|
|
|
+ return timeLabels.value[index] || '—';
|
|
|
+}
|
|
|
+
|
|
|
+function getPeriodLabel(index: number): string {
|
|
|
+ return `时间段`;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
const displayWeek = computed(() => currentWeek.value + weekOffset.value)
|
|
|
|
|
|
|
|
|
-const weekDates = computed(() => {
|
|
|
- const monday = dayjs().startOf('isoWeek').add(weekOffset.value, 'week')
|
|
|
- return Array.from({ length: 7 }, (_, i) => {
|
|
|
- const date = monday.add(i, 'day')
|
|
|
- return `${['周一','周二','周三','周四','周五','周六','周日'][i]} (${date.format('MM.DD')})`
|
|
|
- })
|
|
|
-})
|
|
|
+const dialogRef = ref();
|
|
|
+
|
|
|
+function openDialog(data?: any) {
|
|
|
+ dialogRef.value.open(data);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const selectedCourses = ref<any[]>([]);
|
|
|
+const courseSelectVisible = ref(false);
|
|
|
+
|
|
|
+function editCourse(course: any) {
|
|
|
+ courseSelectVisible.value = false;
|
|
|
+ openDialog(course);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function openDialogEdit(course?: any) {
|
|
|
+ // eslint-disable-next-line no-console
|
|
|
+ console.log('course:::::', course);
|
|
|
+ if (!course) {
|
|
|
+ // 新建
|
|
|
+ dialogRef.value.open({
|
|
|
+ class_date: dayjs().format('YYYY-MM-DD'),
|
|
|
+ time: 1,
|
|
|
+ class_number: 1
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ dialogRef.value.open(course);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// function handleCellClick(row: any, dayIndex: number) {
|
|
|
+// const classText = row[`day${dayIndex + 1}`];
|
|
|
+// // eslint-disable-next-line no-console
|
|
|
+// console.log('classText:::::', classText);
|
|
|
+// const timeIndex = timeLabels.value.indexOf(row.timeLabel) + 1;
|
|
|
+// if (!classText || classText.length === 0) {
|
|
|
+// openDialog({
|
|
|
+// class_date: dayjs().startOf('isoWeek').add(dayIndex, 'day').format('YYYY-MM-DD'),
|
|
|
+// time: timeIndex,
|
|
|
+// });
|
|
|
+// }
|
|
|
+// else if (classText.length === 1) {
|
|
|
+// openDialog(classText[0]);
|
|
|
+// } else {
|
|
|
+// selectedCourses.value = classText;
|
|
|
+// courseSelectVisible.value = true;
|
|
|
+// }
|
|
|
+
|
|
|
+// } else {
|
|
|
+
|
|
|
+// openDialog({
|
|
|
+// class_date: dayjs().startOf('isoWeek').add(dayIndex, 'day').format('YYYY-MM-DD'),
|
|
|
+// time: timeLabels.value.indexOf(row.timeLabel) + 1,
|
|
|
+// classdetail: '高等数学',
|
|
|
+// teacher: 13,
|
|
|
+// semester: 1,
|
|
|
+// grade: 1,
|
|
|
+// class_number: row.id,
|
|
|
+// classroom: 'A101',
|
|
|
+// total_lessons: 48
|
|
|
+// });
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+
|
|
|
+// const weekDates = computed(() => {
|
|
|
+// const monday = dayjs().startOf('isoWeek').add(weekOffset.value, 'week')
|
|
|
+// return Array.from({ length: 7 }, (_, i) => {
|
|
|
+// const date = monday.add(i, 'day')
|
|
|
+// return `${['周一','周二','周三','周四','周五','周六','周日'][i]} (${date.format('MM.DD')})`
|
|
|
+// })
|
|
|
+// })
|
|
|
|
|
|
function nextWeek() {
|
|
|
if (currentWeek.value + weekOffset.value < totalWeeks.value){
|
|
@@ -129,39 +212,31 @@ const headerStyle = {
|
|
|
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 periodLabels = [
|
|
|
+// '第一节', '第二节', '第三节', '第四节', '第五节',
|
|
|
+// '第六节', '第七节', '第八节', '第九节', '第十节'
|
|
|
+// ]
|
|
|
+// function getPeriodLabel(index: number): string {
|
|
|
+// return periodLabels[index] || `第${index + 1}节`
|
|
|
+// }
|
|
|
|
|
|
|
|
|
const scheduleData = ref<any[]>([])
|
|
|
+
|
|
|
+const weekDates = ref<string[]>([]);
|
|
|
+
|
|
|
async function loadData() {
|
|
|
- // eslint-disable-next-line no-console
|
|
|
- console.log(currentWeek.value + weekOffset.value);
|
|
|
- scheduleData.value = await getScheduleData(currentWeek.value + weekOffset.value)
|
|
|
+ const result = await GetPermission(weekOffset.value);
|
|
|
+ timeLabels.value = result.data.time_labels;
|
|
|
+ weekDates.value = result.data.week_labels_with_date;
|
|
|
+// scheduleData.value = await getScheduleData(weekOffset.value);
|
|
|
+ scheduleData.value = await getScheduleData(result);
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
function getSchedule(row: any, index: number) {
|
|
|
return row[`day${index + 1}`] || ''
|
|
|
}
|