From 9c2eb9ed6da32c1830b02431875dacaa7f904b1f Mon Sep 17 00:00:00 2001 From: 黄何裕 <1053952480@qq.com> Date: 星期五, 12 七月 2024 18:16:56 +0800 Subject: [PATCH] 修改资料校验 --- src/views/folder/index.vue | 112 ++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 81 insertions(+), 31 deletions(-) diff --git a/src/views/folder/index.vue b/src/views/folder/index.vue index e9a2f4c..69536e8 100644 --- a/src/views/folder/index.vue +++ b/src/views/folder/index.vue @@ -9,7 +9,18 @@ <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> @@ -21,15 +32,15 @@ <template #default="scope"> <div class="row-info"> <div class="icon"> - <img :src="getIcon(scope.row.contentType)" class="width-img" /> + <img :src="getIcon(scope.row.contentType)" class="width-img"/> </div> <div class="label">{{ scope.row.introduction }}</div> </div> </template> </el-table-column> - <el-table-column prop="className" label="鐝骇" align="center" /> - <el-table-column prop="typeName" label="绉戠洰" align="center" /> - <el-table-column prop="updateTime" label="涓婁紶鏃堕棿" align="center" /> + <el-table-column prop="className" label="鐝骇" align="center"/> + <el-table-column prop="typeName" label="绉戠洰" align="center"/> + <el-table-column prop="updateTime" label="涓婁紶鏃堕棿" align="center"/> <el-table-column> <template #default="scope"> <el-button link type="primary" @click.prevent="checkRow(scope.row)"> @@ -43,10 +54,10 @@ <div class="card-footer flex justify-center mb-7 shrink-0"> <el-pagination background layout="prev, pager, next" :total="fileList.length" - :default-page-size="20" - :currentPage="currentIndex" - :hide-on-single-page="true" - @current-change="handleCurrentChange" /> + :default-page-size="20" + :currentPage="currentIndex" + :hide-on-single-page="true" + @current-change="handleCurrentChange"/> </div> </div> </el-card> @@ -55,18 +66,18 @@ </div> <!-- pdf鏌ョ湅 --> - <div class="pdf-container" v-show="pdfViewer"> + <!-- <div class="pdf-container" v-show="pdfViewer"> <PDFViewer :pdfUrl="pdfFile"></PDFViewer> <div class="close-btn"> <el-button type="danger" size="large" circle @click="closeViewer"> <template #icon> <el-icon :size="18"> - <Close /> + <Close/> </el-icon> </template> </el-button> </div> - </div> + </div> --> <!-- image鏌ョ湅 --> <div class="image-container" v-show="imageViewer"> @@ -80,34 +91,39 @@ <el-button type="danger" size="large" circle @click="closeViewer"> <template #icon> <el-icon :size="20"> - <Close /> + <Close/> </el-icon> </template> </el-button> </div> </div> - + <!-- 寮圭獥 --> + <el-drawer v-model="fileViewer" direction="btt" size="90%" :before-close="handleClose"> + <DocumentViewer :fileUrl="fileUrl"></DocumentViewer> + </el-drawer> </div> </template> <script setup> -import { ref, onMounted, onBeforeUnmount } from 'vue'; -import { storeToRefs } from 'pinia'; -import { Close } from '@element-plus/icons-vue'; +import {ref, onMounted, onBeforeUnmount} from 'vue'; +import {storeToRefs} from 'pinia'; +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 {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'; +import DocumentViewer from "@/components/DocumentViewer/index.vue"; -import { useUserStore } from '@/store/index.js'; +import {useUserStore} from '@/store/index.js'; import useWebScoket from '@/hooks/useWebScoket.js'; const userStore = useUserStore(); -const { userInfo } = storeToRefs(userStore); -const { status, message, error, connect, disconnect, sendMessage } = useWebScoket({ - url: 'wss://42.193.1.25:8000/websocket/' + userInfo.value.id, +const {userInfo} = storeToRefs(userStore); +const {status, message, error, connect, disconnect, sendMessage} = useWebScoket({ + url: 'ws://42.193.1.25:8000/websocket/' + userInfo.value.id, heartBeatData: 'ping' }); @@ -120,7 +136,7 @@ handle: (item) => { console.log(item); imageViewer.value = true; - imageList.value = ['/api/files/'+item.contentUrl.url]; + imageList.value = ['/api/files/' + item.contentUrl.url]; resendMessage(); } }, @@ -129,7 +145,7 @@ handle: (item) => { console.log(item); videoViewer.value = true; - videoUrl.value = ['/api/files/'+item.contentUrl.url]; + videoUrl.value = ['/api/files/' + item.contentUrl.url]; resendMessage(); } }, @@ -138,12 +154,14 @@ handle: (item) => { console.log(item); pdfViewer.value = true; - pdfFile.value = '/api/files/'+item.contentUrl.url; + pdfFile.value = '/api/files/' + item.contentUrl.url; resendMessage(); } }, }; const searchText = ref(''); +const searchSubject = ref('') +const searchContentType = ref('') const loading = ref(false); @@ -156,12 +174,28 @@ 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 fileUrl = ref(""); +const fileViewer = ref(false); const checkRow = (item) => { + fileUrl.value = item.contentUrl.url; fileType[item.contentType] && fileType[item.contentType].handle(item); + fileViewer.value = true +}; + +const handleClose = () => { + fileViewer.value = false; + fileUrl.value = ""; + console.log("鎴戞槸鍚﹀叧闂細",fileUrl.value); }; const closeViewer = () => { @@ -173,7 +207,7 @@ 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(() => { @@ -182,13 +216,23 @@ }; 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); } - sendMessage({ id: userInfo.value.id, command: 'recordStudyTime' }); + sendMessage({id: userInfo.value.id, command: 'recordStudyTime'}); time.value = setInterval(() => { - sendMessage({ id: userInfo.value.id, command: 'recordStudyTime' }); + sendMessage({id: userInfo.value.id, command: 'recordStudyTime'}); }, 5000); }; @@ -232,7 +276,13 @@ margin-right: 20px; } } +.long-input { + width: 200px; +} +.long-select { + width: 200px; +} .pdf-container { width: 100%; height: 100%; -- Gitblit v1.8.0