welfare-admin/src/views/course/CoursewareAddOrUpdate.vue

<template>
  <a-card :bordered="false" title="添加课件">
    <template slot="extra">
      <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-tab-pane key="1" tab="文件上传">
        <a-tabs :default-active-key="fileUpload.tabkey" @change="callback">

          <a-tab-pane key="1" tab="视频上传" :disabled="fileUpload.videoForm.disabled">
            <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="fileUpload.videoForm.name" style="width: 40%" />
                </div>
                <div style="margin-bottom: 30px; margin-top: 20px">
                  课件分类：&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-modal v-model="fileUpload.visible" title="课程分类管理" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">

                    <div class="table-operator">
                      <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">
                        <template>
                          <a v-if="hasPerm('sys:menu:add') && record.type !== 2" @click="$refs.menuForm.add(record.id)">新增下级</a>
                          <a-divider type="vertical" v-if="hasPerm('sys:menu:add') && record.type !== 2 && hasPerm('sys:menu:edit')" />
                          <a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
                          <a-divider type="vertical" v-if="hasPerm('sys:menu:edit') && hasPerm('sys:menu:delete') " />
                          <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="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
                </div>
                <br />
                <div>
                  视频上传：&nbsp; <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="this.uploadLoading">
                    <a-button>
                      <a-icon type="upload" /> {{this.uploadButtonText}}
                    </a-button>&nbsp;&nbsp;&nbsp;
                  </a-upload>
                </div>
              </a-card>
            </div>
          </a-tab-pane>

          <a-tab-pane key="2" tab="文本上传" :disabled="fileUpload.textForm.disabled">
            <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="fileUpload.textForm.name" style="width: 40%" />
                </div>
                <div style="margin-bottom: 30px; margin-top: 20px">
                  课件分类：&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
                </div>
                <br />
                <div>
                  文件上传：&nbsp; <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="this.uploadLoading">
                    <a-button>
                      <a-icon type="upload" /> {{this.uploadButtonText}}
                    </a-button>&nbsp;&nbsp;&nbsp;
                  </a-upload>
                </div>
              </a-card>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>

      <a-tab-pane key="2" tab="视频服务器链接" :disabled="true">
        <!-- videoServerLink.disabled -->
        <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="videoServerLink.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> -->
            </div>
            <div style="margin-bottom: 30px">课件大小：&nbsp;
              <a-input :disabled="true" :value="videoServerLink.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
            </div>
            <div style="margin-bottom: 30px">
              连接地址：&nbsp;
              <a-input placeholder="请输入视频链接地址" v-model="videoServerLink.videoUrl" style="width: 40%" />
            </div>
          </a-card>
        </div>

      </a-tab-pane>
      <a-tab-pane key="3" tab="第三方连接" :disabled="true">
        <!-- thirdAddress.disabled -->
        <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="thirdAddress.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> -->
            </div>
            <div style="margin-bottom: 30px">课件大小：&nbsp;
              <a-time-picker placeholder="课件时长" :minute-step="1" :second-step="1" v-model="thirdAddress.sizeStr" />
            </div>
            <div style="margin-bottom: 30px">
              连接地址：&nbsp;
              <a-input placeholder="请输入第三方链接地址" v-model="thirdAddress.videoUrl" style="width: 40%" />
            </div>
          </a-card>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>



<script>
import { STable } from '@/components'
import { coursewareDeatil } from '@/api/course/courseware'
import { ACCESS_TOKEN } from '@/store/mutation-types'
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 { dictToTree } from '@/utils/util'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'

// const rootParentId = 0

