hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 19:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

标签清除调试

Browse Source
This commit is contained in:
670788339
2025-11-03 12:07:24 +08:00
parent fd85b8b5d0
commit 512144d7d7
2 changed files with 211 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

551
src/components/Course/courseForm.vue
View File

File diff suppressed because it is too large Load Diff

163
src/components/Course/courseTag.vue
View File

@@ -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 => {
if (typeof tag === 'object' && tag.id) {
return tag.id;
}
if (typeof tag === 'string' || typeof tag === 'number') {
return tag;
}
return null;
}).filter(Boolean)
return this.selectedTagIds.map(tagId => this.tagMap.get(tagId)).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)
// 新增：计算标签ID字符串，用于传参
tagIdsString() {
return this.selectedTagIds.join(',')
}
},
created() {
@@ -106,14 +90,7 @@ export default {
// 添加：挂载时初始化标签数据
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);
}
});
this.initTags(this.initialTags);
}
},
watch: {
@@ -123,12 +100,13 @@ export default {
},
// 监听初始标签变化，重新加载
initialTags(newVal) {
this.selectedTags = newVal || [];
this.searchResults = newVal || [];
this.tagMap.clear(); // 清空旧缓存
newVal.forEach(tag => {
if (tag.id) this.tagMap.set(tag.id, tag);
});
if (newVal && newVal.length > 0) {
this.initTags(newVal);
} else {
this.selectedTagIds = [];
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 selectedTagId = typeof selectedTag === 'object' ? selectedTag.id : selectedTag;
const tagId = typeof tag === 'object' ? tag.id : tag;
return selectedTagId === tagId;
});
const isSelected = this.selectedTagIds.some(selectedTagId => selectedTagId === tag.id);
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) {
// 根据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)
handleTagRemove(tagId) {
this.selectedTagIds = this.selectedTagIds.filter(id => id !== tagId)
this.$emit('change', this.displayTags, this.tagIdsString)
this.clearInput();
},
removeTag(tagId) {
@@ -200,21 +184,17 @@ export default {
if (!inputVal) return;
// 检查是否与已选择的标签重复
const isDuplicate = this.selectedTags.some(tag => {
const tagName = typeof tag === 'object' ? tag.tagName : this.tagMap.get(tag)?.tagName;
return tagName === inputVal;
});
const isDuplicate = this.displayTags.some(tag => tag.tagName === inputVal);
if (isDuplicate) {
this.$message.warning('该标签已存在，无需重复创建');
event.target.value = '';
return;
}
if (!this.searchResults.length && inputVal && this.selectedTags.length < this.maxTags) {
this.createNewTag(inputVal);
if (!this.searchResults.length && inputVal && this.selectedTagIds.length < this.maxTags) {
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 existingTagName = typeof tag === 'object' ? tag.tagName : this.tagMap.get(tag)?.tagName;
return existingTagName === tagName;
});
const isDuplicate = this.displayTags.some(tag => tag.tagName === 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('标签创建成功');
this.$message.success('标签创建成功',newTag);
// 确保新标签对象格式正确
if (newTag && newTag.id && newTag.tagName) {
// 将新标签添加到tagMap
this.tagMap.set(newTag.id, newTag);
// 修改：将新标签添加到选中列表和搜索结果中
this.selectedTagIds.push(newTag.id);
this.searchResults.push(newTag);
this.tagMap.set(newTag.id, newTag);
// 创建成功后自动添加到已选标签中
this.selectedTags.push(newTag);
console.log("----------newTag---------->",this.searchResults)
// 添加到搜索结果中
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);
// 触发change事件，传递标签对象数组和ID字符串
this.$emit('change', this.displayTags, this.tagIdsString);
} 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;
}
}
}