workApp/pages/materialCollection/taskOverview/index.vue

<template>
	<view class="page_notice" :style="{paddingTop: statusBarHeight + 362 + 'rpx', paddingBottom: safeAreaBottom + 160 + 'rpx' }">
		<notice-header 
			title="任务总览" 
			mode="taskOverview"
			:showSearch="true" 
			:showFilter="true" 
			:showTabs="true" 
			:showCreateBtn="true"
			:tabs="tabs"
			:activeTab="activeTab"
			:academicYearOptions="academicYearOptions"
			:academicYearIds="academicYearIds"
			:categoryData="categoryData"
			@tabChange="handleTabChange" 
			@academicYearChange="handleAcademicYearChange"
			@categoryChange="handleCategoryChange"
			@materialTypeChange="handleMaterialTypeChange"
			@searchChange="handleSearchChange"
			@create="handleCreate">
		</notice-header>

		<view class="notice_content">
			<view class="notice_list">
				<scroll-view scroll-y v-for="item in taskList" :key="item.id" class="notice_item">
					<!-- 任务内容 -->
					<view class="item_content">
						<view class="notice_title_row">
							<image class="notice_icon" src="/static/image/materialCollection/docIcon.png" mode="aspectFit"></image>
							<text class="notice_title">{{ item.taskName }}</text>
						</view>
						<view class="notice_meta">
							<view class="status_tag" :class="statusClassMap[item.taskStatus] || ''">
								<text>{{ taskStatusMap[item.taskStatus] }}</text>
							</view>
							<view class="need_shenhe" v-if="item.auditMechanism">
								<text>审</text>
							</view>
							<text class="meta_text textLength">{{ truncateText(item.departmentName, 5) }}</text>
							<text class="meta_text textLength">{{ truncateText(item.materialCategoryName, 5) }}</text>
							<text class="meta_text">{{ truncateText(item.createdBy, 5) }}</text>
						</view>
					</view>
					<!-- 任务底部 -->
					<view class="item_bottom">
						<view class="notice_stats">
							<text class="stats_text">开始时间: {{ item.startTime }}</text>
						</view>
						<view class="notice_actions">
							<view class="action_btn delete" :class="{ disable: !!item.submitNum }">
								<text>删除</text>
							</view>
							<view class="action_btn edit" >
								<text>编辑</text>
							</view>
							<view class="action_btn edit" :class="{ disableLock: item.taskStatus === 0 }">
								<text>查看</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<no-data v-if="taskList.length === 0" centered text="暂无任务" />
			</view>
		</view>

		<common-tabbar></common-tabbar>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import NoticeHeader from '@/components/notice-header.vue';
import CommonTabbar from '@/components/commonTabbar.vue';
import NoData from '@/components/no-data.vue';
import { useSafeArea } from '@/common/safeArea';
import notification from '@/reqApi/notification.js';
import { truncateText } from '@/common/common.js';

const { statusBarHeight, safeAreaBottom, initSafeArea } = useSafeArea();

const tabs = ['全部', '待开始', '进行中', '已结束'];
const activeTab = ref(-1);
const academicYearIndex = ref(0);
const academicYearOptions = ref(['请选择学年学期']);
const academicYearIds = ref(['']);
const academicYearCodes = ref(['']);
const currentSchoolYearId = ref('');
const currentSchoolYearCode = ref('');
const categoryIndex = ref(0);
const categoryId = ref('');
const materialTypeIndex = ref(0);
const materialTypeId = ref('');
const categoryData = ref([]);
const word = ref('');
const taskList = ref([]);

const statusMap = {
	0: '待开始',
	1: '进行中',
	2: '已结束'
};

const statusClassMap = {
	0: 'status_pending',
	1: 'status_published',
	2: 'status_closed'
};

const taskStatusMap = {
	0: '待开始',
	1: '进行中',
	2: '已结束'
};

const fetchTaskList = async () => {
	taskList.value = [];
	try {
		const params = {
			schoolYearCode: currentSchoolYearCode.value || null,
			schoolYearId: currentSchoolYearId.value || null,
			departmentId: categoryId.value || null,
			materialCategory: materialTypeId.value || null,
			taskName: word.value || '',
			taskStatus: activeTab.value === -1 ? null : activeTab.value,
			pageNum: 1,
			pageSize: 9999
		};
		const res = await notification.find_collection_task(params);
		if (res.data && res.data.records) {
			taskList.value = res.data.records
		} else {
			taskList.value = [];
		}
	} catch (error) {
		console.error('获取任务列表失败:', error);
		taskList.value = [];
	}
};

