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

<template>
  <a-card :bordered="false" :title="pageName">
    <template slot="extra">
      <a-button @click="goback">返回</a-button>
      <a-button type="primary" @click="save" :disabled="isSave">保存</a-button>
    </template>
    <a-tabs type="card" :default-active-key="parentTabKey" @change="parentcallback">
      <a-tab-pane key="1" tab="文件上传">
        <a-tabs v-model="fileUpload.tabkey" @change="callback">

          <a-tab-pane key="1" tab="视频上传" :disabled="fileUpload.videoForm.disabled">
            <div v-if="fileUpload.tabkey == 1" 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>
                </div> -->
                <div>课件学时：&nbsp;
                  <a-input-number :min="0" :max="100" :step="1" v-model="fileUpload.videoForm.learnHours" style="width: 140px" />
                </div>
                <br />
                <!-- <div>课件学分：&nbsp;
                  <a-input-number :min="0" :max="100" :step="1" v-model="fileUpload.videoForm.learnScore" style="width: 140px" />
                </div>
                <br /> -->
                <div>课件大小：&nbsp;
                  <a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
                </div>
                <br />
                <div>
                  <span v-if="this.successOssFile.length < 1">视频上传：
                  </span>&nbsp; <a-upload list-type="picture" event="true" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" accept=".mp4" :disabled="this.uploadLoading">
                    <a-button v-if="this.successOssFile.length <1">
                      <a-icon type="upload" /> {{this.uploadButtonText}}
                    </a-button>&nbsp;&nbsp;&nbsp;
                  </a-upload>
                </div>
                <a-progress :percent="schedule" v-if="schedule > 0" />
              </a-card>
            </div>
          </a-tab-pane>

          <a-tab-pane key="2" tab="文本上传" :disabled="fileUpload.textForm.disabled">
            <!-- <a-tab-pane  key="2" tab="文本上传" :disabled="true"> -->
            <div v-if="fileUpload.tabkey == 2" 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 :min="0" :max="10" :step="0.1" v-model="fileUpload.textForm.learnHours" style="width: 140px" />
                </div>
                <br />
                <!-- <div>课件学分：&nbsp;
                  <a-input-number :min="0" :max="10" :step="0.1" v-model="fileUpload.textForm.learnScore" style="width: 140px" />
                </div>
                <br /> -->
                <div>课件大小：&nbsp;
                  <a-input-number :disabled="true" v-model="fileUpload.textForm.sizeStr" :min="0" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
                </div>
                <br />
                <div>
                  <span v-show="this.successOssFile.length < 1">文件上传：</span>&nbsp; <a-upload list-type="picture" :default-file-list="this.successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo"
                    :disabled="this.uploadLoading">
                    <a-button v-show="this.successOssFile.length < 1">
                      <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>
            </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>
            </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 {
      schedule: 0, //进度
      isSave: false,
      pageName: '',
      // 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: [],
          // learnHours:0.0,
          // learnScore:0.0
        },
        textForm: {
          //文本上传表单
          sizeStr: '0',
          type: '2', // 用于表示tabkey  1-视频上传  2-文本上传  3-视频服务连接  4-第三方连接
          videoPath: [],
          // learnHours:0.0,
          // learnScore:0.0
        },
      },
      videoServerLink: {
        //视频服务器连接
        type: '3',
      },
      thirdAddress: {
        //第三方表单
        sizeStr: '',
        type: '4',
      },
    };
  },
  components: { STable },
  created() {
    //数据字典加载
    // this.dictionaryDropDown();
    //判断是否加载数据
    if (this.queryParam.coursewareId) this.load();

    // 是否资源库ifResources
    if (this.$route.query.coursewareId && this.$route.query.ifResources == 1) {
      this.pageName = '资源库编辑';
    } else if (!this.$route.query.coursewareId && this.$route.query.ifResources == 1) {
      this.pageName = '资源库新增';
    }

    if (this.$route.query.coursewareId && this.$route.query.ifResources == 0) {
      this.pageName = '课件编辑';
    } else if (!this.$route.query.coursewareId && this.$route.query.ifResources == 0) {
      this.pageName = '课件新增';
    }
  },
  methods: {
    //弹框
    showModal() {
      this.fileUpload.visible = true;
      // this.classfiy()
    },

    // dictionaryDropDown() {
    //   // 课件分类
    //   dictionaryDropDown({ dictionaryCode: '0009' }).then(res => {
    //     // 词典转树结构
    //     this.coursewareClassfiy = dictToTree(res.data, [], 0);
    //   });
    // },

    //返回
    goback() {
      if (this.$route.query.courseId) {
        this.$router.push({
          path: '/course/CoursewareList',
          query: { id: this.$route.query.courseId, type: this.$route.query.types },
        });
      } else {
        this.$router.push({ path: '/course/Resource', query: {} });
      }
    },

    //顶级标签页
    parentcallback(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); //清空数组

      this.fileUpload.tabkey = key; //等于当前的Key

      for (let i = 0; i < this.successOssFile.length; i++) {
        this.deleteVideo(this.successOssFile[i]);
      }
    },

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

    beforeUpload(file) {
      console.log('file', file);
      const _this = this;

      console.log("fileSize",file.size)

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

      //不让他保存
      this.isSave = true; 

      //处理视频上传
      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);

      var config = {
        headers: header,
        onUploadProgress: function (e) {
          console.log(e);
          //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
          //如果lengthComputable为false，就获取不到e.total和e.loaded
          if (e.lengthComputable) {
            let a = ((e.loaded / e.total) * 100).toFixed(2);
            // _this.schedule = ((e.loaded / e.total) * 100).toFixed(2) ; //已上传的比例
            console.log('进度', a);

          _this.schedule = parseInt(a) > 99 ? 99 : parseInt(a)
          }
        },
      };

      // { headers: header }
      axios
        .post(ossUpload(), data, config)
        .then(res => {
          this.isSave = false;
          this.uploadLoading = false;
          this.uploadButtonText = '选择文件';
          if (res.data.code === 200) {
            this.$message.success('上传成功！');
            
            this.schedule = 100;
            res.data.uuid = file.uid;
            res.data.size = file.size;
            this.successOssFile.push(res.data);

            //刷新文件大小
            this.refreshFileSize();
          } else {
            this.$message.error(res.data.msg);
            this.$refs.inputFile.value = '';
          }
        })
        .catch(err => {
          console.log("进来了！！！！！",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) {
      // 删除元素
      for (let i = 0; i < this.successOssFile.length; i++) {
        if (this.successOssFile[i].uuid == file.uid || this.successOssFile[i].uuid == file.uuid) {
          this.successOssFile.splice(i, 1);
          break;
        }
      }
      this.schedule = 0;
      this.refreshFileSize();
    },

    //保存
    save() {
      //视频赋给表单里面的字段
      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') {
        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 => {
        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.type = '1';
      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;
      return form;
    },

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

      //给课程ID
      this.fileUpload.textForm.type = '2';
      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;

      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;

      let form = {};
      form = this.thirdAddress;
      return form;
    },

    //加载数据
    load() {
      //判断是否是编1辑
      if (this.queryParam.coursewareId) {
        let parameter = {};
        coursewareDeatil(Object.assign(parameter, this.queryParam)).then(res => {
          this.courseware = res.data;

          //编辑只能更改所在的位置的
          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_);
              console.log('文件问见', this.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;
          }
        });
      }
    },

    //视频上传和文本上传数据初始化
    // initialize(key){
    //   if(key == 1) {
    //     this.fileUpload.videoForm.sizeStr = 0
    //     this.fileUpload.videoForm.learnHours == 0
    //     this.fileUpload.videoForm.learnScore= 0
    //   }
    //   if(key == 2){
    //     this.fileUpload.textForm.sizeStr = 0
    //     this.fileUpload.textForm.learnHours = 0
    //     this.fileUpload.textForm.learnScore= 0.0
    //   }
    // },
  },
};
</script>
<style scoped>
</style>