培训视频-视频管理完成

src/views/training_manage/css/manage.scss

@@ -7,6 +7,10 @@
     .top-wrap{
         display: flex;
         justify-content: space-between;
+        .select-box{
+            display: flex;
+            gap:0 10px;
+        }
     }
     .table-wrap{
         margin-top: 20px;

src/views/training_manage/hooks/use-video.js

@@ -0,0 +1,45 @@
+import { ref } from 'vue'
+import {TagInterface,ClassifyInterface} from '@/api/modules/trainingApi'
+
+export function useVideo(){
+    let classifyList = ref([])
+    function getClassifyList(type=''){
+        ClassifyInterface.getClassifyList({}).then(res=>{
+            if(res.Ret!==200) return 
+            classifyList.value = res.Data&&res.Data.List||[]
+            classifyList.value = filterNodes(classifyList.value)
+            classifyList.value = classifyList.value.map(item=>{
+                if(!item.Children){
+                    item.disabled = true
+                }
+                return item
+            })
+        })
+    }
+    function filterNodes(arr) {
+        arr.length && arr.forEach(item => {
+            item.Children && item.Children.length && filterNodes(item.Children)
+            if(item.Children && !item.Children.length) {
+                delete item.Children
+            }
+        })
+        return arr
+    }
+
+    let tagList = ref([])
+    function getTagList(keyword=''){
+        TagInterface.getTagList({
+            Keyword:keyword,
+            PageSize:1000,
+            CurrentIndex:1
+        }).then(res=>{
+            if(res.Ret!==200) return 
+            tagList.value = res.Data&&res.Data.List||[]
+        })
+    }
+
+    return {
+        classifyList,getClassifyList,
+        tagList,getTagList
+    }
+}

src/views/training_manage/videoManage.vue

@@ -1,11 +1,139 @@
+<script setup>
+import {videoTableColumn} from './config/tableColumn'
+import {VideoInterface} from '@/api/modules/trainingApi'
+import {useVideo} from './hooks/use-video'
+import { ref,reactive } from 'vue'
+import { useRouter } from "vue-router"
+import { Search } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+
+const router = useRouter()
+const {classifyList,getClassifyList,tagList,getTagList} = useVideo()
+getClassifyList()
+getTagList()
+
+/* search options */
+let searchParams = reactive({
+    searchText:'',
+    datePick:[],
+    ClassifyId:'',
+    TagIds:[],
+    PublishState:'',
+})
+
+let tableParams = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0,
+})
+let tableData = ref([])
+const tableColumn = videoTableColumn
+let tableLoading = ref(false)
+function getTableData(){
+    VideoInterface.getVideoList({
+        PageSize:tableParams.pageSize,
+        CurrentIndex:tableParams.currentPage,
+        Keyword:searchParams.searchText,
+        StartTime:searchParams.datePick?searchParams.datePick[0]:'',
+        EndTime:searchParams.datePick?searchParams.datePick[1]:'',
+        ClassifyId:Number(searchParams.ClassifyId),
+        TagIds:searchParams.TagIds.join(','),
+        PublishState:Number(searchParams.PublishState)
+    }).then(res=>{
+        if(res.Ret!==200) return 
+        if(!res.Data){
+            tableData.value = []
+            tableParams.total = 0
+            return
+        } 
+        tableData.value = res.Data.List||[]
+        tableParams.total = res.Data.Paging.Totals
+    })
+}
+getTableData()
+function handleCurrentChange(page){
+    tableParams.currentPage = page
+    getTableData()
+}
+//获取视频分类路径
+function getDataClassify(classify,classifyArr=[]){
+    classifyArr.push(classify.ClassifyName)
+    if(classify.Children&&classify.Children.length){
+        return getDataClassify(classify.Children[0],classifyArr)
+    }
+    return classifyArr
+}
+
+function handleModifyVideo(VideoId){
+    router.push({path:'/modifyVideo',query:{VideoId}})
+}
+
+function deleteVideo(data){
+    const hint = data.PublishState===0?'删除后不可恢复,是否确认删除?':'该视频已发布,删除后取消发布并删除,是否确认删除?'
+    ElMessageBox.confirm(
+            hint,'提示',
+            {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',  
+            }
+    ).then(()=>{
+        VideoInterface.deleteVideo({
+            VideoId:data.VideoId,
+        }).then(res=>{
+            if(res.Ret!==200) return 
+            ElMessage.success("删除成功")
+            getTableData()
+        })
+    })
+}
+
+function publishVideo(data){
+    const hint = data.PublishState===0?'是否确认发布':'是否取消发布'
+    ElMessageBox.confirm(
+        hint,'提示',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',  
+        }
+    ).then(()=>{
+        VideoInterface.publishVideo({
+            VideoId:data.VideoId,
+            PublishState:data.PublishState===0?1:0
+        }).then(res=>{
+            if(res.Ret!==200) return 
+            ElMessage.success(`${data.PublishState?'取消发布':'发布'}成功`)
+            getTableData()
+        })
+    })
+}
+
+let previewPop = ref(false)
+let previewVideo = ref(null)
+let previewVideoUrl = ref('')
+let previewPopTitle = ref('')
+function handlePreviewVideo(data){
+    if(!data.VideoUrl) return
+    previewVideo.value?.play()
+    previewPopTitle.value = data.Title||'暂无标题'
+    previewVideoUrl.value = data.VideoUrl
+    previewPop.value = true
+}
+// 结束预览弹窗关闭回调 -- 暂停视频
+function endingPreview(){
+    previewVideo.value?.pause()
+}
+</script>
 <template>
     <div class="video-manage-wrap traing-manage">
         <div class="top-wrap">
             <div class="select-box">
                 <el-date-picker
