新增自主课程、资源库、资源库上传、资源库编辑

2021-12-28 16:15:15 +08:00 · 2021-12-28 16:15:15 +08:00 · 36c9db5960
parent 9d2e158543
commit 36c9db5960
7 changed files with 249 additions and 110 deletions
--- a/src/api/course/courseware.js
+++ b/src/api/course/courseware.js
@ -4,8 +4,8 @@ const coursewareApi = {
    add: '/courseManagement/xmCourseCourseware/addOrUpdate',
    get: '/courseManagement/xmCourseCourseware/details',
    del: 'courseManagement/xmCourseCourseware/delete',
-    classList: '/courseManagement/coursewareClassify/listPage'
-
+    classList: '/courseManagement/coursewareClassify/listPage',
+    resource:'/courseManagement/xmCourseCourseware/resource'
 }


@ -45,4 +45,14 @@ export function coursewareDeatil(params) {
        method: 'get',
        params: params
    })
+}
+
+
+// 资源库
+export function resource(params) {
+    return request({
+        url: coursewareApi.resource,
+        method: 'get',
+        params: params
+    })
 }
--- a/src/views/course/CourseAdd.vue
+++ b/src/views/course/CourseAdd.vue
@ -194,7 +194,7 @@ export default {
    //返回
    goback() {
      this.$router.push({
-        path: '/course/CourseList',
+        path: '/course/CourseList/'+this.$route.query.type,
        query: {
          courseName: this.$route.query.courseName,
        },
--- a/src/views/course/CourseList.vue
+++ b/src/views/course/CourseList.vue
@ -28,6 +28,7 @@
  </a-card>
 </template>

+
 <script>
 import { STable, SearchCom } from '@/components'
 import { getCourseList, deleteCourse } from '@/api/course/course'
@ -42,10 +43,10 @@ export default {
  data() {
    return {
      dictCourseTag: [],
-      queryParam: { courseName: this.$route.query.courseName || '', tag: [] },
+      queryParam: { courseName: this.$route.query.courseName || '', tag: [], type: '' },
      queryOptions: [
        { type: 'input', placeholder: '课程名称', key: 'courseName' },
-        { type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType' , options: [] },
+        { type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType', options: [] },
        { type: 'select-dic', placeholder: '请选择标签', key: 'tag', mode: 'multiple', options: [] },
      ],
      loadData: (parameter) => {
@ -66,6 +67,13 @@ export default {
  created() {
    this.dictionaryDropDown()
  },
+  watch: {
+    $route(to, from) {
+      //to是前往的路由  from是去往的路由 同一个组件只会渲染一次
+      this.changeType(to.path)
+      this.$refs.table.refresh(true)
+    },
+  },
  methods: {
    // 获取数据词典
    dictionaryDropDown() {
@ -73,15 +81,13 @@ export default {

      //课程类别
      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
-        console.log('课程类别----',res)
-        this.queryOptions[1].options = dictToTree(res.data, [], 0);
+        console.log('课程类别----', res)
+        this.queryOptions[1].options = dictToTree(res.data, [], 0)
      })

      //课程标签字典
      dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
        this.queryOptions[2].options = res.data
-        
-
      })
    },
    handleRefresh() {
@ -117,9 +123,27 @@ export default {
        path: '/course/CourseAdd',
        query: {
          courseName: this.queryParam.courseName,
+          type: this.queryParam.type
        },
      })
    },
+    //变更类型
+    changeType(path) {
+      var arr = []
+      if (path) {
+        arr = path.split('/')
+      } else {
+        arr = this.$route.path.split('/')
+      }
+      let str = arr[arr.length - 1]
+      this.queryParam.type = str
+
+      //权限
+      // str === 'sys' ? (this.power.add = 'project:sys:add') : (this.power.add = 'project:add')
+      // str === 'sys' ? (this.power.del = 'project:sys:del') : (this.power.del = 'project:del')
+      // str === 'sys' ? (this.power.edit = 'project:sys:edit') : (this.power.edit = 'project:edit')
+      // str === 'sys' ? (this.power.release = 'project:sys:release') : (this.power.release = 'project:release')
+    },
  },
 }
 </script>
--- a/src/views/course/CoursewareAddOrUpdate.vue
+++ b/src/views/course/CoursewareAddOrUpdate.vue
@ -16,17 +16,20 @@
                  <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="请选择分类">
+                  课件分类：&nbsp;
+                  <a-tree-select v-model="fileUpload.videoForm.classify" style="width: 300px" :tree-data="coursewareClassfiy" placeholder="请选择课程分类"></a-tree-select>
+
+                  <!-- <a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                      {{ (i + 9).toString(36) + i }}
                    </a-select-option>
-                  </a-select>
-                  <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
-                  <!-- 课件分类弹框 -->
+                  </a-select> -->
+                  <!-- <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button> -->
+                  <!-- 课件分类弹框 
                  <a-modal v-model="fileUpload.visible" title="课程分类管理" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">

                    <div class="table-operator">
-                      <a-button type="primary" icon="plus">新增分类</a-button>
+                      <a-button type="primary" icon="plus" @click="$refs.classfiyForm.add">新增分类</a-button>
                    </div>
                    <s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :alert="false" :data="classfiy" :showPagination="false" :expandRowByClick="true">
                      <span slot="action" slot-scope="text, record">
@ -41,7 +44,7 @@
                        </template>
                      </span>
                    </s-table>
-                  </a-modal>
+                  </a-modal> -->
                </div>
                <div>课件大小：&nbsp;
                  <a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
@ -66,38 +69,8 @@
                  <a-input placeholder="课件名称" v-model="fileUpload.textForm.name" style="width: 40%" />
                </div>
                <div style="margin-bottom: 30px; margin-top: 20px">
-                  课件分类：&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
-                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
-                      {{ (i + 9).toString(36) + i }}
-                    </a-select-option>
-                  </a-select>
-                  <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
-
-                  <!-- 课件分类弹框 -->
-                  <!-- <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> -->
+                  课件分类：&nbsp;
+                  <a-tree-select v-model="fileUpload.textForm.classify" style="width: 300px" :tree-data="coursewareClassfiy" placeholder="请选择课程分类"></a-tree-select>
                </div>
                <div>课件大小：&nbsp;
                  <a-input-number :disabled="true" v-model="fileUpload.textForm.sizeStr" :min="0" />&nbsp;&nbsp;&nbsp; MB
@ -235,14 +208,18 @@ import storage from 'store'
 import axios from 'axios'
 import { ossUpload } from '@/api/sys/oss'
 import { coursewareAdd, coursewareClassList } from '@/api/course/courseware'
-import { listToTree } from '@/utils/util'
+// import { listToTree } from '@/utils/util'
+import { dictToTree } from '@/utils/util'
+import { dictionaryDropDown } from '@/api/sys/dictionaryItem'

-const rootParentId = 0
+// const rootParentId = 0

 export default {
  data() {
    return {
-      treeData: [],
+      // treeData: [],
+      ifResources : this.$route.query.ifResources,
+      coursewareClassfiy: [],
      courseware: {}, //课件详情
      queryParam: { coursewareId: this.$route.query.coursewareId }, //编辑传参
      successOssFile: [],
@ -252,7 +229,7 @@ export default {
      videoPath: [], //用于存放视频路径
      fileUpload: {
        visible: false,
-        tabkey: '1',
+        tabkey:  this.$route.query.type ? this.$route.query.type : '1',
        videoForm: {
          //视频上传表单
          sizeStr: '0', //视频大小
@ -274,24 +251,26 @@ export default {
        sizeStr: '',
        type: '4',
      },
-      columns: [
-        {
-          title: '名称',
-          dataIndex: 'name',
-          key: 'name',
-          ellipsis: true,
-        },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          width: '200px',
-          scopedSlots: { customRender: 'action' },
-        },
-      ],
+      // columns: [
+      //   {
+      //     title: '名称',
+      //     dataIndex: 'name',
+      //     key: 'name',
+      //     ellipsis: true,
+      //   },
+      //   {
+      //     title: '操作',
+      //     dataIndex: 'action',
+      //     width: '200px',
+      //     scopedSlots: { customRender: 'action' },
+      //   },
+      // ],
    }
  },
-  components: { STable, listToTree },
+  components: { STable },
  created() {
+    //数据字典加载
+    this.dictionaryDropDown()
    //判断是否加载数据
    if (this.queryParam.coursewareId) this.load()
  },
@ -302,37 +281,44 @@ export default {
      // this.classfiy()
    },

-    //加载分类标签数据
-    classfiy() {
-      let parameter = {}
-      return coursewareClassList(Object.assign(parameter, this.queryParam)).then((res) => {
-        const list2tree1 = (list, parentId) => {
-          return list.filter((item) => {
-            // 默认选中第一个节点
-            // if (this.treeDataOne) this.treeDataOne.push(item.id)
-            if (item.parentid === parentId) {
-              item.children = list2tree1(list, item.id)
-              return true
-            }
-            return false
-          })
-        }
-        // const coursewareClassList = listToTree(res.data, [], rootParentId)
-        let coursewareClassList = list2tree1(res.data, 0)
-        console.log('coursewareClassList::::', coursewareClassList)
-        this.treeData = coursewareClassList
-        return coursewareClassList
+    dictionaryDropDown() {
+      // 课件分类
+      dictionaryDropDown({ dictionaryCode: '0009' }).then((res) => {
+        // 词典转树结构
+        this.coursewareClassfiy = dictToTree(res.data, [], 0)
      })
    },

+    //加载分类标签数据
+    // classfiy() {
+    //   let parameter = {}
+    //   return coursewareClassList(Object.assign(parameter, this.queryParam)).then((res) => {
+    //     const list2tree1 = (list, parentId) => {
+    //       return list.filter((item) => {
+    //         // 默认选中第一个节点
+    //         // if (this.treeDataOne) this.treeDataOne.push(item.id)
+    //         if (item.parentid === parentId) {
+    //           item.children = list2tree1(list, item.id)
+    //           return true
+    //         }
+    //         return false
+    //       })
+    //     }
+    //     // const coursewareClassList = listToTree(res.data, [], rootParentId)
+    //     let coursewareClassList = list2tree1(res.data, 0)
+    //     console.log('coursewareClassList::::', coursewareClassList)
+    //     this.treeData = coursewareClassList
+    //     return coursewareClassList
+    //   })
+    // },
+
    //返回
    goback() {
-      this.$router.push({
-        path: '/course/CoursewareList',
-        query: {
-          id: this.$route.query.courseId,
-        },
-      })
+      if (this.$route.query.courseId) {
+        this.$router.push({ path: '/course/CoursewareList', query: { id: this.$route.query.courseId } })
+      } else {
+        this.$router.push({ path: '/course/Resource', query: {} })
+      }
    },

    //顶级标签页
@ -466,6 +452,9 @@ export default {

    //保存
    save() {
+      
+      console.log("this.ifResources",this.ifResources);
+
      //视频赋给表单里面的字段
      this.successOssFile.forEach((item, index) => {
        this.videoPath.push(item.url)
@ -519,8 +508,10 @@ export default {
      //给课程ID
      this.fileUpload.videoForm.courseId = this.$route.query.courseId
      this.fileUpload.videoForm.videoPath = this.videoPath
+      this.fileUpload.videoForm.ifResources = this.$route.query.ifResources || 0
      let form = {}
      form = this.fileUpload.videoForm
+      console.log('FORM', form)
      return form
    },

@ -536,6 +527,7 @@ export default {
      this.fileUpload.textForm.type = this.fileUpload.tabkey
      this.fileUpload.textForm.videoPath = this.videoPath
      console.log('aaaaaa', this.fileUpload.textForm)
+      this.fileUpload.textForm.ifResources = this.$route.query.ifResources || 0
      let form = {}
      form = this.fileUpload.textForm
      return form
@ -582,6 +574,8 @@ export default {
        let parameter = {}
        coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
          this.courseware = res.data
+          console.log('加载数据了')
+          console.log('courseware:', this.courseware)

          //编辑只能更改所在的位置的
          this.fileUpload.disabled = true
@ -593,25 +587,32 @@ export default {
          //分配到各自的提交模块
          if (this.courseware.type == '1' || this.courseware.type == '2') {
            this.parentTabKey = '1'
+
+            //遍历文件
+            this.courseware.videoList.forEach((element) => {
+              let successOssFile_ = {}
+              successOssFile_['id'] = element.id
+              successOssFile_['uid'] = element.id
+              successOssFile_['uuid'] = element.id
+              successOssFile_['code'] = 200
+              successOssFile_['name'] = element.name
+              successOssFile_['url'] = element.path
+              successOssFile_['size'] = element.size
+              this.successOssFile.push(successOssFile_)
+            })
+
            if (this.courseware.type == '1') {
              this.fileUpload.tabkey = '1'
              this.fileUpload.videoForm = this.courseware
+              this.fileUpload.videoForm.ifResources = this.ifResources || 0;
              this.fileUpload.videoForm.disabled = false
-              this.courseware.videoList.forEach((element) => {
-                let successOssFile_ = {}
-                successOssFile_['id'] = element.id
-                successOssFile_['uid'] = element.id
-                successOssFile_['uuid'] = element.id
-                successOssFile_['code'] = 200
-                successOssFile_['name'] = element.name
-                successOssFile_['url'] = element.path
-                successOssFile_['size'] = element.size
-                this.successOssFile.push(successOssFile_)
-              })
-              console.log('11------', this.successOssFile)
-            } else {
-              this.fileUpload.tabkey = '2'
+              console.log("1111111",this.fileUpload.videoForm);
+            } 
+            
+            if (this.courseware.type == '2') {
+              this.fileUpload.tabkey = this.courseware.type
              this.fileUpload.textForm = this.courseware
+              this.fileUpload.textForm.ifResources =  this.ifResources || 0;
              this.fileUpload.textForm.disabled = false
            }
          }
--- a/src/views/course/CoursewareList.vue
+++ b/src/views/course/CoursewareList.vue
@ -64,8 +64,8 @@ export default {
          title: '课件分类',
          width: '300px',
          align: 'center',
-          dataIndex: 'coursewareClassifyId',
-          key: 'coursewareClassifyId',
+          dataIndex: 'classifyName',
+          key: 'classifyName',
        },
        { title: '课时/分', width: '160px', align: 'center', dataIndex: 'duration', key: 'duration' },
        { title: '课件大小(MB)', width: '160px', align: 'center', dataIndex: 'sizeStr', key: 'sizeStr' },
@ -80,7 +80,7 @@ export default {
    },
    //新增课件
    coursewareAdd() {
-      this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { courseId: this.$route.query.id } })
+      this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { courseId: this.$route.query.id, ifResources: 0 } })
    },

    //编辑
--- a/src/views/course/CoursewarePreview.vue
+++ b/src/views/course/CoursewarePreview.vue
@ -1,7 +1,7 @@
 <template>
  <a-card :bordered="false" title="课件预览">
    <template slot="extra">
-      <h4 style="margin-right: 15px; display:inline-block">课程类别待填充</h4>
+      <h4 style="margin-right: 15px; display:inline-block">{{courseware.classifyName}}</h4>
      <a-button v-if="!!!coursewareId" size="small" @click="goback">返回</a-button>
    </template>

--- a/src/views/course/Resource.vue
+++ b/src/views/course/Resource.vue
@ -0,0 +1,104 @@
+<template>
+  <a-card :bordered="false" title="资源库">
+    <div class="table-page-search-wrapper">
+      <SearchCom :form="queryParam" :list="queryOptions" @search="handleRefresh" @reset="
+          () => {
+            ;(queryParam = {}), handleRefresh()
+          }
+        "></SearchCom>
+      <div style="width: 100%; height: 32px; margin-bottom: 8px">
+        <a-button type="primary" @click="coursewareAdd">上传资料</a-button>
+      </div>
+    </div>
+    <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :pageNum="Number(this.$route.query.PageNum) || 1">
+      <template slot="action" slot-scope="text, record">
+        <a href="javascript:;" @click="dow(record)">下载</a>
+        <a-divider type="vertical" />
+        <a href="javascript:;" @click="edit(record)">编辑</a>
+        <a-divider type="vertical" />
+        <a-popconfirm title="是否删除?" @confirm="() => del(record)">
+          <a href="javascript:;">删除</a>
+        </a-popconfirm>
+      </template>
+    </s-table>
+  </a-card>
+</template>
+
+
+<script>
+import { STable, SearchCom } from '@/components'
+import { resource, deleteCourseware } from '@/api/course/courseware'
+import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
+import { dictToTree } from '@/utils/util'
+
+export default {
+  components: {
+    STable,
+    SearchCom,
+  },
+  data() {
+    return {
+      queryParam: { classify: '' },
+      queryOptions: [
+        { type: 'select-dic-tree', placeholder: '课件类别', key: 'classify', options: [] },
+      ],
+      loadData: (parameter) => {
+        return resource(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res
+        })
+      },
+      columns: [
+        { title: '资料名称', width: '160px', align: 'center', dataIndex: 'name', key: 'name' },
+        { title: '资料分类', width: 'auto', align: 'center', dataIndex: 'classifyName', key: 'classifyName' },
+        { title: '资料大小', width: 'auto', align: 'center', dataIndex: 'sizeStr', key: 'sizeStr' },
+        { title: '资料类型', width: '160px', align: 'center', dataIndex: 'typeName', key: 'typeName' },
+        { title: '操作', key: 'operation', width: '300px', align: 'center', scopedSlots: { customRender: 'action' } },
+      ],
+    }
+  },
+  created() {
+    this.dictionaryDropDown()
+  },
+  methods: {
+    // 获取数据词典
+    dictionaryDropDown() {
+      //课件类别
+      dictionaryDropDown({ dictionaryCode: '0009' }).then((res) => {
+        console.log('课件类别----', res)
+        this.queryOptions[0].options = dictToTree(res.data, [], 0)
+      })
+    },
+    handleRefresh() {
+      this.$refs.table.refresh(true)
+    },
+
+    //课件上传
+    coursewareAdd() {
+      this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: {ifResources: 1} })
+    },
+
+    //编辑
+    edit(record) {
+      this.$router.push({
+        path: '/course/CoursewareAddOrUpdate',
+        query: { coursewareId: record.id, type: record.type ,ifResources: 1},
+      })
+    },
+
+    //课件下载
+    dow() {},
+
+    // 刪除課件
+    del(record) {
+      deleteCourseware({ id: record.id }).then((res) => {
+        if (res.code == 200) {
+          this.$refs.table.refresh(true)
+          this.$message.success('删除成功！')
+        } else {
+          this.$message.error('删除失败！')
+        }
+      })
+    },
+  },
+}
+</script>