视频课件上传

src/modules/resource/video/api.ts

@@ -61,7 +61,7 @@ export function getVideoPpt(params: { id: string }) {
 }
 
 // 创建课件
-export function createPpt(data: { id: string; ppts: object[] }) {
+export function createPpt(data: { id: string; ppts: string }) {
   return httpRequest.post('/api/resource/v1/resource/video/create-ppt', data)
 }
 

src/modules/resource/video/views/EditCourseware.vue

@@ -3,29 +3,36 @@ import TopInfo from '../components/view/TopInfo.vue'
 import Upload from '../components/Upload.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getVideoPpt, createPpt, updatePpt, deletePpt } from '../api'
-const listOptions = {
-  columns: [
-    { label: '课程图片', slots: 'table-cover', align: 'center' },
-    { label: '文件名', prop: 'name', align: 'center' },
-    { label: '时码', prop: 'point', align: 'center' },
-    { label: '操作', slots: 'table-operate', align: 'center' }
-  ],
-  data: [
-    { id: 1, name: '宏观经济学.pptx', url: '1', point: '00:00' },
-    { id: 2, name: '宏观经济学.pptx', url: '2', point: '00:00' }
-  ]
-}
 
 // 路由
 const router = useRouter()
 
+const appList = ref()
+
 const id = router.currentRoute.value.query.id as string
 // 获取视频详情、课件列表
-let videoDetails:any = ref({})
+let videoDetails:any = $ref({})
+let videoPpt:any = $ref([])
+
+const listDetail = () => {
+  getVideoPpt({ id: id }).then(res => {
+    videoDetails = res.data.video
+    videoPpt = res.data.ppts
+  })
+}
+listDetail()
 
-getVideoPpt({ id: id }).then(res => {
-  videoDetails.value = res.data.video
-  console.log(res, 'res')
+// 视频课件列表
+const listOptions = $computed(() => {
+  return {
+    columns: [
+      { label: '课程图片', slots: 'table-cover', align: 'center' },
+      { label: '文件名', prop: 'name', align: 'center' },
+      { label: '时码', prop: 'point', align: 'center' },
+      { label: '操作', slots: 'table-operate', align: 'center' }
+    ],
+    data: videoPpt
+  }
 })
 
 // 新增弹窗
@@ -79,9 +86,13 @@ const submitCourseList = () => {
     }
   })
   if (!flag) {
-    createPpt({ id: id, ppts: coverList }).then((res:any) => {
-      console.log(res, 'res')
+    createPpt({ id: id, ppts: JSON.stringify(coverList) }).then((res:any) => {
       if (res.code === 0) {
+        listDetail()
+        ElMessage({
+          type: 'success',
+          message: '上传成功',
+        })
         dialogFormVisible.value = false
       }
     })
@@ -111,16 +122,13 @@ const uploadTimeCode = (ppt_id: string, name: string, url: string) => {
           url: url
         }).then((res:any) => {
           if (res.code === 0) {
+            listDetail()
             ElMessage({
               type: 'success',
               message: '更新成功',
             })
           }
         })
-        ElMessage({
-          type: 'success',
-          message: `Your email is:${value}`,
-        })
       }
     })
 }
@@ -129,6 +137,7 @@ const uploadTimeCode = (ppt_id: string, name: string, url: string) => {
 const deleteCourseware = (ppt_id: string) => {
   deletePpt({ id: id, ppt_id: ppt_id }).then((res:any) => {
     if (res.code === 0) {
+      listDetail()
       ElMessage({
         type: 'success',
         message: '删除成功',
@@ -174,8 +183,8 @@ const deleteCourseware = (ppt_id: string) => {
         <el-input v-model="row.point" placeholder="00:00" />
       </template>
       <template #table-operate="{ row }">
-        <el-button @click="deleteCourseware(row.id)" style="margin-bottom:10px;">删除</el-button>
         <el-button @click="uploadTimeCode(row.id, row.name, row.url)">修改时间码</el-button>
+        <el-button @click="deleteCourseware(row.id)">删除</el-button>
       </template>
     </AppList>
   </AppCard>

src/modules/resource/video/views/List.vue

@@ -11,11 +11,11 @@ getProjectList({ organization_id: '' }).then(res => {
 
 // 资源出处 tab触发
 const tabValue = ref('1')
+const appList = ref()
 const tabChange = () => {
   appList.value.refetch()
 }
 
-const appList = ref()
 
 // 列表切换
 const isCard = ref(false)