课件上传，必选题

2021-12-21 20:33:07 +08:00 · 2021-12-21 20:33:07 +08:00 · fe80219cbe
parent 5589c7fa4f
commit fe80219cbe
6 changed files with 339 additions and 76 deletions
--- a/src/api/course/courseware.js
+++ b/src/api/course/courseware.js
@ -2,7 +2,7 @@ import request from '@/utils/request'

 const coursewareApi = {
  add: '/courseManagement/xmCourseCourseware/addOrUpdate',
-  //   get: '/courseManagement/course/details',
+  get: '/courseManagement/xmCourseCourseware/details',
  //   update: 'sys/menu/update',
  del: 'courseManagement/xmCourseCourseware/delete',
  //   updateStatus: 'sys/menu/updateStatus',
@ -41,3 +41,13 @@ export function coursewareClassList(params) {
    params: params
  })
 }
+
+
+// 课件详情
+export function coursewareDeatil(params) {
+  return request({
+    url: coursewareApi.get,
+    method: 'get',
+    params: params
+  })
+}
--- a/src/api/course/question/requiredQuestion.js
+++ b/src/api/course/question/requiredQuestion.js
@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+const requiredQuesitonApi = {
+    list: 'courseManagement/requiredQuestion/listPage',
+    addOrUpdate: '/courseManagement/requiredQuestion/addOrUpdate',
+    requiredQuestionId:'courseManagement/requiredQuestion/requiredQuestionId',
+    //   questionList:'/courseManagement/course/questionList',
+}
+
+
+// 必选题列表
+export function requiredList(params) {
+    return request({
+        url: requiredQuesitonApi.list,
+        method: 'get',
+        params: params
+    })
+}
+
+// 必选题新增和设置
+export function addOrUpdate(params) {
+    return request({
+        url: requiredQuesitonApi.addOrUpdate,
+        method: 'post',
+        params: params
+    })
+}
+
+//必选题题目ID
+export function requiredQuestionId(params) {
+    return request({
+        url: requiredQuesitonApi.requiredQuestionId,
+        method: 'get',
+        params: params
+    })
+}
+
+
+// export function menuGet (params) {
+//   return request({
+//     url: menuApi.get,
+//     method: 'post',
+//     data: params
+//   })
+// }
+// export function menuUpdate (params) {
+//   return request({
+//     url: menuApi.update,
+//     method: 'post',
+//     data: params
+//   })
+// }
+
+
--- a/src/views/course/CoursewareAddOrUpdate.vue
+++ b/src/views/course/CoursewareAddOrUpdate.vue
@ -4,15 +4,15 @@
      <a-button @click="goback">返回</a-button>
      <a-button type="primary" @click="save">保存</a-button>
    </template>
-    <a-tabs type="card" :default-active-key="parentTabKey" @change="parentcallback">
+    <a-tabs type="card" :default-active-key="fileUpload.parentTabKey" @change="parentcallback">
      <a-tab-pane key="1" tab="文件上传">
-        <a-tabs :default-active-key="tabkey" @change="callback">
+        <a-tabs :default-active-key="fileUpload.tabkey" @change="callback">
          <a-tab-pane key="1" tab="视频上传">
            <div style="background: #ececec; padding: 30px">
              <a-card title="视频上传" :bordered="false" style="width: 100%">
                <div style="margin-bottom: 30px">
                  课件名称：&nbsp;
-                  <a-input placeholder="课件名称" v-model="videoForm.name" style="width: 40%" />
+                  <a-input placeholder="课件名称" v-model="fileUpload.videoForm.name" style="width: 40%" />
                </div>
                <div style="margin-bottom: 30px; margin-top: 20px">
                  课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
@ -23,18 +23,39 @@
                  <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>

                  <!-- 课件分类弹框 -->
