| | |
| | | <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" maxlength="20" /> |
| | | <el-input v-model="searchText" placeholder="请输入搜索内容" class="long-input" :prefix-icon="Search"/> |
| | | <el-select v-model="searchSubject" placeholder="请选择科目" class="ml-4 long-select" clearable> |
| | | <el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id"/> |
| | | </el-select> |
| | | <el-select v-model="searchContentType" placeholder="请选择文件类型" class="ml-4 long-select" clearable> |
| | | <el-option |
| | | v-for="item in contentTypeList" |
| | | :key="item.value" |
| | | :label="item.name" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-button type="primary" class="ml-4" @click="searchFile">搜索</el-button> |
| | | </div> |
| | | </div> |
| | |
| | | import NormalHeader from '@/components/NormalHeader/index.vue'; |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | import { getFileList } from '@/api/modules/file.js'; |
| | | import {getSubjectList} from '@/api/modules/subject.js'; |
| | | |
| | | import PDFViewer from '@/components/PDFViewer/index.vue'; |
| | | import VideoViewer from '@/components/VideoViewer/index.vue'; |
| | |
| | | }, |
| | | }; |
| | | const searchText = ref(''); |
| | | const searchSubject = ref('') |
| | | const searchContentType = ref('') |
| | | |
| | | const loading = ref(false); |
| | | |
| | |
| | | const videoUrl = ref(''); |
| | | |
| | | const fileList = ref([]); |
| | | |
| | | const subjectList = ref([]); |
| | | const contentTypeList = ref([{ name: '视频', value: 'video' }, |
| | | { name: '图片', value: 'img' }, |
| | | { name: '音频', value: 'audio' }, |
| | | { name: 'PDF', value: 'pdf' }, |
| | | { name: 'EXCEL', value: 'excel' }, |
| | | { name: 'WORD', value: 'word' }, |
| | | { name: 'PPT', value: 'ppt' }]); |
| | | const currentIndex = ref(1); |
| | | |
| | | |
| | |
| | | |
| | | const getData = () => { |
| | | loading.value = true; |
| | | getFileList().then(res => { |
| | | getFileList({introduction: searchText.value, subjectId: searchSubject.value, contentType:searchContentType.value}).then(res => { |
| | | loading.value = false; |
| | | fileList.value = res.data; |
| | | }).catch(() => { |
| | |
| | | }; |
| | | getData(); |
| | | |
| | | const getSubject = () => { |
| | | loading.value = true; |
| | | getSubjectList().then(res => { |
| | | loading.value = false; |
| | | subjectList.value = res.data; |
| | | }).catch(() => { |
| | | loading.value = false; |
| | | }); |
| | | }; |
| | | getSubject(); |
| | | const resendMessage = () => { |
| | | if (time.value) { |
| | | clearInterval(time.value); |
| | |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | .long-input { |
| | | width: 200px; |
| | | } |
| | | |
| | | .long-select { |
| | | width: 200px; |
| | | } |
| | | .pdf-container { |
| | | width: 100%; |
| | | height: 100%; |