From 246f7b6fd81cf2ba620b8f9bf7cf24b61d7cf521 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期三, 17 七月 2024 16:38:54 +0800 Subject: [PATCH] bug修改 --- src/views/onlineEducation/courseManage/courseResource/index.vue | 44 +++++++++++++++++++++++++++++++++++++++----- 1 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/views/onlineEducation/courseManage/courseResource/index.vue b/src/views/onlineEducation/courseManage/courseResource/index.vue index e0b3274..c4c5968 100644 --- a/src/views/onlineEducation/courseManage/courseResource/index.vue +++ b/src/views/onlineEducation/courseManage/courseResource/index.vue @@ -11,12 +11,23 @@ <!-- 表格数据 --> <el-table v-loading="loading" :data="dataList" :border="true"> <el-table-column label="序号" type="index" align="center" width="80" /> - <el-table-column label="资源名称" prop="name" align="center" /> + <el-table-column label="资源名称" prop="name" align="center" > + <template #default="scope"> + <div style="display:flex;align-items: center;justify-content: center"> + <span >{{scope.row.name}}</span> + <VideoPlay v-if="scope.row.resourceType === 1" style="width: 1em; height: 1em; margin-left: 3px;cursor: pointer" @click="openVideo(scope.row)" /> + </div> + </template> + </el-table-column> <el-table-column label="资源大小" prop="sizeMB" align="center" > </el-table-column> <el-table-column label="资源类型" prop="resourceType" align="center" > <template #default="scope"> - <span>{{scope.row.resourceType == 1 ? '视频':scope.row.resourceType == 2 ? '音频':'文档'}}</span> + <div style="display: flex;flex-direction: column"> + <span>{{scope.row.resourceType == 1 ? '视频':scope.row.resourceType == 2 ? '音频':'文档'}}</span> + <span style="font-size: 14px">{{scope.row.timeFormat}}</span> + </div> + </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" > @@ -34,19 +45,24 @@ v-model:limit="queryParams.pageSize" @pagination="getList" /> -<resource-dialog ref="dialogRef" @getList="getList"></resource-dialog> + <resource-dialog ref="dialogRef" @getList="getList"></resource-dialog> + <viewVideo ref="videoRef" @getList="getList"></viewVideo> </div> </template> <script setup> -import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue"; +import {getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, ref, toRefs} from "vue"; import {ElMessage, ElMessageBox} from "element-plus"; import resourceDialog from './componets/resourceDialog.vue' +import viewVideo from './componets/viewVideo.vue' import {checkResourceName, delResource, getResource} from "@/api/onlineEducation/courseResource"; import {checkName} from "@/api/onlineEducation/company"; +import {VideoPlay} from "@element-plus/icons-vue"; const { proxy } = getCurrentInstance(); const loading = ref(false); const dialogRef = ref(); +const videoRef = ref(); + const data = reactive({ queryParams: { pageNum: 1, @@ -73,7 +89,8 @@ data.dataList = res.data.list.map(item => { return{ ...item, - sizeMB: Number((item.resourceSize /1024 /1024).toFixed(2))+'MB' + sizeMB: Number((item.resourceSize /1024 /1024).toFixed(2))+'MB', + timeFormat: item.resourceType === 1 || item.resourceType === 2 ? secondsToTime(item.resourceLength) : item.docPage + '页' } }) console.log("ddd",data.dataList) @@ -87,7 +104,24 @@ const openDialog = (type, value) => { dialogRef.value.openDialog(type, value); } +const openVideo = (value) => { + videoRef.value.openDialog(value); +} +const secondsToTime = (seconds) => { + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + const secs = seconds % 60; + + return [ + hours, + hours > 0 ? pad(minutes) : minutes, + pad(secs) + ].join(':'); +} +const pad = (number) => { + return (number < 10 ? '0' : '') + number; +} /** 重置新增的表单以及其他数据 */ function reset() { proxy.resetForm("roleRef"); -- Gitblit v1.9.2