-                  <a-modal v-model="visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
-                    <h1>hello world</h1>
+                  <!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
+                    <s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
+                      <span slot="type" slot-scope="text, record">
+                        <a-tag color="cyan" v-if="text === 0">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                        <a-tag color="blue" v-if="text === 1">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                        <a-tag color="purple" v-if="text === 2">
+                          {{ record.type | typeFilter }}
+                        </a-tag>
+                      </span>
+                      <span slot="action" slot-scope="text, record">
+                        <template>
+                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
+                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
+                          <a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
+                            <a>删除</a>
+                          </a-popconfirm>
+                        </template>
+                      </span>
+                    </s-table> -->
                  </a-modal>
                </div>
                <div>课件大小：&nbsp;
-                  <a-input :disabled="true" :value="videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
+                  <a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
                </div>
                <br />
                <div>
-                  视频上传：&nbsp; <a-upload list-type="picture" :default-file-list="successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="uploadLoading">
+                  视频上传：&nbsp; <a-upload list-type="picture" :default-file-list="fileUpload.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="fileUpload.uploadLoading">
                    <a-button>
-                      <a-icon type="upload" /> {{uploadButtonText}}
+                      <a-icon type="upload" /> {{fileUpload.uploadButtonText}}
                    </a-button>&nbsp;&nbsp;&nbsp;
                  </a-upload>
                </div>
@ -43,17 +64,10 @@
          </a-tab-pane>
          <a-tab-pane key="2" tab="文本上传">
            <div style="background: #ececec; padding: 30px">
-              <a-card title="视频上传" :bordered="false" style="width: 100%">
-                <div style="margin-bottom: 30px">
-                  视频上传：&nbsp; <a-upload list-type="picture" :beforeUpload="beforeUpload">
-                    <a-button>
-                      <a-icon type="upload" /> 选择文件
-                    </a-button>&nbsp;&nbsp;&nbsp;
-                  </a-upload>
-                </div>
+              <a-card title="文件上传" :bordered="false" style="width: 100%">
                <div style="margin-bottom: 30px">
                  课件名称：&nbsp;
-                  <a-input placeholder="课件名称" v-model="textForm.name" style="width: 40%" />
+                  <a-input placeholder="课件名称" v-model="fileUpload.videoForm.name" style="width: 40%" />
                </div>
                <div style="margin-bottom: 30px; margin-top: 20px">
                  课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
@ -64,12 +78,20 @@
                  <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>

                  <!-- 课件分类弹框 -->
-                  <a-modal v-model="visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
-                    <h1>hello world</h1>
+                  <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
+
                  </a-modal>
                </div>
                <div>课件大小：&nbsp;
-                  <a-input :disabled="true" :value="textForm.size" style="width: 140px" />
+                  <a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
+                </div>
+                <br />
+                <div>
+                  文件上传：&nbsp; <a-upload list-type="picture" :default-file-list="fileUpload.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="fileUpload.uploadLoading">
+                    <a-button>
+                      <a-icon type="upload" /> {{fileUpload.uploadButtonText}}
+                    </a-button>&nbsp;&nbsp;&nbsp;
+                  </a-upload>
                </div>
              </a-card>
            </div>
@ -93,22 +115,37 @@ import axios from 'axios'
 import { ossUpload } from '@/api/sys/oss'
 import { coursewareAdd } from '@/api/course/courseware'
 import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
