workApp/pages/materialCollection/submitMaterial/submitDetail.vue

<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="96" title="提交材料" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
		<view class="page_content_height">
			<view class="page_content padding_btm">
				<view class="task_title">{{state?.details?.taskName}}</view>
				<view class="task_class_collect">
					<text class="class_item">{{state?.details?.departmentName}}</text>
					<text class="class_item">{{state?.details?.materialCategoryName}}</text>
					<text class="class_item">{{state?.details?.createdBy}}</text>
				</view>
				<view class="task_time">
					<view class="time_day">
						<text class="time_item">{{state?.details?.startTime}}</text>
						<text class="time_item">至</text>
						<text class="time_item">{{state?.details?.endTime}}</text>
						<text class="time_item" v-if="state?.details?.taskStatus === 1 && remainingDays(state?.details?.endTime) > 0">剩余{{remainingDays(state?.details?.endTime)}}天</text>
					</view>
					<view :class="['task_status', statusClassMap[state?.details?.taskStatus]]">
						{{taskStatusMap[state?.details?.taskStatus]}}
					</view>
				</view>
				<view :class="['task_desc',{'over':!state.isExpand}]">
					采集要求：{{state?.details?.collectionRequire}}
				</view>
				<view class="task_desc_all">
					采集要求：{{state?.details?.collectionRequire}}
				</view>
				<view class="expand_btn" v-if="state.showExpandBtn" @click="toggleExpand"><text
						class="expand_text">{{!state.isExpand?'展开':'收起'}}</text><uni-icons class="expand_icon"
						:type="!state.isExpand?'down':'up'"></uni-icons></view>
			</view>
			<!-- 间隔 -->
			<view class="row_gap"></view>
			<view class="page_content">
				<view class="target_status">
					<view class="target_tag">
						<template v-for="text in ['departmentName','departmentGroupName','subjectName','gradeName','classTypeName','className']">
							<text class="info_text" v-if="state?.targetFileList?.[text]" :key="text">{{state?.targetFileList?.[text]}}</text>
						</template>
					</view>
					<template v-if="state?.details?.auditMechanism === 1">
						<view v-if="state?.targetFileList?.targetStatus=== 1" class="status_tag notSubmitList">
							<text>待提交</text>
						</view>
						<view v-if="state?.targetFileList?.targetStatus=== 3" class="status_tag reviewReasonList">
							<text>已驳回</text>
						</view>
						<view v-if="state?.targetFileList?.targetStatus=== 2" class="status_tag notReviewList">
							<text>审核中</text>
						</view>
						<view v-if="state?.targetFileList?.targetStatus=== 4" class="status_tag reviewList">
							<text>已提交</text>
						</view>
					</template>
					<template v-if="state?.details?.auditMechanism === 0">
						<view v-if="state?.targetFileList?.targetStatus=== 1" class="status_tag notSubmitList">
							<text>待提交</text>
						</view>
						<view v-else class="status_tag reviewList">
							<text>已提交</text>
						</view>
					</template>
					
				</view>
				<!-- 上传按钮 提交状态 1待提交 2审核中 3已驳回 4已提交 -->
				<!-- maxSize：单文件上限 MB；0 表示不限制 maxCount：列表最多文件数 -->
				<kex-file-uploader 
				ref="fileUploader" 
				v-model="files" 
				mode="headless" 
				:max-count="20" 
				:maxSize="100" 
				formats="doc,docx,xls,xlsx,ppt,pptx,png,jpg,jpeg,gif,bmp">
				</kex-file-uploader>
				<view class="upload_box" @click="FileChooseUploader" v-if="state?.targetFileList?.targetStatus === 1 && state?.details?.taskStatus !== 2">
					<image class="upload_icon" src="@/static/image/icon/upload_icon.png"></image>
					<view class="upload_text">
						<view class="upload_title">点击上传文件</view>
						<view class="upload_desc">支持Word、Excel、PPT、图片（最大100MB）</view>
					</view>
				</view>
				<view class="upload_box" v-if="(state?.targetFileList?.targetStatus === 2 || state?.targetFileList?.targetStatus === 4) && state?.details?.taskStatus !== 2">
					<image class="upload_icon" src="@/static/image/icon/upload_locked.png"></image>
					<view class="upload_text">
						<view class="upload_title">点击重新编辑可再提交</view>
						<view class="upload_desc">支持Word、Excel、PPT、图片（最大100MB）</view>
					</view>
				</view>
				<view class="upload_box" v-if="state?.targetFileList?.targetStatus === 3 && state?.details?.taskStatus !== 2">
					<image class="upload_icon" src="@/static/image/icon/upload_locked.png"></image>
					<view class="upload_text">
						<view class="upload_title">请先删除全部文件，再提交调整后的合规材料</view>
						<view class="upload_desc">支持Word、Excel、PPT、图片（最大100MB）</view>
					</view>
				</view>
				<view class="upload_box" v-if="state?.details?.taskStatus == 2">
					<image class="upload_icon" src="@/static/image/icon/upload_locked.png"></image>
					<view class="upload_text">
						<view class="upload_title">已结束不可再提交</view>
						<view class="upload_desc">支持Word、Excel、PPT、图片（最大100MB）</view>
					</view>
				</view>
				<view class="list_item" @click="PreviewFile(item)" v-for="item in (state?.targetFileList?.taskTargetFileVos || [])" :Key="item.id">
					<image class="file_icon" src="@/static/image/icon/file.png"></image>
					<view class="file_info">
						<view class="file_name">{{item.fileName}}</view>
						<view class="file_size">
							<text>{{getFileSize(item.fileSize)}}</text>
							<text>{{ item.createTime }}</text>
						</view>
					</view>
					<view class="file_btn">
						<text @click.stop="HandleDeleteFileList(item)" :class="['del',{'disabled':state?.targetFileList?.targetStatus === 2 || state?.targetFileList?.targetStatus === 4}]">删除</text>
						<text class="download" @click.stop="ToDownloadFile(item)">下载</text>
					</view>
				</view>
			</view>
		</view>
		<view class="page_foot" v-if="state?.details?.taskStatus!=2">
			<!-- 提交状态 1待提交 2审核中 3已驳回 4已提交 -->
			<template v-if="(state?.targetFileList?.targetStatus === 1 || state?.targetFileList?.targetStatus === 3)">
				<view @click="DeleteAllFiles" :class="['del',{'disabled':!state?.targetFileList?.taskTargetFileVos?.length}]">删除全部</view>
				<view :class="['submit',{'disabled':state?.targetFileList?.targetStatus === 3}]" @click="UpdateTaskTarget">提交</view>
			</template>
			<template v-else>
				<view class="del disabled">删除全部</view>
				<view class="submit" @click="UpdateTaskTargetReset">重新编辑</view>
			</template>
		</view>
		<!-- 删除确认框 -->
		<popupDialog ref="popupDelDialogRef" :showFootBorder="true" :content="state.delDialog.content" @DialogConfirm="DialogDelConfirm" />
		<!-- 提示框 -->
		<popupPreviewFile ref="popupDialogRef" :filePath="state.previewPopup.filePath"></popupPreviewFile>
		<!-- 文件、图片下载 -->
		<ss-download ref="ssdownload"></ss-download>
	</view>
