切换错乱问题处理

src/views/resourceCenter/components/ComplexChoices.vue

@@ -1,170 +1,60 @@
 <template>
-	<div class="filter-bar" style="background: white; padding-top: 30px;padding-left: 40px;padding-bottom: 30px;padding-right: 40px">
+	<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> -->
-			<a-spin :spinning="spinningSelectedDepts" tip="">
-				<div style="display: flex; flex-direction: column">
-					<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>
+			<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 style="height: 5px"></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>
+					<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 style="height: 5px"></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>
+					<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 style="height: 10px"></div>
-		<div class="line"></div>
-		<div style="height: 10px"></div>
-		<!-- 所属课程 -->
-		<!-- <div class="filter-group">
-			<span class="filter-group-title">所选课程:</span>
-			<MyRadioButtonGroup ref="Course" v-model="selectedCourse" @change="handleSelectedCourses1">
-				<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="spacing-line"></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> -->
-			<a-spin :spinning="spinningSelectedTypesBig" tip="">
-				<div style="display: flex; flex-direction: column">
-					<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>
+			<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 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 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 style="height: 10px"></div>
-		<div class="line"></div>
-		<div style="height: 10px"></div>
+		<div class="spacing-line"></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> -->
-			<a-spin :spinning="spinningSelectedFormats" tip="">
+			<a-spin :spinning="spinningSelectedFormats" tip>
 				<MyRadioButtonGroup ref="Format" v-model="selectedFormat" @change="handleFormatChange">
-					<MyRadioButton
-						v-for="(item, index) in selectedFormats"
-						:key="item"
-						:value="index"
-						:label="item.fileExtendName"
-						:index="index"
-					></MyRadioButton>
+					<MyRadioButton v-for="(item, index) in selectedFormats" :key="item.id || index" :value="index" :label="item.fileExtendName" :index="index"></MyRadioButton>
 				</MyRadioButtonGroup>
 			</a-spin>
 		</div>
-		<div style="height: 10px"></div>
-		<div class="line"></div>
-		<div style="height: 10px"></div>
+		<div class="spacing-line"></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, index) in selectedTagKeys"
-					style="display: flex; justify-content: center; align-items: center"
-					:key="index"
-					:bordered="false"
-					closable
-					@close="handleTagClose(tag, index)"
-				>
-					{{ tag.name }}
-				</a-tag>
-
+			<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>
@@ -172,530 +62,521 @@
 </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 EventBus from '@/utils/EventBus'
-	import {
-		addViewCount,
-		detail,
-		add,
-		cancel,
-		queryList,
-		resourcecentreDetail,
-		getShareLink,
-		getQueryTreeAll,
-		getAllListFileFormat
-	} from '@/api/portal'
-
-	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 selectedTypeSmail = ref('')
-	const selectedFormat = ref('')
-	const Dept = ref(null)
-	const Big = ref(null)
-	const Smail = ref(null)
-	const Course = ref(null)
-	const TypeBig = ref(null)
-	const Type = ref(null)
-	const TypeSmail = ref(null)
-	const Format = ref(null)
-
-	const selectedTags = ref([])
-	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 selectedFormats = ref([])
-	const spinningSelectedFormats = ref(false)
-
-	const selectedTypesBigList = ref([])
-	const selectedTypesList = ref([])
-	const selectedTypesLists = ref([])
-	const handleSelectedDept = (e) => {
-		if (e == 0) {
-			selectedDeptBigs.value = []
-		} else {
-			selectedDeptBigs.value = selectedDeptBigsList.value[e]
-		}
-		console.log('handleSelectedDept', e,selectedDeptBigsList.value)
-		selectedDeptSmails.value = []
-		if (selectedDeptBigs.value.length > 0) {
-			Big.value.setClean(-1)
-		}
-		selectedDeptBig.value = -1
-		selectedDeptSmail.value = -1
-		updateSelectedTags()
+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] || []
 	}
