材料审核文件预览

components/popupPreviewFile.vue

@@ -4,7 +4,7 @@
 		<!-- 图片 -->
 		<image v-if="fileType=='image'" class="img_width" @click="CloseDialog" :src="filePath" mode="aspectFit"></image>
 		<video v-else-if="fileType=='video'" ref="fileVideo" id="fileVideo" :src="filePath" style="width: 100%; object-fit: contain;"></video>
-		<audio v-else-if="fileType=='audio'" :src="filePath"></audio>
+		<audio v-else-if="fileType=='audio'" :src="filePath" style="width: 100%;"></audio>
 		<template v-else>
 			<view class="other_file"><text>不支持预览，请点击下载: </text><text style="color: #2e64fa;font-size: 28rpx;" @click="ToDownloadFile">{{fileName}}</text></view>
 		</template>

components/wg-h5-preview-file/wg-h5-preview-file.vue

@@ -1,6 +1,6 @@
 <template>
-    <view class="wrapper" v-if="webviewUrl || value">
-        <view class="close" @click="close">
+    <view :class="['wrapper',{'noPpopup':!showCloseBtn}]" v-if="webviewUrl || value">
+        <view class="close" @click="close" v-if="showCloseBtn">
 			<uni-icons v-if="!$slots.close" class="close-icon" type="close" size="40" style="color: #999999;"></uni-icons>	
         </view>
         <view class="wg-h5-preview-file-container" :style="containerStyle">
