54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
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 './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>
|