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 | 243 ++++++++++++++++++++++++++++++++++++++----------
1 files changed, 192 insertions(+), 51 deletions(-)
diff --git a/src/views/folder/index.vue b/src/views/folder/index.vue
index 5e40f10..69536e8 100644
--- a/src/views/folder/index.vue
+++ b/src/views/folder/index.vue
@@ -9,27 +9,38 @@
<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>
+ <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>
<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 :data="fileList" height="100%" v-loading="loading">
<el-table-column label="鏂囦欢鍚嶇О">
<template #default="scope">
<div class="row-info">
<div class="icon">
- <img :src="fileType[scope.row.type].iconPath" class="width-img" />
+ <img :src="getIcon(scope.row.contentType)" class="width-img"/>
</div>
- <div class="label">{{ scope.row.name }}</div>
+ <div class="label">{{ scope.row.introduction }}</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 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)">
@@ -42,7 +53,11 @@
</div>
<div class="card-footer flex justify-center mb-7 shrink-0">
- <el-pagination background layout="prev, pager, next" :total="1000" />
+ <el-pagination background layout="prev, pager, next" :total="fileList.length"
+ :default-page-size="20"
+ :currentPage="currentIndex"
+ :hide-on-single-page="true"
+ @current-change="handleCurrentChange"/>
</div>
</div>
</el-card>
@@ -50,41 +65,88 @@
</div>
</div>
- <div class="pdf-container" v-show="pdfViewer">
- <PDFViewer :pdfUrl="'/helloworld.pdf'"></PDFViewer>
+ <!-- pdf鏌ョ湅 -->
+ <!-- <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> -->
+
+ <!-- image鏌ョ湅 -->
+ <div class="image-container" v-show="imageViewer">
+ <el-image-viewer :url-list="imageList" @close="closeViewer"></el-image-viewer>
+ </div>
+
+ <!-- 瑙嗛鏌ョ湅 -->
+ <div class="video-container" v-show="videoViewer">
+ <VideoViewer :videoUrl="videoUrl"></VideoViewer>
+ <div class="close-btn">
+ <el-button type="danger" size="large" circle @click="closeViewer">
+ <template #icon>
+ <el-icon :size="20">
+ <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 } from 'vue';
-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 useWebScoket from '@/hooks/useWebScoket.js';
+
+const userStore = useUserStore();
+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'
+});
+
+const time = ref(null);
+
const fileType = {
'img': {
iconPath: '/static/icons/file_type_image.png',
handle: (item) => {
console.log(item);
+ imageViewer.value = true;
+ imageList.value = ['/api/files/' + item.contentUrl.url];
+ resendMessage();
}
},
'video': {
iconPath: '/static/icons/file_type_video.png',
handle: (item) => {
console.log(item);
+ videoViewer.value = true;
+ videoUrl.value = ['/api/files/' + item.contentUrl.url];
+ resendMessage();
}
},
'pdf': {
@@ -92,64 +154,112 @@
handle: (item) => {
console.log(item);
pdfViewer.value = true;
+ pdfFile.value = '/api/files/' + item.contentUrl.url;
+ resendMessage();
}
},
};
+const searchText = ref('');
+const searchSubject = ref('')
+const searchContentType = ref('')
const loading = ref(false);
-const searchText = ref('');
+
const pdfViewer = ref(false);
const imageViewer = ref(false);
const videoViewer = ref(false);
-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 imageList = ref([]);
+const pdfFile = ref('');
+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) => {
- fileType[item.type] && fileType[item.type].handle(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 = () => {
pdfViewer.value = false;
imageViewer.value = false;
videoViewer.value = false;
-}
+ clearInterval(time.value);
+};
const getData = () => {
- getFileList().then(res => {
-
+ loading.value = true;
+ getFileList({introduction: searchText.value, subjectId: searchSubject.value, contentType:searchContentType.value}).then(res => {
+ loading.value = false;
+ fileList.value = res.data;
+ }).catch(() => {
+ loading.value = false;
});
};
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'});
+ time.value = setInterval(() => {
+ sendMessage({id: userInfo.value.id, command: 'recordStudyTime'});
+ }, 5000);
+};
+
+const getIcon = (type) => {
+ if (fileType[type]) {
+ return fileType[type].iconPath;
+ }
+};
+
+const handleCurrentChange = (val) => {
+ getData();
+}
+
+
+const searchFile = () => {
+ getData();
+}
+
+// -----------------------------------鐢熷懡鍛ㄦ湡
+onMounted(() => {
+ // 杩炴帴webscoket
+ connect();
+});
+
+onBeforeUnmount(() => {
+ clearInterval(time.value);
+});
</script>
<style lang="scss" scoped>
@@ -166,7 +276,13 @@
margin-right: 20px;
}
}
+.long-input {
+ width: 200px;
+}
+.long-select {
+ width: 200px;
+}
.pdf-container {
width: 100%;
height: 100%;
@@ -175,11 +291,13 @@
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;
@@ -187,4 +305,27 @@
}
}
}
-</style>
\ No newline at end of file
+
+.video-container {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 99999;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ .close-btn {
+ position: absolute;
+ top: 60px;
+ right: 100px;
+ z-index: 9999999;
+
+ :deep(.el-button) {
+ width: fit-content;
+ height: fit-content;
+ padding: 10px !important;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0