export default {
  data() {
    return {
      // treeData: [],
      ifResources : this.$route.query.ifResources,
      coursewareClassfiy: [],
      courseware: {}, //课件详情
      queryParam: { coursewareId: this.$route.query.coursewareId }, //编辑传参
      successOssFile: [],
      uploadLoading: false, // 控制 选择文件 按钮是否转圈
      uploadButtonText: '选择文件',
      parentTabKey: '1', //顶级选项卡， 文件上传/视频服务器连接/第三方连接
      videoPath: [], //用于存放视频路径
      fileUpload: {
        visible: false,
        tabkey:  this.$route.query.type ? this.$route.query.type : '1',
        videoForm: {
          //视频上传表单
          sizeStr: '0', //视频大小
          type: '1',
          videoPath: [],
        },
        textForm: {
          //文本上传表单
          type: '2', // 用于表示tabkey  1-视频上传  2-文本上传  3-视频服务连接  4-第三方连接
          videoPath: [],
        },
      },
      videoServerLink: {
        //视频服务器连接
        type: '3',
      },
      thirdAddress: {
        //第三方表单
        sizeStr: '',
        type: '4',
      },
      // columns: [
      //   {
      //     title: '名称',
      //     dataIndex: 'name',
      //     key: 'name',
      //     ellipsis: true,
      //   },
      //   {
      //     title: '操作',
      //     dataIndex: 'action',
      //     width: '200px',
      //     scopedSlots: { customRender: 'action' },
      //   },
      // ],
    }
  },
  components: { STable },
  created() {
    //数据字典加载
    this.dictionaryDropDown()
    //判断是否加载数据
    if (this.queryParam.coursewareId) this.load()
  },
  methods: {
    //弹框
    showModal() {
      this.fileUpload.visible = true
      // this.classfiy()
    },

    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() {
      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: {} })
      }
    },

    //顶级标签页
    parentcallback(key) {
      console.log(key)
      this.fileUpload.videoForm = {}
      this.fileUpload.textForm = {}
      this.videoPath = [] //置空文件
      this.parentTabKey = key
    },
    //作用于子标签页
    callback(key) {
      this.fileUpload.videoForm = {}
      this.fileUpload.textForm = {}
      this.videoPath = [] //置空文件

      this.successOssFile = this.successOssFile.splice(this.successOssFile.length, 0) //清空数组
      console.log('清除后的文件', this.successOssFile)
      this.fileUpload.tabkey = key //等于当前的Key
    },

    //获取Tonken
    getToken() {
      let hreader = {}
      hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
      return hreader
    },

    beforeUpload(file) {
      //文件类型 (后缀)
      var suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (this.fileUpload.tabkey == '1' && suffix != 'mp4') {
        return this.$message.error('文件类型必须是mp4')
      }

      //告知用户是否正在上传
      this.uploadLoading = true
      this.uploadButtonText = '上传中...'

      //处理视频上传
      const data = new FormData()
      data.append('file', file)
      data.append('fileType', 'mp4')

      //设置请求头和token
      const header = {}
      header['Content-Type'] = 'multipart/form-data'
      header[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)

      axios
        .post(ossUpload(), data, { headers: header })
        .then((res) => {
          this.uploadLoading = false
          this.uploadButtonText = '选择文件'
          if (res.data.code === 200) {
            this.$message.success('上传成功！')

            res.data.uuid = file.uid
            res.data.size = file.size
            console.log('文件大小---', file.size)
            this.successOssFile.push(res.data)

            //刷新文件大小
            this.refreshFileSize()

            console.log('上传之后的文件', this.successOssFile)
          } else {
            this.$message.error(res.data.msg)
            this.$refs.inputFile.value = ''
          }
        })
        .catch((err) => {
          this.$message.error(err)
          this.uploadButtonText = '选择文件'
        })

      return false
    },

    //刷新大小
    refreshFileSize() {
      if (this.fileUpload.tabkey == '1' || this.fileUpload.tabkey == '2') {
        this.fileUpload.videoForm.size = 0 //非编辑则不清空
        for (let i = 0; i < this.successOssFile.length; i++) {
          //读取文件大小
          let fileSize = this.successOssFile[i].size

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

          //保留两位小数
          this.fileUpload.videoForm.size = this.fileUpload.videoForm.size + parseFloat(videoSize)

          //如果是编辑
          if (this.queryParam.coursewareId) {
            //在原基础上增加
            if (this.fileUpload.tabkey == '1' && this.parentcallback == '1') {
              this.fileUpload.videoForm.size =
                this.fileUpload.videoForm.size + parseFloat(videoSize) + parseFloat(this.fileUpload.videoForm.sizeStr)
            }
            if (this.fileUpload.tabkey == '2' && this.parentcallback == '1') {
              this.fileUpload.textForm.size =
                this.fileUpload.videoForm.size + parseFloat(videoSize) + parseFloat(this.fileUpload.textForm.sizeStr)
            }
          }
        }

        if (this.fileUpload.tabkey == '1' && this.parentTabKey == '1') {
          this.fileUpload.videoForm.sizeStr = this.fileUpload.videoForm.size.toFixed(2)
        }

        if (this.fileUpload.tabkey == '2' && this.parentTabKey == '1') {
          this.fileUpload.textForm.sizeStr = this.fileUpload.videoForm.size.toFixed(2)
        }
      }
    },

    //删除已上传的视频
    deleteVideo(file) {
      console.log('deleteVideo - file:{}', file)
      // 删除元素
      for (let i = 0; i < this.successOssFile.length; i++) {
        if (this.successOssFile[i].uuid == file.uid) {
          this.successOssFile.splice(i, 1)
          break
        }
      }

      this.refreshFileSize()
    },

    //保存
    save() {
      
      console.log("this.ifResources",this.ifResources);

      //视频赋给表单里面的字段
      this.successOssFile.forEach((item, index) => {
        this.videoPath.push(item.url)
      })

      if (this.parentTabKey == '2') this.videoPath.push(this.videoServerLink.videoUrl)
      if (this.parentTabKey == '3') this.videoPath.push(this.thirdAddress.videoUrl)

      //转JSON
      this.videoPath = this.videoPath.toString()

      let from
      if (this.parentTabKey == '1' && this.fileUpload.tabkey == '1') {
        from = this.videoFormV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.parentTabKey == '1' && this.fileUpload.tabkey == '2') {
        from = this.textFormV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.parentTabKey == '2') {
        console.log(this.videoServerLink)
        from = this.videoServerLinkV()
        if (typeof from == 'boolean' && !from) return
      } else if (this.parentTabKey == '3') {
        from = this.thirdAddressV()
        if (typeof from == 'boolean' && !from) return
      }

      //提交保存请求
      coursewareAdd(from).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.$message.success('课件保存成功！')
          this.goback()
        } else {
          this.$message.error('保存失败！')
        }
      })
    },

    //视频上传
    videoFormV() {
      // 验证课件名称是否为空
      if (!this.fileUpload.videoForm.name || this.fileUpload.videoForm.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
      } else if (this.videoPath.length == 0) {
        this.$message.error('请上传课件文件！')
        return false
      }

      //给课程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
    },

    //文本上传
    textFormV() {
      if (!this.fileUpload.textForm.name || this.fileUpload.textForm.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
      }

      //给课程ID
      this.fileUpload.textForm.courseId = this.$route.query.courseId
      this.fileUpload.textForm.type = this.fileUpload.tabkey
      this.fileUpload.textForm.videoPath = this.videoPath
      this.fileUpload.textForm.ifResources = this.$route.query.ifResources || 0
      let form = {}
      form = this.fileUpload.textForm
      return form
    },

    //视频服务器连接
    videoServerLinkV() {
      if (!this.videoServerLink.name || this.videoServerLink.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
      }

      //给课程ID
      this.videoServerLink.courseId = this.$route.query.courseId
      this.videoServerLink.videoPath = this.videoPath
      console.log(this.videoServerLink)

      let form = {}
      form = this.videoServerLink
      return form
    },

    //视频服务第三方连接
    thirdAddressV() {
      if (!this.thirdAddress.name || this.thirdAddress.name === '') {
        this.$message.error('课件名称不能为空!')
        return false
      }

      //给课程ID
      this.thirdAddress.courseId = this.$route.query.courseId
      this.thirdAddress.videoPath = this.videoPath

      console.log(this.thirdAddress)
      let form = {}
      form = this.thirdAddress
      return form
    },

    //加载数据
    load() {
      //判断是否是编辑
      if (this.queryParam.coursewareId) {
        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
          this.fileUpload.videoForm.disabled = true
          this.fileUpload.textForm.disabled = true
          this.videoServerLink.disabled = true
          this.thirdAddress.disabled = true

          //分配到各自的提交模块
          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
            } 
            
            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
            }
          }

          if (this.courseware.type == '3') {
            this.parentTabKey = '2'
            this.videoServerLink = this.courseware
            this.videoServerLink.disabled = false
          }

          if (this.courseware.type == '4') {
            this.parentTabKey = '3'
            this.thirdAddress = this.courseware
            this.thirdAddress.disabled = false
          }
        })
      }
    },
  },
}
</script>
<style scoped>
</style>