OnlineEducation-back-front/src/views/resourceCenter/components/ComplexChoices.vue

<template>
	<div class="filter-bar">
		<!-- 所选院系 -->
		<div class="filter-group">
			<span class="filter-group-title">所选院系:</span>
			<!-- <a-radio-group v-model:value="selectedDept" >
				<a-radio-button v-for="dept in selectedDepts" :key="dept" :value="dept">{{ dept }}</a-radio-button>
			</a-radio-group> -->
			<div style="display: flex; flex-direction: column">
				<MyRadioButtonGroup ref="Dept" v-model="selectedDept" @change="handleSelectedDept">
					<MyRadioButtonOffOut
						v-for="(item, index) in selectedDepts"
						:key="index"
						:value="index"
						:label="item.name"
						:index="index"
					></MyRadioButtonOffOut>
				</MyRadioButtonGroup>
				<div style="height: 10px"></div>
				<MyRadioButtonGroup ref="Big" v-model="selectedDeptBig" @change="handleSelectedCourses">
					<MyRadioButton
						v-for="(item, index) in selectedDeptBigs"
						:key="index"
						:value="index"
						:label="item.name"
						:index="index"
					></MyRadioButton>
				</MyRadioButtonGroup>
				<div style="height: 10px"></div>
				<MyRadioButtonGroup ref="Smail" v-model="selectedDeptSmail" @change="handleSelectedCourses">
					<MyRadioButton
						v-for="(item, index) in selectedDeptSmails"
						:key="index"
						:value="index"
						:label="item.name"
						:index="index"
					></MyRadioButton>
				</MyRadioButtonGroup>
			</div>
		</div>
		<div style="height: 10px"></div>
		<div class="line"></div>
		<div style="height: 10px"></div>
		<!-- 所属课程 -->
		<div class="filter-group">
			<span class="filter-group-title">所选课程:</span>
			<!-- <a-radio-group v-model:value="selectedCourse" @change="handleSelectedCourses">
				<a-radio-button v-for="dept in selectedCourses" :key="dept" :value="dept">{{ dept }}</a-radio-button>
				其他课程选项
			</a-radio-group> -->
			<MyRadioButtonGroup ref="Course" v-model="selectedCourse" @change="handleSelectedCourses">
				<MyRadioButton
					v-for="(item, index) in selectedCourses"
					:key="index"
					:value="item"
					:label="item"
					:index="index"
				></MyRadioButton>
			</MyRadioButtonGroup>
		</div>
		<div style="height: 10px"></div>
		<div class="line"></div>
		<div style="height: 10px"></div>
		<!-- 课程类型和课件格式（联动单选） -->
		<div class="filter-group">
			<span class="filter-group-title">资源类型:</span>
			<!-- <a-radio-group v-model:value="selectedType" @change="handleTypeChange">
				<a-radio-button v-for="dept in selectedTypes" :key="dept" :value="dept">{{ dept }}</a-radio-button>
			</a-radio-group> -->
			<div style="display: flex; flex-direction: column">
				<MyRadioButtonGroup ref="Type" v-model="selectedTypeBig" @change="handleTypeChange">
					<MyRadioButton
						v-for="(item, index) in selectedTypesBig"
						:key="index"
						:value="item"
						:label="item"
						:index="index"
					></MyRadioButton>
				</MyRadioButtonGroup>
				<MyRadioButtonGroup ref="Type" v-model="selectedType" @change="handleTypeChange">
					<MyRadioButton
						v-for="(item, index) in selectedTypes"
						:key="index"
						:value="item"
						:label="item"
						:index="index"
					></MyRadioButton>
				</MyRadioButtonGroup>
			</div>
		</div>
		<div style="height: 10px"></div>
		<div class="line"></div>
		<div style="height: 10px"></div>
		<div class="filter-group">
			<span class="filter-group-title">课件格式:</span>
			<!-- <a-radio-group v-model:value="selectedFormat" @change="handleFormatChange">
				<a-radio-button v-for="dept in selectedFormats" :key="dept" :value="dept">{{ dept }}</a-radio-button>
			</a-radio-group> -->

			<MyRadioButtonGroup ref="Format" v-model="selectedFormat" @change="handleFormatChange">
				<MyRadioButton
					v-for="(item, index) in selectedFormats"
					:key="item"
					:value="item"
					:label="item"
					:index="index"
				></MyRadioButton>
			</MyRadioButtonGroup>
		</div>
		<div style="height: 10px"></div>
		<div class="line"></div>
		<div style="height: 10px"></div>
		<!-- 已选条件 -->
		<div class="filter-group">
			<span class="filter-group-title">已选条件:</span>
			<div style="display: flex; align-items: center; margin-top: 7px">
				<a-tag
					v-for="tag in selectedTags"
					style="display: flex; justify-content: center; align-items: center"
					:key="tag"
					closable
					@close="handleTagClose(tag)"
				>
					{{ tag }}
				</a-tag>

				<span v-if="selectedTags.length > 0" class="clean" @click="handleClean">清除筛选</span>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import MyRadioButtonGroup from '../components/MyRadioButtonGroup.vue'
	import MyRadioButton from '../components/MyRadioButton.vue'
	import MyRadioButtonOffOut from '../components/MyRadioButtonOffOut.vue'
	import collegeApi from '@/api/college'
	import orgApi from '@/api/resourceType/resourceType'
	const selectedDept = ref('')
	const selectedDeptBig = ref('')
	const selectedDeptSmail = ref('')
	const selectedCourse = ref('')
	const selectedTypeBig = ref('')
	const selectedType = ref('')
	const selectedFormat = ref('')
	const Dept = ref(null)
	const Big = ref(null)
	const Smail = ref(null)
	const Course = ref(null)
	const Type = ref(null)
	const Format = ref(null)

	const selectedTags = ref([])
	const selectedTagKeys = ref([])

	const selectedDepts = ref(['不限', '学校本级', '一旅', '二旅', '三旅', '四旅', '五旅', '维修厂'])
	const selectedDeptBigs = ref([
		'参谋部',
		'政治工作部',
		'保障部',
		'理论训练系',
		'轰运飞行人员改装系',
		'职业教育中心',
		'教学考评中心',
		'教研保障中心',
		'服务保障中心',
		'教学评价办公室'
	])

	const selectedDeptBigsList= ref([

	])

	const selectedDeptSmailsList= ref([

	])

	const selectedDeptSmails = ref([
		'三级架构a',
		'三级架构b',
		'三级架构c',
		'三级架构d',
		'三级架构e',
		'三级架构f',
		'三级架构g',
		'三级架构h'
	])

	const selectedCourses = ref([
		'全部',
		'初级飞行训练',
		'高级飞行训练',
		'实弹训练',
		'低空战术飞行',
		'跨区转场训练',
		'空气动力学',
		'航空气象学',
		'航空电子设备',
		'飞机结构与系统',
		'空军作战指挥',
		'战场态势感知',
		'模拟对抗训练',
		'军队政治工作',
		'军事理论',
		'战斗精神培育',
		'机型改装训练',
		'应急程序训练'
	])
	const selectedTypesBig = ref(['全部大', '热门资源大', '名师资源大', '必修大大', '选修大'])
	const selectedTypes = ref(['全部', '热门资源', '名师资源', '必修', '选修'])
	const selectedFormats = ref(['全部', 'ppt', 'word', 'excel', 'pdf', 'mp4', 'zip', 'rar'])

	const handleSelectedDept = (e) => {
		selectedDeptBigs.value=selectedDeptBigsList.value[e]
		Big.value.setClean(selectedDeptBigs.value[0])
		Smail.value.setClean(selectedDeptSmails.value[0])

		updateSelectedTags()
	}
	const handleSelectedCourses = (e) => {
		selectedDeptSmails.value=selectedDeptSmailsList.value[e]
		updateSelectedTags()
	}
	// 处理课程类型选择变化
	const handleTypeChange = (e) => {
		// selectedFormat.value = undefined // 选择课程类型时，重置课件格式
		updateSelectedTags()
	}

	// 处理课件格式选择变化
	const handleFormatChange = (e) => {
		// selectedType.value = undefined // 选择课件格式时，重置课程类型
		updateSelectedTags()
	}

	// 更新已选条件
	const updateSelectedTags = () => {
		selectedTags.value = []
		selectedTagKeys.value = []
		// selectedTags.value = [
		// 	...(selectedDept.value !== '全部' ? { key: 'Dept', list: [selectedDept.value] } : []),
		// 	...(selectedCourse.value !== '全部' ? { key: 'Course', list: [selectedCourse.value] } : []),
		// 	...(selectedType.value !== '全部' ? { key: 'Type', list: [selectedType.value] } : []),
		// 	...(selectedFormat.value !== '全部' ? { key: 'Format', list: [selectedFormat.value] } : [])
		// ]
		if (selectedDept.value !== '不限') {
			selectedTags.value.push(...[selectedDept.value])
			selectedTagKeys.value.push('Dept')
		}
		if (selectedCourse.value !== '全部') {
			selectedTags.value.push(...[selectedCourse.value])
			selectedTagKeys.value.push('Course')
		}
		if (selectedDeptBig.value !== '全部') {
			selectedTags.value.push(...[selectedDeptBig.value])
			selectedTagKeys.value.push('Course1')
		}
		if (selectedDeptSmail.value !== '全部') {
			selectedTags.value.push(...[selectedDeptSmail.value])
			selectedTagKeys.value.push('Course2')
		}
		if (selectedType.value !== '全部') {
			selectedTags.value.push(...[selectedType.value])
			selectedTagKeys.value.push('Type')
		}
		if (selectedFormat.value !== '全部') {
			selectedTags.value.push(...[selectedFormat.value])
			selectedTagKeys.value.push('Format')
		}
		console.log('筛选条件', selectedTags.value, selectedTagKeys.value)
	}

	// 删除已选条件
	const handleTagClose = (tag) => {
		if (tag === selectedDept.value) {
			selectedDept.value = '不限'
		} else if (tag === selectedCourse.value) {
			selectedCourse.value = '全部'
		} else if (tag === selectedType.value) {
			selectedType.value = '全部'
		} else if (tag === selectedFormat.value) {
			selectedFormat.value = '全部'
		}
		updateSelectedTags()
	}
	const handleClean = () => {

		selectedTags.value = []
		selectedDept.value = '不限'
		selectedCourse.value = '全部'
		selectedType.value = '全部'
		selectedFormat.value = '全部'
		selectedDeptBigs.value=[]
		Dept.value.setClean('不限')
		Big.value.setClean(selectedDeptBigs.value[0])
		Smail.value.setClean(selectedDeptSmails.value[0])
		Course.value.setClean('全部')
		Type.value.setClean('全部')
		Format.value.setClean('全部')

		collegeApi.tree().then((data) => {
			selectedDepts.value=data;
			selectedDepts.value.forEach((item)=>{
				selectedDeptBigsList.value.push(item.children);
				item.children.forEach((item)=>{
					selectedDeptSmailsList.value.push(item.children);
				})
			})
			handleSelectedDept(0);
			handleSelectedCourses(0);
		})


		updateSelectedTags()
	}

	onMounted(() => {
		// 初始化已选条件
		handleClean()
	})
</script>

<style scoped>
	.filter-bar {
		border: 1px solid #00000011; /* 灰色细边框 */
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 20px;
	}

	.filter-group {
		display: flex;
	}
	.filter-group-title {
		color: rgba(0, 0, 0, 0.521);
		font-size: 12px;
		min-width: 80px;
		margin-top: 10px;
	}

	.line {
		width: 100%;
		height: 0.25px;
		background-color: #00000013;
	}
	.clean {
		color: rgb(133, 183, 224);
		cursor: pointer;
	}
</style>