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

<template>
	<div class="filter-bar">
		<!-- 所选院系 -->
		<div class="filter-group">
			<span class="filter-group-title">所选单位:</span>
			<a-spin :spinning="spinningSelectedDepts" tip>
				<div class="radio-group-container">
					<MyRadioButtonGroup ref="Dept" v-show="selectedDepts.length > 0" v-model="selectedDept" @change="handleSelectedDept">
						<MyRadioButtonOffOut v-for="(item, index) in selectedDepts" :key="index" :value="index" :label="item.name" :index="index"></MyRadioButtonOffOut>
					</MyRadioButtonGroup>
					<div class="radio-group-spacing"></div>
					<MyRadioButtonGroup ref="Big" v-show="selectedDeptBigs.length > 0" v-model="selectedDeptBig" @change="handleSelectedCourses">
						<MyRadioButton v-for="(item, index) in selectedDeptBigs" :key="index" :value="index" :label="item.name" :index="index"></MyRadioButton>
					</MyRadioButtonGroup>
					<div class="radio-group-spacing"></div>
					<MyRadioButtonGroup ref="Smail" v-show="selectedDeptSmails.length > 0" v-model="selectedDeptSmail" @change="handleSelectedSmails">
						<MyRadioButton v-for="(item, index) in selectedDeptSmails" :key="index" :value="index" :label="item.name" :index="index"></MyRadioButton>
					</MyRadioButtonGroup>
				</div>
			</a-spin>
		</div>
		<div class="spacing-line"></div>

		<!-- 课程类型和课件格式（联动单选） -->
		<div class="filter-group">
			<span class="filter-group-title">资源类型:</span>
			<a-spin :spinning="spinningSelectedTypesBig" tip>
				<div class="radio-group-container">
					<MyRadioButtonGroup ref="TypeBig" v-show="selectedTypesBig.length > 0" v-model="selectedTypeBig" @change="handleTypeChangeBig">
						<MyRadioButton v-for="(item, index) in selectedTypesBig" :key="index" :value="index" :label="item.name" :index="index"></MyRadioButton>
					</MyRadioButtonGroup>
					<MyRadioButtonGroup ref="Type" v-show="selectedTypes.length > 0" v-model="selectedType" @change="handleTypeChange">
						<MyRadioButton v-for="(item, index) in selectedTypes" :key="index" :value="index" :label="item.name" :index="index"></MyRadioButton>
					</MyRadioButtonGroup>
					<MyRadioButtonGroup ref="TypeSmail" v-show="selectedTypesSmail.length > 0" v-model="selectedTypeSmail" @change="handleTypeChangeSmail">
						<MyRadioButton v-for="(item, index) in selectedTypesSmail" :key="index" :value="index" :label="item.name" :index="index"></MyRadioButton>
					</MyRadioButtonGroup>
				</div>
			</a-spin>
		</div>
		<div class="spacing-line"></div>

		<div class="filter-group">
			<span class="filter-group-title">课件格式:</span>
			<a-spin :spinning="spinningSelectedFormats" tip>
				<MyRadioButtonGroup ref="Format" v-model="selectedFormat" @change="handleFormatChange">
					<MyRadioButton v-for="(item, index) in selectedFormats" :key="item.id || index" :value="index" :label="item.fileExtendName" :index="index"></MyRadioButton>
				</MyRadioButtonGroup>
			</a-spin>
		</div>
		<div class="spacing-line"></div>

		<!-- 已选条件 -->
		<div class="filter-group">
			<span class="filter-group-title">已选条件:</span>
			<div class="selected-tags-container">
				<a-tag v-for="(tag, index) in selectedTagKeys" :key="index" :bordered="false" closable @close="handleTagClose(tag, index)">{{ tag.name }}</a-tag>
				<span v-if="selectedTagKeys.length > 0" class="clean" @click="handleTagCloseAll">清除筛选</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } 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 EventBus from '@/utils/EventBus'
import { getQueryTreeAll, getAllListFileFormat } from '@/api/portal'

// 部门相关引用
const selectedDept = ref('')
const selectedDeptBig = ref('')
const selectedDeptSmail = ref('')
const Dept = ref(null)
const Big = ref(null)
const Smail = ref(null)

