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

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'
 }
 
 
@@ -46,3 +46,13 @@ export function coursewareDeatil(params) {
         params: params
     })
 }
+
+
+// 资源库
+export function resource(params) {
+    return request({
+        url: coursewareApi.resource,
+        method: 'get',
+        params: params
+    })
+}

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,
         },

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)
+        console.log('课程类别----', res)
-        this.queryOptions[1].options = dictToTree(res.data, [], 0);
+        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>

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-select> -->
-                  <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
+                  <!-- <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="请选择分类">
+                  课件分类：&nbsp;
-                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
+                  <a-tree-select v-model="fileUpload.textForm.classify" style="width: 300px" :tree-data="coursewareClassfiy" placeholder="请选择课程分类"></a-tree-select>
-                      {{ (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> -->
                 </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: [
+      // columns: [
-        {
+      //   {
-          title: '名称',
+      //     title: '名称',
-          dataIndex: 'name',
+      //     dataIndex: 'name',
-          key: 'name',
+      //     key: 'name',
-          ellipsis: true,
+      //     ellipsis: true,
-        },
+      //   },
-        {
+      //   {
-          title: '操作',
+      //     title: '操作',
-          dataIndex: 'action',
+      //     dataIndex: 'action',
-          width: '200px',
+      //     width: '200px',
-          scopedSlots: { customRender: 'action' },
+      //     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()
     },
 
-    //加载分类标签数据
+    dictionaryDropDown() {
-    classfiy() {
+      // 课件分类
-      let parameter = {}
+      dictionaryDropDown({ dictionaryCode: '0009' }).then((res) => {
-      return coursewareClassList(Object.assign(parameter, this.queryParam)).then((res) => {
+        // 词典转树结构
-        const list2tree1 = (list, parentId) => {
+        this.coursewareClassfiy = dictToTree(res.data, [], 0)
-          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
       })
     },
 
+    //加载分类标签数据
+    // 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({
+      if (this.$route.query.courseId) {
-        path: '/course/CoursewareList',
+        this.$router.push({ path: '/course/CoursewareList', query: { id: this.$route.query.courseId } })
-        query: {
+      } else {
-          id: this.$route.query.courseId,
+        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) => {
+              console.log("1111111",this.fileUpload.videoForm);
-                let successOssFile_ = {}
+            } 
-                successOssFile_['id'] = element.id
+            
-                successOssFile_['uid'] = element.id
+            if (this.courseware.type == '2') {
-                successOssFile_['uuid'] = element.id
+              this.fileUpload.tabkey = this.courseware.type
-                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'
               this.fileUpload.textForm = this.courseware
+              this.fileUpload.textForm.ifResources =  this.ifResources || 0;
               this.fileUpload.textForm.disabled = false
             }
           }

src/views/course/CoursewareList.vue

@@ -64,8 +64,8 @@ export default {
           title: '课件分类',
           width: '300px',
           align: 'center',
-          dataIndex: 'coursewareClassifyId',
+          dataIndex: 'classifyName',
-          key: 'coursewareClassifyId',
+          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 } })
     },
 
     //编辑

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>
 

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>