标签清除调试

src/components/Course/courseTag.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="tag-container">
     <el-select style="width: 100%;"
@@ -74,10 +73,29 @@ export default {
   },
   computed: {
     ...mapGetters(['userInfo']),
+    // 修改：返回标签ID数组，用于保存课程时传入
     displayTags() {
-      return this.selectedTags.map(tag =>
-        typeof tag === 'object' ? tag : this.tagMap.get(tag)
-      ).filter(Boolean)
+      return this.selectedTags.map(tag => {
+        if (typeof tag === 'object' && tag.id) {
+          return tag.id;
+        }
+        if (typeof tag === 'string' || typeof tag === 'number') {
+          return tag;
+        }
+        return null;
+      }).filter(Boolean)
+    },
+    // 新增：返回标签对象数组，用于显示
+    displayTagObjects() {
+      return this.selectedTags.map(tag => {
+        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() {
@@ -127,7 +145,11 @@ export default {
     // 新增：检查标签是否应该被禁用
     isTagDisabled(tag) {
       // 如果标签已经被选中，不应该禁用（允许取消选择）
-      const isSelected = this.selectedTags.some(selectedTag => selectedTag.id === tag.id);
+      const isSelected = this.selectedTags.some(selectedTag => {
+        const selectedTagId = typeof selectedTag === 'object' ? selectedTag.id : selectedTag;
+        const tagId = typeof tag === 'object' ? tag.id : tag;
+        return selectedTagId === tagId;
+      });
       if (isSelected) {
         return false;
       }
@@ -150,8 +172,13 @@ export default {
       this.loading = false;
       this.params = {};
     },
-    handleTagRemove(tagId) {
-      this.selectedTags = this.selectedTags.filter(id => id !== tagId)
+    handleTagRemove(tag) {
+      // 根据tag的类型来处理删除
+      const tagId = typeof tag === 'object' ? tag.id : tag;
+      this.selectedTags = this.selectedTags.filter(selectedTag => {
+        const selectedTagId = typeof selectedTag === 'object' ? selectedTag.id : selectedTag;
+        return selectedTagId !== tagId;
+      });
       this.$emit('change', this.displayTags)
       this.clearInput();
     },
@@ -171,15 +198,21 @@ export default {
     handleEnterKey(event) {
       const inputVal = event.target.value?.trim()
       if (!inputVal) return;
+
       // 检查是否与已选择的标签重复
-      const isDuplicate = this.selectedTags.some(tag => tag.tagName === inputVal);
+      const isDuplicate = this.selectedTags.some(tag => {
+        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) {
-        this.createNewTag(event.target.value.trim())
+        this.createNewTag(inputVal);
         this.clearInput();
       } else if (this.selectedTags.length >= this.maxTags) {
         this.$message.warning('最多只能添加5个标签')
@@ -222,23 +255,31 @@ export default {
         this.$message.error('标签不能超过8个字')
         return;
       }
+
       // 首先检查是否与已选择的标签重复
-      const isDuplicate = this.selectedTags.some(tag => tag.tagName === tagName);
+      const isDuplicate = this.selectedTags.some(tag => {
+        const existingTagName = typeof tag === 'object' ? tag.tagName : this.tagMap.get(tag)?.tagName;
+        return existingTagName === tagName;
+      });
+
       if (isDuplicate) {
         this.$message.warning('该标签已存在，无需重复创建');
         return;
       }
+
       // 标签格式验证：仅支持中文、英文、数字、下划线、中横线
       const tagPattern = /^[\u4e00-\u9fa5a-zA-Z0-9_-]+$/;
       if (!tagPattern.test(tagName)) {
         this.$message.error('标签名称仅支持中文、英文、数字、下划线(_)和中横线(-)，不支持空格、点和特殊字符');
         return;
       }
+
       // 添加标签数量限制检查
       if (this.selectedTags.length >= this.maxTags) {
         this.$message.warning('最多只能添加5个标签')
         return;
       }
+
       this.loading = true
       try {
         this.params.courseId = this.courseId;
@@ -254,25 +295,38 @@ export default {
           this.params.sysType3 = this.sysTypeList[2]; //三级的id
         }
         const {result:newTag} = await apiCourseTag.createTag(this.params)
-        this.$message.success('标签创建成功',newTag);
+        this.$message.success('标签创建成功');
 
-        this.selectedTags.push(newTag);
-        this.searchResults.push(newTag)
+        // 确保新标签对象格式正确
+        if (newTag && newTag.id && newTag.tagName) {
+          // 将新标签添加到tagMap
+          this.tagMap.set(newTag.id, newTag);
 
-        console.log("----------newTag---------->",this.searchResults)
-        this.tagMap.set(newTag.id, newTag)
-        this.$emit('change', this.displayTags)
+          // 创建成功后自动添加到已选标签中
+          this.selectedTags.push(newTag);
+
+          // 添加到搜索结果中
+          this.searchResults.push(newTag);
+
+          // 触发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
       }
     },
+
     // 修改doSearch方法，添加搜索结果为空时的提示
     async doSearch(query) {
-      // 不再在空查询时清空搜索结果
-      // if (!query.trim()) {
-      //   this.searchResults = []
-      //   return
-      // }
       console.log("---- doSearch ------ query = " + query )
       this.loading = true
       try {
@@ -289,12 +343,22 @@ export default {
         })
         this.searchResults = tags
         // 当搜索结果为空时，提示用户可以按回车键创建标签
-        if (tags.length === 0) {
+        if (tags.length === 0 && query.trim()) {
           this.$message.info('无此标签，按回车键创建')
         }
       } finally {
         this.loading = false
       }
+    },
+
+    // 新增：获取标签ID字符串的方法（逗号分隔）
+    getTagIdsString() {
+      return this.displayTags.join(',');
+    },
+
+    // 新增：获取标签ID数组的方法
+    getTagIds() {
+      return this.displayTags;
     }
   }
 }