const fetchSchoolYearList = async () => {
	try {
		const res = await notification.getSchoolYearList();
		if (res.data && Array.isArray(res.data)) {
			const names = res.data.map(item => item.schoolYearName);
			const ids = res.data.map(item => item.id);
			const codes = res.data.map(item => item.schoolYearCode);
			academicYearOptions.value = [...names];
			academicYearIds.value = [...ids];
			academicYearCodes.value = [...codes];
			// 默认选中第一个学年学期
			if (res.data.length > 0) {
				academicYearIndex.value = 0;
				currentSchoolYearId.value = res.data[0].id;
				currentSchoolYearCode.value = res.data[0].schoolYearCode;
			}
		}
	} catch (error) {
		console.error('获取学年学期列表失败:', error);
	}
};

const fetchCategoryList = async () => {
	try {
		const res = await notification.getCategoryList();
		if (res.data && Array.isArray(res.data)) {
			categoryData.value = res.data;
		}
	} catch (error) {
		console.error('获取分类列表失败:', error);
	}
};

onMounted(async () => {
	initSafeArea();
	await fetchSchoolYearList();
	fetchCategoryList();
	fetchTaskList();
});

const handleTabChange = (status) => {
	activeTab.value = status;
	fetchTaskList();
};

const handleAcademicYearChange = (index, id) => {
	academicYearIndex.value = index;
	currentSchoolYearId.value = id || '';
	currentSchoolYearCode.value = academicYearCodes.value[index] || '';
	fetchTaskList();
};
// 分类选择
const handleCategoryChange = (index, id) => {
	categoryIndex.value = index;
	categoryId.value = id;
	// 清空类目选择
	materialTypeIndex.value = 0;
	materialTypeId.value = null;
	fetchTaskList();
};
// 类目选择
const handleMaterialTypeChange = (index, id) => {
	materialTypeIndex.value = index;
	materialTypeId.value = id;
	fetchTaskList();
};

const handleSearchChange = (keyword) => {
	word.value = keyword;
	fetchTaskList();
};

const handleCreate = () => {
	uni.navigateTo({
		url: '/pages/materialCollection/submitMaterial/index'
	});
};

const handleDetail = (id) => {
	uni.navigateTo({
		url: `/pages/materialCollection/submitMaterial/index?id=${id}`
	});
};
</script>

<style lang="scss">
.page_notice {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	box-sizing: border-box;
}

.notice_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-left: 0rpx;
	padding-right: 0rpx;
}

.notice_list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 24rpx;
	display: flex;
	flex-direction: column;
}

.notice_item {
	background-color: #F9FAFF;
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	border: 2rpx solid #E4E7ED;

	.item_content {
		padding: 24rpx;

		.notice_title_row {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			.notice_icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			.notice_title {
				flex: 1;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.notice_meta {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 16rpx;

			.status_tag {
				font-size: 24rpx;
				height: 48rpx;
				width: 96rpx;
				text-align: center;
				line-height: 48rpx;
				border-radius: 4rpx;
				font-weight: 400;
				border-radius: 8rpx;

				&.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;
				}
			}
			.need_shenhe {
				width: 48rpx;
				height: 48rpx;
				background: rgba(245,108,108,0.1);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #F56C6C;
				text-align: center;
				line-height: 48rpx;
			}
			.meta_text {
				font-size: 24rpx;
				color: #999999;
				line-height: 48rpx;
			}
			.textLength {
					max-width: 160rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
		}
	}

	.item_bottom {
		border-top: 2rpx solid #E4E7ED;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 16rpx;

		.notice_stats {
			display: flex;

			.stats_text {
				font-size: 24rpx;
				color: #999999;

				&:first-child {
					margin-right: 32rpx;
				}
			}
		}

		.notice_actions {
			display: flex;
			justify-content: flex-end;
			gap: 16rpx;

			.action_btn {
				font-size: 24rpx;
				padding: 12rpx 24rpx;
				border-radius: 8rpx;
				border: 2rpx solid transparent;

				&.delete {
					border-color: #F56C6C;
					color: #F56C6C;
					background-color: #FFFFFF;

					&.disabled {
						border-color: #C0C4CC;
						color: #C0C4CC;
						background-color: #FFFFFF;
					}
				}

				&.edit {
					border-color: #2E64FA;
					color: #2E64FA;
					background-color: #FFFFFF;

					&.disabled {
						border-color: #C0C4CC;
						color: #C0C4CC;
						background-color: #FFFFFF;
					}
				}

				&.disable {
					color: #C0C4CC !important;
					cursor: not-allowed;
					border-color: #C0C4CC !important;
				}
				&.disableLock{
					color: #C0C4CC !important;
					cursor: not-allowed;
					background-color: #F3F3F3 !important;
					border-color: #F3F3F3 !important;
				}
			}
			
		}
	}

	&:last-child {
		margin-bottom: 0;
	}
}
</style>