index.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <div style="overflow-y: auto">
  3. <!-- <img :src="images" style="width: 100%; height: 100%" /> -->
  4. <a-layout>
  5. <Header @onChangeCurrent="onChangeCurrent" />
  6. <div style="width: 71%; margin-left: 10%">
  7. <a-tabs v-model:activeKey="activeKey" type="card">
  8. <a-tab-pane key="1" tab="教室信息">
  9. <courseInfo :courseInfoId="courseInfoId" @nextStep="nextStep" />
  10. </a-tab-pane>
  11. <a-tab-pane key="2" tab="课程制作" :disabled="courseInfoId==null">
  12. <courseProduction :courseInfoId="courseInfoId" />
  13. </a-tab-pane>
  14. <a-tab-pane key="3" tab="学员管理" :disabled="courseInfoId==null">
  15. <StudentDetails></StudentDetails>
  16. </a-tab-pane>
  17. <a-tab-pane key="4" tab="作业布置" :disabled="courseInfoId==null">
  18. <div>这里是作业布置的内容</div>
  19. </a-tab-pane>
  20. <a-tab-pane key="5" tab="测试布置" :disabled="courseInfoId==null">
  21. <div>这里是测试布置的内容</div>
  22. </a-tab-pane>
  23. </a-tabs>
  24. </div>
  25. </a-layout>
  26. <Footer />
  27. </div>
  28. </template>
  29. <script setup>
  30. import { ref, onMounted } from 'vue'
  31. import Header from '@/views/portal/components/Header.vue'
  32. import Footer from '@/views/portal/components/Footer.vue'
  33. import courseInfo from './components/courseInfo.vue'
  34. import courseProduction from './components/courseProduction/index.vue'
  35. import StudentDetails from './components/StudentDetails.vue'
  36. import { useRoute, useRouter } from 'vue-router'
  37. const router = useRouter()
  38. const route = useRoute()
  39. const activeKey = ref('1') // 默认选中的标签页
  40. const courseInfoId = ref(route.query.id || null) // 编辑课程信息id
  41. const nextStep = (id) => {
  42. courseInfoId.value = id
  43. activeKey.value = '2'
  44. }
  45. const onChangeCurrent = (current) => {
  46. router.push({
  47. path: '/' + current
  48. })
  49. }
  50. // onMounted(() => {
  51. // })
  52. </script>
  53. <style scoped>
  54. /* 自定义样式 */
  55. </style>