标签清除调试

src/components/Course/courseTag.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tag-container">
     <el-select style="width: 100%;"
-               v-model="selectedTags"
+               v-model="selectedTagIds"
                multiple
                filterable
                value-key="id"
@@ -21,13 +21,13 @@
         v-for="item in searchResults"
         :key="item.id"
         :label="item.tagName"
-        :value="item"
+        :value="item.id"
         :disabled="isTagDisabled(item)"
       />
     </el-select>
     <!-- 添加标签计数显示 -->
     <div class="tag-count">
-      {{ selectedTags.length }}/5
+      {{ selectedTagIds.length }}/5
     </div>
   </div>
 </template>
@@ -60,7 +60,7 @@ export default {
   },
   data() {
     return {
-      selectedTags: [],
+      selectedTagIds: [], // 修改：存储标签ID数组
       searchResults: [],
       loading: false,
       tagMap: new Map(),
@@ -73,29 +73,13 @@ export default {
   },
   computed: {
     ...mapGetters(['userInfo']),
-    // 修改：返回标签ID数组，用于保存课程时传入
+    // 修改：计算属性，返回完整的标签对象数组用于显示
     displayTags() {
-      return this.selectedTags.map(tag => {
+      return this.selectedTagIds.map(tagId => this.tagMap.get(tagId)).filter(Boolean)
-        if (typeof tag === 'object' && tag.id) {
-          return tag.id;
-        }
-        if (typeof tag === 'string' || typeof tag === 'number') {
-          return tag;
-        }
-        return null;
-      }).filter(Boolean)
     },
-    // 新增：返回标签对象数组，用于显示
+    // 新增：计算标签ID字符串，用于传参
-    displayTagObjects() {
+    tagIdsString() {
-      return this.selectedTags.map(tag => {
+      return this.selectedTagIds.join(',')
-        if (typeof tag === 'object' && tag.tagName) {
-          return tag;
-        }
-        if (typeof tag === 'string' || typeof tag === 'number') {
-          return this.tagMap.get(tag);
-        }
-        return null;
-      }).filter(Boolean)
     }
   },
   created() {
@@ -106,14 +90,7 @@ export default {
   // 添加：挂载时初始化标签数据
   mounted() {
     if (this.initialTags && this.initialTags.length > 0) {
-      this.selectedTags = this.initialTags;
+      this.initTags(this.initialTags);
-      this.searchResults = this.initialTags;
-      // 将初始标签添加到tagMap中，确保删除功能正常
-      this.initialTags.forEach(tag => {
-        if (tag.id) {
-          this.tagMap.set(tag.id, tag);
-        }
-      });
     }
   },
   watch: {
@@ -123,12 +100,13 @@ export default {
     },
     // 监听初始标签变化，重新加载
     initialTags(newVal) {
-      this.selectedTags = newVal || [];
+      if (newVal && newVal.length > 0) {
-      this.searchResults = newVal || [];
+        this.initTags(newVal);
-      this.tagMap.clear(); // 清空旧缓存
+      } else {
-      newVal.forEach(tag => {
+        this.selectedTagIds = [];
-        if (tag.id) this.tagMap.set(tag.id, tag);
+        this.searchResults = [];
-      });
+        this.tagMap.clear();
+      }
     },
     // 监听分类变化，重新加载搜索结果
     sysTypeList: {
@@ -139,26 +117,37 @@ export default {
         }
       },
       deep: true
+    },
+    // 监听标签ID变化，触发change事件
+    tagIdsString(newVal) {
+      this.$emit('change', this.displayTags, newVal);
     }
   },
   methods: {
+    // 新增：初始化标签方法
+    initTags(tags) {
+      this.selectedTagIds = tags.map(tag => tag.id);
+      this.searchResults = [...tags];
+      this.tagMap.clear();
+      tags.forEach(tag => {
+        if (tag.id) {
+          this.tagMap.set(tag.id, tag);
+        }
+      });
+    },
     // 新增：检查标签是否应该被禁用
     isTagDisabled(tag) {
       // 如果标签已经被选中，不应该禁用（允许取消选择）
-      const isSelected = this.selectedTags.some(selectedTag => {
+      const isSelected = this.selectedTagIds.some(selectedTagId => selectedTagId === tag.id);
-        const selectedTagId = typeof selectedTag === 'object' ? selectedTag.id : selectedTag;
-        const tagId = typeof tag === 'object' ? tag.id : tag;
-        return selectedTagId === tagId;
-      });
       if (isSelected) {
         return false;
       }
       // 如果标签未被选中且已达到最大数量，则禁用
-      return this.selectedTags.length >= this.maxTags;
+      return this.selectedTagIds.length >= this.maxTags;
     },
     // 新增：处理输入框获得焦点事件
     async handleFocus() {
-      this.previousTags = [...this.selectedTags];
+      this.previousTags = [...this.selectedTagIds];
       // 当输入框获得焦点时，加载默认的搜索结果
       if (this.sysTypeList.length > 0) {
         await this.doSearch('');
@@ -166,20 +155,15 @@ export default {
     },
     // 新增：重置标签状态的方法
     resetTagState() {
-      this.selectedTags = [];
+      this.selectedTagIds = [];
       this.searchResults = [];
       this.tagMap.clear();
       this.loading = false;
       this.params = {};
     },
-    handleTagRemove(tag) {
+    handleTagRemove(tagId) {
-      // 根据tag的类型来处理删除
+      this.selectedTagIds = this.selectedTagIds.filter(id => id !== tagId)
-      const tagId = typeof tag === 'object' ? tag.id : tag;
+      this.$emit('change', this.displayTags, this.tagIdsString)
-      this.selectedTags = this.selectedTags.filter(selectedTag => {
-        const selectedTagId = typeof selectedTag === 'object' ? selectedTag.id : selectedTag;
-        return selectedTagId !== tagId;
-      });
-      this.$emit('change', this.displayTags)
       this.clearInput();
     },
     removeTag(tagId) {
@@ -200,21 +184,17 @@ export default {
       if (!inputVal) return;
 
       // 检查是否与已选择的标签重复
-      const isDuplicate = this.selectedTags.some(tag => {
+      const isDuplicate = this.displayTags.some(tag => tag.tagName === inputVal);
-        const tagName = typeof tag === 'object' ? tag.tagName : this.tagMap.get(tag)?.tagName;
-        return tagName === inputVal;
-      });
-
       if (isDuplicate) {
         this.$message.warning('该标签已存在，无需重复创建');
         event.target.value = '';
         return;
       }
 
-      if (!this.searchResults.length && inputVal && this.selectedTags.length < this.maxTags) {
+      if (!this.searchResults.length && inputVal && this.selectedTagIds.length < this.maxTags) {
-        this.createNewTag(inputVal);
+        this.createNewTag(event.target.value.trim())
         this.clearInput();
-      } else if (this.selectedTags.length >= this.maxTags) {
+      } else if (this.selectedTagIds.length >= this.maxTags) {
         this.$message.warning('最多只能添加5个标签')
         this.clearInput();
       } else {
@@ -222,20 +202,20 @@ export default {
       }
     },
 
-    // 新增：处理选择变化事件
+    // 修改：处理选择变化事件
     handleSelectionChange(newValues) {
       // 检查数量限制
       if (newValues.length > this.maxTags) {
         this.$message.warning(`最多只能选择${this.maxTags}个标签`);
         // 回滚到之前的状态
-        this.selectedTags = [...this.previousTags];
+        this.selectedTagIds = [...this.previousTags];
         return;
       }
 
       // 更新前保存当前状态
       this.previousTags = [...newValues];
-      this.$emit('change', this.displayTags);
 
+      // 自动触发change事件，通过watch监听tagIdsString的变化
       this.clearInput();
     },
 
@@ -248,7 +228,7 @@ export default {
       }
     },
 
-    //创建新标签
+    //修改：创建新标签
     async createNewTag(tagName) {
       // 标签不能超过八个字
       if (tagName.length > 8) {
@@ -257,11 +237,7 @@ export default {
       }
 
       // 首先检查是否与已选择的标签重复
-      const isDuplicate = this.selectedTags.some(tag => {
+      const isDuplicate = this.displayTags.some(tag => tag.tagName === tagName);
-        const existingTagName = typeof tag === 'object' ? tag.tagName : this.tagMap.get(tag)?.tagName;
-        return existingTagName === tagName;
-      });
-
       if (isDuplicate) {
         this.$message.warning('该标签已存在，无需重复创建');
         return;
@@ -275,7 +251,7 @@ export default {
       }
 
       // 添加标签数量限制检查
-      if (this.selectedTags.length >= this.maxTags) {
+      if (this.selectedTagIds.length >= this.maxTags) {
         this.$message.warning('最多只能添加5个标签')
         return;
       }
@@ -294,32 +270,19 @@ export default {
         if (this.sysTypeList.length > 2) {
           this.params.sysType3 = this.sysTypeList[2]; //三级的id
         }
-        const {result:newTag} = await apiCourseTag.createTag(this.params)
-        this.$message.success('标签创建成功');
 
-        // 确保新标签对象格式正确
+        const {result:newTag} = await apiCourseTag.createTag(this.params)
-        if (newTag && newTag.id && newTag.tagName) {
+        this.$message.success('标签创建成功',newTag);
-          // 将新标签添加到tagMap
+
+        // 修改：将新标签添加到选中列表和搜索结果中
+        this.selectedTagIds.push(newTag.id);
+        this.searchResults.push(newTag);
         this.tagMap.set(newTag.id, newTag);
 
-          // 创建成功后自动添加到已选标签中
+        console.log("----------newTag---------->",this.searchResults)
-          this.selectedTags.push(newTag);
 
-          // 添加到搜索结果中
+        // 触发change事件，传递标签对象数组和ID字符串
-          this.searchResults.push(newTag);
+        this.$emit('change', this.displayTags, this.tagIdsString);
-
-          // 触发change事件，传入标签ID数组
-          this.$emit('change', this.displayTags);
-
-          console.log("新创建的标签:", newTag);
-          console.log("当前已选标签ID:", this.displayTags);
-        } else {
-          this.$message.error('创建标签失败：返回的标签格式不正确');
-        }
-
-      } catch (error) {
-        this.$message.error('创建标签失败');
-        console.error('创建标签失败:', error);
       } finally {
         this.loading = false
       }
@@ -349,16 +312,6 @@ export default {
       } finally {
         this.loading = false
       }
-    },
-
-    // 新增：获取标签ID字符串的方法（逗号分隔）
-    getTagIdsString() {
-      return this.displayTags.join(',');
-    },
-
-    // 新增：获取标签ID数组的方法
-    getTagIds() {
-      return this.displayTags;
     }
   }
 }