| | |
| | | <!-- 表格数据 --> |
| | | <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" > |
| | |
| | | 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, |
| | |
| | | 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) |
| | |
| | | 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"); |