diff --git a/src/components/Course/courseForm.vue b/src/components/Course/courseForm.vue index 6eee09d4..80369172 100644 --- a/src/components/Course/courseForm.vue +++ b/src/components/Course/courseForm.vue @@ -607,27 +607,8 @@ export default { // 限制最多5个标签 if (tags.length > 5) { this.$message.warning('最多只能选择5个标签') - // 只保留前5个标签 - const limitedTags = tags.slice(0, 5) - // 更新标签显示 - let ids = ""; - limitedTags.forEach(tag => { - console.log("父组件name : ", tag.tagName) - ids += tag.id + ','; - }) - this.courseInfo.tags = ids; - console.log("父组件ids : ", this.courseInfo.tags) - - // 更新showTags,确保显示与实际数据一致 - this.showTags = limitedTags.map(tag => tag.tagName); - - // 重要:返回截断后的标签数组,确保子组件也同步更新 - this.$nextTick(() => { - if (this.$refs.courseTag) { - // 通知子组件同步标签状态 - this.$refs.courseTag.syncTags(limitedTags); - } - }); + // 强制限制为5个 + tags = tags.slice(0, 5); return } let ids = ""; @@ -636,13 +617,7 @@ export default { ids += tag.id + ','; }) this.courseInfo.tags = ids; - console.log("父组件ids : ",this.courseInfo.tags) - // 同时更新showTags,确保显示与实际数据一致 - this.showTags = tags.map(tag => tag.tagName); - }, - syncTags(tags) { - this.selectedTags = tags.slice(0, 5); // 强制限制为5个 - this.$emit('change', this.selectedTags); + this.$emit('change', tags.slice(0, 5)); // 确保传出数据也不超过5个 }, showChooseOrg(){ this.$refs.refChooseOrg.dlgShow = true; diff --git a/src/components/Course/courseTag.vue b/src/components/Course/courseTag.vue index 84e1dfe3..c828fa76 100644 --- a/src/components/Course/courseTag.vue +++ b/src/components/Course/courseTag.vue @@ -23,6 +23,7 @@ :key="item.id" :label="item.tagName" :value="item" + :disabled="isTagDisabled(item)" /> @@ -66,7 +67,9 @@ export default { tagMap: new Map(), inputBuffer: '', params: {}, - tag: {} + tag: {}, + // 添加临时存储用于回滚 + previousTags: [] } }, computed: { @@ -121,9 +124,19 @@ export default { } }, 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() { - console.log("-- handleFocus --- " + this.sysTypeList.length) + this.previousTags = [...this.selectedTags]; // 当输入框获得焦点时,加载默认的搜索结果 if (this.sysTypeList.length > 0) { await this.doSearch(null); @@ -172,16 +185,27 @@ export default { }, // 新增:处理选择变化事件 - handleSelectionChange() { - this.$emit('change', this.displayTags) - // 选择标签后清空输入框 + handleSelectionChange(newValues) { + // 检查数量限制 + if (newValues.length > this.maxTags) { + this.$message.warning(`最多只能选择${this.maxTags}个标签`); + // 回滚到之前的状态 + this.selectedTags = [...this.previousTags]; + return; + } + + // 更新前保存当前状态 + this.previousTags = [...newValues]; + this.$emit('change', this.displayTags); + if (this.$refs.tagSelect) { - const input = this.$refs.tagSelect.$refs.input + const input = this.$refs.tagSelect.$refs.input; if (input) { - input.value = '' + input.value = ''; } } }, + //创建新标签 async createNewTag(tagName) { // 标签不能超过八个字