// 类型相关引用
const selectedTypeBig = ref('')
const selectedType = ref('')
const selectedTypeSmail = ref('')
const TypeBig = ref(null)
const Type = ref(null)
const TypeSmail = ref(null)

// 格式相关引用
const selectedFormat = ref('')
const Format = ref(null)

// 已选标签
const selectedTagKeys = ref([])

// 部门数据
const selectedDepts = ref([])
const spinningSelectedDepts = ref(false)
const selectedDeptBigs = ref([])
const selectedDeptBigsList = ref([])
const selectedDeptSmailsList = ref([])
const selectedDeptSmails = ref([])

// 课程数据（已注释）
const selectedCourses = ref([
	'全部',
	'初级飞行训练',
	'高级飞行训练',
	'实弹训练',
	'低空战术飞行',
	'跨区转场训练',
	'空气动力学',
	'航空气象学',
	'航空电子设备',
	'飞机结构与系统',
	'空军作战指挥',
	'战场态势感知',
	'模拟对抗训练',
	'军队政治工作',
	'军事理论',
	'战斗精神培育',
	'机型改装训练',
	'应急程序训练'
])

// 类型数据
const selectedTypesBig = ref([])
const spinningSelectedTypesBig = ref(false)
const selectedTypes = ref([])
const selectedTypesSmail = ref([])
const selectedTypesBigList = ref([])
const selectedTypesList = ref([])
const selectedTypesLists = ref(new Map()) // 使用Map替代对象，提高性能

// 格式数据
const selectedFormats = ref([])
const spinningSelectedFormats = ref(false)

/**
 * 处理部门选择变化
 */
const handleSelectedDept = (e) => {
	// 重置下级选项
	selectedDeptBig.value = ''
	selectedDeptSmail.value = ''

	if (e === 0) {
		selectedDeptBigs.value = []
	} else {
		selectedDeptBigs.value = selectedDeptBigsList.value[e] || []
	}

	selectedDeptSmails.value = []

	if (selectedDeptBigs.value.length > 0 && Big.value) {
		Big.value.setClean(-1)
	}

	selectedDeptBig.value = -1
	selectedDeptSmail.value = -1

	updateSelectedTags()
}

/**
 * 处理二级部门选择变化
 */
const handleSelectedCourses = (e) => {
	if (e === 0) {
		selectedDeptSmails.value = []
	} else {
		selectedDeptSmails.value = selectedDeptSmailsList.value[e - 1] || []
	}

	if (selectedDeptSmails.value.length > 0 && Smail.value) {
		Smail.value.setClean(-1)
	}

	selectedDeptSmail.value = -1
	updateSelectedTags()
}

/**
 * 处理三级部门选择变化
 */
const handleSelectedSmails = (e) => {
	updateSelectedTags()
}

/**
 * 处理一级资源类型选择变化
 */
const handleTypeChangeBig = (e) => {
	selectedTypesSmail.value = []

	if (e === 0) {
		selectedTypes.value = []
	} else {
		selectedTypes.value = selectedTypesBigList.value[e] || []
	}

	if (selectedTypes.value.length > 0 && Type.value) {
		Type.value.setClean(-1)
	}

	if (selectedTypesSmail.value.length > 0 && TypeSmail.value) {
		TypeSmail.value.setClean(-1)
	}

	selectedType.value = -1
	selectedTypeSmail.value = -1
	updateSelectedTags()
}

/**
 * 处理二级资源类型选择变化
 */
const handleTypeChange = (e) => {
	if (selectedTypes.value.length === 0 || e < 0 || e >= selectedTypes.value.length) {
		selectedTypesSmail.value = []
		updateSelectedTags()
		return
	}

	const item = selectedTypes.value[e]
	if (e === 0) {
		selectedTypesSmail.value = []
	} else {
		selectedTypesSmail.value = selectedTypesLists.value.get(item.id) || []
	}

	updateSelectedTags()
}

/**
 * 处理三级资源类型选择变化
 */
const handleTypeChangeSmail = (e) => {
	updateSelectedTags()
}

/**
 * 处理文件格式选择变化
 */
const handleFormatChange = (e) => {
	updateSelectedTags()
}

/**
 * 更新已选条件标签
 */