-                    v-model="datePick"
+                    v-model="searchParams.datePick"
                     type="daterange"
-                    value-format="yyyy-MM-dd"
+                    value-format="YYYY-MM-DD"
                     range-separator="至"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
@@ -13,7 +141,7 @@
                     @change="handleCurrentChange(1)">
                 </el-date-picker>
                 <el-cascader placeholder="选择分类" 
-                    v-model="ClassifyId"
+                    v-model="searchParams.ClassifyId"
                     :options="classifyList"
                     clearable
                     :show-all-levels="false"
@@ -25,7 +153,7 @@
                     @change="handleCurrentChange(1)">
                 </el-cascader>
                 <el-select placeholder="选择标签" 
-                    v-model="TagIds" multiple clearable
+                    v-model="searchParams.TagIds" multiple clearable
                     @change="handleCurrentChange(1)">
                     <el-option
                         v-for="item in tagList"
@@ -35,14 +163,14 @@
                     </el-option>
                 </el-select>
                 <el-select placeholder="选择状态" 
-                    v-model="PublishState" clearable
+                    v-model="searchParams.PublishState" clearable
                     @change="handleCurrentChange(1)">
                     <el-option label="未发布" :value="1"/>
                     <el-option label="已发布" :value="2"/>
                 </el-select>
             </div>
-            <el-input v-model="searchText" clearable 
-                prefix-icon="el-icon-search" placeholder="请输入视频名称" @input="handleCurrentChange(1)" 
+            <el-input v-model="searchParams.searchText" clearable 
+                :prefix-icon="Search" placeholder="请输入视频名称" @input="handleCurrentChange(1)" 
                 style="width:240px;"></el-input>
         </div>
         <div class="table-wrap">
@@ -53,7 +181,7 @@
                     :prop="column.key"
                     :width="column.Width"
                     :min-width="column.minWidth">
-                    <template slot-scope="{row}">
+                    <template #default="{row}">
                         <!-- 视频封面 -->
                         <div class="img-box" v-if="column.key==='CoverImg'">
                             <img :src="row.CoverImg" @click="handlePreviewVideo(row)">
@@ -72,28 +200,27 @@
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" align="center" width="150">
-                    <template slot-scope="{row}">
-                        <el-button type="text" @click="handleModifyVideo(row.VideoId)" v-show="row.PublishState===0">编辑</el-button>
-                        <el-button type="text" @click="publishVideo(row)">{{row.PublishState===0?'发布':'取消发布'}}</el-button>
-                        <el-button type="text" @click="deleteVideo(row)" style="color:red;">删除</el-button>
+                    <template #default="{row}">
+                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleModifyVideo(row.VideoId)" v-show="row.PublishState===0">编辑</el-link>
+                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="publishVideo(row)">{{row.PublishState===0?'发布':'取消发布'}}</el-link>
+                        <el-link :underline="false" type="danger" @click="deleteVideo(row)">删除</el-link>
                     </template>
                 </el-table-column>
             </el-table>
             <el-pagination
                 layout="total,prev,pager,next,jumper" 
                 background
-                :current-page="currentPage"
+                :current-page="tableParams.currentPage"
                 @current-change="handleCurrentChange"