@@ -26,19 +26,23 @@ const urlMap = {
 };
 export default {
     name: "WgH5PreviewFile",
-    // props: {
-    //     value: {
-    //         type: String,
-    //         required: true,
-    //     },
-    //     type: {
-    //         type: String,
-    //         required: true,
-    //         validator(v) {
-    //             return ["excel", "pdf", "word", "txt", "pptx"].includes(v);
-    //         },
-    //     },
-    // },
+    props: {
+		showCloseBtn:{
+			type: Boolean,
+			default:true
+		}
+        // value: {
+        //     type: String,
+        //     required: true,
+        // },
+        // type: {
+        //     type: String,
+        //     required: true,
+        //     validator(v) {
+        //         return ["excel", "pdf", "word", "txt", "pptx"].includes(v);
+        //     },
+        // },
+    },
     computed: {
         iframeUrl() {
             return (
@@ -243,6 +247,13 @@ export default {
 <style lang="scss">
 .wrapper {
     position: relative;
+	&.noPpopup{
+		height: 100%;
+		.wg-h5-preview-file-container{
+			position: static;
+			height: 100% !important;
+		}
+	}
     .close {
         position: fixed;
         top: 44px;

pages/materialCollection/reviewMaterial/auditResult.vue

@@ -1,9 +1,23 @@
 <template>
 	<view class="page_body">
 		<!-- 头部 -->
-		<nav-bar height="216" :title="state.pageTitle" :onlyTitle="false" :showHeadSearchInput="false" :showFilterPicker="false" :showTabs="false" :showTabBtns="true" :tabBtns="state.tabBtns" rightWidth="0rpx" @GoBack="GoBack"></nav-bar>
+		<nav-bar height="216" :title="state.pageTitle" :onlyTitle="false" :showHeadSearchInput="false" :showFilterPicker="false" :showTabs="false" :showTabBtns="true" :tabBtns="state.tabBtns" rightWidth="0rpx" @CommonFilterData="CommonFilterData" @GoBack="GoBack"></nav-bar>
 		<view class="page_content">
-			
+			<template v-if="state.fileContent">
+				<!-- 图片 -->
+				<image v-if="state.fileContent.docType=='image'" class="img_width" :src="state.fileContent.filePath" mode="aspectFit"></image>
+				<template v-else>
+					<!-- #ifdef H5 -->
+					<wg-h5-preview-file ref="webPreviewFile" :showCloseBtn="false" />
+					<!-- #endif -->
+					<!-- #ifdef APP-PLUS -->
+					<template v-if="['word','excel','pdf'].includes(state.fileContent.docType)">
+						<cjx-previewOffice ref="appPreviewOfficeRef" :value="state.fileContent.filePath" :type="state.fileContent.docType" :showCloseBtn="false" :showHeader="false" :closeOnClickModal="false"></cjx-previewOffice>
+					</template>
+					<view v-else class="other_file"><text>不支持预览，请点击下载: </text><text style="color: #2e64fa;font-size: 28rpx;" @click="ToDownloadFile">{{state.fileContent.fileName}}</text></view>
+					<!-- #endif -->
+				</template>
+			</template>
 		</view>
 		<view class="page_foot">
 			<button :class="['btn','btn_reject',{'disabled':state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 2)}]" type="primary" plain="true" :loading="state.loading" @click="HandleRejectHonor">驳回</button>
@@ -15,6 +29,8 @@
 				<uni-easyinput type="textarea" v-model="state.rejectReason" :maxlength="200" :style="state.easyinputStyle" placeholderStyle="font-weight: 400;font-size: 28rpx;color: #999999;" placeholder="请输入驳回原因…"></uni-easyinput>
 			</view>
 		</customPopupDialog>
+		<!-- 文件、图片下载 -->
+		<ss-download ref="ssdownload"></ss-download>
 	</view>
 </template>
 
@@ -23,7 +39,15 @@
 	import uvUpload from '@/uni_modules/uv-upload/components/uv-upload/uv-upload.vue';
 	import customPopupDialog from '@/components/customPopupDialog.vue';
 	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
+	// #ifdef H5
+	import wgH5PreviewFile from '@/components/wg-h5-preview-file/wg-h5-preview-file.vue';//web端文件预览 'word','excel','pptx','pdf','txt'
+	// #endif
+	// #ifdef APP-PLUS
+	import cjxPreviewOffice from '@/uni_modules/cjx-previewOffice/components/cjx-previewOffice/cjx-previewOffice.vue';//APP端文件预览 'word','excel','pdf','txt'
+	// #endif
+	import ssDownload from '@/uni_modules/ss-download/components/ss-download/ss-download.vue';
 	import {updateReviewStatus,ChangeReviewStatus} from '@/reqApi/notification.js';
+	import { getFileTypeBySuffix } from '@/common/common.js';
 	import {
 		reactive,
 		ref,
@@ -38,6 +62,7 @@
 		loading:false,
 		pageTitle:'',
 		tabBtns:[],
+		fileContent:null,//文件内容
 		rejectReason:'',//驳回原因
 		easyinputStyle:{
 			color: '#303133',
@@ -45,6 +70,9 @@
 		}
 	})
 	const popupDelDialogRef = ref(null);
+	const webPreviewFile = ref(null);//web端文件预览
+	const appPreviewOfficeRef = ref(null);//APP端文件预览
+	const ssdownload = ref(null);//下载
 	onLoad((option) => {
 		state.taskStatus = Number(option.taskStatus);//任务状态
 		uni.removeStorageSync('isLoadReviewMaterialDetailList');//是否更新列表
@@ -53,17 +81,54 @@
 		state.reviewStatus = detailData?.reviewStatus || '';//审核状态
 		state.taskTargetId = detailData?.taskTargetId || '';
 		const fileList = detailData?.taskTargetFileVos || [];
-		state.tabBtns = fileList.map(item=>({
+		state.tabBtns = fileList.map(item => ({
 			...item,
-			label:item.fileName,
-			value:item.id,
-		}))
-		console.log(detailData,32323)
+			docType: getFileTypeBySuffix(item.fileType),
+			label: item.fileName,
+			value: item.id,
+		}));
+	
+		state.fileContent = state.tabBtns.length ? state.tabBtns[0] : null;
+		GetFileContent();
 		
 	})
 	onUnmounted(()=>{
 		uni.removeStorageSync('reviewMaterialDetailData');//删除缓存数据
 	})
+	//切换条件选择器
+	const CommonFilterData = (filterOptions,type) => {
+		const tabBtnSelected = filterOptions.tabBtnSelected;
+		if(type == 'tabBtns'){
+			state.fileContent = state.tabBtns.find(item=>item.id == tabBtnSelected);
+			GetFileContent();
+		}
+	}
+	const GetFileContent = () => {
+		const docType = state?.fileContent?.docType || '';
+		if(['word','excel','pptx','pdf','txt'].includes(docType)){
+			// #ifdef H5
+			nextTick(()=>{//h5文件预览
+				webPreviewFile.value && webPreviewFile.value.preview({
+					url: state.fileContent.filePath,
+					type: state.fileContent.docType
+				});
+			})
+			// #endif
+			// #ifdef APP-PLUS
+			if(docType == 'pptx'){
+				ssdownload?.value?.toDownload({
+					type:'2',
+					src:state.fileContent.filePath,
+					fileName:state.fileContent.fileName
+				});
+			}else{
+				nextTick(()=>{
+					appPreviewOfficeRef.value && appPreviewOfficeRef.value.open();
+				})
+			}
+			// #endif
+		}
+	}
 	//通过
 	const HandlePassHonor = () => {
 		if(state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 1)){
@@ -118,19 +183,42 @@
 
 <style lang="scss" scoped>
 	.page_body{
+		display: flex;
+		flex-direction: column;
 		height: 100%;
 		min-height: auto;
 	}
 	.page_content{
-		height: calc(100% - 390rpx);
+		flex:1;
+		//height: calc(100% - 390rpx);
 		overflow: auto;
+		.img_width{
+			width: 100%;
+			height: auto;
+			max-height: 100%;
+		}
+		.other_file{
+			height: 100%;
+			display: flex;
+			width: 100%;
+			box-sizing: border-box;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+			font-size: 28rpx;
+			color: #333;
+			word-break: break-all;
+		}
 	}
 	.page_foot{
-		position: fixed;
-		left:0;
-		right: 0;
-		bottom: 0;
+		// position: fixed;
+		// left:0;
+		// right: 0;
+		// bottom: 0;
+		width: 100%;
 		padding: 40rpx 24rpx 38rpx 24rpx;
+		box-sizing: border-box;
 		box-shadow: inset 0px 2rpx 0px 0px #F3F3F3;
 		background-color:#FFFFFF;
 		gap: 30rpx;

pages/materialCollection/taskOverview/personList.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="page_body">
 		<!-- 头部 -->
-		<nav-bar height="220" :title="pageTitle" :tabBtns="state.tabBtns" :onlyTitle="false" :showHeadSearchInput="false" :showFilterPicker="false" :showTabs="false" :showTabBtns="false" rightWidth="0rpx" @GoBack="GoBack">
+		<nav-bar height="220" :title="pageTitle" :onlyTitle="false" :showHeadSearchInput="false" :showFilterPicker="false" :showTabs="false" :showTabBtns="false" rightWidth="0rpx" @GoBack="GoBack">
 			<template #tabs_bottom_content>
 				<!-- 搜索框单独一行 -->
 				<view class="nav_head row_search_box">

pages/teacherHonor/myHonor/uploadEditMyHonor.vue

@@ -750,10 +750,12 @@
 		}
 	}
 	.page_foot{
-		position: fixed;
-		left:0;
-		right: 0;
-		bottom: 0;
+		// position: fixed;
+		// left:0;
+		// right: 0;
+		// bottom: 0;
+		width:100%;
+		box-sizing: border-box;
 		padding: 20rpx 24rpx;
 		background-color:#FFFFFF;
 		.btn_submit{

uni_modules/cjx-previewOffice/components/cjx-previewOffice/cjx-previewOffice.vue

@@ -1,22 +1,24 @@
 <template>
-	<view class="container">
+	<view :class="['container',{'noPpopup':!props.showCloseBtn}]">
 		<view class="file_content" @click="open">
 			<slot></slot>
 		</view>
 		
 		<view class="cjx-previewOffice-container" :style="{ height: pagesHeight }">
-			<view class="cjx-previewOffice-header" v-if="!$slots.header">
-				<view class="icon" ></view>
-				<view class="name">
-					{{ name }}
+			<template v-if="props.showHeader">
+				<view class="cjx-previewOffice-header" v-if="!$slots.header">
+					<view class="icon" ></view>
+					<view class="name">
+						{{ name }}
+					</view>
+					<uni-icons class="icon" @click="close" type="close" size="40" style="color: #999999;font-size: 40rpx;"></uni-icons>
+					<!-- <icon class="icon" @click="close" type="cancel"></icon> -->
 				</view>
-				<uni-icons class="icon" @click="close" type="close" size="40" style="color: #999999;font-size: 40rpx;"></uni-icons>
-				<!-- <icon class="icon" @click="close" type="cancel"></icon> -->
-			</view>
-			
-			<view class="cjx-previewOffice-header" v-else>
-				<slot name="header"></slot>
-			</view>
+				
+				<view class="cjx-previewOffice-header" v-else>
+					<slot name="header"></slot>
+				</view>
+			</template>
 			
 			<view class="webview">
 				<!-- #ifdef H5 -->
@@ -177,6 +179,19 @@ onMounted(() => {
 	.container{
 		display: flex;
 		width: 100%;
+		&.noPpopup{
+			height: 100%;
+			.file_content{
+				display: none;
+			}
+			.cjx-previewOffice-container{
+				position: static;
+				height: 100% !important;
+			}
+			.cjx-previewOffice-mask{
+				display: none;
+			}
+		}
 	}
 	.file_content{
 		display: flex;

uni_modules/cjx-previewOffice/components/cjx-previewOffice/interface.ts

@@ -14,14 +14,16 @@ export type FileType = 'word' | 'excel' | 'pdf' | 'txt'
 export const previewOfficeProps = () => {
   return {
     value: stringType(''),
-		name: stringType(''),
-		type: stringType<FileType>('word'),
-		zIndex: {
-			type: Number,
-			default: 990
-		},
-		/** 点击遮罩是否关闭 默认true */
-		closeOnClickModal: booleanType(true)
+	name: stringType(''),
+	type: stringType<FileType>('word'),
+	zIndex: {
+		type: Number,
+		default: 990
+	},
+	/** 点击遮罩是否关闭 默认true */
+	closeOnClickModal: booleanType(true),
+	showHeader:booleanType(true),
+	showCloseBtn:booleanType(true),
   }
 }