const updateSelectedTags = () => {
	selectedTagKeys.value = []
	const queryData = {}

	// 部门筛选条件
	if (selectedDept.value > 0 && selectedDepts.value.length > selectedDept.value) {
		const dept = selectedDepts.value[selectedDept.value]
		if (dept) {
			selectedTagKeys.value.push({
				listType: 0,
				key: 'collegeId',
				index: selectedDept.value,
				name: dept.name,
				id: dept.id
			})
			queryData['collegeId'] = dept.id
		}
	}

	if (selectedDeptBig.value > 0 && selectedDeptBigs.value.length > selectedDeptBig.value) {
		const deptBig = selectedDeptBigs.value[selectedDeptBig.value]
		if (deptBig) {
			selectedTagKeys.value.push({
				listType: 1,
				key: 'collegeTwoId',
				index: selectedDeptBig.value,
				name: deptBig.name,
				id: deptBig.id
			})
			queryData['collegeTwoId'] = deptBig.id
		}
	}

	if (selectedDeptSmail.value > 0 && selectedDeptSmails.value.length > selectedDeptSmail.value) {
		const deptSmail = selectedDeptSmails.value[selectedDeptSmail.value]
		if (deptSmail) {
			selectedTagKeys.value.push({
				listType: 2,
				key: 'collegeThreeId',
				index: selectedDeptSmail.value - 1,
				name: deptSmail.name,
				id: deptSmail.id
			})
			queryData['collegeThreeId'] = deptSmail.id
		}
	}

	// 资源类型筛选条件
	if (selectedTypeBig.value > 0 && selectedTypesBig.value.length > selectedTypeBig.value) {
		const typeBig = selectedTypesBig.value[selectedTypeBig.value]
		if (typeBig) {
			selectedTagKeys.value.push({
				listType: 3,
				key: 'resourceType',
				index: selectedTypeBig.value,
				name: typeBig.name,
				id: typeBig.id
			})
			queryData['resourceType'] = typeBig.id
		}
	}

	if (selectedType.value > 0 && selectedTypes.value.length > selectedType.value) {
		const type = selectedTypes.value[selectedType.value]
		if (type) {
			selectedTagKeys.value.push({
				listType: 4,
				key: 'resourceTwoType',
				index: selectedType.value,
				name: type.name,
				id: type.id
			})
			queryData['resourceTwoType'] = type.id
		}
	}

	if (selectedTypeSmail.value > 0 && selectedTypesSmail.value.length > selectedTypeSmail.value) {
		const typeSmail = selectedTypesSmail.value[selectedTypeSmail.value]
		if (typeSmail) {
			selectedTagKeys.value.push({
				listType: 6,
				key: 'resourceThreeType',
				index: selectedTypeSmail.value,
				name: typeSmail.name,
				id: typeSmail.id
			})
			queryData['resourceThreeType'] = typeSmail.id
		}
	}

	// 文件格式筛选条件
	if (selectedFormat.value > 0 && selectedFormats.value.length > selectedFormat.value) {
		const format = selectedFormats.value[selectedFormat.value]
		if (format) {
			selectedTagKeys.value.push({
				listType: 5,
				key: 'suffix',
				index: selectedFormat.value,
				name: format.fileExtendName,
				id: format.id
			})
			queryData['suffix'] = format.fileExtendName
		}
	}

	EventBus.emit('upLoadList', queryData)
}

/**
 * 删除已选条件标签
 */
const handleTagClose = (tag, index) => {
	switch (tag.key) {
		case 'suffix':
			if (Format.value) Format.value.setClean(-1)
			selectedFormat.value = -1
			break
		case 'resourceTwoType':
			if (Type.value) Type.value.setClean(-1)
			selectedType.value = -1
			break
		case 'resourceThreeType':
			if (TypeSmail.value) TypeSmail.value.setClean(-1)
			selectedTypeSmail.value = -1
			break
		case 'resourceType':
			if (Type.value) Type.value.setClean(-1)
			selectedType.value = -1
			if (TypeBig.value) TypeBig.value.setClean(-1)
			selectedTypeBig.value = -1
			break
		case 'collegeThreeId':
			if (Smail.value) Smail.value.setClean(-1)
			selectedDeptSmail.value = -1
			break
		case 'collegeTwoId':
			if (Smail.value) Smail.value.setClean(-1)
			selectedDeptSmail.value = -1
			if (Big.value) Big.value.setClean(-1)
			selectedDeptBig.value = -1
			break
		case 'collegeId':
			if (Smail.value) Smail.value.setClean(-1)
			selectedDeptSmail.value = -1
			if (Big.value) Big.value.setClean(-1)
			selectedDeptBig.value = -1
			if (Dept.value) Dept.value.setClean(-1)
			selectedDept.value = -1
			if (TypeSmail.value) TypeSmail.value.setClean(-1)
			selectedTypeSmail.value = -1
			break
	}

	updateSelectedTags()
}