-                :page-size="pageSize" 
-                :total="total"
-                style="text-align:right;margin-top:30px;">
+                :page-size="tableParams.pageSize" 
+                :total="tableParams.total"
+                style="margin-top: 60px;justify-content: flex-end;">
             </el-pagination>
         </div>
         <!-- 预览视频弹窗 -->
         <el-dialog
-            :visible.sync="previewPop"
+            v-model="previewPop"
             :modal-append-to-body='false'
-            v-dialogDrag
             width="60vw"
             :title="previewPopTitle"
             @close="endingPreview"
@@ -106,133 +233,6 @@
     </div>
 </template>
 
-<script>
-import {videoTableColumn} from './config/tableColumn'
-import {VideoInterface} from '@/api/modules/trainingApi'
-import mixin from './mixins/videoMixins'
-export default {
-    mixins:[mixin],
-    data() {
-        return {
-            /* search options */
-            searchText:'',
-            datePick:[],
-            ClassifyId:'',
-            TagIds:[],
-            PublishState:'',
-
-            tableData: [],
-            tableColumn:videoTableColumn,
-            tableLoading: false,
-
-            currentPage: 1,
-            pageSize: 10,
-            total: 0,
-
-            previewPop:false,
-            previewVideoUrl:'',
-            previewPopTitle:''
-
-
-        };
-    },
-    methods: {
-        //获取视频分类路径
-        getDataClassify(classify,classifyArr=[]){
-            classifyArr.push(classify.ClassifyName)
-            if(classify.Children&&classify.Children.length){
-                return this.getDataClassify(classify.Children[0],classifyArr)
-            }
-            return classifyArr
-        },
-        //获取视频列表
-        getTableData(){
-            VideoInterface.getVideoList({
-                PageSize:this.pageSize,
-                CurrentIndex:this.currentPage,
-                Keyword:this.searchText,
-                StartTime:this.datePick[0],
-                EndTime:this.datePick[1],
-                ClassifyId:Number(this.ClassifyId),
-                TagIds:this.TagIds.join(','),
-                PublishState:Number(this.PublishState)
-            }).then(res=>{
-                if(res.Ret!==200) return 
-                if(!res.Data){
-                    this.tableData = []
-                    this.total = 0
-                    return
-                } 
-                this.tableData = res.Data.List||[]
-                this.total = res.Data.Paging.Totals
-            })
-        },
-        handleModifyVideo(VideoId){
-            this.$router.push({path:'/modifyVideo',query:{VideoId}})
-        },
-        deleteVideo(data){
-            const hint = data.PublishState===0?'删除后不可恢复,是否确认删除?':'该视频已发布,删除后取消发布并删除,是否确认删除?'
-            this.$confirm(
-                    hint,'提示',
-                    {
-                        confirmButtonText: '确定',
-                        cancelButtonText: '取消',
-                        type: 'warning',  
-                    }
-            ).then(()=>{
-                VideoInterface.deleteVideo({
-                    VideoId:data.VideoId,
-                }).then(res=>{
-                    if(res.Ret!==200) return 
-                    this.$message.success("删除成功")
-                    this.getTableData()
-                })
-            })
-        },
-        publishVideo(data){
-            const hint = data.PublishState===0?'是否确认发布':'是否取消发布'
-            this.$confirm(
-                    hint,'提示',
-                    {
-                        confirmButtonText: '确定',
-                        cancelButtonText: '取消',
-                        type: 'warning',  
-                    }
-            ).then(()=>{
-                VideoInterface.publishVideo({
-                    VideoId:data.VideoId,
-                    PublishState:data.PublishState===0?1:0
-                }).then(res=>{
-                    if(res.Ret!==200) return 
-                    this.$message.success(`${data.PublishState?'取消发布':'发布'}成功`)
-                    this.getTableData()
-                })
-            })
-        },
-        handleCurrentChange(page){
-            this.currentPage = page
-            this.getTableData()
-        },
-        handlePreviewVideo(data){
-            if(!data.VideoUrl) return
-            this.$refs.previewVideo && this.$refs.previewVideo.play()
-            this.previewPopTitle = data.Title||'暂无标题'
-            this.previewVideoUrl = data.VideoUrl
-            this.previewPop = true
-        },
-        // 结束预览弹窗关闭回调 -- 暂停视频
-        endingPreview(){
-            this.$refs.previewVideo && this.$refs.previewVideo.pause()
-        },
-    },
-    mounted(){
-        this.getClassifyList()
-        this.getTagList()
-        this.getTableData()
-    }
-};
-</script>
-
 <style scoped lang="scss">
 @import "./css/manage.scss";
 .video-manage-wrap{