<template>
|
<div class="train-container w-screen h-screen bg-slate-50 flex flex-col items-center">
|
<NormalHeader class="shrink-0"></NormalHeader>
|
|
<div class="list-container container grow relative">
|
<div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4">
|
<div class="list-wrapper w-full h-full">
|
<el-card class="h-full" :body-style="{ height: '100%' }">
|
<div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
|
<div class="card-header flex justify-between items-center shrink-0">
|
<div class="header-search flex items-center">
|
<el-input v-model="searchText" placeholder="请输入搜索内容" :prefix-icon="Search" />
|
<el-button type="primary" class="ml-4">搜索</el-button>
|
</div>
|
</div>
|
|
<div class="card-main flex-1 my-5 relative">
|
<div class="main-content absolute top-0 bottom-0 left-0 right-0">
|
<el-table :data="fileList" height="100%">
|
<el-table-column label="文件名称">
|
<template #default="scope">
|
<div class="row-info">
|
<div class="icon">
|
<img :src="fileType[scope.row.type].iconPath" class="width-img" />
|
</div>
|
<div class="label">{{ scope.row.name }}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="class" label="班级" align="center" />
|
<el-table-column prop="subject" label="科目" align="center" />
|
<el-table-column prop="date" label="上传时间" align="center" />
|
<el-table-column>
|
<template #default="scope">
|
<el-button link type="primary" @click.prevent="checkRow(scope.row)">
|
查看
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div class="card-footer flex justify-center mb-7 shrink-0">
|
<el-pagination background layout="prev, pager, next" :total="1000" />
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
|
<!-- pdf查看 -->
|
<div class="pdf-container" v-show="pdfViewer">
|
<PDFViewer :pdfUrl="'/test.pdf'"></PDFViewer>
|
<div class="close-btn">
|
<el-button type="danger" size="large" circle @click="closeViewer">
|
<template #icon>
|
<el-icon :size="18">
|
<Close />
|
</el-icon>
|
</template>
|
</el-button>
|
</div>
|
</div>
|
|
<!-- image查看 -->
|
<div class="image-container" v-show="imageViewer">
|
<el-image-viewer :url-list="imageList" @close="closeViewer"></el-image-viewer>
|
</div>
|
|
<!-- 视频查看 -->
|
<div class="video-container">
|
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { Close } from '@element-plus/icons-vue';
|
import NormalHeader from '@/components/NormalHeader/index.vue';
|
import { Search } from '@element-plus/icons-vue';
|
import { getFileList } from '@/api/modules/file.js';
|
|
import PDFViewer from '@/components/PDFViewer/index.vue';
|
|
const fileType = {
|
'img': {
|
iconPath: '/static/icons/file_type_image.png',
|
handle: (item) => {
|
console.log(item);
|
imageViewer.value = true;
|
}
|
},
|
'video': {
|
iconPath: '/static/icons/file_type_video.png',
|
handle: (item) => {
|
console.log(item);
|
}
|
},
|
'pdf': {
|
iconPath: '/static/icons/file_type_pdf.png',
|
handle: (item) => {
|
console.log(item);
|
pdfViewer.value = true;
|
}
|
},
|
};
|
const searchText = ref('');
|
|
const loading = ref(false);
|
|
const pdfViewer = ref(false);
|
const imageViewer = ref(false);
|
const videoViewer = ref(false);
|
|
const imageList = ref([]);
|
|
const fileList = ref([
|
{
|
id: 1,
|
name: '测试测试测试',
|
url: '',
|
date: '2024-12-12',
|
class: 'test',
|
subject: '测试',
|
type: 'img'
|
},
|
{
|
id: 2,
|
name: '测试测试测试',
|
url: '',
|
date: '2024-12-12',
|
class: 'test',
|
subject: '测试',
|
type: 'video'
|
},
|
{
|
id: 3,
|
name: '测试测试测试',
|
url: '',
|
date: '2024-12-12',
|
class: 'test',
|
subject: '测试',
|
type: 'pdf'
|
}
|
]);
|
|
|
const checkRow = (item) => {
|
fileType[item.type] && fileType[item.type].handle(item);
|
};
|
|
const closeViewer = () => {
|
pdfViewer.value = false;
|
imageViewer.value = false;
|
videoViewer.value = false;
|
}
|
|
const getData = () => {
|
getFileList().then(res => {
|
|
});
|
};
|
getData();
|
|
</script>
|
|
<style lang="scss" scoped>
|
:deep(.el-tabs__nav-wrap:after) {
|
display: none;
|
}
|
|
.row-info {
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 35px;
|
margin-right: 20px;
|
}
|
}
|
|
.pdf-container {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
z-index: 99999;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
.close-btn {
|
position: absolute;
|
top: 2px;
|
right: 30px;
|
z-index: 9999999;
|
:deep(.el-button) {
|
width: fit-content;
|
height: fit-content;
|
padding: 5px !important;
|
}
|
}
|
}
|
</style>
|
