调试

src/components/Course/courseTag.vue

@@ -1,29 +1,29 @@
-
 <template>
   <div class="tag-container">
     <el-select style="width: 100%;"
-      v-model="selectedTags"
+               v-model="selectedTags"
-      multiple
+               multiple
-      filterable
+               filterable
-      value-key="id"
+               value-key="id"
-      remote
+               remote
-      reserve-keyword
+               reserve-keyword
-      :remote-method="debouncedSearch"
+               :remote-method="debouncedSearch"
-      :loading="loading"
+               :loading="loading"
-      :placeholder="'回车创建新标签'"
+               :placeholder="'回车创建新标签'"
-      @remove-tag="handleTagRemove"
+               @remove-tag="handleTagRemove"
-      @change="handleSelectionChange"
+               @change="handleSelectionChange"
-      @keyup.enter.native="handleEnterKey"
+               @keyup.enter.native="handleEnterKey"
-      @keyup.delete.native="handleDeleteKey"
+               @keyup.delete.native="handleDeleteKey"
-      @focus="handleFocus"
+               @focus="handleFocus"
-      ref="tagSelect"
+               ref="tagSelect"
     >
       <el-option
         v-for="item in searchResults"
         :key="item.id"
         :label="item.tagName"
         :value="item"
-        :disabled="isTagDisabled(item)"
+        :disabled="item.isTip || isTagDisabled(item)"
+        :class="{'tip-item': item.isTip}"
       />
     </el-select>
     <!-- 添加标签计数显示 -->
@@ -154,12 +154,7 @@ export default {
       this.selectedTags = this.selectedTags.filter(id => id !== tagId)
       this.$emit('change', this.displayTags)
       // 清空输入框内容
-      if (this.$refs.tagSelect) {
+      this.clearInput();
-        const input = this.$refs.tagSelect.$refs.input
-        if (input) {
-          input.value = ''
-        }
-      }
     },
     removeTag(tagId) {
       this.handleTagRemove(tagId)
@@ -184,8 +179,11 @@ export default {
         event.target.value = '';
         return;
       }
-      if (!this.searchResults.length && inputVal && this.selectedTags.length < this.maxTags) {
+
-        this.createNewTag(event.target.value.trim())
+      // 检查是否有真实的搜索结果（排除提示项）
+      const hasRealResults = this.searchResults.some(item => !item.isTip);
+      if (!hasRealResults && inputVal && this.selectedTags.length < this.maxTags) {
+        this.createNewTag(inputVal.trim())
         event.target.value = ''
       } else if (this.selectedTags.length >= this.maxTags) {
         this.$message.warning('最多只能添加5个标签')
@@ -195,7 +193,7 @@ export default {
       }
     },
 
-    // 新增：处理选择变化事件
+    // 新增：处理选择变化事件（修改：添加输入框清空逻辑）
     handleSelectionChange(newValues) {
       // 检查数量限制
       if (newValues.length > this.maxTags) {
@@ -209,15 +207,23 @@ export default {
       this.previousTags = [...newValues];
       this.$emit('change', this.displayTags);
 
+      // 调整2：选择标签后清空输入框
+      this.clearInput();
+    },
+
+    // 新增：清空输入框方法
+    clearInput() {
       if (this.$refs.tagSelect) {
         const input = this.$refs.tagSelect.$refs.input;
         if (input) {
           input.value = '';
+          // 触发输入事件以确保组件状态同步
+          input.dispatchEvent(new Event('input'));
         }
       }
     },
 
-    //创建新标签
+    //创建新标签（修改：创建成功后清空输入框）
     async createNewTag(tagName) {
       // 标签不能超过八个字
       if (tagName.length > 8) {
@@ -261,24 +267,23 @@ export default {
         console.log("----------newTag---------->",this.searchResults)
         this.tagMap.set(newTag.id, newTag)
         this.$emit('change', this.displayTags)
+
+        // 调整2：创建标签成功后清空输入框
+        this.clearInput();
       } finally {
         this.loading = false
       }
     },
-    // 修改doSearch方法，添加搜索结果为空时的提示
+
+    // 修改doSearch方法，添加搜索结果为空时的提示（调整1：在下拉列表中显示提示）
     async doSearch(query) {
-      // 不再在空查询时清空搜索结果
-      // if (!query.trim()) {
-      //   this.searchResults = []
-      //   return
-      // }
       console.log("---- doSearch ------ query = " + query )
       this.loading = true
       try {
-          // 获取 typeId：取 sysTypeList 最后一个有效的值
+        // 获取 typeId：取 sysTypeList 最后一个有效的值
         const typeId =  this.sysTypeList.length > 2 ? this.sysTypeList[2] :
-                        this.sysTypeList.length > 1 ? this.sysTypeList[1] :
+          this.sysTypeList.length > 1 ? this.sysTypeList[1] :
-                        this.sysTypeList.length > 0 ? this.sysTypeList[0] : null;
+            this.sysTypeList.length > 0 ? this.sysTypeList[0] : null;
         console.log("---- doSearch searchTags ------ query = " + query + " , typeId = " + typeId )
         const {result:tags} = await apiCourseTag.searchTags({tagName:query,typeId:typeId})
         console.log("-- searchTags 查询结果 tags = " + tags )
@@ -286,10 +291,16 @@ export default {
         tags.forEach(item => {
           this.tagMap.set(item.id, item)
         })
-        this.searchResults = tags
+
-        // 当搜索结果为空时，提示用户可以按回车键创建标签
+        // 调整1：当搜索结果为空且查询关键词不为空时，在下拉列表中显示提示信息
-        if (tags.length === 0) {
+        if (tags.length === 0 && query.trim() !== '') {
-          this.$message.info('无此标签，按回车键创建')
+          this.searchResults = [{
+            id: 'no-result-tip',
+            tagName: '无此标签，按回车键创建',
+            isTip: true // 标记为提示项，不是真实标签
+          }];
+        } else {
+          this.searchResults = tags
         }
       } finally {
         this.loading = false
@@ -323,4 +334,15 @@ export default {
   padding: 0 5px;
   pointer-events: none;
 }
+
+/* 提示项的特殊样式 */
+::v-deep .tip-item {
+  color: #999 !important;
+  font-style: italic !important;
+  cursor: default !important;
+}
+
+::v-deep .tip-item:hover {
+  background-color: transparent !important;
+}
 </style>