workApp/pages/materialCollection/reviewMaterial/auditResult.vue

<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" @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>
			<button :class="['btn','btn_pass',{'disabled':state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 1)}]" type="primary" :loading="state.loading" @click="HandlePassHonor">通过</button>
		</view>
		<customPopupDialog ref="popupDelDialogRef" title="驳回" dialogWidth="702" :isMaskClick="false" :showDialogClose="false" @DialogConfirm="DialogConfirm">
			<view class="dialog_content_input">
				<view class="dialog_desc">请填写驳回原因方便教师修改</view>
				<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>

<script setup>
	import navBar from '@/components/navBar.vue';
	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,
		nextTick,
		onUnmounted
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const state = reactive({
		taskStatus:'',
		reviewStatus:'',
		taskTargetId:'',
		loading:false,
		pageTitle:'',
		tabBtns:[],
		fileContent:null,//文件内容
		rejectReason:'',//驳回原因
		easyinputStyle:{
			color: '#303133',
			borderColor: '#E9E9E9'
		}
	})
	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');//是否更新列表
		const detailData = uni.getStorageSync('reviewMaterialDetailData');//数据
		state.pageTitle = detailData?.targetName || '';
		state.reviewStatus = detailData?.reviewStatus || '';//审核状态
		state.taskTargetId = detailData?.taskTargetId || '';
		const fileList = detailData?.taskTargetFileVos || [];
		state.tabBtns = fileList.map(item => ({
			...item,
			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'){
				nextTick(()=>{
					appPreviewOfficeRef.value && appPreviewOfficeRef.value.open();
				})
			}else{
				appPreviewOfficeRef.value && appPreviewOfficeRef.value.close();
			}
			// #endif
		}else{
			webPreviewFile.value && webPreviewFile.value.close();
			appPreviewOfficeRef.value && appPreviewOfficeRef.value.close();
		}
	}
	//下载
	const ToDownloadFile = () => {
		ssdownload?.value?.toDownload({
			type:'2',
			src:state.fileContent.filePath,
			fileName:state.fileContent.fileName
		});
	}
	//通过
	const HandlePassHonor = () => {
		if(state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 1)){
			return false
		}
		HandleRejectOrPass(1)
	}
	//驳回
	const HandleRejectHonor = () => {
		if(state.taskStatus==2 || (state.taskStatus==1 && state.reviewStatus == 2)){
			return false
		}
		popupDelDialogRef.value.OpenDialog();
	}
	//驳回 确定按钮
	const DialogConfirm = () => {
		if(state.rejectReason == '' || state.rejectReason == null){
			uni.showToast({
				title: '请填写驳回原因！',
				icon: 'none'
			})
			return false
		}
		HandleRejectOrPass(2)
	}
	const HandleRejectOrPass = (status) => {
		const params = {
			taskTargetId: state.taskTargetId,
			reviewStatus: status
		}
		if(status == 2){
			params.reviewContent = state.rejectReason;
		}
		const apiFn = state.reviewStatus === 0 ? updateReviewStatus : ChangeReviewStatus;
		apiFn(params).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title: status == 2?'驳回成功！':'审核通过！',
					icon: 'none'
				})
				uni.setStorageSync('isLoadReviewMaterialDetailList', true);//刷新荣誉审核列表
				GoBack();
			}
		})
	}
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.page_body{
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: auto;
	}
	.page_content{
		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;
		width: 100%;
		padding: 40rpx 24rpx 38rpx 24rpx;
		box-sizing: border-box;
		box-shadow: inset 0px 2rpx 0px 0px #F3F3F3;
		background-color:#FFFFFF;
		gap: 30rpx;
		display: flex;
		.btn{
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 8rpx;
			font-weight: 500;
			font-size: 28rpx;
			flex: 1;
			box-sizing: border-box;
		}
		.btn_reject{
			border: 2rpx solid #F56C6C;
			color: #F56C6C;
			&.disabled{
				border: 2rpx solid #C0C4CC;
				color: #C0C4CC;
			}
		}
		.btn_pass{
			background-color: #2E64FA !important;
			color: #FFFFFF;
			&.disabled{
				background-color: #F3F3F3 !important;
				color: #C0C4CC;
			}
		}
	}
	.dialog_content_input{
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		.dialog_desc{
			font-weight: 400;
			font-size: 32rpx;
			color: #303133;
		}
		:deep(.uni-easyinput){
			margin-top: 20rpx;
			font-size: 28rpx;
			.is-input-border{
				border-radius: 8rpx;
				border-color: #E9E9E9 !important;
			}
			.uni-easyinput__content-textarea{
				height: 400rpx;
				min-height: 400rpx;
				font-size: 28rpx;
				margin:20rpx 24rpx 20rpx 14rpx;
			}
			.input-padding{
				padding-left: 10rpx;
			}
		}
	}
</style>