修改

zhouwx

2024-07-29 b4698317fb97d89e389f131e8fd9dcf8d7108c77

 src/views/onlineEducation/courseManage/courseResource/index.vue

@@ -1,22 +1,51 @@
<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button
          type="primary"
          plain
          icon="Plus"
          @click="openDialog('add',{})"
      >新增</el-button>
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item>
          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="openDialog('add',{})"
          >新增</el-button>
        </el-form-item>
        <el-form-item label="资源名称：" >
          <el-input v-model="data.queryParams.name" placeholder="请输入资源名称"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <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,23 +63,29 @@
        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,
    pageSize: 10,
    name: ''
  },
  total: 0,
  dataList: []
@@ -73,7 +108,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,10 +123,32 @@
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");
  data.queryParams  = {
    pageNum: 1,
    pageSize: 10,
    name: ''
  }
  getList()
}
const handleDelete = (val) => {
  ElMessageBox.confirm(