上传视频修改逻辑

src/api/modules/courseFile.js

@@ -3,6 +3,7 @@
  * 下载课件，一期是直接在新的窗口打开文件的地址就可以了。不采用流的方式下载
  */
 import ajax from '@/utils/xajax.js'
+import ajax2 from '@/utils/xajax2.js'
 
 /**
  * 分页查询，课件的管理列表
@@ -49,6 +50,9 @@ const findList = function(data) {
 const saveUpload = function(data) {
     return ajax.post('/xboe/m/course/file/upload/save', data);
 }
+const saveUpload2 = function(data) {
+    return ajax2.post('/xboe/m/course/file/upload/save', data);
+}
 
 /**
  * 批量更新，上传时，一个一个上传，下面的列表的保存，使用此方法
@@ -85,6 +89,7 @@ const detail = function(id) {
 export default {
     pageList,
     saveUpload,
+    saveUpload2,
     batchUpdate,
     detail,
     delFile

src/components/Course/chooseCourseFile.vue

@@ -25,7 +25,7 @@
                 <el-table-column label="创建时间" prop="sysCreateTime" width="100"></el-table-column>
                 <el-table-column label="选择" width="70" align="center">
                   <template slot-scope="scope">
-                      <el-button size="mini" @click="chooseCourseFile(scope.row)" type="primary">选择</el-button>
+                      <el-button size="mini" @click="chooseCourseFile(scope.row,false)" type="primary">选择</el-button>
                   </template>
                 </el-table-column>
             </el-table>
@@ -43,23 +43,34 @@
           </div>
       </el-tab-pane>
       <el-tab-pane :label="'上传新'+curComType.name">
-        <div v-if="!courseFile.id">
+        <div v-if="!courseFile.id||resType==10||resType==20">
           <div v-if="resType>20" style="padding-bottom: 10px;">
             <span style="font-weight: 700;">内容时长（分）：</span>
             <span>
               <el-input-number v-model="duration" size="mini" :min="1" :max="100"></el-input-number>
             </span>
           </div>
-          <el-upload class="upload-demo" :headers="headers" :data="data" drag :action="uploadFileUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload">
+          <el-upload class="upload-demo" :limit="1" :on-exceed="handleExceed" :on-remove="handleDelete" :headers="headers" :data="data" drag :action="uploadFileUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload">
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
             <div class="el-upload__tip" slot="tip">文件大小限制：{{curComType.maxSizeName}},支持的文件类型：{{curComType.fileTypes.join(',')}}</div>
           </el-upload>
-
+          <div v-if="courseFile.id&&resType==10||resType==20" class="video_audio_info">
+            <div class="info_item">
+              <div class="item_text">名称：</div>
+              <el-input v-model="courseFile.fileName" size="mini" style="width:300px;" placeholder="请输入名称"></el-input>
+            </div>
+            <div class="info_item">
+              <div class="item_text">时长：</div>
+              <el-input-number style="width:260px;" v-model="courseFile.duration" :precision="0"  size="mini"  :min="1" :max="999999999" placeholder="请输入时长" controls-position="right"></el-input-number>
+              <div style="margin-left: 10px;">分钟</div>
+            </div>
+            <div class="btn"><el-button @click="chooseCourseFile(courseFile,true)" type="primary"  size="mini">确定</el-button></div>
+          </div>
         </div>
         <div v-else style="text-align: center;">
            <div style="padding: 20px;">{{courseFile.fileName}} <span style="color: green;">上传成功</span></div>
-           <div><el-button @click="chooseCourseFile(courseFile)" type="primary"  size="mini">确定</el-button></div>
+           <div><el-button @click="chooseCourseFile(courseFile,true)" type="primary"  size="mini">确定</el-button></div>
         </div>
       </el-tab-pane>
     </el-tabs>
@@ -90,6 +101,7 @@
     },
     data(){
       return {
+        courseWare: {},
         uploadFileUrl: process.env.VUE_APP_BASE_API + "/xboe/sys/xuploader/file/upload", // 上传的图片服务器地址
         data:{
           dir:'course'
@@ -118,6 +130,7 @@
     },
     mounted() {
       this.courseFile={};
+      this.courseWare = {};
       let $this=this;
       this.comTypes.some(ct=>{
         if(ct.resType==$this.resType){
@@ -139,6 +152,9 @@
        }
     },
     methods:{
+      handleExceed(){
+        this.$message({message:`只允许一次性上传一个`,type:'error',offset:100})
+      },
       handleBeforeUpload(file) {
         if(file.name.lastIndexOf(".") ==-1) {
           this.$message({message:`文件格式不正确!`,type:'error',offset:100})
@@ -172,21 +188,28 @@
       },
       // 上传成功回调
       handleUploadSuccess(res, file) {
-        //console.log(res);
+        // console.log(res,file,'xixixixiix');
         if(res.status == 200) {
           //上传到课件库
           //console.log(res.result);
-          let courseWare={
+          this.courseWare={
             fileName:res.result.displayName,
             fileType:res.result.fileType,
             filePath:res.result.filePath,
             resType:this.resType,
             orgId:this.orgId,
             orgName:this.orgName,
-            duration:this.duration,
+            duration:res.result.duration||this.duration,
             remark:'课程中直接上传'
           }
-          apiCourseFile.saveUpload(courseWare).then(rs=>{
+          this.$message({message:"上传成功",type:'success',offset:100});
+          this.courseFile = {
+            id: res.result.filePath,
+            fileName:res.result.displayName.replace(/\.[^/.]+$/, ""),
+            duration:res.result.duration,
+          }
+          return
+          apiCourseFile.saveUpload(this.courseWare).then(rs=>{
               if(rs.status==200){
                 this.courseFile=rs.result;
                 this.$message({message:"上传成功",type:'success',offset:100});
@@ -205,7 +228,8 @@
       },
       // 删除文件
       handleDelete(index) {
-        this.fileList.splice(index, 1);
+        this.courseFile = {};
+        // this.fileList.splice(index, 1);
         //注意删除处理
         //this.$emit("remove", '');
       },
@@ -248,7 +272,33 @@
         })
 
       },
-      chooseCourseFile(ccfile){
+      chooseCourseFile(ccfile,isUpload){
+        if(isUpload){
+          if(this.resType == 10||this.resType == 20){
+            if(!this.courseFile.fileName){
+              this.$message({message:`${this.resType == 10?'视频':'音频'}名称不能为空`,type:'error',offset:100});
+              return
+            }
+            if(!this.courseFile.duration){
+              this.$message({message:"时长不能为空",type:'error',offset:100});
+              return
+            }
+            this.courseWare.fileName = this.courseFile.fileName + '.' + this.courseWare.fileType
+            this.courseWare.duration = this.courseFile.duration
+          }
+          apiCourseFile.saveUpload(this.courseWare).then(rs=>{
+            if(rs.status==200){
+              this.courseFile=rs.result;
+              this.$message({message:"保存成功",type:'success',offset:100});
+              this.$emit('choose', this.courseFile);
+            }else{
+              this.$message.error(rs.message);
+            }
+          }).catch(err=>{
+            this.$message.error(err.message);
+          })
+          return
+        }
         this.$emit('choose', ccfile);
       }
     }
@@ -256,4 +306,24 @@
 </script>
 
 <style>
+.video_audio_info{
+  margin-top: 10px;
+  .info_item{
+    width: 360px;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    .el-input-number .el-input__inner{
+      text-align: left;
+    }
+    .item_text{
+      margin-right: 10px;
+    }
+  }
+  .btn{
+    margin-top: 10px;
+    width: 360px;
+    text-align: center;
+  }
+}
 </style>

src/components/Course/courseForm.vue

@@ -1328,6 +1328,7 @@ export default {
              pass = false;
           }
         } else if(this.curContent.contentType == 10 || this.curContent.contentType == 20) {// 视频
+          courseware.curriculumData.duration = Number((courseware.curriculumData.duration*60).toFixed(0));
           if(this.curContent.content !== JSON.stringify(courseware.curriculumData)) {
              pass = false;
           }

src/components/FileUpload/index.vue

@@ -12,6 +12,7 @@
       :show-file-list="showList"
       :data="data"
       :headers="headers"
+      :on-remove="handleRemove"
       class="upload-file-uploader"
       ref="upload"
     >
@@ -142,6 +143,9 @@ export default {
     },
   },
   methods: {
+    handleRemove(file, fileList){
+      this.$emit('isTrue',false)
+    },
     // 上传前校检格式和大小
     handleBeforeUpload(file) {
       if(this.beforeMsg){
@@ -195,6 +199,7 @@ export default {
     // 上传失败
     handleUploadError(err) {
       this.isLoading = false;
+      this.$emit('isTrue',false)
       this.$message({message:"上传失败, 请重试",type:'error',offset:100});
     },
     // 上传成功回调
@@ -217,7 +222,8 @@ export default {
         if(delIdx>-1){
           fileList.splice(delIdx,1);
         }
-        this.$emit("success", res);
+        this.$emit('isTrue',true)
+        this.$emit('isFalse',true)
       } else {
         this.isLoading = false;
         if(this.limit == 1){
@@ -225,8 +231,7 @@ export default {
         }
         this.$message({message:"上传失败",type:'error',offset:100});
       }
-
-      // this.$emit("success", res);
+      this.$emit("success", res);
     },
     // 删除文件
     handleDelete(index) {

src/components/VideoPlayer/index.vue

@@ -272,7 +272,7 @@ export default {
     },
     isDrag:{
       type: Boolean,
-      default: null,
+      default: true,
     },
     isCrowd:{
       type: Boolean,

src/utils/xajax2.js

@@ -0,0 +1,233 @@
+import axios from 'axios'
+import qs from 'qs'
+import { Notification, MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/token'
+import errorCode from '@/utils/errorCode'
+/**
+ *request请求 axios.request(config)
+ *requestJson请求 axios.request(config)
+ *get请求 axios.get(url[, config])
+ *post请求 axios.post(url[, data[, config]])
+ *postJson请求 axios.post(url[, data[, config]])
+ *put请求 axios.put(url[, data[, config]])
+ *putJson请求 axios.put(url[, data[, config]])
+ *patch请求 axios.patch(url[, data[, config]])
+ *patchJson请求 axios.patch(url[, data[, config]])
+ *delete请求 axios.delete(url[, config])
+ */
+
+//const ReLoginUrl="/login";
+
+const ReLoginUrl=process.env.VUE_APP_LOGIN_URL;
+
+const TokenName='XBOE-Access-Token';
+/**axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'**/
+//只是用于发送json对象数据时使用post,put,patch
+const jsonRequest=axios.create({
+  headers:{'Content-Type':'application/json;charset=utf-8'},
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: process.env.VUE_APP_BASE_API,
+  //超时
+  timeout: 60000,
+});
+//发送json对象的拦截器
+jsonRequest.interceptors.request.use(config => {
+  //是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  if (getToken() && !isToken) {
+     config.headers[TokenName] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+})
+
+// 响应拦截器
+jsonRequest.interceptors.response.use(res => {
+
+    const code = res.data.status || 200;
+     if(code===200){
+         return res.data
+     }else{
+         if(code == 6001){ //针对于老系统的处理
+               store.dispatch('LogOut').then(() => {
+                  location.href = ReLoginUrl;
+               })
+         }else if(code === 401){
+               store.dispatch('LogOut').then(() => {
+                  location.href =  ReLoginUrl;
+               })
+         }else if(code === 402){
+               store.dispatch('LogOut').then(() => {
+                  location.href =  ReLoginUrl;
+               })
+         }else if(code===403){
+            var msg='当前操作没有权限';
+            Message({message: msg, type: 'error'});
+            return Promise.reject(new Error(msg))
+            //return res.data;
+         }else if(code===302){
+            location.href =  ReLoginUrl;
+         }else{
+            //Message({message: res.data.message, type: 'error'});
+            //console.log('err:' + res.data.error);
+            //return Promise.reject(new Error(res.data.message))
+            return res.data;
+         }
+     }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "网络异常，请稍后重试";
+    }
+    else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+      //location.href = this.webBaseUrl + ReLoginUrl;
+    }
+    else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({
+      message: message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+//用于普通的发送请求
+const formRequest=axios.create({
+  headers:{'Content-Type':'application/x-www-form-urlencoded'},
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: process.env.VUE_APP_BASE_API,
+  //超时
+  timeout: 10000,
+})
+//发送json对象的拦截器
+formRequest.interceptors.request.use(config => {
+  //是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  if (getToken() && !isToken) {
+     config.headers[TokenName] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  return config
+}, error => {
+    console.log(error)
+    Promise.reject(error)
+});
+formRequest.interceptors.response.use(res => {
+    const code = res.data.status || 200;
+     if(code===200){
+         return res.data
+     }else{
+         if(code == 6001){ //针对于老系统的处理，因为老系统是字符串，所以这里不使用三等于号
+               store.dispatch('LogOut').then(() => {
+                  location.href = ReLoginUrl;
+               })
+         }else if(code === 401){
+               store.dispatch('LogOut').then(() => {
+                  location.href = ReLoginUrl;
+               })
+         }else if(code === 402){
+               store.dispatch('LogOut').then(() => {
+                  location.href =  ReLoginUrl;
+               })
+         }else if(code===403){
+            var msg='当前操作没有权限';
+            Message({message: msg, type: 'error'});
+            return Promise.reject(new Error(msg))
+         }else if(code===302){
+            location.href = ReLoginUrl;
+         }else{
+            //Message({message: res.data.message, type: 'error'});
+            //console.log('err' + res.data.error);
+            //return Promise.reject(new Error(res.data.message))
+            return res.data;//返回给用户做业务处理
+         }
+     }
+  },
+  error => {
+    console.log('err' + error)
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "网络异常，请稍后重试";
+    }
+    else if (message.includes("timeout")) {
+      message = "接口超时，请检查是否上传成功";
+      //location.href = this.webBaseUrl + ReLoginUrl;
+    }
+    else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({
+      message: message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+//request请求
+const request=function(cfg){
+   if(cfg.data){
+      cfg.data=qs.stringify(cfg.data);
+   }
+};
+//requestJson请求
+const requestJson=jsonRequest.request;
+//get请求
+const get=formRequest.request;
+//post请求
+const post=function(url,data,config){
+   if(data){
+      data=qs.stringify(data);
+   }
+   return formRequest.post(url,data,config);
+}
+//post请求
+const postForm=function(url,data,config){
+   return formRequest.post(url,data,config);
+}
+//postJson请求
+const postJson=jsonRequest.post;
+//put请求
+const put=function(url,data,config){
+   if(data){
+      data=qs.stringify(data);
+   }
+   return formRequest.put(url,data,config);
+}
+//putJson请求
+const putJson=jsonRequest.put;
+//patch请求
+const patch=function(url,data,config){
+   if(data){
+      data=qs.stringify(data);
+   }
+   return formRequest.patch(url,data,config);
+}
+//patchJson请求
+const patchJson=jsonRequest.patch;
+//delete请求
+const del=formRequest.delete;
+
+
+export default {
+    request,
+    requestJson,
+    get,
+    post,
+    postJson,
+    put,
+    putJson,
+    patch,
+    patchJson,
+    del,
+    postForm
+}

src/views/course/Courseware.vue

@@ -149,7 +149,7 @@
                <el-checkbox v-model="deviceMobile" @change="isVisible(1)" label="移动端可见" border></el-checkbox>
                <el-checkbox v-model="devicePc" @change="isVisible(2)" label="pc端可见" border></el-checkbox>
             </div>
-            <file-upload scorm="zip" dir="files" :beforeMsg="needOrg" :showList="true" :value="imageShowUrl" :limit="5" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></file-upload>
+            <file-upload scorm="zip" dir="files" @isFalse="isFalseChange" @isTrue="isTrueChange" :beforeMsg="needOrg" :showList="true" :value="imageShowUrl" :limit="5" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></file-upload>
           </div>
 
         </div>
@@ -159,7 +159,7 @@
             <el-table-column prop="fileName" label="文件名称"></el-table-column>
             <el-table-column prop="name" label="课件名称">
               <template slot-scope="scope">
-                <el-input type="text" v-model="scope.row.name"></el-input>
+                <el-input type="text" maxlength="50" v-model="scope.row.name"></el-input>
               </template>
             </el-table-column>
             <el-table-column prop="resType" label="类型" width="80">
@@ -169,7 +169,8 @@
             </el-table-column>
             <el-table-column prop="duration" label="时长(分)"  width="100">
               <template slot-scope="scope">
-                <el-input type="number" size="small" v-model="scope.row.minute"></el-input>
+                <!-- <el-input type="number" :stpe="1" min="0" size="small" step-strictly v-model="scope.row.minute"></el-input> -->
+                <el-input-number style="width: 78px;" :max="999" controls-position="right" size="small" :min="0" v-model="scope.row.minute" :step="1" step-strictly></el-input-number>
               </template>
             </el-table-column>
             <el-table-column label="可见性" width="100">
@@ -194,7 +195,7 @@
       <span slot="footer">
         <!-- <el-button type="infor" @click="isVisible(1)">移动端可见</el-button>
         <el-button type="infor" @click="isVisible(2)">pc端可见</el-button> -->
-        <el-button type="primary" @click="saveUpload()">保存</el-button>
+        <el-button type="primary" @click="saveUpload()" :loading="isTrue">保存</el-button>
       </span>
     </el-dialog>
     <el-dialog v-if="coursewareShow" title="预览课件" :close-on-click-modal="false" width="800px" :visible.sync="coursewareShow" custom-class="g-dialog">
@@ -246,7 +247,7 @@
           <el-form-item label="课件类型">{{ getType(form.resType) }}</el-form-item>
           <el-form-item label="时长(分)">
             <!-- <el-input v-model="form.duration"></el-input> -->
-            <el-input type="number" placeholder="请输入数字" :maxlength="32" show-word-limit v-model="form.minute"></el-input>
+            <el-input-number :precision="0" style="width:100%;text-align:left;" :min="1" placeholder="请输入数字" :max="99999999" show-word-limit  controls-position="right" v-model="form.minute"></el-input-number>
             <!-- <el-input-number max="" v-model="form.duration" controls-position="right"></el-input-number> -->
           </el-form-item>
           <el-form-item label="可见性">
@@ -280,6 +281,8 @@ export default {
   },
   data() {
     return {
+      isTrue: false,
+      isFalse: false,
       resOwnerListMap: [],
       //fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
       fileBaseUrl:this.$xpage.constants.fileBaseUrl, //获成动态获取的处理
@@ -392,6 +395,12 @@ export default {
     this.search();
   },
   methods: {
+    isTrueChange(val){
+      this.isTrue = val
+    },
+    isFalseChange(val){
+      this.isFalse = val
+    },
     beforeCheck(){
       if(!this.upload.orgId ||!this.upload.orgName){
           return false;
@@ -484,7 +493,11 @@ export default {
         this.form.device = 2;
       }
       //时长，秒与分钟的转化
-      //if(this.form.)
+      if(!this.form.minute){
+        return this.$message.error('请输入时长');
+      }else{
+        this.form.duration = Number(this.form.minute) * 60;
+      }
       try {
         const { status,message} = await coueseFile.batchUpdate([this.form]);
         if (status === 200) {
@@ -555,7 +568,7 @@ export default {
           // remark: 备注说明，可以为空，不填
         };
         //try {
-          coueseFile.saveUpload(data).then(res=>{
+          coueseFile.saveUpload2(data).then(res=>{
             if(res.status==200){
               //console.log('上传文件成功：'+rs.result.displayName);
               res.result.device1 = true;
@@ -564,12 +577,18 @@ export default {
               if(res.result.duration){
                 res.result.minute=Math.round(res.result.duration/60); //四舍五入
               }
+              if(res.result.duration==0){
+                this.$message.error('上传的视频时长不能为0，请手动编辑时长');
+              }
               this.fileList.push(res.result);
+              this.isTrue = false;
             }else{
               this.$message.error(res.message);
+              this.isFalse = false
             }
           }).catch (error=>{
             console.log(error,'error')
+            this.isFalse = false
             //this.$message.error(error);
           });
           // const { result, status } = coueseFile.saveUpload(data);
@@ -598,16 +617,26 @@ export default {
     },
     handleCloseCheck(done){
       //console.log('关闭的处理aaaaa');
+      if(this.isTrue&&this.isFalse){
+        this.$message.error('文件正在上传中，请耐心等待');
+        return false;
+      }
       if(this.fileList.length>0){
         this.$message.error('有待保存的上传文件，请执行保存操作');
         return false;
       }else{
+        this.isTrue = false
+        this.isFalse = false
         return done(true);
       }
 
     },
     // 文件上传保存
     saveUpload() {
+      if(this.fileList.length<=0){
+        this.$message.error('请上传文件');
+        return;
+      }
       if(!this.upload.orgName){
         this.$message.success('请选择资源归属');
         return;
@@ -628,6 +657,20 @@ export default {
         item.duration = item.minute ? parseFloat(item.minute) * 60 : 1800;
       });
       this.loading = true;
+      const messageD = this.fileList.some(item =>{
+        if(item.name == ''){
+          this.$message.error('课件名称不能为空');
+          return true;
+        }else if(!item.minute||item.minute == undefined){
+          this.$message.error('时长不能为空并且不能为0');
+          return true;
+        }else{
+          return false
+        }
+      })
+      if(messageD){
+        return 
+      }
       coueseFile.batchUpdate(this.fileList).then(rs => {
         if (rs.status === 200) {
           this.$message.success('保存成功');
@@ -793,6 +836,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-input-number.is-controls-right .el-input__inner{
+  padding-right: 20px;
+  padding-left: 8px;
+  text-align: left;
+}
+::v-deep .el-input-number__decrease{
+  width: 16px;
+}
+::v-deep .el-input-number__increase{
+  width: 16px;
+}
 .butpost{
   position: absolute;
   right: 1%;