</template>

<script setup>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import ssDownload from '@/uni_modules/ss-download/components/ss-download/ss-download.vue';
	import popupDialog from '@/components/popupDialog.vue';
	import popupPreviewFile from '@/components/popupPreviewFile.vue';
	import navBar from '@/components/navBar.vue';
	import { remainingDays,getFileSize } from '@/common/common.js';
	import {getTaskTargetFileList,DeleteFileList,DelTaskTargetFileList,updateTaskTarget,uploadTaskTargetFileList} from '@/reqApi/notification.js';
	import {onLoad} from '@dcloudio/uni-app';
	import config from '@/config.js'; // 引入配置文件
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance,
		onMounted
	} from 'vue';
	const state = reactive({
		taskId: '', //任务id
		targetId:'',//
		showExpandBtn: false, //是否显示展开按钮
		isExpand: false, //是否展开
		details: {}, //详情信息
		targetFileList:{},
		delDialog:{
			type:'',
			content:'',
			fileUrls:[],
			targetFileIds:[]
		},
		previewPopup:{
			filePath:''
		}
	});
	const popupDelDialogRef = ref(null);
	const popupDialogRef = ref(null);
	const fileUploader = ref(null);
	const ssdownload = ref(null);
	const files = ref([]);
	const token = ref(uni.getStorageSync('token'));
	const apiBaseUrl = ref('');
	const statusClassMap = {
		1: 'status_published',
		2: 'status_closed'
	};
	const taskStatusMap = {
		1: '进行中',
		2: '已结束'
	};
	onLoad((option) => {
		state.taskId = option.taskId;
		state.targetId = option.targetId;
	})
	onMounted(() => {
		state.details = uni.getStorageSync('submitMaterialDetailInfo') || {};
		getApiBaseUrl();//上传接口地址
		checkTextOverflow();
		GetTaskTargetFileList();
	});
	//上传接口地址
	const getApiBaseUrl = () => {
		if (process.env.NODE_ENV === 'development') {//本地开发环境
		  const SYSTEM_INFO = uni.getSystemInfoSync();//获取系统信息的同步接口
		  apiBaseUrl.value = SYSTEM_INFO.uniPlatform === 'web' ? config.proxyBaseUrl:config.apiBaseUrl;//读取配置文件的apiBaseUrl变量
		} else {//生产/测试环境
		  apiBaseUrl.value = config.apiBaseUrl
		}
	}
	//选择文件上传
	const FileChooseUploader = () => {
		fileUploader.value.chooseFile({//选择上传文件
			count: 1,
			success: (files) => {
				console.log(files[0])
				fileUploader.value.upload({//上传单个文件
					url:`${apiBaseUrl.value}/api/v1/teach/oss/file/oss/upload_file_list`,
					file: files[0],
					name: 'files',
					header: {Authorization: token.value},
					formData: {
						taskId:state.taskId,
						targetId:state.targetId
					},
					method: 'POST',
					withCredentials: true, // iOS 本地测远程且要带 cookie
					success: (res) => {
						const result = JSON.parse(res.result);
						const fileInfoList = result.data.map(item => ({
							...item,
							filePath: item.fileUrl
						}))
						UploadTargetFileList(fileInfoList);
					}
				});
			}
		})
	}
	//具体采集任务保存上传的文件地址
	const UploadTargetFileList = (fileInfoList) => {
		uploadTaskTargetFileList({
			fileInfoList,
			taskId:state.taskId,
			targetId:state.targetId
		}).then(res=>{
			if (res.code === 200) {
				uni.showToast({
					title: '上传成功!',
					icon: 'none'
				});
				GetTaskTargetFileList();
			}
		})
	}
	//预览
	const PreviewFile = (item) => {
		console.log(item)
		const fileType = item.fileType;
		if(IsImageExts(fileType)){//图片预览
			state.previewPopup.filePath = item.filePath;
			popupDialogRef.value.OpenDialog();
		}else{//文件预览
			// 1. 先下载文件到本地临时目录
			uni.downloadFile({
				url: item.filePath,
				success: (downloadRes) => {
					if (downloadRes.statusCode === 200) {
						// 2. 下载成功后，得到临时文件路径 tempFilePath
						const localPath = downloadRes.tempFilePath;
						// 3. 构造 file 对象（必须有 path）
						const fileObj = {
							name: item.fileName,
							path: localPath,  // 关键字段
							size: item.fileSize // 可选
						};
						// 4. 调用 kex-file-uploader 的 openDocument 方法预览
						fileUploader.value?.openDocument({
							file: fileObj,
							success: () => console.log('预览成功'),
							fail: (err) => console.error('预览失败', err)
						});
					}
				},
				fail: (err) => {
					uni.showToast({ title: '文件下载失败', icon: 'none' });
				}
			});
		}
	}
	//判断是否是图片
	const IsImageExts = (fileType) => {
		const type = fileType?.toLowerCase();
		const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp','svg', 'tiff', 'tif', 'ico', 'avif', 'heic', 'heif'];
		return imageExts.includes(type)
	}
	//下载
	const ToDownloadFile = (item) => {
		const fileType = IsImageExts(item.fileType)?'1':'2';//1:图片 2 文档 3 视频
		ssdownload?.value?.toDownload({
			type:fileType,
			src:item.filePath,
			fileName:item.fileName
		});
	}
	const checkTextOverflow = () => {
		nextTick(() => {
			const instance = getCurrentInstance();
			// 安全保护
			if (!instance || !instance.proxy) {
				// 备用方案：全局查询（要求元素 class 唯一）
				let taskDescAllHeight = 0,
					taskDescHeight = 0;
				const query = uni.createSelectorQuery();
				query.select('.task_desc_all').boundingClientRect((rect) => {
					taskDescAllHeight = rect?.height || 0;
				});
				query.select('.task_desc').boundingClientRect((rect) => {
					taskDescHeight = rect?.height || 0;
				});
				query.select('.page_content_data').boundingClientRect((rect) => {
					state.searchBoxTop = rect?.top || 0;
				});
				query.exec(() => {
					// 所有回调执行完毕后触发
					state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
				});
				return;
			}
			let taskDescAllHeight = 0,
				taskDescHeight = 0;
			const query = uni.createSelectorQuery().in(instance.proxy);
			query.select('.task_desc_all').boundingClientRect((rect) => {
				taskDescAllHeight = rect?.height || 0;
			});
			query.select('.task_desc').boundingClientRect((rect) => {
				taskDescHeight = rect?.height || 0;
			});
			query.select('.page_content_data').boundingClientRect((rect) => {
				state.searchBoxTop = rect?.top || 0;
			});
			query.exec(() => {
				// 所有回调执行完毕后触发
				state.showExpandBtn = taskDescAllHeight > taskDescHeight + 1;
			});
		});
	}
	// 展开收起切换
	const toggleExpand = () => {
		state.isExpand = !state.isExpand;
	}
	//获取当前教师提交的文件列表
	const GetTaskTargetFileList = () => {
		getTaskTargetFileList(state.targetId).then(res=>{
			if(res.code == 200){
				state.targetFileList = res.data || {};
			}
		})
	}
	//单个删除
	const HandleDeleteFileList = (item) => {
		if(state?.targetFileList?.targetStatus === 2 || state?.targetFileList?.targetStatus === 4){
			return false
		}
		const { filePath, id } = item;
		state.delDialog = {
			type:'del',
			content:'是否删除当前文件?',
			fileUrls:[filePath],
			targetFileIds:[id]
		};
		popupDelDialogRef.value.OpenDialog();
	}
	//删除全部
	const DeleteAllFiles = () => {
		let fileUrls = [],targetFileIds = [];
		const taskTargetFileVos = state?.targetFileList?.taskTargetFileVos || [];
		if(taskTargetFileVos.length > 0){
			taskTargetFileVos.forEach(item => {
				fileUrls.push(item.filePath);
				targetFileIds.push(item.id)
			})
			state.delDialog = {
				type:'del',
				content:'是否删除全部当前文件?',
				fileUrls:fileUrls,
				targetFileIds:targetFileIds
			};
			popupDelDialogRef.value.OpenDialog();
		}
	}
	//提交
	const UpdateTaskTarget = () => {
		const taskTargetFileVos = state?.targetFileList?.taskTargetFileVos || [];
		if(taskTargetFileVos.length == 0){
			uni.showToast({
				title: '请上传提交文件!',
				icon: 'none'
			});
			return false
		}
		state.delDialog = {
			type:'submit',
			content:'是否提交当前任务?',
			fileUrls:[],
			targetFileIds:[]
		};
		popupDelDialogRef.value.OpenDialog();
	}
	//重新提交
	const UpdateTaskTargetReset = () => {
		state.delDialog = {
			type:'submit',
			content:'是否重新编辑当前任务?',
			fileUrls:[],
			targetFileIds:[]
		};
		popupDelDialogRef.value.OpenDialog();
	}
	//确定删除 确定提交
	const DialogDelConfirm = () => {
		if(state.delDialog.type == 'del'){//单个删除 批量删除
			DelFileList();
		}else if(state.delDialog.type == 'submit') {//提交
			submitTaskTarget();
		}
	}
	const DelFileList = async() => {
		const res = await DeleteFileList({ fileUrls: state.delDialog.fileUrls })
		if (res.code !== 200) {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			return false
		}
		const resData = await DelTaskTargetFileList({
			targetId: state.targetId,
			targetFileIds: state.delDialog.targetFileIds
		})
		if (resData.code === 200) {
			uni.showToast({
				title: '删除成功!',
				icon: 'none'
			});
			GetTaskTargetFileList();
		}
	}
	//提交
	const submitTaskTarget = () => {
		updateTaskTarget(state.targetId).then(res => {
			if (res.code === 200) {
				uni.showToast({
					title: '提交成功!',
					icon: 'none'
				});
				GetTaskTargetFileList();
			}
		})
	}
	//返回
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style scoped lang="scss">
	.page_content_height{
		display: flex;
		flex-direction: column;
		width: 100%;
		// height: calc(100% - 326rpx);
		flex:1;
		overflow: auto;
	}
	.page_content {
		&.padding_btm {
			padding-bottom: 24rpx;

			.task_title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-top: 24rpx;
			}

			.task_class_collect {
				display: inline-flex;
				align-items: center;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 16rpx;
				gap: 16rpx;
				.class_item {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.task_time {
				display: flex;
				align-items: flex-start;
				width: 100%;
				margin-top: 16rpx;

				.time_day {
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					flex: 1;

					.time_item {
						font-weight: 400;
						font-size: 24rpx;
						line-height: 48rpx;
						color: #999999;

						&:nth-child(2) {
							margin: 0 8rpx;
						}

						&:nth-child(4) {
							color: #2E64FA;
							margin-left: 16rpx;
						}
					}
				}

				.task_status {
					display: inline-flex;
					align-items: center;
					height: 48rpx;
					padding: 0 12rpx;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 24rpx;

					&.status_pending {
						background: rgba(46, 100, 250, 0.1);
						color: #2E64FA;
					}
					
					&.status_published {
						background: rgba(82, 196, 26, 0.1);
						color: #2BC644;
					}
					
					&.status_closed {
						background: #6666661a;
						color: #666666;
					}
				}
			}

			.task_desc {
				margin-top: 24rpx;
				display: flex;
				width: 100%;
				padding-top: 24rpx;
				border-top: 2rpx solid #F3F3F3;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 44rpx;
				box-sizing: border-box;
				position: relative;

				&.over {
					max-height: 168rpx;
					overflow: hidden;
					transition: all 0.25s;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}

			.task_desc_all {
				display: flex;
				width: 100%;
				padding-top: 24rpx;
				border-top: 2rpx solid #F3F3F3;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 44rpx;
				box-sizing: border-box;
				position: absolute;
				left: -9999px;
				top: 0;
				visibility: hidden; // 不可见但占据空间（不影响布局，因为absolute）
				pointer-events: none;
			}

			.expand_btn {
				width: 100%;
				height: 40rpx;
				background-color: #FFFFFF;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.expand_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #2E64FA;
					margin-right: 8rpx;
				}

				.expand_icon {
					font-size: 32rpx !important;
					color: #2E64FA !important;
				}
			}
		}
	}

	.row_gap {
		background-color: #F8F9FD;
		width: 100%;
		height: 24rpx;
	}

	.target_status {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
		.target_tag{
			flex: 1;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			.info_text{
				flex-shrink: 0;
				margin-right: 12rpx;
			}
		}
		.status_tag{
			font-size: 24rpx;
			text-align: center;
			padding: 8rpx 12rpx;
			font-weight: 400;
			border-radius: 8rpx;
			flex-shrink: 0;
			&.notSubmitList {
				background: rgba(46,100,250,0.1);
				color: #2E64FA;
			}
			&.notReviewList {
				background: rgba(251,159,52,0.1);
				color: #FB9F34;
			}
			&.reviewReasonList {
				background: rgba(245,108,108,0.1);
				color: #F56C6C;
			}
			&.reviewList {
				background: rgba(43,198,68,0.1);
				color: #2BC644;
			}
		}
	}
	.upload_box{
		margin-top: 24rpx;
		width: 100%;
		background-color: #FAFBFF;
		border-radius: 20rpx;
		border: 2rpx dashed #CCCED4;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 22rpx 0 22rpx 40rpx;
		.upload_icon{
			width: 64rpx;
			height: 64rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}
		.upload_text{
			flex:1;
			display: flex;
			flex-direction: column;
			.upload_title{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
			.upload_desc{
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #CCCED4;
			}
		}
	}
	.list_item {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 2rpx solid #EBEEF5;
		box-sizing: border-box;
		margin-top: 24rpx;
		gap:20rpx;
		.file_icon{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
		}
		.file_info{
			flex:1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.file_name{
				width: 100%;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.file_size{
				display: flex;
				width: 100%;
				gap: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 8rpx;
			}
		}
		.file_btn{
			flex-shrink: 0;
			display: flex;
			gap:24rpx;
			font-weight: 400;
			font-size: 28rpx;
			.del{
				color: #F56C6C;
				&.disabled{
					color: #C0C4CC;
				}
			}
			.download{
				color: #2E64FA;
			}
		}
	}
	.page_foot{
		position: fixed;
		display: flex;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 24rpx;
		background-color: #FFFFFF;
		gap: 32rpx;
		.del{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 240rpx;
			height: 90rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			border: 2rpx solid #F56C6C;
			font-weight: 400;
			font-size: 28rpx;
			color: #F56C6C;
			&.disabled{
				color: #C0C4CC;
				border: 2rpx solid #C0C4CC;
			}
		}
		.submit {
			flex:1;
			height: 90rpx;
			background-color: #2E64FA;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			&.disabled{
				background-color: #C0C4CC;
			}
		}
	}
</style>