视频管理暂存

src/api/media/audio.js

@@ -34,6 +34,11 @@ export default{
     addAudio: params => {
         return post('/media/addAudio',params)
     },
+    /**
+     * AudioId
+     * @param {*} params 
+     * @returns 
+     */
     editAudio: params => {
         return post('/media/editAudio',params)
     },

src/api/media/index.js

@@ -1,6 +1,8 @@
 import apiAudio from './audio'
+import apiVideo from './video'
 import apiMediaCommon from './common'
 export {
     apiAudio,
+    apiVideo,
     apiMediaCommon
 }

src/api/media/video.js

@@ -0,0 +1,64 @@
+import { get, post } from "@/api/index";
+export default{
+    /**
+     * 获取视频列表
+     * @param {Object} params
+     * @param {Object} params.CurrentIndex
+     * @param {Object} params.PageSize
+     * @param {Object} params.SortType asc desc
+     * @returns 
+     */
+    getVideoList: params => {
+        return get('/media/videoList',params)
+    },
+    /**
+     * 上传视频文件
+     * @param {Object} params
+     * @param {File} params.File
+     * @returns res.Data {Url:'',FileName:'',DurationMillisecond:0}
+     */
+    uploadVideoFile: params => {
+        return post('/media/uploadVideo',params)
+    },
+    /**
+     * 上传视频封面
+     * @param {Object} params
+     * @param {File} params.File
+     * @returns res.Data {Url:'',FileName:''}
+     */
+    uploadVideoCover: params => {
+        return post('/media/uploadFile',params)
+    },
+    /**
+     * 添加视频
+     * @param {Object} params
+     * @param {Object} params.VideoName 视频标题
+     * @param {Object} params.AnalystId 
+     * @param {Object} params.AnalystName
+     * @param {Object} params.SrcUrl
+     * @param {Object} params.PermissionIds 所属二级品种，用,隔开
+     * @param {Object} params.DurationMillisecond 视频长度 单位毫秒
+     * @returns 
+     */
+    addVideo: params => {
+        return post('/media/addVideo',params)
+    },
+    /**
+     * 
+     * @param {*} params 
+     * VideoId
+     * @returns 
+     */
+    editVideo: params => {
+        return post('/media/editVideo',params)
+    },
+    /**
+     * 删除视频
+     * @param {Object} params 
+     * @param {Number} params.VideoId
+     * @returns 
+     */
+    deleteVideo: params => {
+        return post('/media/deleteVideo',params)
+    }
+}

src/views/author/List.vue

@@ -50,7 +50,7 @@ function handlePreviewPic(){}
 function handleUploadImg(file){
     //图片大小和格式限制
     const {size,type} = file.file
-    const sizeLimit = 200
+    const sizeLimit = 200*1024
     if(!['image/png','image/jpeg'].includes(type)){
         ElMessage.warning('仅支持png、jpg格式的图片')
         return

src/views/media/AudioList.vue

@@ -84,7 +84,8 @@ function handleDelete(data){
     }).catch(() => {})
 }
 function handleSortChange({order,prop}){
-    tableQuery.sortType = order==='ascending'?1:0
+    tableQuery.sortType = order==='ascending'?'asc':'desc'
+    getTableData()
 }
 </script>
 

src/views/media/VideoList.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { ref, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Search,Plus } from '@element-plus/icons-vue'
 import MediaUpload from './components/MediaUpload.vue';
 import MediaPlayer from './components/MediaPlayer.vue';
 
+import {apiVideo} from '@/api/media'
 
 const tableQuery = reactive({
     keyWord:'',
@@ -15,23 +17,26 @@ const tableQuery = reactive({
 })
 
 const tableColumns = [
-    {label:'视频封面',key:'cover',},
-    {label:'视频名称',key:'name',},
-    {label:'研究员',key:'author',},
-    {label:'标签',key:'label',},
-    {label:'添加时间',key:'time',width:250,sortable:true}
+    {label:'视频封面',key:'coverSrc',},
+    {label:'视频名称',key:'mediaName',},
+    {label:'研究员',key:'authorName',},
+    {label:'标签',key:'permission_names',},
+    {label:'添加时间',key:'publishedTime',width:250,sortable:true}
 ]
 
 let mediaUploadShow = ref(false)
 
 const tableData = ref([])
 function getTableData(){
-    tableData.value = [
-        {
-            name:'aaa',
-            time:'2024-08-02 12:30'
-        }
-    ]
+    apiVideo.getVideoList({
+        PageSize:tableQuery.pageSize,
+        CurrentIndex:tableQuery.currentPage,
+        SortType:tableQuery.sortType,
+    }).then(res=>{
+        if(res.Ret!==200) return 
+        tableData.value = res.Data.List||[]
+        tableQuery.totals = res.Data.Paging.Totals||0
+    })
 }
 getTableData()
 function handlePageChange(page){
@@ -39,11 +44,12 @@ function handlePageChange(page){
     getTableData()
 }
 let mediaPlayerShow = ref(false)
-function handlePreviewVideo(row){
+function handlePreviewVideo(data={}){
+    setCurData(data)
     mediaPlayerShow.value = true
 }
 let curData = ref({})
-function handleUploadShow(data={}){
+function setCurData(data={}){
     curData.value = {
         fileUrl:data.url||'',
         mediaName:data.name||'',
@@ -51,10 +57,10 @@ function handleUploadShow(data={}){
         labels:data.labels||'',
         mediaCover:data.pic||'',
     }
-    mediaUploadShow.value = true
 }
-function handleEdit(data){
-    handleUploadShow(data)
+function handleEdit(data={}){
+    setCurData(data)
+    mediaUploadShow.value = true
 }
 function handleDelete(data){
     ElMessageBox.confirm(
@@ -67,16 +73,25 @@ function handleDelete(data){
         }
     )
     .then(() => {
-        ElMessage.success('删除成功')
+        apiVideo.deleteVideo({
+            VideoId:data.mediaId
+        }).then(res=>{
+            if(res.Ret!==200) return 
+            ElMessage.success('删除成功')
+            getTableData()
+        })
     }).catch(() => {})
 }
-function handleSortChange({order,prop}){}
+function handleSortChange({order,prop}){
+    tableQuery.sortType = order==='ascending'?'asc':'desc'
+    getTableData()
+}
 </script>
 
 <template>
     <div class="video-list-wrap">
         <div class="top-box">
-            <el-button type="primary" :icon="Plus" @click="handleUploadShow">上传视频</el-button>
+            <el-button type="primary" :icon="Plus" @click="handleEdit">上传视频</el-button>
             <el-input style="width:400px;margin-left: auto;" placeholder="视频名称" v-model="tableQuery.keyWord" :prefix-icon="Search" clearable></el-input>
         </div>
         <div class="table-box">

src/views/media/components/MediaUpload.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive, computed, watch } from 'vue'
-import {apiAudio,apiMediaCommon} from '@/api/media'
+import {apiAudio,apiVideo,apiMediaCommon} from '@/api/media'
 import { apiAuthor } from '@/api/author'
 import { ElMessage } from 'element-plus'
 
@@ -111,9 +111,13 @@ async function handleUploadMedia(file){
     form.append('File',file.file);
     const res = props.mediaType==='audio'
         ?await apiAudio.uploadAudioFile(form)
-        :'' 
+        :await apiVideo.uploadVideoFile(form)
     if(res.Ret!==200) return 
     mediaData.fileUrl = res.Data.Url||""
+    //视频取上传文件返回的duration
+    if(props.mediaType!=='audio'){
+        mediaData.duration = res.Data.DurationMillisecond||0
+    }
 }
 //获取音频长度
 function getAudioDuration(file){
@@ -153,23 +157,44 @@ async function handleSave(){
         PermissionIds:Array.isArray(mediaData.labels)?mediaData.labels.join(','):'',
         DurationMillisecond:parseInt(mediaData.duration*1000)
     }
-    const otherParams = {
+    const otherParams = props.mediaType==='audio'?{
         AudioId:mediaData.mediaId
+    }:{
+        VideoId:mediaData.mediaId,
+        CoverSrc:mediaData.mediaCover
     }
     if(props.modifyType==='add'){
         res = props.mediaType==='audio'
         ? await apiAudio.addAudio(params)
-        : ''
+        : await apiVideo.addVideo({...params,CoverSrc:mediaData.mediaCover})
     }else{
         res = props.mediaType==='audio'
         ? await apiAudio.editAudio({...params,...otherParams})
-        : ''
+        : await apiVideo.editVideo({...params,...otherParams})
     }
     if(res.Ret!==200) return 
     ElMessage.success(`${props.modifyType==='add'?'添加':'编辑'}成功`)
     show.value = false
     emits('save')
-
+}
+function handleUploadImg(file){
+    //图片大小和格式限制
+    const {size,type} = file.file
+    const sizeLimit = 500*1024
+    if(!['image/png','image/jpeg'].includes(type)){
+        ElMessage.warning('仅支持png、jpg格式的图片')
+        return
+    }
+    if(size>sizeLimit){
+        ElMessage.warning('视频封面不能超过500kb')
+        return
+    }
+    let form = new FormData();
+    form.append('File',file.file);
+    apiVideo.uploadVideoCover(form).then(res=>{
+        if(res.Ret!==200) return 
+        mediaData.mediaCover = res.Data?.Url||''
+    })
 }
 </script>
 
@@ -199,9 +224,12 @@ async function handleSave(){
                 </el-form-item>
                 <el-form-item prop="mediaCover" label="照片" v-if="props.mediaType==='video'">
                     <ImageUpload
+                        uploadHint="支持jpg、jpeg、png等格式，建议上传宽高比例为1920:1080的图片"
                         :imgUrl="mediaData.mediaCover"
                         :width="ImageUploadWidth"
                         :height="ImageUploadHeight"
+                        @upload="handleUploadImg"
+                        @remove="mediaData.mediaCover=''"
                     ></ImageUpload>
                 </el-form-item>
                 <el-form-item  prop="mediaName" :label="`${mediaName}名称`">