视频资源分类可输入

src/views/course/videoResource/index.vue

@@ -20,9 +20,16 @@
         />
       </el-form-item>
       <el-form-item label="分类" prop="typeId">
-        <el-select v-model="queryParams.typeId" clearable placeholder="请选择分类" @change="val => changeCateType(val, 1)">
+        <el-select
+          v-model="queryParams.typeId"
+          clearable
+          placeholder="请选择或输入分类"
+          @change="val => changeCateType(val, 1)"
+          filterable
+          :filter-method="filterTypeOptions"
+          @visible-change="handleSelectVisibleChange">
           <el-option
-            v-for="item in rootTypeList"
+            v-for="item in filteredRootTypeList"
             :key="item.dictValue"
             :label="item.dictLabel"
             :value="item.dictValue">
@@ -785,6 +792,8 @@ export default {
   },
   data() {
     return {
+      filteredRootTypeList: [], // 过滤后的分类列表
+      originalRootTypeList: [], // 原始分类列表
       // 遮罩层
       loading: true,
       // 选中数组
@@ -1156,9 +1165,53 @@ export default {
     },
     getRootTypeList() {
       getCatePidList().then(response => {
-        this.rootTypeList = response.data
+        this.rootTypeList = response.data;
+        this.originalRootTypeList = [...response.data]; // 保存原始数据
+        this.filteredRootTypeList = [...response.data]; // 初始化过滤列表
+      });
+    },
+    /** 过滤分类选项 */
+    filterTypeOptions(query) {
+      if (!query) {
+        this.filteredRootTypeList = [...this.originalRootTypeList];
+        return;
+      }
+
+      this.filteredRootTypeList = this.originalRootTypeList.filter(item => {
+        return item.dictLabel.toLowerCase().includes(query.toLowerCase()) ||
+          item.dictValue.toString().includes(query);
+      });
+    },
+    /** 选择后重置过滤 */
+    onTypeSelect(value) {
+      // 确保选中后恢复完整列表
+      this.filteredRootTypeList = [...this.originalRootTypeList];
+      // 触发 change 事件
+      this.changeCateType(value, 1);
+    },
+    /** 重置过滤 */
+    resetFilter() {
+      this.filteredRootTypeList = [...this.originalRootTypeList];
+    },
+
+    /** 清除过滤 */
+    clearFilter() {
+      this.$nextTick(() => {
+        if (!this.queryParams.typeId) {
+          this.filteredRootTypeList = [...this.originalRootTypeList];
+        }
       });
     },
+    /** 处理下拉框显示状态变化 */
+    handleSelectVisibleChange(visible) {
+      if (!visible) {
+        // 下拉框关闭时恢复完整列表
+        this.filteredRootTypeList = [...this.originalRootTypeList];
+      } else {
+        // 下拉框打开时也确保列表完整
+        this.filteredRootTypeList = [...this.originalRootTypeList];
+      }
+    },
     async changeCateType(val, type) {
       if (type === 1) {
         this.queryParams.typeSubId = null