-import { forEach } from 'store/storages/all'

 export default {
  data() {
    return {
+      fileUpload: {
        visible: false,
-      textForm: {},
+        textForm: {}, //文本上传表单
        videoForm: {
-        sizeStr: '0',
+          //视频上传表单
+          sizeStr: '0', //视频大小
          videoPath: [], //用于存放视频路径
        },
-      parentTabKey: '1',
+        parentTabKey: '1', //顶级选项卡， 文件上传/视频服务器连接/第三方连接
        tabkey: '1',
        uploadButtonText: '选择文件',
        successOssFile: [],
        uploadLoading: false, // 控制 选择文件 按钮是否转圈
+        columns: [
+        {
+          title: '标签名',
+          dataIndex: 'name',
+          width: '20%'
+        },
+      ],
+      // loadData: parameter => {
+      //   return menuList(Object.assign(parameter, this.queryParam)).then((res) => {
+      //     const menuList = listToTree(res.data, [], rootParentId)
+      //     return menuList
+      //   })
+      // }
+      },
    }
  },
  components: {},
@ -125,10 +162,16 @@ export default {
    },

    //顶级标签页
-    parentcallback(key) {},
+    parentcallback(key) {
+      console.log(key)
+      this.fileUpload = { videoForm: [] }
+      this.parentTabKey = key
+    },
    //作用于子标签页
    callback(key) {
      console.log(key)
+      this.fileUpload = { videoForm: [] } //清空视频上传的form表单
+      this.tabKey = key //等于当前的Key
    },

    //获取Tonken
@ -139,12 +182,15 @@ export default {
    },

    beforeUpload(file) {
-      this.uploadLoading = true
-      this.uploadButtonText = '上传中...'
-
      //文件类型 (后缀)
      var suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
-      if (suffix != 'mp4') return this.$message.error('文件类型必须是mp4')
+      if (this.fileUpload.tabkey == 1 && suffix != 'mp4') {
+        return this.$message.error('文件类型必须是mp4')
+      }
+
+      //告知用户是否正在上传
+      this.fileUpload.uploadLoading = true
+      this.fileUpload.uploadButtonText = '上传中...'

      //处理视频上传
      const data = new FormData()
@ -159,14 +205,14 @@ export default {
      axios
        .post(ossUpload(), data, { headers: header })
        .then((res) => {
-          this.uploadLoading = false
-          this.uploadButtonText = '选择文件'
+          this.fileUpload.uploadLoading = false
+          this.fileUpload.uploadButtonText = '选择文件'
          if (res.data.code === 200) {
            this.$message.success('视频上传成功！')

            res.data.uuid = file.uid
            res.data.size = file.size
-            this.successOssFile.push(res.data)
+            this.fileUpload.successOssFile.push(res.data)

            //刷新文件大小
            this.refreshFileSize()
@ -184,26 +230,26 @@ export default {

    //刷新大小
    refreshFileSize() {
-      this.videoForm.size = 0
-      for (let i = 0; i < this.successOssFile.length; i++) {
+      this.fileUpload.videoForm.size = 0
+      for (let i = 0; i < this.fileUpload.successOssFile.length; i++) {
        //读取文件大小
-        let fileSize = this.successOssFile[i].size
+        let fileSize = this.fileUpload.successOssFile[i].size

        //视频转换成MB
        var videoSize = parseFloat(fileSize) / 1024 / 1024

        //保留两位小数
-        this.videoForm.size = this.videoForm.size + parseFloat(videoSize)
+        this.fileUpload.videoForm.size = this.fileUpload.videoForm.size + parseFloat(videoSize)
      }
-      this.videoForm.sizeStr = this.videoForm.size.toFixed(2)
+      this.fileUpload.videoForm.sizeStr = this.fileUpload.videoForm.size.toFixed(2)
    },

    //删除已上传的视频
    deleteVideo(file) {
      // 删除元素
-      for (let i = 0; i < this.successOssFile.length; i++) {
-        if (this.successOssFile[i].uuid == file.uid) {
-          this.successOssFile.splice(i, 1)
+      for (let i = 0; i < this.fileUpload.successOssFile.length; i++) {
+        if (this.fileUpload.successOssFile[i].uuid == file.uid) {
+          this.fileUpload.successOssFile.splice(i, 1)
          break
        }
      }
@ -213,39 +259,42 @@ export default {

    //弹框
    showModal() {
-      this.visible = true
+      this.fileUpload.visible = true
    },

    //保存
    save() {
+      
+      console.log("课程IDID ID-------",this.$route.query.courseId);
+
      //视频赋给表单里面的字段
-      this.successOssFile.forEach((item, index) => {
-        this.videoForm.videoPath.push(item.url)
+      this.fileUpload.successOssFile.forEach((item, index) => {
+        this.fileUpload.videoForm.videoPath.push(item.url)
      })

-      console.log(this.videoForm.videoPath.toString())
+      console.log(this.fileUpload.videoForm.videoPath.toString())
      //转JSON
-      this.videoForm.videoPath = this.videoForm.videoPath.toString();
+      this.fileUpload.videoForm.videoPath = this.fileUpload.videoForm.videoPath.toString()

      //给课程ID
-      this.videoForm.courseId = this.$route.query.courseId;
-      console.log(this.videoForm)
+      this.fileUpload.videoForm.courseId = this.$route.query.courseId
+      console.log(this.fileUpload.videoForm)

-      let from;
-      if (this.parentTabKey == '1' && this.tabkey == '1') {
+      let from
+      if (this.fileUpload.parentTabKey == '1' && this.fileUpload.tabkey == '1') {
        //保存视频上传
        from = this.videoFormV()
        if (typeof form == 'boolean' && !form) return
      }

      //提交保存请求
-      coursewareAdd(from).then((res) =>{
-        console.log(res);
+      coursewareAdd(from).then((res) => {
+        console.log(res)
        if (res.code == 200) {
-          this.$message.success('课件保存成功！');
-          this.goback();
-        }else{
-          this.$message.error('保存失败！');
+          this.$message.success('课件保存成功！')
+          this.goback()
+        } else {
+          this.$message.error('保存失败！')
        }
      })
    },
@ -253,18 +302,18 @@ export default {
    //视频上传
    videoFormV() {
      // 验证课件名称是否为空
-      if (!this.videoForm.name || this.videoForm.name === '') {
+      if (!this.fileUpload.videoForm.name || this.fileUpload.videoForm.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
-      } else if (this.videoForm.videoPath.length == 0) {
+      } else if (this.fileUpload.videoForm.videoPath.length == 0) {
        this.$message.error('请上传课件文件！')
        return false
      }

-      let form = {};
-      form = this.videoForm;  
-      console.log('111111',form);
-      return form;
+      let form = {}
+      form = this.fileUpload.videoForm
+      console.log('111111', form)
+      return form
    },
  },
 }
--- a/src/views/course/CoursewareList.vue
+++ b/src/views/course/CoursewareList.vue
@ -36,7 +36,7 @@ export default {
    return {
      queryParam: { id: this.$route.query.id },

-      loadData: (parameter) => {
+      loadData:(parameter) => {
        return getCoursewareListByCourseId(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
@ -60,7 +60,6 @@ export default {
    //新增课件
    coursewareAdd() {
      this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { courseId: this.$route.query.id } })
-      console.log('IDIDIDID', this.$route.query.id)
    },

    //返回
@ -73,17 +72,28 @@ export default {
      deleteCourseware({ id: record.id }).then((res) => {
        if (res.code == 200) {
          this.$refs.table.refresh(true)
-          this.$message.success('删除成功！');
+          this.$message.success('删除成功！')
        } else {
-          this.$message.error('删除失败！');
+          this.$message.error('删除失败！')
        }
      })
    },
    // 抽考題
    courseQuestion(record) {
-      console.log('哈哈')
-      this.$router.push({ path: '/course/question/examQuestion', query: { id: record.id } })
+      this.$router.push({
+        path: '/course/question/ExamQuestion',
+        query: { coursewareId: record.id, courseId: this.$route.query.id },
+      })
    },
+
+    //课件预览
+    detail(record){
+      this.$router.push({
+        path: '/course/CoursewarePreview',
+        query: { coursewareId: record.id}
+      })  
+    }
+
  },
 }
 </script>
--- a/src/views/course/CoursewarePreview.vue
+++ b/src/views/course/CoursewarePreview.vue
@ -0,0 +1,53 @@
+<template>
+  <a-card :bordered="false" title="课件预览">
+    <template slot="extra">
+      <h4 style="margin-right: 15px; display:inline-block">课程类别</h4>
+      <a-button size="small" @click="goback">返回</a-button>
+    </template>
+
+    <div style="width:100%">
+      <a-row>
+        <a-col :span="6" :push="18">
+          <!-- 这里放文件名称...... -->
+          <div>
+            <h1 style="margin-bottom:18px;">文件名称</h1>
+            <h1>哈哈哈</h1>
+
+          </div>
+        </a-col>
+        <a-col :span="18" :pull="6">
+          <!-- 这里面对应放视频 -->
+          <h1>视频视频视频</h1>
+        </a-col>
+      </a-row>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { coursewareDeatil } from '@/api/course/courseware'
+
+export default {
+  components: {},
+  data() {
+    return {
+      queryParam: { id: this.$route.query.coursewareId },
+      courseware:[] //课件详情
+    }
+  },
+  created() {
+    let parameter = {}
+    console.log("11111",this.queryParam);
+    coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
+      console.log(res)
+      this.courseware = res;
+    })
+  },
+  methods: {
+    //返回
+    goback() {
+      this.$router.push({ path: '/course/CourseList', query: {} })
+    },
+  },
+}
+</script>
--- a/src/views/course/question/ExamQuestion.vue
+++ b/src/views/course/question/ExamQuestion.vue
@ -0,0 +1,87 @@
+<template>
+  <a-card :bordered="false" title="必选题设置">
+    <template slot="extra">
+      <a-button size="small" @click="goback">返回</a-button>
+      <a-button size="small" @click="save">确定</a-button>
+    </template>
+
+    <div>
+      <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
+      </s-table>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import { requiredList, addOrUpdate, requiredQuestionId } from '@/api/course/question/requiredQuestion'
+export default {
+  components: {
+    STable,
+  },
+  data() {
+    return {
+      queryParam: { courseId: this.$route.query.courseId, coursewareId: this.$route.query.coursewareId }, //获取必选题列表请求参数
+      saveParam: { selectedRowKeys: this.selectedRowKeys, coursewareId: this.$route.query.coursewareId }, //
+      selectedRowKeys: [],
+      selectedRows: [],
+      form: {
+        ids:'',
+        coursewareId:''
+      },
+      loadData: (parameter) => {
+        return requiredList(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res
+        })
+      },
+      columns: [
+        { title: '题目内容', dataIndex: 'questionName', key: 'questionName' },
+        { title: '题目类型', dataIndex: 'questionTypeName', key: 'questionTypeName' },
+      ],
+    }
+  },
+  created() {
+    //获取已选中的必选题
+    this.getRequiredQuestionId()
+  },
+  methods: {
+    start() {},
+
+    //返回到课件列表
+    goback() {
+      this.$router.push({ path: '/course/CoursewareList', query: { id: this.$route.query.courseId } })
+    },
+
+    onSelectChange(selectedRowKeys, selectedRows) {
+      console.log('selectedRowKeys', selectedRowKeys) //这一行的题目ID
+      console.log('selectedRows', selectedRows) //这一行的对象
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+
+    //确定
+    save() {
+      console.log('11111111')
+      this.form.ids = this.selectedRowKeys.toString();
+      this.form.coursewareId = this.$route.query.coursewareId;
+      console.log('from:{}', this.form)
+      
+      addOrUpdate(this.form).then((res) => {
+        if (res.code == 200) {
+          this.$message.info('保存成功')
+          //新增完成后直接返回课程列表
+          this.goback();
+        }
+      })
+    },
+
+    //获取必选题题目ID
+    getRequiredQuestionId() {
+      // 查询所有题目id列表
+      requiredQuestionId({ coursewareId: this.$route.query.coursewareId }).then((res) => {
+        console.log('+++++++++++++', res)
+      })
+    },
+  },
+}
+</script>