项目课程预览对接

src/views/course/CoursewareList.vue

@@ -1,14 +1,14 @@
 <template>
-  <a-card :bordered="false" title="课件信息">
-    <template slot="extra">
+  <a-card :bordered="false" title="课件列表">
+    <template v-if="!!!courseId" slot="extra">
       <a-button size="small" @click="goback">返回</a-button>
     </template>
-    <div class="button" style="width: 100%; height: 32px; margin-bottom: 8px; margin-right: 10%;">
+    <div v-if="!!!courseId" class="button" style="width: 100%; height: 32px; margin-bottom: 8px; margin-right: 10%;">
       <!-- <a-button type="primary" @click="goback">返回</a-button> -->
       <a-button type="primary" @click="coursewareAdd">上传课件</a-button>
     </div>
     <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData">
-      <template slot="action" slot-scope="text, record">
+      <template v-if="!!!courseId" slot="action" slot-scope="text, record">
         <a href="javascript:;" @click="detail(record)">预览</a>
         <a-divider type="vertical" />
         <a href="javascript:;" @click="edit(record)">重新上传</a>
@@ -19,23 +19,40 @@
         <a-divider type="vertical" />
         <a href="javascript:;" @click="courseQuestion(record)">抽考题</a>
       </template>
+      <template v-if="courseId" slot="action" slot-scope="text, record">
+        <a href="javascript:;" @click="openDrawer(record)">预览</a>
+      </template>
     </s-table>
+    <a-drawer title="课件预览" :destroyOnClose="true" placement="right" width="1200" :closable="true" :visible="coursewareVisible" @close="() => this.coursewareVisible = false">
+      <courseware-preview :coursewareId="selectCoursewareId"/>
+    </a-drawer>
   </a-card>
 </template>
 <script>
 import { STable, SearchCom } from '@/components'
 import { getCoursewareListByCourseId } from '@/api/course/course'
 import { deleteCourseware } from '@/api/course/courseware'
+import CoursewarePreview from './CoursewarePreview.vue'
+
 
 export default {
   components: {
     STable,
     SearchCom,
+    CoursewarePreview,
+  },
+  props: {
+    courseId: {
+      type: Number,
+    }
+  },
+  watch: {
   },
   data() {
     return {
-      queryParam: { id: this.$route.query.id },
-
+      selectCoursewareId: '',
+      coursewareVisible: false,
+      queryParam: { id: this.$route.query.id || this.courseId },
       loadData: (parameter) => {
         return getCoursewareListByCourseId(Object.assign(parameter, this.queryParam)).then((res) => {
           return res
@@ -57,6 +74,10 @@ export default {
     }
   },
   methods: {
+    openDrawer(record){
+      this.coursewareVisible = true;
+      this.selectCoursewareId = record.id;
+    },
     //新增课件
     coursewareAdd() {
       this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { courseId: this.$route.query.id } })
@@ -93,9 +114,11 @@ export default {
 
     //课件预览
     detail(record) {
+      let preview = false
+      if (!this.courseId) preview = true
       this.$router.push({
         path: '/course/CoursewarePreview',
-        query: { coursewareId: record.id, courseId: this.$route.query.id },
+        query: { coursewareId: record.id, courseId: this.$route.query.id || this.courseId },
       })
     },
   },

src/views/project/form/ProjectCourseList.vue

@@ -26,7 +26,7 @@
                 <a-menu-item>
                   <a href="javascript:;" @click="openVisible('question',record)">题库预览</a>
                 </a-menu-item>
-                <a-menu-item>
+                <a-menu-item v-if="form.id" >
                   <a href="javascript:;" @click="openVisible('topic',record)">必选题设置</a>
                 </a-menu-item>
                 <a-menu-item>
@@ -45,13 +45,13 @@
       <a-button type="primary" size="default" @click="toPrep" style="margin-right: 8px;">上一步</a-button>
       <a-button type="primary" size="default" @click="toNext">下一步</a-button>
     </a-col>
-    <a-drawer title="课程预览" placement="right" width="1200" :closable="true" :visible="courseVisible" @close="drawerClose">
-      <p>课程预览</p>
+    <a-drawer title="课程预览" :destroyOnClose="true" placement="right" width="1200" :closable="true" :visible="courseVisible" @close="drawerClose">
+      <courseware-list :courseId="selectCourseId"></courseware-list>
     </a-drawer>
-    <a-drawer title="题库预览" placement="right" width="1200" :closable="true" :visible="questionVisible" @close="drawerClose">
+    <a-drawer title="题库预览" :destroyOnClose="true" placement="right" width="1200" :closable="true" :visible="questionVisible" @close="drawerClose">
       <question-list :courseId="selectCourseId"></question-list>
     </a-drawer>
-    <a-drawer title="必选题设置" placement="right" width="1200" :closable="true" :visible="requiredTopicVisible" @close="drawerClose">
+    <a-drawer title="必选题设置" :destroyOnClose="true" placement="right" width="1200" :closable="true" :visible="requiredTopicVisible" @close="drawerClose">
       <p>必选题设置</p>
     </a-drawer>
   </a-card>
@@ -64,12 +64,14 @@ import { STable } from '@/components'
 import ProjectCourseSelect from './ProjectCourseSelect.vue'
 import { getCourseList, getCourseListByCourseIds } from '@/api/project/projectCourse'
 import QuestionList from '@/views/course/question/QuestionList.vue'
+import CoursewareList from '@/views/course/CoursewareList.vue'
 
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     STable,
     QuestionList,
+    CoursewareList,
     ProjectCourseSelect,
     QuestionList,
   },