zhouwx
2025-06-10 c8c99bf1f753e27c4d99a0ff6058ce16f973f9c4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<template>
  <div class="app-container">
    <el-dialog
        v-model="dialogVisible"
        title="选择资源"
        width="600px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
    <div style="margin-bottom: 10px">
      <el-form>
        <el-form-item label="资源名称">
          <el-input style="width: 20%" v-model="data.queryParams.name "></el-input>
          <el-button type="primary" style="margin-left: 30px" @click="getList">查询</el-button>
          <el-button plain @click="reset">重置</el-button>
          <el-button type="primary" @click="openResource">资源上传</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="resourceType" align="center"  >
        <template #default="scope">
          <span>{{scope.row.resourceType == 1 ? '视频':scope.row.resourceType == 2 ? '音频':'文档'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" prop="createTime" align="center"  />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
        <template #default="scope">
          <el-button link type="primary" @click="choose(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
 
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    </el-dialog>
    <resource-dialog ref="resourceRef" @getList="getList"></resource-dialog>
  </div>
</template>
 
<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import resourceDialog from '@/views/onlineEducation/courseManage/courseResource/componets/resourceDialog.vue'
import {checkResourceName, delResource, getResource} from "@/api/onlineEducation/courseResource";
import {checkName} from "@/api/onlineEducation/company";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const emit = defineEmits(["chooseRes"]);
const dialogRef = ref();
const resourceRef = ref()
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: ''
  },
  total: 0,
  dataList: []
});
 
const dialogVisible = ref(false);
const { queryParams, total, dataList } = toRefs(data);
 
onMounted(()=>{
 
})
 
onUnmounted(()=>{
 
})
 
const openDialog = async () => {
  await getList()
  dialogVisible.value = true;
}
 
const handleClose = () => {
  dialogVisible.value = false;
}
const getList = async () => {
  loading.value = true
  const res = await getResource(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list.map(item => {
      return{
        ...item,
        sizeMB: Number((item.resourceSize /1024 /1024).toFixed(2))+'MB'
      }
    })
    console.log("ddd",data.dataList)
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}
 
const openResource = () => {
  resourceRef.value.openDialog('add',{})
}
 
const choose = (value) => {
  console.log("co",value)
  emit('chooseRes',value)
  dialogVisible.value = false
  // dialogRef.value.openDialog(type, value);
}
defineExpose({
  openDialog
});
 
 
/** 重置新增的表单以及其他数据  */
function reset() {
  data.queryParams = {
    pageNum: 1,
        pageSize: 10,
        name: ''
  }
  getList()
}
 
</script>