Merge remote-tracking branch 'origin/master'

src/modules/resource/video/api.ts

@@ -54,3 +54,23 @@ export function setStatus(data: { id: string }) {
 export function setBelong(data: { id: string; belong_operator: string }) {
   return httpRequest.post('/api/resource/v1/resource/video/set-belong', data)
 }
+
+// 获取视频详情
+export function getVideoPpt(params: { id: string }) {
+  return httpRequest.get('/api/resource/v1/resource/video/get-ppt', { params })
+}
+
+// 创建课件
+export function createPpt(data: { id: string; ppts: object[] }) {
+  return httpRequest.post('/api/resource/v1/resource/video/create-ppt', data)
+}
+
+// 编辑课件
+export function updatePpt(data: { id: string; ppt_id: string, name: string, point: string, url: string }) {
+  return httpRequest.post('/api/resource/v1/resource/video/update-ppt', data)
+}
+
+// 编辑课件
+export function deletePpt(data: { id: string; ppt_id: string }) {
+  return httpRequest.post('/api/resource/v1/resource/video/delete-ppt', data)
+}

src/modules/resource/video/components/Operation.vue

@@ -9,6 +9,9 @@ const router = useRouter()
 
 const props = defineProps(['data'])
 
+const path = router.currentRoute.value.path
+console.log(path, 'path')
+
 // 详情id
 const id = router.currentRoute.value.query.id as string
 // 设置部门共享
@@ -115,6 +118,14 @@ const handlesetBelong = () => {
 
 <template>
   <div class="tool-btn-box" v-if="$route.query.id" style="margin-bottom: 20px;">
+    <template v-if="path === '/resource/video/view'">
+      <router-link :to="`/resource/video/update?id=${id}`">
+        <div class="btn-item">编辑视频信息</div>
+      </router-link>
+      <router-link :to="`/resource/video/edit-courseware?id=${id}`">
+        <div class="btn-item">编辑视频课件</div>
+      </router-link>
+    </template>
     <div class="btn-item" @click="handleDepartment">{{ props.data.department_public == 0 ? '部门共享' : '取消部门共享' }}</div>
     <div class="btn-item" @click="handlePlatform">{{ props.data.platform_public == 0 ? '平台共享' : '取消平台共享' }}</div>
     <div class="btn-item" @click="handleStatus">{{ props.data.status == 0 ? '资源上线' : '资源下线' }}</div>

src/modules/resource/video/components/Upload.vue

@@ -81,7 +81,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
   <el-upload
     action="https://webapp-pub.oss-cn-beijing.aliyuncs.com"
     :data="uploadData"
-    :show-file-list="showFileList"
+    :show-file-list="false"
     :before-upload="handleBeforeUpload"
     :on-exceed="handleExceed"
     :on-remove="handleRemove"

src/modules/resource/video/components/view/TopInfo.vue

@@ -6,7 +6,7 @@
 <template>
   <div class="video-info">
     <div class="video-img">
-      <img src="https://iph.href.lu/211x146">
+      <img :src="props.data.cover">
       <div class="name">视频封面</div>
     </div>
     <div class="info-items">

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

 <script setup lang="ts">
 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: '课程图片', prop: 'img', align: 'center' },
-    { label: '文件名', prop: 'file_name', align: 'center' },
-    { label: '时码', slots: 'table-operate', align: 'center' }
+    { label: '课程图片', slots: 'table-cover', align: 'center' },
+    { label: '文件名', prop: 'name', align: 'center' },
+    { label: '时码', prop: 'point', align: 'center' },
+    { label: '操作', slots: 'table-operate', align: 'center' }
   ],
   data: [
-    { img: 1, cursor_name: '宏观经济学.pptx', type_name: '1', zhang: '1', jie: '吉林师范大学', update: '王重阳' },
-    { img: 2, cursor_name: '宏观经济学.pptx', type_name: '2', zhang: '2', jie: '吉林师范大学', update: '王重阳' },
-    { img: 3, cursor_name: '宏观经济学.pptx', type_name: '3', zhang: '3', jie: '吉林师范大学', update: '王重阳' },
-    { img: 4, cursor_name: '宏观经济学.pptx', type_name: '4', zhang: '4', jie: '吉林师范大学', update: '王重阳' },
-    { img: 5, cursor_name: '宏观经济学.pptx', type_name: '5', zhang: '5', jie: '吉林师范大学', update: '王重阳' }
+    { id: 1, name: '宏观经济学.pptx', url: '1', point: '00:00' },
+    { id: 2, name: '宏观经济学.pptx', url: '2', point: '00:00' }
   ]
 }
