Merge branch 'master-20251023-tag' into merge-20251113-tag

src/components/Course/courseTag.vue

@@ -0,0 +1,397 @@
+<template>
+  <div class="tag-container"  @click="handleContainerClick">
+    <el-select style="width: 100%;"
+               v-model="selectedTags"
+               multiple
+               filterable
+               value-key="id"
+               remote
+               reserve-keyword
+               :remote-method="debouncedSearch"
+               :loading="loading"
+               :placeholder="'回车创建新标签'"
+               :no-data-text="'无此标签，按回车键创建'"
+               @remove-tag="handleTagRemove"
+               @change="handleSelectionChange"
+               @keyup.enter.native="handleEnterKey"
+               @keyup.delete.native="handleDeleteKey"
+               @focus="handleFocus"
+               ref="tagSelect"
+    >
+      <el-option
+        v-for="item in searchResults"
+        :key="item.id"
+        :label="item.tagName"
+        :value="item"
+        :disabled="isTagDisabled(item)"
+      />
+    </el-select>
+    <!-- 添加标签计数显示 -->
+    <div class="tag-count">
+      {{ selectedTags.length }}/5
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from 'lodash'
+import apiCourseTag from '@/api/modules/courseTag.js'
+import { mapGetters } from 'vuex';
+
+export default {
+  props: {
+    courseId:{
+      type:String,
+      require:true,
+    },
+    sysTypeList:{
+      type:Array,
+      require:true,
+      default: []
+    },
+    maxTags: {
+      type: Number,
+      default: 5
+    },
+    // 添加：接收初始标签数据的props
+    initialTags: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selectedTags: [],
+      searchResults: [],
+      loading: false,
+      tagMap: new Map(),
+      inputBuffer: '',
+      params: {},
+      tag: {},
+      // 添加临时存储用于回滚
+      previousTags: []
+    }
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+    displayTags() {
+      return this.selectedTags.map(tag =>
+        typeof tag === 'object' ? tag : this.tagMap.get(tag)
+      ).filter(Boolean)
+    }
+  },
+  created() {
+    this.debouncedSearch = debounce(this.doSearch, 500)
+    console.log("----------sysTypeList.length---------->"+this.sysTypeList.length)
+    console.log("----------sysTypeList.length---------->"+(this.sysTypeList.length===0))
+  },
+  // 添加：挂载时初始化标签数据
+  mounted() {
+    if (this.initialTags && this.initialTags.length > 0) {
+      this.selectedTags = this.initialTags;
+      this.searchResults = this.initialTags;
+      // 将初始标签添加到tagMap中，确保删除功能正常
+      this.initialTags.forEach(tag => {
+        if (tag.id) {
+          this.tagMap.set(tag.id, tag);
+        }
+      });
+    }
+  },
+  watch: {
+    // 监听课程ID变化，重置所有状态
+    courseId(newVal) {
+      this.resetTagState();
+    },
+    // 监听初始标签变化，重新加载
+    initialTags(newVal) {
+      this.selectedTags = newVal || [];
+      this.searchResults = newVal || [];
+      this.tagMap.clear(); // 清空旧缓存
+      newVal.forEach(tag => {
+        if (tag.id) this.tagMap.set(tag.id, tag);
+      });
+    },
+    // 监听分类变化，重新加载搜索结果
+    sysTypeList: {
+      handler() {
+        // 只有在已选择分类且有焦点时才重新加载
+        if (this.sysTypeList.length > 0 && this.$refs.tagSelect && this.$refs.tagSelect.visible) {
+          this.doSearch('');
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    // 新增：检查标签是否应该被禁用
+    isTagDisabled(tag) {
+      // 如果标签已经被选中，不应该禁用（允许取消选择）
+      const isSelected = this.selectedTags.some(selectedTag => selectedTag.id === tag.id);
+      if (isSelected) {
+        return false;
+      }
+      // 如果标签未被选中且已达到最大数量，则禁用
+      return this.selectedTags.length >= this.maxTags;
+    },
+    // 新增：处理输入框获得焦点事件
+    async handleFocus() {
+      this.previousTags = [...this.selectedTags];
+      // 当输入框获得焦点时，加载默认的搜索结果
+      if (this.sysTypeList.length > 0) {
+        await this.doSearch('');
+      }
+      this.$emit('focus');
+    },
+    handleContainerClick() {
+      // 容器点击时也触发焦点事件
+      this.$emit('focus');
+    },
+    // 新增：重置标签状态的方法
+    resetTagState() {
+      this.selectedTags = [];
+      this.searchResults = [];
+      this.tagMap.clear();
+      this.loading = false;
+      this.params = {};
+    },
+    handleTagRemove(tagId) {
+      this.selectedTags = this.selectedTags.filter(id => id !== tagId)
+      this.$emit('change', this.displayTags)
+      this.clearInput();
+    },
+    removeTag(tagId) {
+      this.handleTagRemove(tagId)
+    },
+
+    // 新增：处理删除键事件
+    handleDeleteKey(event) {
+      // 如果输入框内容为空，不执行任何搜索
+      if (!event.target.value.trim()) {
+        this.searchResults = []
+      }
+    },
+
+    //按回车键，创建新标签
+    handleEnterKey(event) {
+      const inputVal = event.target.value?.trim()
+      if (!inputVal) return;
+      // 检查是否与已选择的标签重复
+      const isDuplicate = this.selectedTags.some(tag => tag.tagName === inputVal);
+      if (isDuplicate) {
+        this.$message.warning('该标签已存在，无需重复创建');
+        event.target.value = '';
+        return;
+      }
+      if (!isDuplicate && inputVal && this.selectedTags.length < this.maxTags) {
+        this.createNewTag(event.target.value.trim())
+        this.clearInput();
+      } else if (this.selectedTags.length >= this.maxTags) {
+        this.$message.warning('最多只能添加5个标签')
+        this.clearInput();
+      } else {
+        this.clearInput();
+      }
+    },
+
+    // 新增：处理选择变化事件
+    handleSelectionChange(newValues) {
+
+      // 检查每个标签对象是否完整
+      newValues.forEach((tag, index) => {
+        if (!tag.tagName) {
+          console.error(`第${index}个标签缺少tagName:`, tag);
+        }
+      });
+
+      // 检查数量限制
+      if (newValues.length > this.maxTags) {
+        this.$message.warning(`最多只能选择${this.maxTags}个标签`);
+        // 回滚到之前的状态
+        this.selectedTags = [...this.previousTags];
+        return;
+      }
+
+      // 更新前保存当前状态
+      this.previousTags = [...newValues];
+      this.$emit('change', this.displayTags);
+
+      this.clearInput();
+    },
+
+    clearInput() {
+      if (this.$refs.tagSelect) {
+        const input = this.$refs.tagSelect.$refs.input;
+        if (input) {
+          input.value = '';
+        }
+      }
+    },
+
+    //创建新标签
+    async createNewTag(tagName) {
+      // 标签不能超过八个字
+      if (tagName.length > 8) {
+        this.$message.error('标签不能超过8个字')
+        return;
+      }
+      // 检查标签是否在下拉框中已存在
+      const isExistInSearch = this.searchResults.some(tag => tag.tagName === tagName);
+      if (isExistInSearch) {
+        this.$message.warning('已存在此标签，请选择');
+        return;
+      }
+      // 首先检查是否与已选择的标签重复
+      const isDuplicate = this.selectedTags.some(tag => tag.tagName === 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;
+        this.params.tagName = tagName;
+        // 分类
+        if (this.sysTypeList.length > 0) {
+          this.params.sysType1 = this.sysTypeList[0]; //一级的id
+        }
+        if (this.sysTypeList.length > 1) {
+          this.params.sysType2 = this.sysTypeList[1]; //二级的id
+        }
+        if (this.sysTypeList.length > 2) {
+          this.params.sysType3 = this.sysTypeList[2]; //三级的id
+        }
+        const {result:newTag} = await apiCourseTag.createTag(this.params)
+        this.$message.success('标签创建成功',newTag);
+
+        this.selectedTags = [...this.selectedTags, newTag];
+        // 更新搜索结果的逻辑保持不变
+        this.searchResults = [newTag, ...this.searchResults];
+        this.tagMap.set(newTag.id, newTag)
+        this.$emit('change', this.displayTags)
+
+        this.$nextTick(() => {
+          // 强制重新设置selectedTags来触发更新
+          const tempTags = [...this.selectedTags];
+          this.selectedTags = [];
+          this.$nextTick(() => {
+            this.selectedTags = tempTags;
+          });
+          this.$refs.tagSelect.visible = false;
+        });
+      } finally {
+        this.loading = false
+      }
+    },
+    // 修改doSearch方法，添加搜索结果为空时的提示
+    async doSearch(query) {
+      // 不再在空查询时清空搜索结果
+      // if (!query.trim()) {
+      //   this.searchResults = []
+      //   return
+      // }
+      console.log("---- doSearch ------ query = " + query )
+      this.loading = true
+      try {
+        // 获取 typeId：取 sysTypeList 最后一个有效的值
+        const typeId =  this.sysTypeList.length > 2 ? this.sysTypeList[2] :
+          this.sysTypeList.length > 1 ? this.sysTypeList[1] :
+            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 )
+
+        tags.forEach(item => {
+          this.tagMap.set(item.id, item)
+        })
+        this.searchResults = tags
+        // 当搜索结果为空时，提示用户可以按回车键创建标签
+        if (tags.length === 0) {
+          // this.$message.info('无此标签，按回车键创建')
+        }
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tag-container {
+  position: relative;
+}
+.tag-preview {
+  margin-top: 8px;
+}
+.el-tag {
+  margin-right: 6px;
+  margin-bottom: 6px;
+}
+
+/* 添加标签计数样式 */
+.tag-count {
+  position: absolute;
+  right: 10px;
+  top: 47%;
+  transform: translateY(-40%);
+  font-size: 12px;
+  color: #999;
+  background: white;
+  padding: 0 5px;
+  pointer-events: none;
+  /* 添加高度限制 */
+  height: 25px;
+  line-height: 25px; /* 垂直居中文字 */
+  box-sizing: border-box; /* 确保padding包含在height内 */
+}
+
+
+
+::v-deep(.el-select__tags) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+/*
+::v-deep(.el-tag) {
+  flex: 0 0 calc(50% - 8px);
+  max-width: calc(50% - 8px);
+  box-sizing: border-box;
+  margin-right: 8px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}*/
+
+::v-deep(.el-tag) {
+  flex: 1 1 auto; /* 自动调整宽度 */
+  min-width: 30%; /* 设置最小宽度 */
+  max-width: 48%; /* 设置最大宽度，留出边距 */
+  box-sizing: border-box;
+  margin-right: 8px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  justify-content: center;
+  text-align: center;
+}
+
+::v-deep(.el-select__input) {
+  flex: 1;
+  min-width: 60px;
+}
+</style>