schoolNews/schoolNewsWeb/src/views/admin/manage/study/CourseManagementView.vue

<template>
  <div class="course-management">
    <CourseList
      v-if="currentView === 'list'"
      @add="handleAdd"
      @edit="handleEdit"
    />
    <CourseAdd
      v-else-if="currentView === 'add' || currentView === 'edit'"
      :courseID="currentCourseId"
      @success="handleSuccess"
      @cancel="handleCancel"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CourseList, CourseAdd } from '@/views/course/components';
import type { Course } from '@/types/study';

type ViewType = 'list' | 'add' | 'edit';

const currentView = ref<ViewType>('list');
const currentCourseId = ref<string>();

function handleAdd() {
  currentView.value = 'add';
  currentCourseId.value = undefined;
}

function handleEdit(course: Course) {
  currentView.value = 'edit';
  currentCourseId.value = course.courseID;
}

function handleSuccess() {
  currentView.value = 'list';
  currentCourseId.value = undefined;
}

function handleCancel() {
  currentView.value = 'list';
  currentCourseId.value = undefined;
}
</script>

<style lang="scss" scoped>
.course-management {
  height: 100%;
  background: #f5f7fa;
}
</style>