+
+// 路由
+const router = useRouter()
+
+const id = router.currentRoute.value.query.id as string
+// 获取视频详情、课件列表
+let videoDetails:any = ref({})
+
+getVideoPpt({ id: id }).then(res => {
+  videoDetails.value = res.data.video
+  console.log(res, 'res')
+})
+
+// 新增弹窗
+const dialogFormVisible = ref(false)
+const covers:any = $ref([])
+const coverList: any = $ref([])
+const coverRemove: any = []
+// 监听图片上传后 组合成table所用的数据
+watch(
+  () => covers,
+  value => {
+    coverRemove.map((item: any) => {
+      const index = value.findIndex((i:any) => i.url === item )
+      if (index !== -1) {
+        value.splice(index, 1)
+      }
+    })
+    value.forEach((item: any, index: number) => {
+      const findItem = coverList.find((i:any) => i.url === item.url)
+      if (!findItem) {
+        coverList.push({
+          name: item.name,
+          url: item.url,
+          point: '',
+          index: index
+        })
+      }
+    })
+  }
+)
+// 添加课程的列表
+const uploadList = $computed(() => {
+  return {
+    columns: [
+      { label: '课程图片', slots: 'table-cover', align: 'center' },
+      { label: '文件名', prop: 'name', align: 'center' },
+      { label: '时码', slots: 'table-input', align: 'center' },
+      { label: '操作', slots: 'table-operate', align: 'center' }
+    ],
+    data: coverList
+  }
+})
+// 提交课程列表
+const submitCourseList = () => {
+  let flag = false
+  coverList.forEach((item: any) => {
+    if (item.point === '') {
+      ElMessage('时间码不能为空')
+      flag = true
+      return false
+    }
+  })
+  if (!flag) {
+    createPpt({ id: id, ppts: coverList }).then((res:any) => {
+      console.log(res, 'res')
+      if (res.code === 0) {
+        dialogFormVisible.value = false
+      }
+    })
+  }
+}
+// 删除上传的列表
+const deleteUploadList = (index: number, url: string) => {
+  coverRemove.push(url)
+  coverList.splice(index, 1)
+}
+
+// 修改时间码
+const uploadTimeCode = (ppt_id: string, name: string, url: string) => {
+  console.log(id)
+  ElMessageBox.prompt('请输入时间码', '提示', {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    inputErrorMessage: '请输入时间码',
+  })
+    .then(({ value }) => {
+      if (value !== '' && value !== null) {
+        updatePpt({
+          id: id,
+          ppt_id: ppt_id,
+          name: name,
+          point: value,
+          url: url
+        }).then((res:any) => {
+          if (res.code === 0) {
+            ElMessage({
+              type: 'success',
+              message: '更新成功',
+            })
+          }
+        })
+        ElMessage({
+          type: 'success',
+          message: `Your email is:${value}`,
+        })
+      }
+    })
+}
+
+// 删除课件
+const deleteCourseware = (ppt_id: string) => {
+  deletePpt({ id: id, ppt_id: ppt_id }).then((res:any) => {
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功',
+      })
+    }
+  })
+}
 </script>
 
 <template>
+  <el-dialog v-model="dialogFormVisible">
+    <Upload v-model="covers"></Upload>
+    <AppList v-bind="uploadList">
+      <template #table-cover="{ row }">
+        <img :src="row.url" style="width:100px;display: block;">
+      </template>
+      <template #table-input="{ row }">
+        <el-input v-model="row.point" placeholder="00:00" />
+      </template>
+      <template #table-operate="{ row }">
+        <el-button @click="deleteUploadList(row.index, row.url)">删除</el-button>
+      </template>
+    </AppList>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitCourseList"
+          >确认</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
   <AppCard title="编辑视频资源">
-    <!-- <div class="btn-box">
-      <div class="btn-item">编辑视频信息</div>
-      <div class="btn-item">编辑视频课件</div>
-      <div class="btn-item">部门共享</div>
-      <div class="btn-item">平台共享</div>
-      <div class="btn-item">资源下线</div>
-      <div class="btn-item">更改负责人</div>
-    </div> -->
-    <TopInfo></TopInfo>
+    <TopInfo :data="videoDetails"></TopInfo>
   </AppCard>
   <AppCard>
-    <el-button type="primary">关联课件</el-button>
+    <el-button @click="dialogFormVisible = true" type="primary">关联课件</el-button>
     <AppList v-bind="listOptions" ref="appList" stripe>
+      <template #table-cover="{ row }">
+        <img :src="row.url" style="width:100px;display: block;">
+      </template>
+      <template #table-input="{ row }">
+        <el-input v-model="row.point" placeholder="00:00" />
+      </template>
       <template #table-operate="{ row }">
-        <el-space>
-          <router-link :to="`/video/update/${row.id}`">
-            <el-button
-              style="color: #399EE8;"
-              type="primary"
-              link
-              >查看</el-button
-            >
-          </router-link>
-        </el-space>
+        <el-button @click="deleteCourseware(row.id)" style="margin-bottom:10px;">删除</el-button>
+        <el-button @click="uploadTimeCode(row.id, row.name, row.url)">修改时间码</el-button>
       </template>
     </AppList>
   </AppCard>

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

@@ -2,6 +2,7 @@
 import TopInfo from '../components/view/TopInfo.vue'
 import CenterInfo from '../components/view/CenterInfo.vue'
 import BottomInfo from '../components/view/BottomInfo.vue'
+import Operation from '../components/Operation.vue'
 // api
 import { getVideoDetails } from '../api'
 
@@ -32,23 +33,23 @@ const id = router.currentRoute.value.query.id as string
 let videoDetails:any = ref({})
 getVideoDetails({ id: id }).then(res => {
   videoDetails.value = res.data
-  console.log(videoDetails, '1111111aaaaaaaaa')
 })
 </script>
 
 <template>
   <AppCard title="视频资源信息">
-    <div class="btn-box">
+    <Operation :data="videoDetails" style="margin-bottom: 20px;"></Operation>
+    <!-- <div class="btn-box">
       <div class="btn-item">编辑视频信息</div>
       <div class="btn-item">编辑视频课件</div>
       <div class="btn-item">部门共享</div>
       <div class="btn-item">平台共享</div>
       <div class="btn-item">资源下线</div>
       <div class="btn-item">更改负责人</div>
-    </div>
+    </div> -->
     <TopInfo :data="videoDetails"></TopInfo>
     <CenterInfo v-if="Object.keys(videoDetails).length" :data="videoDetails"></CenterInfo>
-    <BottomInfo :data="videoDetails"></BottomInfo>
+    <BottomInfo></BottomInfo>
   </AppCard>
   <AppCard title="视频资源信息">
     <AppList v-bind="listOptions" ref="appList" stripe>