提交

src/views/myResources/myResources.vue

@@ -709,10 +709,18 @@
 	}
 	const auditState = ref(null)
 	const handleAudit = (record) => {
-		console.log('Audit:', record)
-		publishedData.value = record
-		auditState.value = true
-		auditModalVisible.value = true
+		// console.log('Audit:', record)
+		// publishedData.value = record
+		// auditState.value = true
+		// auditModalVisible.value = true
+		router.push({
+			path: '/portal/resourceDetails',
+			query: {
+				id: record.id,
+				state: 1,
+				audit: 1
+			}
+		})
 	}
 	const handleView = (record) => {
 		router.push({

src/views/resourceDetails/components/FilePreviewer.vue

@@ -0,0 +1,161 @@
+<template>
+	<div class="file-preview-container">
+		<!-- PDF预览 -->
+		<div v-if="isPDF" class="pdf-preview">
+			<iframe v-if="pdfUrl" :src="pdfUrl" class="preview-iframe" frameborder="0"></iframe>
+			<div v-else class="no-preview">无法加载PDF预览</div>
+		</div>
+
+		<!-- Office文档预览 -->
+		<div v-else-if="isOffice" class="office-preview">
+			<iframe v-if="officeUrl" :src="officeUrl" class="preview-iframe" frameborder="0"></iframe>
+			<div v-else class="no-preview">无法加载文档预览</div>
+		</div>
+
+		<!-- 不支持的文件类型 -->
+		<div v-else class="unsupported-file">
+			不支持预览此文件类型: {{ fileType }}
+			<a-button type="primary" @click="handleDownload">下载文件</a-button>
+		</div>
+
+		<!-- 加载状态 -->
+		<div v-if="loading" class="loading-overlay">
+			<a-spin size="large" />
+			<div>加载预览中...</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { computed, ref, onMounted } from 'vue'
+	import { message } from 'ant-design-vue'
+
+	const props = defineProps({
+		fileUrl: {
+			type: String,
+			required: true
+		},
+		fileName: {
+			type: String,
+			default: ''
+		},
+		fileType: {
+			type: String,
+			default: ''
+		},
+		// 文件预览服务基础URL
+		previewServiceUrl: {
+			type: String,
+			default: 'https://view.officeapps.live.com/op/embed.aspx'
+		}
+	})
+
+	const loading = ref(false)
+	const officeUrl = ref('')
+
+	// // 获取文件类型
+	// const fileType = computed(() => {
+	// 	if (!props.fileName) return ''
+	// 	const ext = props.fileName.split('.').pop().toLowerCase()
+	// 	return ext
+	// })
+
+	// 判断文件类型
+	const isPDF = computed(() => props.fileType === 'pdf')
+	const isWord = computed(() => ['doc', 'docx'].includes(props.fileType))
+	const isExcel = computed(() => ['xls', 'xlsx'].includes(props.fileType))
+	const isPPT = computed(() => ['ppt', 'pptx'].includes(props.fileType))
+	const isOffice = computed(() => isWord.value || isExcel.value || isPPT.value)
+
+	// 处理文件URL
+	const fullFileUrl = computed(() => {
+		// 如果是相对路径，转换为绝对路径
+		if (!props.fileUrl.startsWith('http') && !props.fileUrl.startsWith('/')) {
+			return `${window.location.origin}/${props.fileUrl}`
+		}
+		return props.fileUrl
+	})
+
+	// PDF预览URL
+	const pdfUrl = computed(() => {
+		if (!isPDF.value) return null
+		// 使用Google Docs Viewer进行PDF预览
+		return `https://docs.google.com/viewer?url=${encodeURIComponent(fullFileUrl.value)}&embedded=true`
+	})
+
+	// 初始化Office预览
+	const initOfficePreview = () => {
+		if (!isOffice.value) return
+
+		// 使用微软Office Online Viewer预览Word/Excel/PPT
+		officeUrl.value = `${props.previewServiceUrl}?src=${encodeURIComponent(fullFileUrl.value)}`
+	}
+
+	// 下载文件
+	const handleDownload = () => {
+		const link = document.createElement('a')
+		link.href = props.fileUrl
+		link.download = props.fileName || `download.${fileType.value}`
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		message.success('开始下载文件')
+	}
+
+	onMounted(() => {
+		loading.value = true
+		initOfficePreview()
+		loading.value = false
+	})
+</script>
+
+<style scoped>
+	.file-preview-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		min-height: 500px;
+		border: 1px solid #e8e8e8;
+		border-radius: 4px;
+		overflow: hidden;
+	}
+
+	.preview-iframe {
+		width: 100%;
+		height: 100%;
+		min-height: 500px;
+		border: none;
+	}
+
+	.pdf-preview,
+	.office-preview {
+		width: 100%;
+		height: 100%;
+	}
+
+	.no-preview,
+	.unsupported-file {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 300px;
+		color: #999;
+		font-size: 16px;
+		gap: 16px;
+	}
+
+	.loading-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background: rgba(255, 255, 255, 0.8);
+		z-index: 10;
+	}
+</style>

src/views/resourceDetails/components/VideoDetails.vue

@@ -44,11 +44,11 @@
 					style="width: 850px; height: 350px"
 				>
 					<!-- <PDF :src="resSrc" :width="850" :height="350" /> -->
+					<FilePreviewer :fileUrl="resSrc" :fileName="resName" :fileType="fileType" />
 
 					<a-image width="200px" height="220px" :src="pdfRes" :preview="false" @click="handleDownload(resSrc)" />
 					<!-- <a-button type="primary" @click="handleDownload(resSrc)">去预览</a-button> -->
 				</div>
-
 				<div style="height: 20px"></div>
 				<!-- 用户信息部分 -->
 				<div class="user-info" style="display: flex; flex-direction: column">
@@ -119,10 +119,10 @@
 					<span style="font-weight: bold; margin-right: 10px">所属院系: </span>
 					<span style="display: block">{{ department }}</span>
 				</div>
-				<div style="display: flex; align-items: center">
+				<!-- <div style="display: flex; align-items: center">
 					<span style="font-weight: bold; margin-right: 10px">所属专业: </span>
 					<span style="display: block">{{ major }}</span>
-				</div>
+				</div> -->
 				<div style="display: flex; align-items: center">
 					<span style="font-weight: bold; margin-right: 10px">资源类型: </span>
 					<span style="display: block">{{ courseType }}</span>
@@ -168,6 +168,7 @@
 	import { useRoute } from 'vue-router'
 	import sysConfig from '@/config/index'
 	import pdfRes from '@/assets/images/pdf.png'
+	import FilePreviewer from './FilePreviewer.vue'
 	import EventBus from '@/utils/EventBus'
 	// import pdfView from 'pdfvuer'
 	// import 'pdfvuer/dist/pdfvuer.css'
@@ -177,6 +178,7 @@
 		// 	type: Object,
 		// 	default: () => {}
 		// }
+		//是否从资源列表来 1 是 0 否
 		isState: {
 			type: Number,
 			default: () => null
@@ -186,6 +188,7 @@
 	const starTag = ref(false)
 	const ShareDialogRef = ref(null)
 	const resSrc = ref('')
+	const fileType = ref('')
 	const resName = ref('资源名称')
 
 	const teacherName = ref('王某某')
@@ -268,6 +271,7 @@
 					console.log('应该施舍你们', tags.value)
 					//关键的资源在线地址
 					resSrc.value = sysConfig.FILE_URL + itemData.value.priviewFileUrl
+					fileType.value = itemData.value.suffix
 					// imagess.value = ''+itemData.value.coverImagePath
 					// imagess.value = 'http://192.168.1.245:10005/education/' + itemData.value.priviewFileUrl
 

src/views/resourceDetails/index.vue

@@ -6,6 +6,10 @@
 				<BreadCrumb />
 				<VideoDetails :isState="isState" ref="VideoDetailsRef" />
 				<TallList v-if="!isState" />
+				<div style="display: flex; justify-content: flex-end; margin-top: 10px" v-if="isAudit && isState">
+					<a-button @click="handleAuditResult(3)" style="margin-right: 10px">不同意</a-button>
+					<a-button type="primary" @click="handleAuditResult(2)">同意</a-button>
+				</div>
 				<!-- <ResourceDetails v-if="indexType == 'resourceDetails'" ref="ResourceDetailsRef" /> -->
 			</div>
 		</a-layout>
@@ -21,7 +25,7 @@
 	import { useRoute, useRouter } from 'vue-router'
 	import TallList from './components/TallList.vue'
 	import { addViewCount, detail, add, queryList } from '@/api/portal'
-
+	import resourceAuditApi from '@/api/resourceAudit.js'
 	import EventBus from '@/utils/EventBus'
 
 	const router = useRouter()
@@ -31,6 +35,7 @@
 	const VideoDetailsRef = ref(null)
 	const route = useRoute()
 	const isState = ref(route.query.state || null)
+	const isAudit = ref(route.query.audit || null)
 	//     {
 	//     "fileName": "Kettle文档",
 	//     "courseType": "0",
@@ -64,6 +69,24 @@
 	const handlerItemSidebar = (item) => {
 		// emit('handlerItemSidebar', item)
 	}
+	const handleAuditResult = (val) => {
+		const params = {
+			ids: route.query.id,
+			verifyStatus: val
+		}
+		resourceAuditApi
+			.updateStatus(params)
+			.then((res) => {
+				if (res.code == 200) {
+					// auditModalVisible.value = false
+					router.go(-1)
+				}
+				// getListData()
+			})
+			.catch((err) => {
+				console.error(err)
+			})
+	}
 	const onChangeCurrent = (current) => {
 		indexType.value = current