workApp/pages/materialCollection/taskOverview/taskDetail.vue

<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="96" title="任务详情" :onlyTitle="true" :showHeaderborder="true" @GoBack="GoBack"></nav-bar>
		<!-- 吸顶 -->
		<uv-sticky style="top:98rpx">
			<view class="search_tabs" v-if="state.isSticky">
				<!-- 搜索框 -->
				<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
					:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
					<template #left>
						<image src="@/static/image/overview/search.png" class="search_icon"></image>
					</template>
				</uni-easyinput>
				<view class="scroll_select">
					<uni-data-select v-for="(item,index) in state.selectData" :key="item.prop" v-model="state.selectProp[item.prop]" :clear="false" :placeholder="`请选择`" :localdata="item.list" @change="(val) => ChangeSelectData(val,index,item.list)"></uni-data-select>
				</view>
				<scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
					<view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList"
						:key="item.value" @click="SelectTabsValue(item.value)">
						{{item.label}}
					</view>
				</scroll-view>
			</view>
		</uv-sticky>
		<view class="scroll_view_box">
			<scroll-view
				class="scroll_view_y" 
				:scroll-top="state.scrollTop" 
				scroll-y="true" 
				:refresher-enabled="false"
				:enable-back-to-top="true" 
				:show-scrollbar="false" 
				:scroll-with-animation="true"
				refresher-default-style="none" 
				refresher-background="#F8F9FD" 
				:refresher-triggered="state.isRefreshing"
				@scrolltolower="OnLoadMore" 
				@refresherrefresh="OnRefresh" 
				@scroll="OnScroll">
				<view class="refresh_loading" v-if="state.isRefreshing"><uni-load-more status="loading" /></view>
				<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.taskStatus!== 2 && remainingDays(state?.details?.endTime) > 0">剩余{{remainingDays(state?.details?.endTime)}}天</text>
						</view>
						<view :class="['task_status', statusClassMap[state.taskStatus]]">
							{{taskStatusMap[state.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>
				<!-- 吸顶 -->
				<!-- <uv-sticky style="top:98rpx"> -->
				<view class="search_tabs">
					<!-- 搜索框 -->
					<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
						:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
						<template #left>
							<image src="@/static/image/overview/search.png" class="search_icon"></image>
						</template>
					</uni-easyinput>
					<view class="scroll_select">
						<uni-data-select v-for="(item,index) in state.selectData" :key="item.prop" v-model="state.selectProp[item.prop]" :clear="false" :placeholder="`请选择`" :localdata="item.list" @change="(val) => ChangeSelectData(val,index,item.list)"></uni-data-select>
					</view>
					<scroll-view class="scroll_tabs" scroll-x="true" scroll-left="0" :show-scrollbar="false">
						<view :class="['tab_item',{'selected':item.value==state.tabsSelected}]" v-for="item in state.tabList"
							:key="item.value" @click="SelectTabsValue(item.value)">
							{{item.label}}
						</view>
					</scroll-view>
				</view>	
				<!-- </uv-sticky> -->
				<view class="page_content page_content_data">
						<view class="total">共 {{state[`${state.tabsSelected}List`]?.length || 0}} 人</view>
						<view class="list_item" v-for="item in state.tabListData" :Key="item.id">
							<view class="item_name_file">
								<view class="name_file">
									<text class="name">{{item.targetName}}</text>
									<text class="file_num" v-if="state?.[`${state.tabsSelected}Header`]?.includes('fileNum')">文件数量：{{item?.fileNum || 0}}</text>
								</view>
								<view class="btn">查看</view>
							</view>
							<view class="item_info">
								<template v-for="prop in state?.[`${state.tabsSelected}Header`]">
									<text v-if="['targetName','fileNum','reviewBy','reviewTime'].indexOf(prop) == -1" class="info_text">{{item[prop]}}</text>
								</template>
							</view>
							<view class="item_info" v-if="state?.[`${state.tabsSelected}Header`]?.includes('reviewBy')">
								<text class="info_text">审核人：{{item.reviewBy}}</text>
								<text class="info_text">{{item.reviewTime}}</text>
							</view>
						</view>
						<view class="no_data" v-if="!state.isLoading && state.tabListData.length == 0">
							<image class="no_data_img" src="@/static/image/bg/no_data.png"></image>
							<text class="no_data_text">暂无数据</text>
						</view>
				</view>
				<uni-load-more v-if="state.tabListData.length > 0" :status="state.loadStatus" />
			</scroll-view>	
		</view>
	</view>
</template>

<script setup>
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import uniDataSelect from '@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import uvSticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue'; //吸顶
	import navBar from '@/components/navBar.vue';
	import { remainingDays } from '@/common/common.js';
	import {
		GetCollectionTask,
		getTaskTargetList,
		getTaskSelectCommon
	} from '@/reqApi/notification.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		nextTick,
		getCurrentInstance,
		onMounted
	} from 'vue';
	const state = reactive({
		taskId: '', //任务id
		taskStatus:'',//任务状态 0-未开始 1-进行中 2-结束
		searchWord: '', //搜索关键词
		searchInputStyles: { //搜索框样式
			borderColor: '#DCDFE6',
			color: '#333333'
		},
		searchInputPlaceholderStyle: 'color: #C0C4CC;fontSize: 28rpx', //搜索框样式
		tabsSelected: '', //默认选中tab值
		tabList: [], //tab列表
		reviewTabList: [{
			label: '待审核',
			value: 'notReview'
		}, {
			label: '已审核',
			value: 'review'
		}, {
			label: '已驳回',
			value: 'reviewReason'
		}, {
			label: '待提交',
			value: 'notSubmit'
		}], //需审核
		noReviewTabList: [{
			label: '待提交',
			value: 'notSubmit'
		}, {
			label: '已提交',
			value: 'review'
		}], //无需审核
		showExpandBtn: false, //是否显示展开按钮
		isExpand: false, //是否展开
		pageSize: 50,
		pageNum: 1,
		scrollTop: 0,
		oldScrollTop: 0,
		isRefreshing: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
		isLoading: true, //加载中
		noMoreData: false, //没有更多数据了
		loadStatus: 'more', //loading状态
		details: {}, //详情信息
		selectData:[],//筛选项
		selectProp:{},//筛选项字段及值
		notReviewList: [],//待审核
		notSubmitList: [],//待提交
		reviewList: [],//已审核
		reviewReasonList: [],//已驳回
		notReviewPagess: 0,//待审核分页
		notSubmitPages: 0,//待提交分页
		reviewPagess: 0,//已审核分页
		reviewReasonPagess: 0,//已驳回分页
		notReviewHeader: [],//待审核表头
		notSubmitHeader: [],//待提交表头
		reviewHeader: [],//已审核表头
		reviewReasonHeader: [],//已驳回表头
		tabListData: [], //列表数据
		searchBoxTop:0,//搜索框距离顶部的高度
		isSticky:false,//是否吸顶
	});
	const statusClassMap = {
		0: 'status_pending',
		1: 'status_published',
		2: 'status_closed'
	};
	const taskStatusMap = {
		0: '待开始',
		1: '进行中',
		2: '已结束'
	};
	onLoad((option) => {
		state.taskId = option.taskId;
		state.taskStatus = option.taskStatus;
	})
	onMounted(() => {
		QueryCollectionTask();//获取指定的采集任务详情
		QueryTaskSelectCommon();//获取当前任务的筛选表头和数据表的表头
		OnLoadData(true,true); // 数据加载完成后触发 checkTextOverflow
	});
	//获取指定的采集任务详情
	const QueryCollectionTask = () => {
		GetCollectionTask(state.taskId).then(res=>{
			if(res.code == 200){
				state.details = res?.data || {};
				// 审核机制 0-无需审核 1-需要审核
				state.tabList = state.details.auditMechanism === 1 ? state.reviewTabList:state.noReviewTabList;
				state.tabsSelected = state.tabList?.[0]?.value || '';
			}
		})
	}
	//获取当前任务的筛选表头和数据表的表头
	const QueryTaskSelectCommon = () => {
		getTaskSelectCommon(state.taskId).then(res=>{
			if(res.code == 200){
				const list = res?.data?.commonSelect || [];
				const selectList = list.map(item=>({
					...item,
					text:item.label,
					value:item.value ?? ''
				}))
				if(list.length > 0){
					const prop = list?.[0]?.prop || '';
					const value = list?.[0]?.value ?? '';
					//筛选项字段及字段对应的值
					state.selectData.push({
						prop:prop,
						list:selectList
					})
					state.selectProp[prop] = value;
				}
				const notReviewTableHeader = res?.data?.notReviewTableHeader || [];
				const notSubmitTableHeader = res?.data?.notSubmitTableHeader || [];
				const tableHeader = res?.data?.tableHeader || [];
				const tableHeaderProp = tableHeader.filter(item=>item.display).map(item=>item.prop);
				state.notReviewHeader = notReviewTableHeader.filter(item=>item.display).map(item=>item.prop);//待审核表头
				state.notSubmitHeader = notSubmitTableHeader.filter(item=>item.display).map(item=>item.prop);//待提交表头
				state.reviewHeader = tableHeaderProp;//已审核表头
				state.reviewReasonHeader = tableHeaderProp;//已驳回表头
			}
		})
	}
	//切换下拉框数据
	const ChangeSelectData = (val,index,list) => {
		const childrenData = list.find(item=>item.value === val)?.children || [];
		if(childrenData.length > 0){
			let childrenList = childrenData.map(item=>({
				...item,
				text:item.label,
				value:item.value ?? ''
			}))
			const titleName = childrenData?.[0]?.titleName || '';
			const value = childrenData?.[0]?.value ?? '';
			console.log(childrenData?.[0]?.value,value,1232323,value!=='')
			const prop = childrenData?.[0]?.prop;
			if(value!==''){//添加全部
				childrenList.unshift({
					text:titleName,
					value:''
				})
			}else{
				const defaultVal = childrenList?.[0]?.value ?? '';
				state.selectProp[prop] = defaultVal;
			}
			state.selectData[index + 1] = {
				prop:prop,
				list:childrenList
			}
			
		}else{
			state.selectData.splice(index + 1);//删除
			Object.keys(state.selectProp).forEach((key,i)=>{
				if(i >= index + 1){
					delete state.selectProp[key]
				}
			})
		}
		OnLoadData(true);
	}
	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;
	}
	//切换tab
	const SelectTabsValue = (val) => {
		state.tabsSelected = val;
		OnLoadData(true);
	}
	//搜索
	const HandleSearchInput = (val) => {
		state.searchWord = val;
		OnLoadData(true);
	}
	const ToSafeArr = (val) => {
	  if (Array.isArray(val)) return val
	  return val ? [val] : []
	}
	/*
	 *详情
	 * initPage:初始分页 从第一开始
	 * initData:初始加载
	 */
	const OnLoadData = (initPage,initData = false) => {
		state.isLoading = true;
		state.loadStatus = 'loading';
		if (initPage) {
			state.pageNum = 1; //如果是下拉刷新、重新查询 默认加载第一页
			getTaskTargetList({
				taskId: state.taskId,
				queryStr: state.searchWord,
				...state.selectProp
			}).then(res => {
				if (res.code == 200) {
					const data = res?.data ?? {};
					// 列表全部数据
					state.notSubmitList = ToSafeArr(data.notSubmitList);//待提交
					state.notReviewList = ToSafeArr(data.notReviewList);//待审核
					const reviewData = ToSafeArr(data.reviewList);
					const submitData = ToSafeArr(data.submitList);
					state.reviewList = reviewData.length ? reviewData : submitData;//已审核
					state.reviewReasonList = ToSafeArr(data.reviewReasonList);//已驳回
					//处理分页-----
					const total = state[`${state.tabsSelected}List`]?.length || 0;
					state[`${state.tabsSelected}Pages`] = Math.ceil(total / state.pageSize);//总页数
					//默认加载
					state.tabListData = state?.[`${state.tabsSelected}List`]?.slice(0, state.pageSize) || [];
					//没有更多了
					state.noMoreData = state.pageNum == state[`${state.tabsSelected}Pages`];
					//分页+1
					state.pageNum++;
					state.isLoading = false;
					state.isRefreshing = false;//下拉刷新未被触发
					state.loadStatus = state.noMoreData?'no-more':'more';
					if(initData){
						checkTextOverflow();
					}
				}
			}).finally(() => {
				//返回到页面顶部
				if (initPage) {
					GoTop();
				}
			})
		}else{
			const start = (state.pageNum - 1) * state.pageSize;
			const end = start + state.pageSize;
			const list = state?.[`${state.tabsSelected}List`]?.slice(start, end) || [];
			state.tabListData = [...state.tabListData, ...list];
			state.noMoreData = state.pageNum == state[`${state.tabsSelected}Pages`];
			state.pageNum++;
			setTimeout(() => {
				state.isLoading = false;
				state.isRefreshing = false; //下拉刷新未被触发
				state.loadStatus = state.noMoreData?'no-more':'more';
			}, 0)
		}
	}
	// 自定义下拉刷新被触发	 下拉刷新
	const OnRefresh = () => {
		state.isRefreshing = true; //下拉刷新已经被触发
		OnLoadData(true);
	}
	//滚动到底部/右边 触发上拉刷新
	const OnLoadMore = () => {
		if (state.isLoading || state.noMoreData) return;
		OnLoadData(false);
	}
	//	滚动时触发
	const OnScroll = (e) => {
		const scrollTop = e.detail.scrollTop;
		if(scrollTop > state.searchBoxTop){
			state.isSticky = true;
		}else{
			state.isSticky = false;
		}
		state.oldScrollTop = scrollTop;
	}
	//返回到顶部
	const GoTop = () => {
		// 解决view层不同步的问题
		state.scrollTop = state.oldScrollTop;
		nextTick(() => {
			state.scrollTop = 0
		});
	}
	//返回
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style scoped lang="scss">
	.page_body{
		height: 100%;
		min-height: auto;
		.scroll_view_box{
			width: 100%;
			display: flex;
			flex-direction: column;
			height: calc(100% - 96rpx);
		}
		.scroll_view_y {
			height: 100%;
		
			.refresh_loading {
				padding: 10rpx 0;
			}
		}
	}
	.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;
	}
	:deep(.search_tabs){
		display: flex;
		width: 100%;
		flex-direction: column;
		background-color: #FFFFFF;
		.search_box {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		
			.is-input-border {
				border-radius: 8rpx;
				border: 2rpx solid #DCDFE6;
				border-color: #DCDFE6 !important;
			}
		
			.search_icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 24rpx;
			}
		
			.uni-easyinput__content-input {
				padding-left: 8rpx !important;
				font-size: 28rpx;
				color: #333333;
				height: 72rpx;
			}
		}
	}
	.scroll_select{
		width: 100%;
		display: flex;
		padding: 0 24rpx 24rpx;
		box-sizing: border-box;
		gap: 32rpx;
		:deep(.uni-stat__select){
			flex: 1;
			max-width: calc((100% - 32rpx * 2) / 3);
			min-width: 212rpx;
			width: auto;
			.uni-select{
				height: 72rpx;
				border-radius: 8rpx;
				border: 2rpx solid #DCDFE6;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				.uni-select__input-box{
					height: 72rpx;
				}
				.uni-icons{
					color: #909399;
					font-size: 24rpx;
				}
			}
		}
	}
	.scroll_tabs {
		margin-top:0;
		background-color: #FFFFFF;
	}

	.total {
		width: 100%;
		display: flex;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
	}

	.list_item {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #F3F3F3;
		.item_name_file{
			display: flex;
			width: 100%;
			align-items: center;
			gap: 20rpx;
			.name_file{
				flex:1;
				gap: 20rpx;
				display: flex;
				align-items: center;
				.name{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.file_num{
					font-weight: 400;
					font-size: 24rpx;
					color: #2E64FA;
				}
			}
			.btn{
				width: 104rpx;
				height: 64rpx;
				border-radius: 8rpx;
				border: 2rpx solid #2E64FA;
				font-weight: 400;
				font-size: 28rpx;
				color: #2E64FA;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}
		}
		.item_info{
			margin-top: 16rpx;
			display: flex;
			gap: 16rpx;
			align-items: center;
			flex-wrap: wrap;
			.info_text{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				flex-shrink: 0;
			}
		}
	}
	.no_data{
		margin-top: 24rpx;
	}
</style>