zhouwx
2024-07-17 246f7b6fd81cf2ba620b8f9bf7cf24b61d7cf521
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");