-	const handleSelectedCourses = (e) => {
-		if (e == 0) {
-			selectedDeptSmails.value = []
-		} else {
-			selectedDeptSmails.value = selectedDeptSmailsList.value[e - 1]
-		}
-		console.log('handleSelectedCourses', e, selectedDeptSmails.value)
-		if (selectedDeptSmails.value.length > 0) {
-			Smail.value.setClean(-1)
-		}
-		// selectedDeptSmails.value = selectedDeptSmailsList.value[e]
-		selectedDeptSmail.value = -1
-		updateSelectedTags()
+
+	selectedDeptSmails.value = []
+
+	if (selectedDeptBigs.value.length > 0 && Big.value) {
+		Big.value.setClean(-1)
 	}
-	const handleSelectedSmails = (e) => {
-		// if (e == 0) {
-		// 	selectedDeptSmails.value = []
-		// } else {
-		// 	selectedDeptSmails.value = selectedDeptSmailsList.value[e]
-		// }
-		// selectedDeptSmails.value = selectedDeptSmailsList.value[e]
-		updateSelectedTags()
+
+	selectedDeptBig.value = -1
+	selectedDeptSmail.value = -1
+
+	updateSelectedTags()
+}
+
+/**
+ * 处理二级部门选择变化
+ */
+const handleSelectedCourses = (e) => {
+	if (e === 0) {
+		selectedDeptSmails.value = []
+	} else {
+		selectedDeptSmails.value = selectedDeptSmailsList.value[e - 1] || []
 	}
-	// 处理课程类型选择变化
-	const handleTypeChangeBig = (e) => {
-		selectedTypesSmail.value = []
-		if (e == 0) {
-			selectedTypes.value = []
 
-		} else {
-			selectedTypes.value = selectedTypesBigList.value[e]
-		}
+	if (selectedDeptSmails.value.length > 0 && Smail.value) {
+		Smail.value.setClean(-1)
+	}
 
-		console.log('handleTypeChangeBig', e,selectedTypesBigList.value)
-		if (selectedTypes.value.length > 0) {
-			Type.value.setClean(-1)
-		}
-		if (selectedTypeSmail.value.length > 0) {
-			TypeSmail.value.setClean(-1)
-		}
-		selectedType.value = -1
-		selectedTypeSmail.value = -1
-		updateSelectedTags()
+	selectedDeptSmail.value = -1
+	updateSelectedTags()
+}
+
+/**
+ * 处理三级部门选择变化
+ */
+const handleSelectedSmails = (e) => {
+	updateSelectedTags()
+}
+
+/**
+ * 处理一级资源类型选择变化
+ */
+const handleTypeChangeBig = (e) => {
+	selectedTypesSmail.value = []
+
+	if (e === 0) {
+		selectedTypes.value = []
+	} else {
+		selectedTypes.value = selectedTypesBigList.value[e] || []
 	}
-	const handleTypeChange = (e) => {
-
-		let item  = selectedTypes.value[e]
-		console.log('handleTypeChange', ' e ', e, ' selectedTypes ',selectedTypes.value,selectedTypesLists.value,' item ',item , ' selectedTypesLists.value[item.id] ',selectedTypesLists.value[item.parentId])
-		if (e == 0) {
-			selectedTypesSmail.value = []
-		} else {
-			selectedTypesSmail.value = selectedTypesLists.value[item.parentId] ?selectedTypesLists.value[item.parentId] : []
-		}
-		console.log('handleTypeChange 应该显示',selectedTypesSmail.value)
-		// selectedFormat.value = undefined // 选择课程类型时，重置课件格式
-		// updateSelectedTags()
-		updateSelectedTags()
+
+	if (selectedTypes.value.length > 0 && Type.value) {
+		Type.value.setClean(-1)
 	}
-	const handleTypeChangeSmail = (e) => {
-		console.log('handleTypeChange', ' e ', e, selectedTypes.value)
-		// if (e == 0) {
-		// 	selectedTypesSmail.value = []
-		// } else {
-		// 	selectedTypesSmail.value = selectedTypesList.value[e - 1]
-		// }
-		// selectedFormat.value = undefined // 选择课程类型时，重置课件格式
-		// updateSelectedTags()
-		updateSelectedTags()
+
+	if (selectedTypesSmail.value.length > 0 && TypeSmail.value) {
+		TypeSmail.value.setClean(-1)
 	}
 
-	// 处理课件格式选择变化
-	const handleFormatChange = (e) => {
-		// selectedType.value = undefined // 选择课件格式时，重置课程类型
+	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 updateSelectedTags = () => {
-		selectedTags.value = []
-		selectedTagKeys.value = []
-		let queryData = {}
-		// 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] } : [])
-		// ]
-		console.log('筛选条件第一个', selectedDept.value, selectedDepts.value)
-		console.log('筛选条件第二个', selectedDeptBig.value, selectedDeptBigs.value)
-		console.log('筛选条件第三个', selectedDeptSmail.value, selectedDeptSmails.value)
-		if (
-			selectedDept.value !== undefined &&
-			selectedDept.value !== '' &&
-			selectedDept.value > 0 &&
-			selectedDepts.value.length > 0
-		) {
-			if (selectedDepts.value[selectedDept.value]) {
-				selectedTags.value.push(...[selectedDepts.value[selectedDept.value].fileExtendName])
-				selectedTagKeys.value.push({
-					listType: 0,
-					key: 'collegeId',
-					index: selectedDept.value,
-					name: selectedDepts.value[selectedDept.value].name,
-					id: selectedDepts.value[selectedDept.value].id
-				})
-				queryData['collegeId'] = selectedDepts.value[selectedDept.value].id
-			}
+	const item = selectedTypes.value[e]
+	if (e === 0) {
+		selectedTypesSmail.value = []
+	} else {
+		selectedTypesSmail.value = selectedTypesLists.value.get(item.parentId) || []
+	}
+
+	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 !== undefined &&
-			selectedDeptBig.value !== '' &&
-			selectedDeptBig.value > 0 &&
-			selectedDeptBigs.value.length > 0
-		) {
-			if (selectedDeptBigs.value[selectedDeptBig.value]) {
-				selectedTags.value.push(...[selectedDeptBigs.value[selectedDeptBig.value].name])
-				selectedTagKeys.value.push({
-					listType: 1,
-					key: 'collegeTwoId',
-					index: selectedDeptBig.value,
-					name: selectedDeptBigs.value[selectedDeptBig.value].name,
-					id: selectedDeptBigs.value[selectedDeptBig.value].id
-				})
-				queryData['collegeTwoId'] = selectedDeptBigs.value[selectedDeptBig.value].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
 		}
-		console.log('selectedDeptSmail', selectedDeptSmail.value, selectedDeptSmails.value)
-		if (
-			selectedDeptSmail.value !== undefined &&
-			selectedDeptSmail.value !== '' &&
-			selectedDeptSmail.value > 0 &&
-			selectedDeptSmails.value.length > 0
-		) {
-			if (selectedDeptSmails.value[selectedDeptSmail.value]) {
-				selectedTags.value.push(...[selectedDeptSmails.value[selectedDeptSmail.value].name])
-				selectedTagKeys.value.push({
-					listType: 2,
-					key: 'collegeThreeId',
-					index: selectedDeptSmail.value - 1,
-					name: selectedDeptSmails.value[selectedDeptSmail.value].name,
-					id: selectedDeptSmails.value[selectedDeptSmail.value].id
-				})
-				queryData['collegeThreeId'] = selectedDeptSmails.value[selectedDeptSmail.value].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 !== undefined &&
-			selectedTypeBig.value !== '' &&
-			selectedTypeBig.value > 0 &&
-			selectedTypesBig.value.length > 0
-		) {
-			if (selectedTypesBig.value[selectedTypeBig.value]) {
-				selectedTags.value.push(...[selectedTypesBig.value[selectedTypeBig.value].name])
-				selectedTagKeys.value.push({
-					listType: 3,
-					key: 'resourceType',
-					index: selectedTypeBig.value,
-					name: selectedTypesBig.value[selectedTypeBig.value].name,
-					id: selectedTypesBig.value[selectedTypeBig.value].id
-				})
-				queryData['resourceType'] = selectedTypesBig.value[selectedTypeBig.value].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 !== undefined &&
-			selectedType.value !== '' &&
-			selectedType.value > 0 &&
-			selectedTypes.value.length > 0
-		) {
-			if (selectedTypes.value[selectedType.value]) {
-				selectedTags.value.push(...[selectedTypes.value[selectedType.value].name])
-				selectedTagKeys.value.push({
-					listType: 4,
-					key: 'resourceTwoType',
-					index: selectedType.value,
-					name: selectedTypes.value[selectedType.value].name,
-					id: selectedTypes.value[selectedType.value].id
-				})
-				queryData['resourceTwoType'] = selectedTypes.value[selectedType.value].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 !== undefined &&
-			selectedTypeSmail.value !== '' &&
-			selectedTypeSmail.value > 0 &&
-			selectedTypesSmail.value.length > 0
-		) {
-			if (selectedTypesSmail.value[selectedTypeSmail.value]) {
-				selectedTags.value.push(...[selectedTypesSmail.value[selectedTypeSmail.value].name])
-				selectedTagKeys.value.push({
-					listType: 6,
-					key: 'resourceThreeType',
-					index: selectedTypeSmail.value,
-					name: selectedTypesSmail.value[selectedTypeSmail.value].name,
-					id: selectedTypesSmail.value[selectedTypeSmail.value].id
-				})
-				queryData['resourceThreeType'] = selectedTypesSmail.value[selectedTypeSmail.value].id
-			}
-			console.log('123123',selectedTagKeys.value)
+	}
+
+	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 !== undefined &&
-			selectedFormat.value !== '' &&
-			selectedFormat.value > 0 &&
-			selectedFormats.value.length > 0
-		) {
-			if (selectedFormats.value[selectedFormat.value]) {
-				selectedTags.value.push(...[selectedFormats.value[selectedFormat.value].fileExtendName])
-				selectedTagKeys.value.push({
-					listType: 5,
-					key: 'suffix',
-					index: selectedFormat.value,
-					name: selectedFormats.value[selectedFormat.value].fileExtendName,
-					id: selectedFormats.value[selectedFormat.value].id
-				})
-				queryData['suffix'] = selectedFormats.value[selectedFormat.value].fileExtendName
-			}
+	}
+
+	// 文件格式筛选条件
+	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
 		}
-		// if (selectedCourse.value !== '全部') {
-		// 	selectedTags.value.push(...[selectedCourse.value])
-		// 	selectedTagKeys.value.push('Course')
-		// }
-
-		// 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)
-
-		EventBus.emit('upLoadList', queryData)
 	}
 
-	// 删除已选条件
-	const handleTagClose = (tag, index) => {
-		// 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 = '全部'
-		// }
-		if (tag.key == 'suffix') {
-			Format.value.setClean(-1)
+	EventBus.emit('upLoadList', queryData)
+}
+
+/**
+ * 删除已选条件标签
+ */
+const handleTagClose = (tag, index) => {
+	switch (tag.key) {
+		case 'suffix':
+			if (Format.value) Format.value.setClean(-1)
 			selectedFormat.value = -1
-		}
-		if (tag.key == 'resourceTwoType') {
-			Type.value.setClean(-1)
+			break
+		case 'resourceTwoType':
+			if (Type.value) Type.value.setClean(-1)
 			selectedType.value = -1
-		}
-		if (tag.key == 'resourceThreeType') {
-
-			TypeSmail.value.setClean(-1)
+			break
+		case 'resourceThreeType':
+			if (TypeSmail.value) TypeSmail.value.setClean(-1)
 			selectedTypeSmail.value = -1
-		}
-		if (tag.key == 'resourceType') {
-			Type.value.setClean(-1)
+			break
+		case 'resourceType':
+			if (Type.value) Type.value.setClean(-1)
 			selectedType.value = -1
-			TypeBig.value.setClean(-1)
+			if (TypeBig.value) TypeBig.value.setClean(-1)
 			selectedTypeBig.value = -1
-		}
-		if (tag.key == 'collegeThreeId') {
-			Smail.value.setClean(-1)
+			break
+		case 'collegeThreeId':
+			if (Smail.value) Smail.value.setClean(-1)
 			selectedDeptSmail.value = -1
-		}
-		if (tag.key == 'collegeTwoId') {
-			Smail.value.setClean(-1)
+			break
+		case 'collegeTwoId':
+			if (Smail.value) Smail.value.setClean(-1)
 			selectedDeptSmail.value = -1
-			Big.value.setClean(-1)
+			if (Big.value) Big.value.setClean(-1)
 			selectedDeptBig.value = -1
-		}
-		if (tag.key == 'collegeId') {
-			Smail.value.setClean(-1)
+			break
+		case 'collegeId':
+			if (Smail.value) Smail.value.setClean(-1)
 			selectedDeptSmail.value = -1
-			Big.value.setClean(-1)
+			if (Big.value) Big.value.setClean(-1)
 			selectedDeptBig.value = -1
-			Dept.value.setClean(-1)
+			if (Dept.value) Dept.value.setClean(-1)
 			selectedDept.value = -1
-			TypeSmail.value.setClean(-1)
+			if (TypeSmail.value) TypeSmail.value.setClean(-1)
 			selectedTypeSmail.value = -1
-		}
-		if (tag.key == 'selectedTypeSmail') {
-
-			TypeSmail.value.setClean(-1)
-			selectedTypeSmail.value = -1
-		}
-		console.log('要删除的东西', tag)
-
-		updateSelectedTags()
+			break
 	}
-	const handleTagCloseAll = () => {
-		// 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 = '全部'
-		// }
-		Format.value.setClean(-1)
-		selectedFormat.value = -1
 
-		Type.value.setClean(-1)
-		selectedType.value = -1
-
-		Type.value.setClean(-1)
-		selectedType.value = -1
-		TypeBig.value.setClean(-1)
-		selectedTypeBig.value = -1
-		TypeSmail.value.setClean(-1)
-		selectedTypeSmail.value = -1
-		Smail.value.setClean(-1)
-		selectedDeptSmail.value = -1
-		Smail.value.setClean(-1)
-		selectedDeptSmail.value = -1
-		Big.value.setClean(-1)
-		selectedDeptBig.value = -1
-		Smail.value.setClean(-1)
-		selectedDeptSmail.value = -1
-		Big.value.setClean(-1)
-		selectedDeptBig.value = -1
-		Dept.value.setClean(-1)
-		selectedDept.value = -1
-		// console.log('要删除的东西', tag)
-
-		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('全部')
-		spinningSelectedDepts.value = true
-		collegeApi.treeAll().then((data) => {
-			selectedDepts.value = data.data
+	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) => {
-				selectedDeptBigsList.value.push(item.children)
 				if (item.children) {
-					item.children.forEach((item) => {
-						if (item.children) {
-							selectedDeptSmailsList.value.push(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
-			console.log('看看最小的', selectedDeptSmailsList.value)
-			// Dept.value.setClean(0)
-			// handleSelectedDept(0)
-			// handleSelectedCourses(0)
 		})
-		spinningSelectedTypesBig.value = true
-		getQueryTreeAll().then((data) => {
-			selectedTypesBig.value = data.data
-			selectedTypesBig.value.forEach((item,index) => {
-				selectedTypesBigList.value.push(item.children)
-				if (item.children) {
-					item.children.forEach((iitem,iindex) => {
+		.catch(() => {
+			spinningSelectedDepts.value = false
+		})
+
+	// 加载资源类型数据
+	spinningSelectedTypesBig.value = true
+	getQueryTreeAll()
+		.then((data) => {
+			selectedTypesBig.value = data.data || []
 
-						if (iitem.children) {
-							selectedTypesList.value = iitem.children
+			// 构建资源类型层级关系
+			selectedTypesBig.value.forEach((item) => {
+				if (item.children) {
+					selectedTypesBigList.value.push(item.children)
 
-							selectedTypesLists.value[iitem.parentId] = selectedTypesList.value
+					item.children.forEach((child) => {
+						if (child.children) {
+							// 使用Map存储父子关系，提高查找效率
+							selectedTypesLists.value.set(child.parentId, child.children)
 						}
 					})
+				} else {
+					selectedTypesBigList.value.push([])
 				}
 			})
+
 			spinningSelectedTypesBig.value = false
 		})
-		console.log('有数据吗',selectedTypesLists.value)
-		spinningSelectedFormats.value = true
-		getAllListFileFormat().then((data) => {
-			selectedFormats.value = data.data
-			spinningSelectedFormats.value = false
+		.catch(() => {
+			spinningSelectedTypesBig.value = false
 		})
 
-		// selectedDepts.value.unshift({ name: '全部' })
-		// selectedDeptBigsList.value.unshift({ name: '全部' })
-		// selectedDeptSmailsList.value.unshift({ name: '全部' })
-		// console.log('看看呢', selectedDepts.value)
-		// updateSelectedTags()
-	}
+	// 加载文件格式数据
+	spinningSelectedFormats.value = true
+	getAllListFileFormat()
+		.then((data) => {
+			selectedFormats.value = data.data || []
+			spinningSelectedFormats.value = false
+		})
+		.catch(() => {
+			spinningSelectedFormats.value = false
+		})
+}
 
-	onMounted(() => {
-		// 初始化已选条件
-		handleClean()
-	})
+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: 14px;
-		min-width: 80px;
-		margin-top: 5px;
-	}
-
-	.line {
-		width: 100%;
-		height: 0.25px;
-		background-color: #00000013;
-	}
-	.clean {
-		color: rgb(133, 183, 224);
-		cursor: pointer;
-	}
-</style>
+.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>

src/views/resourceDetails/components/VideoDetails.vue

@@ -429,9 +429,6 @@
 		color: white;
 	}
 
-	.tab-switcher div:not(:last-child) {
-	}
-
 	.user-info {
 		display: flex;
 		align-items: center;
@@ -544,9 +541,10 @@
 	.ant-space {
 		margin-top: 10px;
 	}
-	.video-info {
-		//height: 100%; /* 确保填满容器高度 */
-	}
+	/* 确保填满容器高度 */
+	/* .video-info {
+		height: 100%;
+	} */
 	.resInfo {
 		margin-left: 10px;
 		width: 402px;