OnlineEducation-back-front/src/views/taskProgress/index.vue

<template>
	<div class="resource-page">
		<!-- 筛选条件区域 -->
		<a-card title="筛选条件" :bordered="false">
			<!-- 院系选择 -->
			<div class="filter-group">
				<div class="filter-groups">
					<span class="filter-label">所选院系:</span>
					<a-radio-group
						v-model:value="selectedDepartment"
						button-style="solid"
						:class="{ expanded: isDepartmentExpanded }"
					>
						<a-radio-button class="border-r" value="全部">全部</a-radio-button>
						<a-radio-button
							class="border-r"
							v-for="dept in departments"
							:key="dept"
							:value="dept"
							v-show="isDepartmentExpanded || dept === isDepartmentExpanded"
							>{{ dept }}</a-radio-button
						>
					</a-radio-group>
				</div>

				<a-link style="margin-left: 10px; width: 5%" @click="toggleDepartmentOptions">{{
					isDepartmentExpanded ? '收起' : '展开'
				}}</a-link>
			</div>

			<!-- 课程选择 -->
			<div class="filter-group" style="margin-top: 16px">
				<div class="filter-groups">
					<span class="filter-label">所选课程:</span>
					<a-radio-group v-model:value="selectedCourse" button-style="solid" :class="{ expanded: isCourseExpanded }">
						<a-radio-button class="border-r" value="全部">全部</a-radio-button>
						<a-radio-button
							class="border-r"
							v-for="course in courses"
							:key="course"
							:value="course"
							v-show="isCourseExpanded || course === selectedCourse"
							>{{ course }}</a-radio-button
						>
					</a-radio-group>
				</div>
				<a-link style="margin-left: 10px; width: 5%" @click="toggleCourseOptions">{{
					isCourseExpanded ? '收起' : '展开'
				}}</a-link>
			</div>

			<!-- 课程类型选择 -->
			<div class="filter-group" style="margin-top: 16px">
				<div class="filter-groups">
					<span class="filter-label">课程类型:</span>
					<a-radio-group
						v-model:value="selectedCourseType"
						button-style="solid"
						:class="{ expanded: isCourseTypeExpanded }"
					>
						<a-radio-button class="border-r" value="全部">全部</a-radio-button>
						<a-radio-button
							class="border-r"
							v-for="type in courseTypes"
							:key="type"
							:value="type"
							v-show="isCourseTypeExpanded || type === selectedCourseType"
							>{{ type }}</a-radio-button
						>
					</a-radio-group>
				</div>

				<a-link style="margin-left: 10px; width: 5%" @click="toggleCourseTypeOptions">{{
					isCourseTypeExpanded ? '收起' : '展开'
				}}</a-link>
			</div>

			<!-- 课件格式选择 -->
			<div class="filter-group" style="margin-top: 16px">
				<div class="filter-groups">
					<span class="filter-label">课件格式:</span>
					<a-radio-group
						v-model:value="selectedFileType"
						button-style="solid"
						:class="{ expanded: isFileTypeExpanded }"
					>
						<a-radio-button class="border-r" value="全部">全部</a-radio-button>
						<a-radio-button
							class="border-r"
							v-for="format in fileFormats"
							:key="format"
							:value="format"
							v-show="isFileTypeExpanded || format === selectedFileType"
							>{{ format }}</a-radio-button
						>
					</a-radio-group>
				</div>

				<a-link style="margin-left: 10px; width: 5%" @click="toggleFileTypeOptions">{{
					isFileTypeExpanded ? '收起' : '展开'
				}}</a-link>
			</div>

			<!-- 已选条件展示 -->
			<div style="margin-top: 20px">
				已选条件:
				<a-tag class="border-r" closable v-for="tag in selectedTags" :key="tag" @close="handleTagClose(tag)">
					{{ tag }}
				</a-tag>
				<a-link style="margin-left: 10px" @click="clearFilters">清除筛选</a-link>
			</div>
		</a-card>

		<!-- 资源列表区域 -->
		<a-row :gutter="16" style="margin-top: 20px">
			<a-col :span="18">
				<div style="display: flex; align-items: center; margin-bottom: 16px">
					<span>共计 {{ filteredResources.length }} 个资源</span>
					<a-button type="primary" style="margin-left: 16px">最新</a-button>
					<a-button style="margin-left: 8px">热门</a-button>
					<a-input-search placeholder="输入资源关键词" style="margin-left: auto; width: 300px" @search="onSearch" />
				</div>
				<a-row :gutter="16">
					<a-col :span="6" v-for="(resource, index) in filteredResources" :key="index">
						<a-card :title="resource.title" style="margin-bottom: 16px">
							<template #cover>
								<img alt="example" :src="resource.cover" style="height: 200px" />
							</template>
							<p>{{ resource.description }}</p>
							<p>来源学校: {{ resource.school }}</p>
							<p>姓名: {{ resource.author }}</p>
							<p>日期: {{ resource.date }}</p>
							<p>观看次数: {{ resource.views }}</p>
						</a-card>
					</a-col>
				</a-row>
			</a-col>
			<a-col :span="6">
				<a-card title="资源推荐" style="margin-bottom: 16px">
					<a-list item-layout="horizontal" :data-source="recommendedResources">
						<template #renderItem="{ item }">
							<a-list-item>
								<a-list-item-meta>
									<template #avatar>
										<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
									</template>
									<template #title>
										<a href="https://www.antgroup.com">{{ item.title }}</a>
									</template>
									<template #description>
										<span>发布日期: {{ item.date }}</span>
										<span style="margin-left: 20px">观看次数: {{ item.views }}</span>
									</template>
								</a-list-item-meta>
							</a-list-item>
						</template>
					</a-list>
				</a-card>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
	import { ref, computed, watch } from 'vue'

	// 模拟数据
	const resources = [
		{
			title: '学术交流英语',
			description: '学术交流英语描述',
			school: '来源学校',
			author: '姓名',
			date: '05-22 10:49',
			views: '10000',
			cover: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
		},
		{
			title: '学术交流英语',
			description: '学术交流英语描述',
			school: '来源学校',
			author: '姓名',
			date: '05-22 10:49',
			views: '10000',
			cover: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
		},
		{
			title: '学术交流英语',
			description: '学术交流英语描述',
			school: '来源学校',
			author: '姓名',
			date: '05-22 10:49',
			views: '10000',
			cover: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
		},
		{
			title: '学术交流英语',
			description: '学术交流英语描述',
			school: '来源学校',
			author: '姓名',
			date: '05-22 10:49',
			views: '10000',
			cover: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
		},
		{
			title: '学术交流英语',
			description: '学术交流英语描述',
			school: '来源学校',
			author: '姓名',
			date: '05-22 10:49',
			views: '10000',
			cover: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
		}
	]

	const recommendedResources = [
		{
			title: '资源名称',
			date: '05-22',
			views: '10000'
		},
		{
			title: '资源名称',
			date: '05-22',
			views: '10000'
		},
		{
			title: '资源名称',
			date: '05-22',
			views: '10000'
		},
		{
			title: '资源名称',
			date: '05-22',
			views: '10000'
		}
	]

	// 筛选条件
	const selectedDepartment = ref('全部')
	const selectedCourse = ref('全部')
	const selectedCourseType = ref('全部')
	const selectedFileType = ref('全部')
	const searchKeyword = ref('')

	const departments = ['航空理论系', '军事理论系', '政治工作系', '机务工程系', '航空机务系']
	const courses = [
		'初级飞行训练',
		'高级飞行训练',
		'实弹训练',
		'低空战术飞行',
		'跨区转场训练',
		'空气动力学',
		'航空气象学',
		'航空电子设备',
		'飞机结构与系统',
		'空军作战指挥',
		'战场态势感知',
		'模拟对抗训练',
		'军队政治工作',
		'军事理论',
		'战斗精神培育',
		'机型改装训练',
		'应急程序训练'
	]
	const courseTypes = ['热门资源', '名师资源', '必修', '选修']
	const fileFormats = ['ppt', 'word', 'excel', 'pdf', 'mp4', 'zip', 'rar']
	const selectedTags = ref([])
	watch(
		[selectedDepartment, selectedCourse, selectedCourseType, selectedFileType],
		(newValues) => {
			selectedTags.value = [
				...(newValues[0] !== '全部' ? [newValues[0]] : []),
				...(newValues[1] !== '全部' ? [newValues[1]] : []),
				...(newValues[2] !== '全部' ? [newValues[2]] : []),
				...(newValues[3] !== '全部' ? [newValues[3]] : [])
			]
		},
		{ immediate: true }
	)

	// 过滤资源
	const filteredResources = computed(() => {
		return resources.filter((resource) => {
			const deptMatch = selectedDepartment.value === '全部' || resource.department === selectedDepartment.value
			const courseMatch = selectedCourse.value === '全部' || resource.course === selectedCourse.value
			const typeMatch = selectedCourseType.value === '全部' || resource.type === selectedCourseType.value
			const formatMatch = selectedFileType.value === '全部' || resource.format === selectedFileType.value

			return deptMatch && courseMatch && typeMatch && formatMatch
		})
	})

	// 清除筛选条件
	const clearFilters = () => {
		selectedDepartment.value = '全部'
		selectedCourse.value = '全部'
		selectedCourseType.value = '全部'
		selectedFileType.value = '全部'
		selectedTags.value = []
	}

	// 处理标签关闭
	const handleTagClose = (tag) => {
		selectedTags.value = selectedTags.value.filter((t) => t !== tag)
		if (tag === selectedDepartment.value) selectedDepartment.value = '全部'
		else if (tag === selectedCourse.value) selectedCourse.value = '全部'
		else if (tag === selectedCourseType.value) selectedCourseType.value = '全部'
		else if (tag === selectedFileType.value) selectedFileType.value = '全部'
	}

	// 搜索功能
	const onSearch = (value) => {
		console.log('search:', value)
		// 这里可以添加搜索逻辑
	}

	// 展开/收起状态
	const isDepartmentExpanded = ref(false)
	const isCourseExpanded = ref(false)
	const isCourseTypeExpanded = ref(false)
	const isFileTypeExpanded = ref(false)

	const toggleDepartmentOptions = () => {
		isDepartmentExpanded.value = !isDepartmentExpanded.value
	}

	const toggleCourseOptions = () => {
		isCourseExpanded.value = !isCourseExpanded.value
	}

	const toggleCourseTypeOptions = () => {
		isCourseTypeExpanded.value = !isCourseTypeExpanded.value
	}

	const toggleFileTypeOptions = () => {
		isFileTypeExpanded.value = !isFileTypeExpanded.value
	}
</script>

<style scoped>
	.resource-page {
		padding: 20px;
	}

	.filter-group {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 10px;
		border-bottom: 1px solid #e8e8e8;
	}
	.filter-groups {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.filter-label {
		width: 6%;
		margin-right: 10px;
	}

	.expanded-options {
		display: flex;
		flex-wrap: wrap;
		margin-top: 8px;
	}

	.border-r {
		border-radius: 20px;
		margin-right: 10px;
		border: 0 !important;
	}

	:deep(.ant-radio-button-wrapper::before) {
		display: none !important;
	}

	.filter-group .ant-link {
		margin-left: 10px;
		font-size: 14px;
		color: #1890ff;
	}

	.filter-group .ant-link:hover {
		text-decoration: underline;
	}

	.filter-group .ant-radio-group {
		display: flex;
		flex-wrap: wrap;
		max-height: 40px; /* 根据需要调整 */
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	.filter-group .ant-radio-group.expanded {
		max-height: none;
	}
</style>