/**
 * 清除所有筛选条件
 */
const handleTagCloseAll = () => {
	// 重置所有选择器
	if (Format.value) Format.value.setClean(-1)
	selectedFormat.value = -1

	if (Type.value) Type.value.setClean(-1)
	selectedType.value = -1

	if (TypeBig.value) TypeBig.value.setClean(-1)
	selectedTypeBig.value = -1

	if (TypeSmail.value) TypeSmail.value.setClean(-1)
	selectedTypeSmail.value = -1

	if (Smail.value) Smail.value.setClean(-1)
	selectedDeptSmail.value = -1

	if (Big.value) Big.value.setClean(-1)
	selectedDeptBig.value = -1

	if (Dept.value) Dept.value.setClean(-1)
	selectedDept.value = -1

	updateSelectedTags()
}

/**
 * 初始化数据
 */
const handleClean = () => {
	// 重置选择状态
	selectedDept.value = -1
	selectedDeptBig.value = -1
	selectedDeptSmail.value = -1
	selectedTypeBig.value = -1
	selectedType.value = -1
	selectedTypeSmail.value = -1
	selectedFormat.value = -1

	// 重置数据数组
	selectedDeptBigs.value = []
	selectedDeptSmails.value = []
	selectedTypes.value = []
	selectedTypesSmail.value = []
	selectedTypesBigList.value = []
	selectedTypesList.value = []
	selectedTypesLists.value = new Map()
	selectedDeptBigsList.value = []
	selectedDeptSmailsList.value = []

	// 加载部门数据
	spinningSelectedDepts.value = true
	collegeApi
		.treeAll()
		.then((data) => {
			selectedDepts.value = data.data || []

			// 构建部门层级关系
			selectedDepts.value.forEach((item) => {
				if (item.children) {
					selectedDeptBigsList.value.push(item.children)

					item.children.forEach((child) => {
						if (child.children && child.children.length>0) {
							selectedDeptSmailsList.value.push(child.children)
						}
					})
				} else {
					selectedDeptBigsList.value.push([])
				}
			})

			spinningSelectedDepts.value = false
		})
		.catch(() => {
			spinningSelectedDepts.value = false
		})

	// 加载资源类型数据
	spinningSelectedTypesBig.value = true
	getQueryTreeAll()
		.then((data) => {
			selectedTypesBig.value = data.data || []

			// 构建资源类型层级关系
			selectedTypesBig.value.forEach((item) => {
				if (item.children) {
					selectedTypesBigList.value.push(item.children)

					item.children.forEach((child) => {
						if (child.children) {
							// 使用Map存储父子关系，提高查找效率
							selectedTypesLists.value.set(child.id, child.children)
						}
					})
				} else {
					selectedTypesBigList.value.push([])
				}
			})

			spinningSelectedTypesBig.value = false
		})
		.catch(() => {
			spinningSelectedTypesBig.value = false
		})

	// 加载文件格式数据
	spinningSelectedFormats.value = true
	getAllListFileFormat()
		.then((data) => {
			selectedFormats.value = data.data || []
			spinningSelectedFormats.value = false
		})
		.catch(() => {
			spinningSelectedFormats.value = false
		})
}

onMounted(() => {
	handleClean()
})
</script>

<style scoped>
.filter-bar {
	background: white;
	padding: 30px 40px;
	border: 1px solid #00000011;
}

.filter-group {
	display: flex;
	align-items: flex-start;
}

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

.radio-group-container {
	display: flex;
	flex-direction: column;
}

.radio-group-spacing {
	height: 5px;
}

.spacing-line {
	width: 100%;
	height: 0.25px;
	background-color: #00000013;
	margin: 10px 0;
}

.selected-tags-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 7px;
}

.clean {
	color: rgb(133, 183, 224);
	cursor: pointer;
	padding: 2px 8px;
}
</style>